diff --git a/src/components/pages/ServiceAdminBoardDetail/index.tsx b/src/components/pages/ServiceAdminBoardDetail/index.tsx
index 38f7f8f97..c4be43c6d 100644
--- a/src/components/pages/ServiceAdminBoardDetail/index.tsx
+++ b/src/components/pages/ServiceAdminBoardDetail/index.tsx
@@ -23,7 +23,6 @@ import {
   StaticTable,
   Typography,
   Image,
-  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/AdminBoardDetail.scss'
@@ -43,6 +42,8 @@ import { Grid, Box, Divider } from '@mui/material'
 import { download } from 'utils/downloadUtils'
 import { DocumentTypeText } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 enum TableData {
   SUCCESS = 'SUCCESS',
@@ -50,7 +51,6 @@ enum TableData {
 }
 
 export default function ServiceAdminBoardDetail() {
-  const [leadImg, setLeadImg] = useState<string>('')
   const { t } = useTranslation('servicerelease')
   const navigate = useNavigate()
   const { appId } = useParams()
@@ -65,26 +65,6 @@ export default function ServiceAdminBoardDetail() {
       setServiceData(data)
     }
   }, [isFetching, data])
-
-  useEffect(() => {
-    if (serviceData?.leadPictureId) {
-      setLeadingImg()
-    } else setLeadImg(LogoGrayData)
-  }, [serviceData])
-
-  const setLeadingImg = async () => {
-    try {
-      const response = await fetchDocument({
-        appId,
-        documentId: serviceData?.leadPictureId,
-      }).unwrap()
-      const file = response.data
-      setLeadImg(URL.createObjectURL(file))
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
   const getTypes = useCallback(() => {
     const newArr: string[] = []
     serviceData?.serviceTypes.forEach((serviceType: string) => {
@@ -153,7 +133,11 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <Image src={leadImg} alt={serviceData.title} />
+              <Image
+                src={`${getApiBase()}/api/services/${appId}/serviceDocuments/${serviceData?.documents?.SERVICE_LEADIMAGE?.[0].documentId}`}
+                alt={serviceData.title}
+                loader={fetchImageWithToken}
+              />
             </div>
             <Box className="service-app-content">
               <Typography variant="h5" sx={{ pb: '6px', color: '#888888' }}>
diff --git a/src/components/pages/ServiceMarketplace/RecommendedServices.tsx b/src/components/pages/ServiceMarketplace/RecommendedServices.tsx
index 9ec90328b..3edfaef72 100644
--- a/src/components/pages/ServiceMarketplace/RecommendedServices.tsx
+++ b/src/components/pages/ServiceMarketplace/RecommendedServices.tsx
@@ -21,7 +21,6 @@
 import {
   CardHorizontal,
   CircleProgress,
-  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { Grid, useTheme } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
@@ -31,6 +30,8 @@ import NoItems from '../NoItems'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 export default function RecommendedServices({
   services,
@@ -72,12 +73,19 @@ export default function RecommendedServices({
             <Grid className="recommended-card" key={service.id}>
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="App Card"
-                imagePath={
-                  service?.leadPictureId
-                    ? `${service.leadPictureId}`
-                    : `${LogoGrayData}`
-                }
+                image={{
+                  src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                  alt: 'App Card',
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
+                }}
+                imageLoader={fetchImageWithToken}
                 label={service.provider}
                 buttonText="Details"
                 onBtnClick={() => {
diff --git a/src/components/pages/ServiceMarketplace/ServicesElements.tsx b/src/components/pages/ServiceMarketplace/ServicesElements.tsx
index a764dabed..f2d0af8c1 100644
--- a/src/components/pages/ServiceMarketplace/ServicesElements.tsx
+++ b/src/components/pages/ServiceMarketplace/ServicesElements.tsx
@@ -18,11 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {
-  CardHorizontal,
-  LogoGrayData,
-  Typography,
-} from '@catena-x/portal-shared-components'
+import { CardHorizontal, Typography } from '@catena-x/portal-shared-components'
 import { Grid, Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -30,6 +26,8 @@ import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice
 import './ServiceMarketplace.scss'
 import { useCallback } from 'react'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServicesElements({
   services,
@@ -83,12 +81,19 @@ export default function ServicesElements({
                   >
                     <CardHorizontal
                       borderRadius={6}
-                      imageAlt="App Card"
-                      imagePath={
-                        service?.leadPictureId
-                          ? `${service.leadPictureId}`
-                          : `${LogoGrayData}`
-                      }
+                      image={{
+                        src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                        alt: 'App Card',
+                        style: {
+                          flex: '0 0 33.333333%',
+                          maxWidth: '33.333333%',
+                          minHeight: '200px',
+                          backgroundRepeat: 'no-repeat',
+                          backgroundSize: 'cover',
+                          backgroundPosition: 'center',
+                        },
+                      }}
+                      imageLoader={fetchImageWithToken}
                       label={service.provider}
                       buttonText="Details"
                       onBtnClick={() => {
diff --git a/src/components/pages/ServiceMarketplace/index.tsx b/src/components/pages/ServiceMarketplace/index.tsx
index 0dd58e9fd..1d87d3aee 100644
--- a/src/components/pages/ServiceMarketplace/index.tsx
+++ b/src/components/pages/ServiceMarketplace/index.tsx
@@ -48,10 +48,7 @@ import {
   useFetchServicesQuery,
 } from 'features/serviceMarketplace/serviceApiSlice'
 import SortImage from 'components/shared/frame/SortImage'
-import {
-  ServiceTypeIdsEnum,
-  useFetchDocumentMutation,
-} from 'features/serviceManagement/apiSlice'
+import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
 import NoItems from '../NoItems'
 
 dayjs.extend(isToday)
@@ -66,7 +63,6 @@ export default function ServiceMarketplace() {
   const [selected, setSelected] = useState<string>('All Services')
   const [sortOption, setSortOption] = useState<string>('new')
   const [cardServices, setCardServices] = useState<ServiceRequest[]>([])
-  const [fetchDocument] = useFetchDocumentMutation()
 
   let serviceTypeId = ''
 
@@ -101,39 +97,6 @@ export default function ServiceMarketplace() {
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     setSelected(e.currentTarget.value)
   }
-
-  const getImage = useCallback(
-    async (service: ServiceRequest) => {
-      try {
-        const response = await fetchDocument({
-          appId: service.id,
-          documentId: service.leadPictureId,
-        }).unwrap()
-        const file = response.data
-        return URL.createObjectURL(file)
-      } catch (error) {
-        console.error('Error fetching image:', error)
-        return null
-      }
-    },
-    [fetchDocument]
-  )
-
-  useEffect(() => {
-    if (services && services.length > 0) {
-      const loadImages = async () => {
-        const serviceWithLeadId = await Promise.all(
-          services.map(async (service) => {
-            const img = await getImage(service)
-            return { ...service, leadPictureId: img }
-          })
-        )
-        setCardServices(serviceWithLeadId as ServiceRequest[])
-      }
-      loadImages()
-    }
-  }, [services])
-
   const sortOptions = [
     {
       label: t('content.serviceMarketplace.sortOptions.new'),
diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
index 340c429ee..2a9144d9d 100644
--- a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
+++ b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
@@ -31,7 +31,7 @@ import {
   useFetchDocumentMutation,
   useFetchServiceStatusQuery,
 } from 'features/serviceManagement/apiSlice'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Divider } from '@mui/material'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
@@ -39,6 +39,8 @@ import { useParams } from 'react-router-dom'
 import { download } from 'utils/downloadUtils'
 import { type DocumentData } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServiceDetails() {
   const { t } = useTranslation('servicerelease')
@@ -47,7 +49,6 @@ export default function ServiceDetails() {
     refetchOnMountOrArgChange: true,
   }).data
   const [fetchDocument] = useFetchDocumentMutation()
-  const [leadImg, setLeadImg] = useState<string>('')
 
   const getServiceTypes = useCallback(() => {
     const newArr: string[] = []
@@ -77,25 +78,6 @@ export default function ServiceDetails() {
     }
   }
 
-  const setLeadingImg = async () => {
-    try {
-      const response = await fetchDocument({
-        appId: serviceId,
-        documentId: fetchServiceStatus?.leadPictureId,
-      }).unwrap()
-      const file = response.data
-      setLeadImg(URL.createObjectURL(file))
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  useEffect(() => {
-    if (fetchServiceStatus) {
-      setLeadingImg()
-    }
-  }, [fetchServiceStatus])
-
   return (
     <main>
       <div>
@@ -111,8 +93,19 @@ export default function ServiceDetails() {
             <div className="imageCard">
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="Service Card"
-                imagePath={leadImg}
+                image={{
+                  src: `${getApiBase()}/api/services/${serviceId}/serviceDocuments/${fetchServiceStatus?.leadPictureId}`,
+                  alt: 'Service Card',
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
+                }}
+                imageLoader={fetchImageWithToken}
                 label={''}
                 buttonText=""
                 onBtnClick={() => {
diff --git a/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx b/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx
index 604a32858..2e8e01ef7 100644
--- a/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx
+++ b/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx
@@ -21,13 +21,13 @@
 import {
   Typography,
   IconButton,
-  CardHorizontal,
   Card,
   LogoGrayData,
   SelectList,
   type UploadFileStatus,
   UploadStatus,
   PageSnackbar,
+  CardHorizontal,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { Grid } from '@mui/material'
@@ -73,7 +73,8 @@ import {
   type LanguageStatusType,
   type UseCaseType,
 } from 'features/appManagement/types'
-import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 type FormDataType = {
   title: string
@@ -132,7 +133,6 @@ export default function AppMarketCard() {
     salesManagerType[]
   >([defaultSalesManagerValue])
   const [salesManagerId, setSalesManagerId] = useState<string | null>(null)
-  const [fetchDocumentById] = useFetchDocumentByIdMutation()
   const [cardImage, setCardImage] = useState(LogoGrayData)
   const {
     data: fetchAppStatus,
@@ -258,40 +258,6 @@ export default function AppMarketCard() {
     }
   }, [cardImageData])
 
-  useEffect(() => {
-    if (appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId) {
-      void fetchCardImage(
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentId,
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentName
-      )
-    }
-    reset(defaultValues)
-  }, [appStatusData])
-
-  const setFileStatus = (
-    documentId: string,
-    documentName: string,
-    status: UploadFileStatus
-  ) => {
-    setValue('uploadImage.leadPictureUri', {
-      id: documentId,
-      name: documentName,
-      status,
-    } as unknown as string | null)
-  }
-
-  const fetchCardImage = async (documentId: string, documentName: string) => {
-    try {
-      const response = await fetchDocumentById({ appId, documentId }).unwrap()
-      const file = response.data
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      setCardImage(URL.createObjectURL(file))
-    } catch (error) {
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      console.error(error, 'ERROR WHILE FETCHING IMAGE')
-    }
-  }
-
   const cardAppTitle =
     getValues().title ??
     t('content.apprelease.appMarketCard.defaultCardAppTitle')
@@ -495,8 +461,19 @@ export default function AppMarketCard() {
             <CardHorizontal
               label={cardAppProvider ?? ''}
               title={cardAppTitle}
-              imagePath={cardImage}
-              imageAlt={cardImageAlt}
+              image={{
+                src: `${getApiBase()}/api/services/${appId}/serviceDocuments/${appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId}`,
+                alt: 'App Card',
+                style: {
+                  flex: '0 0 33.333333%',
+                  maxWidth: '33.333333%',
+                  minHeight: '200px',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                },
+              }}
+              imageLoader={fetchImageWithToken}
               borderRadius={0}
               description={cardDescription}
               backgroundColor="#F3F3F3"
diff --git a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
index 2e7597e70..00323f424 100644
--- a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
+++ b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
@@ -24,21 +24,20 @@ import {
   Checkbox,
   IconButton,
   LanguageSwitch,
-  LogoGrayData,
   PageNotifications,
   StaticTable,
   Typography,
   type TableType,
   CircleProgress,
-  CardHorizontal,
   ImageGallery,
+  CardHorizontal,
   type ImageType,
 } from '@catena-x/portal-shared-components'
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import { Grid, Divider, Box } from '@mui/material'
 import { useForm } from 'react-hook-form'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { decrement, increment } from 'features/appManagement/slice'
 import {
@@ -69,6 +68,8 @@ import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 import { Apartment, Person, LocationOn, Web, Info } from '@mui/icons-material'
 import '../../../../pages/AppDetail/components/AppDetailPrivacy/AppDetailPrivacy.scss'
 import 'components/styles/document.scss'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export interface DefaultValueType {
   images: Array<string>
@@ -143,28 +144,11 @@ export default function CommonValidateAndPublish({
   const { t } = useTranslation()
   const [validatePublishNotification, setValidatePublishNotification] =
     useState(false)
-  const [cardImage, setCardImage] = useState('')
   const [multipleImages, setMultipleImages] = useState<ImageType[]>([])
   const [defaultValues, setDefaultValues] = useState<DefaultValueType>()
   const [loading, setLoading] = useState<boolean>(false)
   const [cardLanguage, setCardLanguage] = useState<string>('en')
 
-  const fetchImage = useCallback(
-    async (documentId: string) => {
-      try {
-        const response = await fetchDocumentById({
-          appId: id,
-          documentId,
-        }).unwrap()
-        const file = response.data
-        setCardImage(URL.createObjectURL(file))
-      } catch (error) {
-        console.error(error, 'ERROR WHILE FETCHING IMAGE')
-      }
-    },
-    [fetchDocumentById, id]
-  )
-
   const {
     handleSubmit,
     formState: { isValid },
@@ -175,12 +159,6 @@ export default function CommonValidateAndPublish({
   })
 
   useEffect(() => {
-    if (statusData?.documents?.APP_LEADIMAGE?.[0].documentId) {
-      fetchImage(statusData?.documents?.APP_LEADIMAGE[0].documentId)
-    }
-    if (statusData?.documents?.SERVICE_LEADIMAGE?.[0].documentId) {
-      fetchImage(statusData?.documents?.SERVICE_LEADIMAGE[0].documentId)
-    }
     if (statusData?.documents?.APP_IMAGE?.[0].documentId) {
       setMultipleImages(
         CommonService.imagesAndAppidToImageType(
@@ -191,7 +169,7 @@ export default function CommonValidateAndPublish({
     }
     setDefaultValues(values)
     reset(values)
-  }, [statusData, values, fetchImage, reset, id])
+  }, [statusData, values, reset, id])
 
   const handleDownloadFn = async (documentId: string, documentName: string) => {
     try {
@@ -319,8 +297,9 @@ export default function CommonValidateAndPublish({
             >
               <Card
                 image={{
-                  src: cardImage ?? LogoGrayData,
+                  src: `${getApiBase()}/api/apps/${id}/appDocuments/${statusData?.documents?.APP_LEADIMAGE?.[0].documentId}`,
                 }}
+                imageLoader={fetchImageWithToken}
                 title={statusData?.title ?? ''}
                 subtitle={statusData?.provider}
                 description={
@@ -365,8 +344,19 @@ export default function CommonValidateAndPublish({
         {type === ReleaseProcessTypes.SERVICE_RELEASE && (
           <CardHorizontal
             borderRadius={6}
-            imageAlt="Service Card"
-            imagePath={cardImage ?? LogoGrayData}
+            image={{
+              src: `${getApiBase()}/api/services/${id}/serviceDocuments/${statusData?.documents?.APP_LEADIMAGE?.[0].documentId}`,
+              alt: 'Service Card',
+              style: {
+                flex: '0 0 33.333333%',
+                maxWidth: '33.333333%',
+                minHeight: '200px',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+              },
+            }}
+            imageLoader={fetchImageWithToken}
             label={''}
             buttonText=""
             onBtnClick={() => {