diff --git a/package.json b/package.json
index 4536a9923..1e65b41c5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^2.0.14",
+    "@catena-x/portal-shared-components": "^2.0.18",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",
diff --git a/src/components/pages/AdminBoardDetail/BoardContentDetails.tsx b/src/components/pages/AdminBoardDetail/BoardContentDetails.tsx
index 37bcd246c..526e922f8 100644
--- a/src/components/pages/AdminBoardDetail/BoardContentDetails.tsx
+++ b/src/components/pages/AdminBoardDetail/BoardContentDetails.tsx
@@ -18,7 +18,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
@@ -39,20 +38,6 @@ import BoardTechnicalUserSetup from './components/BoardTechnicalUserSetup'
 export default function BoardContentDetails({ item }: { item: AppDetails }) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const [images, setImages] = useState<any>()
-
-  useEffect(() => {
-    if (item) {
-      const newPromies = CommonService.fetchLeadPictures(item.images, item.id)
-      Promise.all(newPromies)
-        .then((result) => {
-          setImages(result.flat())
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    }
-  }, [item])
 
   return (
     item && (
@@ -79,7 +64,13 @@ export default function BoardContentDetails({ item }: { item: AppDetails }) {
             </div>
           ))}
         </div>
-        {images && <ImageGallery gallery={images} modalWidth="900" />}
+        <ImageGallery
+          gallery={CommonService.imagesAndAppidToImageType(
+            item.images,
+            item.id
+          )}
+          modalWidth="900"
+        />
         <div className="divider-height" />
         <BoardPrivacy item={item} />
         <div className="divider-height" />
diff --git a/src/components/pages/AppDetail/AppDetailContentDetails.tsx b/src/components/pages/AppDetail/AppDetailContentDetails.tsx
index 0c83fad02..940874643 100644
--- a/src/components/pages/AppDetail/AppDetailContentDetails.tsx
+++ b/src/components/pages/AppDetail/AppDetailContentDetails.tsx
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import {
   Typography,
   Navigation,
@@ -47,7 +47,6 @@ export default function AppDetailContentDetails({
 }) {
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const [images, setImages] = useState<any>()
   const [selectedItem, setSelectedItem] = useState<string>('#description')
 
   const navigationItems = [
@@ -73,19 +72,6 @@ export default function AppDetailContentDetails({
     },
   ]
 
-  useEffect(() => {
-    if (item) {
-      const newPromies = CommonService.fetchLeadPictures(item.images, item.id)
-      Promise.all(newPromies)
-        .then((result) => {
-          setImages(result.flat())
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    }
-  }, [item])
-
   return (
     item && (
       <>
@@ -122,11 +108,15 @@ export default function AppDetailContentDetails({
             </Typography>
           </div>
           <div className="divider-height" />
-          {images && (
-            <div id="image-gallery">
-              <ImageGallery gallery={images} modalWidth="900" />
-            </div>
-          )}
+          <div id="image-gallery">
+            <ImageGallery
+              gallery={CommonService.imagesAndAppidToImageType(
+                item.images,
+                item.id
+              )}
+              modalWidth="900"
+            />
+          </div>
           <div className="divider-height" />
           <AppDetailPrivacy item={item} />
           <div className="divider-height" />
diff --git a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
index 4b8bd5199..538fe57b0 100644
--- a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
+++ b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx
@@ -183,17 +183,12 @@ export default function CommonValidateAndPublish({
       statusData?.documents?.APP_IMAGE &&
       statusData?.documents?.APP_IMAGE[0].documentId
     ) {
-      const newPromies = CommonService.fetchLeadPictures(
-        statusData?.documents?.APP_IMAGE,
-        id
+      setMultipleImages(
+        CommonService.imagesAndAppidToImageType(
+          statusData?.documents?.APP_IMAGE,
+          id
+        )
       )
-      Promise.all(newPromies)
-        .then((result) => {
-          setMultipleImages(result.flat())
-        })
-        .catch((err) => {
-          console.log(err)
-        })
     }
     setDefaultValues(values)
     reset(values)
diff --git a/src/features/admin/serviceApiSlice.ts b/src/features/admin/serviceApiSlice.ts
index 4b0a084ba..0df0df3f8 100644
--- a/src/features/admin/serviceApiSlice.ts
+++ b/src/features/admin/serviceApiSlice.ts
@@ -91,7 +91,8 @@ export const apiSlice = createApi({
         `/api/administration/serviceaccount/owncompany/serviceaccounts/${id}`,
     }),
     fetchServiceAccountRoles: builder.query<ServiceAccountRole[], void>({
-      query: () => `/api/administration/serviceaccount/user/roles?languageShortName=${i18next.language}`,
+      query: () =>
+        `/api/administration/serviceaccount/user/roles?languageShortName=${i18next.language}`,
     }),
   }),
 })
diff --git a/src/services/CommonService.ts b/src/services/CommonService.ts
index f518c4670..45f85e71d 100644
--- a/src/services/CommonService.ts
+++ b/src/services/CommonService.ts
@@ -20,8 +20,9 @@
 
 import { getApiBase, getAssetBase } from './EnvironmentService'
 import i18next from 'i18next'
-import UserService from './UserService'
 import { AppMarketplaceApp } from 'features/apps/apiSlice'
+import { ImageType } from '@catena-x/portal-shared-components'
+import { fetchImageWithToken } from './ImageService'
 
 const getName = (app: AppMarketplaceApp) => app.name ?? ''
 const getDescription = (app: AppMarketplaceApp) =>
@@ -48,48 +49,17 @@ const appToCard = (app: AppMarketplaceApp) => ({
   },
 })
 
-const fetchLeadPictures = (images: string[], appId: string) => {
-  const promises = images?.map((image: any) => {
-    return [
-      new Promise((resolve, reject) => {
-        let url = ''
-        if (!image.documentId) {
-          url = `${getApiBase()}/api/apps/${appId}/appDocuments/${isValidPictureId(
-            image
-          )}`
-        } else {
-          url = `${getApiBase()}/api/apps/${appId}/appDocuments/${isValidPictureId(
-            image.documentId
-          )}`
-        }
-
-        return fetch(url, {
-          method: 'GET',
-          headers: {
-            authorization: `Bearer ${UserService.getToken()}`,
-          },
-        })
-          .then((response) => response.blob())
-          .then(
-            async (blob) =>
-              await new Promise((callback) => {
-                let reader = new FileReader()
-                reader.onload = function () {
-                  resolve({
-                    url: this.result,
-                    text: '',
-                  })
-                }
-                reader.readAsDataURL(blob)
-              })
-          )
-      }),
-    ]
-  })
-
-  const newPromies = promises.map((promise) => Promise.all(promise))
-  return newPromies
-}
+const imagesAndAppidToImageType = (
+  images: string[],
+  appId: string
+): ImageType[] =>
+  images?.map((image: any) => ({
+    url: `${getApiBase()}/api/apps/${appId}/appDocuments/${isValidPictureId(
+      image.documentId ?? image
+    )}`,
+    text: 'Catena-X',
+    loader: fetchImageWithToken,
+  }))
 
 const isValidPictureId = (id: string) => {
   return id === '00000000-0000-0000-0000-000000000000'
@@ -153,7 +123,7 @@ const CommonService = {
   getCompanyRoles,
   getUseCases,
   getDataSpace,
-  fetchLeadPictures,
+  imagesAndAppidToImageType,
   getRoleDescription,
   getCompanyRoleUpdateData,
 }
diff --git a/yarn.lock b/yarn.lock
index 954c4d4fd..7a8dfb5cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10339,4 +10339,4 @@ yargs@^16.2.0:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
\ No newline at end of file