diff --git a/frontend/packages/dev-console/src/components/helm/HelmReleaseDetailsPage.tsx b/frontend/packages/dev-console/src/components/helm/HelmReleaseDetailsPage.tsx
index 114a9bcd1b5..3afe8675f1b 100755
--- a/frontend/packages/dev-console/src/components/helm/HelmReleaseDetailsPage.tsx
+++ b/frontend/packages/dev-console/src/components/helm/HelmReleaseDetailsPage.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { safeLoadAll } from 'js-yaml';
 import { match as RMatch } from 'react-router';
 import {
   navFactory,
   LoadingBox,
   StatusBox,
   FirehoseResult,
-  FirehoseResource,
 } from '@console/internal/components/utils';
-import { coFetchJSON } from '@console/internal/co-fetch';
 import { SecretModel } from '@console/internal/models';
 import { ErrorPage404 } from '@console/internal/components/error';
 import { DetailsPage } from '@console/internal/components/factory';
-import { K8sResourceKindReference, K8sResourceKind } from '@console/internal/module/k8s';
+import { K8sResourceKindReference } from '@console/internal/module/k8s';
 import HelmReleaseResources from './HelmReleaseResources';
 import HelmReleaseOverview from './HelmReleaseOverview';
-import { HelmRelease } from './helm-types';
 
 const SecretReference: K8sResourceKindReference = 'Secret';
 const HelmReleaseReference = 'HelmRelease';
@@ -30,42 +26,6 @@ export interface HelmReleaseDetailsPageProps {
 
 const HelmReleaseDetailsPage: React.FC<HelmReleaseDetailsPageProps> = ({ secret, match }) => {
   const namespace = match.params.ns;
-  const helmReleaseName = match.params.name;
-  const [helmManifestResources, setHelmManifestResources] = React.useState<FirehoseResource[]>([]);
-
-  React.useEffect(() => {
-    let ignore = false;
-
-    const fetchHelmReleases = async () => {
-      let res: HelmRelease[];
-      try {
-        res = await coFetchJSON(`/api/helm/releases?ns=${namespace}`);
-      } catch {
-        return;
-      }
-      if (ignore) return;
-
-      const releaseData = res?.filter((rel) => rel.name === helmReleaseName);
-      const helmManifest = safeLoadAll(releaseData[0].manifest);
-
-      const resources: FirehoseResource[] = helmManifest.map((resource: K8sResourceKind) => ({
-        kind: resource.kind,
-        name: resource.metadata.name,
-        namespace,
-        prop: `${resource.metadata.name}-${resource.kind.toLowerCase()}`,
-        isList: false,
-        optional: true,
-      }));
-
-      setHelmManifestResources(resources);
-    };
-
-    fetchHelmReleases();
-
-    return () => {
-      ignore = true;
-    };
-  }, [helmReleaseName, namespace]);
 
   if (!secret || (!secret.loaded && _.isEmpty(secret.loadError))) {
     return <LoadingBox />;
@@ -98,7 +58,7 @@ const HelmReleaseDetailsPage: React.FC<HelmReleaseDetailsPageProps> = ({ secret,
           {
             href: 'resources',
             name: 'Resources',
-            component: () => <HelmReleaseResources helmManifestResources={helmManifestResources} />,
+            component: HelmReleaseResources,
           },
         ]}
         customKind={HelmReleaseReference}
diff --git a/frontend/packages/dev-console/src/components/helm/HelmReleaseResources.tsx b/frontend/packages/dev-console/src/components/helm/HelmReleaseResources.tsx
index f0dd2a3faf4..5b163fbd9fd 100644
--- a/frontend/packages/dev-console/src/components/helm/HelmReleaseResources.tsx
+++ b/frontend/packages/dev-console/src/components/helm/HelmReleaseResources.tsx
@@ -1,21 +1,69 @@
 import * as React from 'react';
+import { safeLoadAll } from 'js-yaml';
 import { MultiListPage } from '@console/internal/components/factory';
 import { FirehoseResource } from '@console/internal/components/utils';
+import { coFetchJSON } from '@console/internal/co-fetch';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 import { flattenResources } from './helm-release-resources-utils';
 import HelmResourcesListComponent from './HelmResourcesListComponent';
+import { HelmRelease } from './helm-types';
+import { match as RMatch } from 'react-router';
 
 export interface HelmReleaseResourcesProps {
-  helmManifestResources: FirehoseResource[];
+  match: RMatch<{
+    ns?: string;
+    name?: string;
+  }>;
 }
 
-const HelmReleaseResources: React.FC<HelmReleaseResourcesProps> = ({ helmManifestResources }) => (
-  <MultiListPage
-    filterLabel="Resources by name"
-    resources={helmManifestResources}
-    flatten={flattenResources}
-    label="Resources"
-    ListComponent={HelmResourcesListComponent}
-  />
-);
+const HelmReleaseResources: React.FC<HelmReleaseResourcesProps> = ({ match }) => {
+  const namespace = match.params.ns;
+  const helmReleaseName = match.params.name;
+  const [helmManifestResources, setHelmManifestResources] = React.useState<FirehoseResource[]>([]);
+
+  React.useEffect(() => {
+    let ignore = false;
+
+    const fetchHelmReleases = async () => {
+      let res: HelmRelease[];
+      try {
+        res = await coFetchJSON(`/api/helm/releases?ns=${namespace}`);
+      } catch {
+        return;
+      }
+      if (ignore) return;
+
+      const releaseData = res?.filter((rel) => rel.name === helmReleaseName);
+      const helmManifest = safeLoadAll(releaseData[0].manifest);
+
+      const resources: FirehoseResource[] = helmManifest.map((resource: K8sResourceKind) => ({
+        kind: resource.kind,
+        name: resource.metadata.name,
+        namespace,
+        prop: `${resource.metadata.name}-${resource.kind.toLowerCase()}`,
+        isList: false,
+        optional: true,
+      }));
+
+      setHelmManifestResources(resources);
+    };
+
+    fetchHelmReleases();
+
+    return () => {
+      ignore = true;
+    };
+  }, [helmReleaseName, namespace]);
+
+  return (
+    <MultiListPage
+      filterLabel="Resources by name"
+      resources={helmManifestResources}
+      flatten={flattenResources}
+      label="Resources"
+      ListComponent={HelmResourcesListComponent}
+    />
+  );
+};
 
 export default HelmReleaseResources;
diff --git a/frontend/packages/dev-console/src/components/helm/__tests__/HelmReleaseResources.spec.tsx b/frontend/packages/dev-console/src/components/helm/__tests__/HelmReleaseResources.spec.tsx
index 73a01b77966..d1ad6ad0989 100644
--- a/frontend/packages/dev-console/src/components/helm/__tests__/HelmReleaseResources.spec.tsx
+++ b/frontend/packages/dev-console/src/components/helm/__tests__/HelmReleaseResources.spec.tsx
@@ -4,18 +4,17 @@ import { MultiListPage } from '@console/internal/components/factory';
 import HelmReleaseResources from '../HelmReleaseResources';
 
 describe('HelmReleaseResources', () => {
+  const match = {
+    params: { ns: 'default', name: 'nodejs-example' },
+    isExact: true,
+    path: '',
+    url: '',
+  };
+
   const helmReleaseResourcesProps: React.ComponentProps<typeof HelmReleaseResources> = {
-    helmManifestResources: [
-      {
-        kind: 'Service',
-        prop: 'service',
-        namespace: 'test-helm',
-        name: 'nodejs-example',
-        isList: false,
-        optional: true,
-      },
-    ],
+    match,
   };
+
   const helmReleaseResources = shallow(<HelmReleaseResources {...helmReleaseResourcesProps} />);
   it('should render the MultiListPage component', () => {
     expect(helmReleaseResources.find(MultiListPage).exists()).toBe(true);