diff --git a/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg
deleted file mode 100644
index b5c4c99de5..0000000000
--- a/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
diff --git a/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg
deleted file mode 100644
index 0ea53d0830..0000000000
--- a/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
diff --git a/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg
deleted file mode 100644
index 01e3e0f95b..0000000000
--- a/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
diff --git a/frontend/src/pages/home/aiFlows/AIFlowCard.tsx b/frontend/src/pages/home/aiFlows/AIFlowCard.tsx
index 7940efe564..3933955961 100644
--- a/frontend/src/pages/home/aiFlows/AIFlowCard.tsx
+++ b/frontend/src/pages/home/aiFlows/AIFlowCard.tsx
@@ -5,8 +5,7 @@ import { SectionType } from '~/concepts/design/utils';
type AIFlowCardProps = {
title: string;
- imgSrc: string;
- imgAlt: string;
+ image: React.ReactNode;
sectionType: SectionType;
selected: boolean;
onSelect: () => void;
@@ -14,8 +13,7 @@ type AIFlowCardProps = {
const AIFlowCard: React.FC = ({
title,
- imgSrc,
- imgAlt,
+ image,
sectionType,
selected,
onSelect,
@@ -38,9 +36,7 @@ const AIFlowCard: React.FC = ({
>
-
- 
-
+ {image}
diff --git a/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx
new file mode 100644
index 0000000000..e0862c6e03
--- /dev/null
+++ b/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+const BranchImage: React.FC> = ({ ...props }) => (
+
+);
+
+export default BranchImage;
diff --git a/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx
new file mode 100644
index 0000000000..85ac061c31
--- /dev/null
+++ b/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const ChartImage: React.FC> = ({ ...props }) => (
+
+);
+
+export default ChartImage;
diff --git a/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx
new file mode 100644
index 0000000000..ec3b33122f
--- /dev/null
+++ b/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+const ProjectImage: React.FC> = ({ ...props }) => (
+
+);
+
+export default ProjectImage;
diff --git a/frontend/src/pages/home/aiFlows/useAIFlows.tsx b/frontend/src/pages/home/aiFlows/useAIFlows.tsx
index 495f27bcc4..71693e8366 100644
--- a/frontend/src/pages/home/aiFlows/useAIFlows.tsx
+++ b/frontend/src/pages/home/aiFlows/useAIFlows.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import { PageSection, Stack, Text, TextContent } from '@patternfly/react-core';
-import projectIcon from '~/images/UI_icon-Red_Hat-Folder-Color.svg';
-import pipelineIcon from '~/images/UI_icon-Red_Hat-Branch-Color.svg';
-import chartIcon from '~/images/UI_icon-Red_Hat-Chart-Color.svg';
-import { SectionType } from '~/concepts/design/utils';
+import { SectionType, sectionTypeBorderColor } from '~/concepts/design/utils';
import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
import { SupportedArea } from '~/concepts/areas';
import EvenlySpacedGallery from '~/components/EvenlySpacedGallery';
+import ProjectImage from './flowImages/ProjectImage';
+import BranchImage from './flowImages/BranchImage';
+import ChartImage from './flowImages/ChartImage';
import ProjectsGallery from './ProjectsGallery';
import CreateAndTrainGallery from './CreateAndTrainGallery';
import DeployAndMonitorGallery from './DeployAndMonitorGallery';
@@ -27,8 +27,11 @@ export const useAIFlows = (): React.ReactNode => {
key="projects"
data-testid="ai-flow-projects-card"
title="Organize your work with projects"
- imgSrc={projectIcon}
- imgAlt="organizing your work"
+ image={
+
+ }
sectionType={SectionType.organize}
selected={selected === 'organize'}
onSelect={() => setSelected((prev) => (prev === 'organize' ? undefined : 'organize'))}
@@ -41,8 +44,11 @@ export const useAIFlows = (): React.ReactNode => {
key="train"
data-testid="ai-flow-train-card"
title="Create and train models"
- imgSrc={pipelineIcon}
- imgAlt="train your models"
+ image={
+
+ }
sectionType={SectionType.training}
selected={selected === 'train'}
onSelect={() => setSelected((prev) => (prev === 'train' ? undefined : 'train'))}
@@ -55,8 +61,11 @@ export const useAIFlows = (): React.ReactNode => {
key="models"
data-testid="ai-flow-models-card"
title="Deploy and monitor models"
- imgSrc={chartIcon}
- imgAlt="deploy models"
+ image={
+
+ }
sectionType={SectionType.serving}
selected={selected === 'serving'}
onSelect={() => setSelected((prev) => (prev === 'serving' ? undefined : 'serving'))}