From 20a86e28395140012314318cf620ea992be9a34e Mon Sep 17 00:00:00 2001
From: Kamalesh-Seervi <107933310+Kamalesh-Seervi@users.noreply.github.com>
Date: Mon, 27 Oct 2025 22:07:43 +0530
Subject: [PATCH 1/2] feat(ui): adding Kubernetes logo

Signed-off-by: Kamalesh-Seervi <107933310+Kamalesh-Seervi@users.noreply.github.com>
---
 .../views/ChaosHub/ChaosFaults/ChaosFaults.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx b/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
index b758b069c1a..18d28b402fc 100644
--- a/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
+++ b/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
@@ -4,13 +4,14 @@ import { Icon } from '@harnessio/icons';
 import { FontVariation, Color } from '@harnessio/design-system';
 import { Link, useParams } from 'react-router-dom';
 import { withErrorBoundary } from 'react-error-boundary';
-import { toTitleCase } from '@utils';
+import { toTitleCase, getScope } from '@utils';
 import { useStrings } from '@strings';
 import NoExperiments from '@images/NoExperiments.svg';
 import { Fallback } from '@errors';
 import Loader from '@components/Loader';
 import { useSearchParams, useRouteWithBaseUrl } from '@hooks';
 import type { ListFaultResponse } from '@api/core';
+import config from '@config';
 import css from './ChaosFaults.module.scss';
 
 interface ChaosFaultsProps {
@@ -41,6 +42,7 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
   const searchParams = useSearchParams();
   const hubName = searchParams.get('hubName');
   const isDefault = searchParams.get('isDefault');
+  const scope = getScope();
   const tags: TagProps[] = [];
   const faultsArray: Fault[] = [];
   const [activeTag, setActiveTag] = React.useState<string>('All');
@@ -99,7 +101,19 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
         <Card key={fault.name} interactive className={css.insideCard}>
           <Layout.Vertical spacing="medium">
             <Layout.Horizontal spacing="small">
-              <Icon size={23} name="chaos-litmuschaos" />
+              {fault.chartName.toLowerCase() === 'kubernetes' ? (
+                <img
+                  src={
+                    isDefault === 'true'
+                      ? `${config.restEndpoints?.chaosManagerUri}/icon/default/${hubName}/${fault.chartName}/${fault.name}.png`
+                      : `${config.restEndpoints?.chaosManagerUri}/icon/${scope.projectID}/${hubName}/${fault.chartName}/${fault.name}.png`
+                  }
+                  alt={`${fault.name} icon`}
+                  style={{ width: 23, height: 23 }}
+                />
+              ) : (
+                <Icon size={23} name="chaos-litmuschaos" />
+              )}
               <Text font={{ variation: FontVariation.BODY, weight: 'semi-bold' }} color={Color.PRIMARY_7}>
                 {fault.displayName === ''
                   ? toTitleCase({

From 1f71a14041582dee52b1ee8f1c6222087d279c22 Mon Sep 17 00:00:00 2001
From: Kamalesh-Seervi <107933310+Kamalesh-Seervi@users.noreply.github.com>
Date: Thu, 30 Oct 2025 17:57:00 +0530
Subject: [PATCH 2/2] Refactor FaultCard to include GCP in chartName check

Signed-off-by: Kamalesh-Seervi <107933310+Kamalesh-Seervi@users.noreply.github.com>
---
 .../web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx b/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
index ff7d4d71e47..0d5263dd030 100644
--- a/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
+++ b/chaoscenter/web/src/views/ChaosHub/ChaosFaults/ChaosFaults.tsx
@@ -91,7 +91,6 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
   };
 
   const FaultCard = (fault: Fault): React.ReactElement => {
-    const isGcpFault = fault.tag.toLowerCase() === 'gcp';
     return (
       <Link
         to={{
@@ -102,7 +101,7 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
         <Card key={fault.name} interactive className={css.insideCard}>
           <Layout.Vertical spacing="medium">
             <Layout.Horizontal spacing="small">
-              {fault.chartName.toLowerCase() === 'kubernetes' ? (
+              {fault.chartName.toLowerCase() === 'kubernetes' || fault.chartName.toLowerCase() === 'gcp' ? (
                 <img
                   src={
                     isDefault === 'true'
@@ -110,7 +109,7 @@ function ChaosFaults({ hubDetails, faultCategories, loading, searchValue }: Chao
                       : `${config.restEndpoints?.chaosManagerUri}/icon/${scope.projectID}/${hubName}/${fault.chartName}/${fault.name}.png`
                   }
                   alt={`${fault.name} icon`}
-                  style={{ width: 23, height: 23 }}
+                  style={{ width: 23, height: 23, objectFit: 'contain' }}
                 />
               ) : (
                 <Icon size={23} name="chaos-litmuschaos" />