diff --git a/frontend/packages/dev-console/console-extensions.json b/frontend/packages/dev-console/console-extensions.json
index 245b282aa22b..352097d03612 100644
--- a/frontend/packages/dev-console/console-extensions.json
+++ b/frontend/packages/dev-console/console-extensions.json
@@ -186,6 +186,29 @@
       "required": ["OPENSHIFT"]
     }
   },
+  {
+    "type": "console.catalog/item-type",
+    "properties": {
+      "type": "Devfile",
+      "title": "%devconsole~Devfiles%",
+      "catalogDescription": "%devconsole~Browse for devfiles that support a particular language or framework. Cluster administrators can customize the content made available in the catalog.%",
+      "typeDescription": "%devconsole~**Devfiles** are sets of objects for creating services, build configurations, and anything you have permission to create within a Project.%"
+    },
+    "flags": {
+      "required": ["OPENSHIFT"]
+    }
+  },
+  {
+    "type": "console.catalog/item-provider",
+    "properties": {
+      "catalogId": "dev-catalog",
+      "type": "Devfile",
+      "provider": { "$codeRef": "catalog.devfileProvider" }
+    },
+    "flags": {
+      "required": ["OPENSHIFT"]
+    }
+  },
   {
     "type": "console.catalog/item-type",
     "properties": {
diff --git a/frontend/packages/dev-console/locales/en/devconsole.json b/frontend/packages/dev-console/locales/en/devconsole.json
index c4c8409e4193..4bf418958aa7 100644
--- a/frontend/packages/dev-console/locales/en/devconsole.json
+++ b/frontend/packages/dev-console/locales/en/devconsole.json
@@ -25,6 +25,9 @@
   "Templates": "Templates",
   "Browse for templates that can deploy services, create builds, or create any resources the template enables. Cluster administrators can customize the content made available in the catalog.": "Browse for templates that can deploy services, create builds, or create any resources the template enables. Cluster administrators can customize the content made available in the catalog.",
   "**Templates** are sets of objects for creating services, build configurations, and anything you have permission to create within a Project.": "**Templates** are sets of objects for creating services, build configurations, and anything you have permission to create within a Project.",
+  "Devfiles": "Devfiles",
+  "Browse for devfiles that support a particular language or framework. Cluster administrators can customize the content made available in the catalog.": "Browse for devfiles that support a particular language or framework. Cluster administrators can customize the content made available in the catalog.",
+  "**Devfiles** are sets of objects for creating services, build configurations, and anything you have permission to create within a Project.": "**Devfiles** are sets of objects for creating services, build configurations, and anything you have permission to create within a Project.",
   "Helm Charts": "Helm Charts",
   "Add": "Add",
   "Select a Project to start adding to it or <2>create a Project</2>.": "Select a Project to start adding to it or <2>create a Project</2>.",
diff --git a/frontend/packages/dev-console/src/components/catalog/providers/index.ts b/frontend/packages/dev-console/src/components/catalog/providers/index.ts
index 9d7e6633b20c..4812e63f61ef 100644
--- a/frontend/packages/dev-console/src/components/catalog/providers/index.ts
+++ b/frontend/packages/dev-console/src/components/catalog/providers/index.ts
@@ -5,3 +5,5 @@ export { default as templateProvider } from './useTemplates';
 export { default as builderImageSamplesProvider } from './useBuilderImageSamples';
 
 export { default as devfileSamplesProvider } from './useDevfileSamples';
+
+export { default as devfileProvider } from './useDevfile';
diff --git a/frontend/packages/dev-console/src/components/catalog/providers/useDevfile.tsx b/frontend/packages/dev-console/src/components/catalog/providers/useDevfile.tsx
new file mode 100644
index 000000000000..e2a0b9b2fcba
--- /dev/null
+++ b/frontend/packages/dev-console/src/components/catalog/providers/useDevfile.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { APIError } from '@console/shared';
+import { ExtensionHook, CatalogItem } from '@console/dynamic-plugin-sdk';
+import { coFetchJSON } from '@console/internal/co-fetch';
+import { ExternalLink } from '@console/internal/components/utils';
+import { DevfileSample } from '../../import/devfile/devfile-types';
+
+const normalizeDevfile = (devfileSamples: DevfileSample[], t: TFunction): CatalogItem[] => {
+  const normalizedDevfileSamples = devfileSamples?.map((sample) => {
+    const { name: uid, displayName, description, tags, git, icon } = sample;
+    const gitRepoUrl = Object.values(git.remotes)[0];
+    const iconUrl = icon ? `data:image/png;base64,${icon}` : '';
+    const href = `/import?importType=devfile&devfileName=${uid}&gitRepo=${gitRepoUrl}`;
+    const createLabel = t('devconsole~Create Application');
+    const type = 'Devfile';
+
+    const detailsProperties = [
+      {
+        label: t('devconsole~Sample repository'),
+        value: (
+          <ExternalLink href={gitRepoUrl} additionalClassName="co-break-all" text={gitRepoUrl} />
+        ),
+      },
+    ];
+
+    const detailsDescriptions = [
+      {
+        value: <p>{description}</p>,
+      },
+    ];
+
+    const item: CatalogItem = {
+      uid: `${type}-${uid}`,
+      type,
+      name: displayName,
+      description,
+      tags,
+      cta: {
+        label: createLabel,
+        href,
+      },
+      icon: { url: iconUrl },
+      details: {
+        properties: detailsProperties,
+        descriptions: detailsDescriptions,
+      },
+    };
+
+    return item;
+  });
+
+  return normalizedDevfileSamples;
+};
+
+const useDevfile: ExtensionHook<CatalogItem[]> = (): [CatalogItem[], boolean, any] => {
+  const [devfileSamples, setDevfileSamples] = React.useState<DevfileSample[]>([]);
+  const [loadedError, setLoadedError] = React.useState<APIError>();
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    let mounted = true;
+    const payload = {
+      registry: 'pkg/devfile/sample-placeholder.json',
+    };
+    coFetchJSON
+      .put('/api/devfile/samples', payload)
+      .then((resp) => {
+        if (mounted) setDevfileSamples(resp);
+      })
+      .catch((err) => {
+        if (mounted) setLoadedError(err);
+      });
+    return () => (mounted = false);
+  }, []);
+
+  const normalizedDevfileSamples = React.useMemo(() => normalizeDevfile(devfileSamples, t), [
+    devfileSamples,
+    t,
+  ]);
+
+  const loaded = !!devfileSamples;
+
+  return [normalizedDevfileSamples, loaded, loadedError];
+};
+
+export default useDevfile;
diff --git a/frontend/packages/dev-console/src/components/catalog/providers/useDevfileSamples.tsx b/frontend/packages/dev-console/src/components/catalog/providers/useDevfileSamples.tsx
index 55f3b213c26a..836764ffcc6d 100644
--- a/frontend/packages/dev-console/src/components/catalog/providers/useDevfileSamples.tsx
+++ b/frontend/packages/dev-console/src/components/catalog/providers/useDevfileSamples.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-<<<<<<< HEAD
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
-=======
->>>>>>> create item provider for devfile samples
 import { APIError } from '@console/shared';
 import { ExtensionHook, CatalogItem } from '@console/dynamic-plugin-sdk';
 import { coFetchJSON } from '@console/internal/co-fetch';
diff --git a/frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx b/frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx
index c450fef7cd0b..8d6a24dbb71f 100644
--- a/frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx
+++ b/frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx
@@ -30,13 +30,19 @@ const useHelmCharts: ExtensionHook<CatalogItem[]> = ({
   );
 
   React.useEffect(() => {
+    let mounted = true;
     coFetch('/api/helm/charts/index.yaml')
       .then(async (res) => {
-        const yaml = await res.text();
-        const json = safeLoad(yaml);
-        setHelmCharts(json.entries);
+        if (mounted) {
+          const yaml = await res.text();
+          const json = safeLoad(yaml);
+          setHelmCharts(json.entries);
+        }
       })
-      .catch(setLoadedError);
+      .catch((err) => {
+        if (mounted) setLoadedError(err);
+      });
+    return () => (mounted = false);
   }, []);
 
   const normalizedHelmCharts: CatalogItem[] = React.useMemo(