diff --git a/webpack/ForemanRhCloudPages.js b/webpack/ForemanRhCloudPages.js
index 615f79d8..a9aeb52d 100644
--- a/webpack/ForemanRhCloudPages.js
+++ b/webpack/ForemanRhCloudPages.js
@@ -5,6 +5,7 @@ import ForemanInventoryUpload from './ForemanInventoryUpload';
 import InsightsVulnerabilityListPage from './InsightsVulnerability/InsightsVulnerabilityListPage';
 import InsightsCloudSync from './InsightsCloudSync';
 import IopRecommendationDetails from './IopRecommendationDetails/IopRecommendationDetails';
+import IopPathwayDetails from './IopPathwayDetails/IopPathwayDetails';
 import InsightsHostDetailsTab from './InsightsHostDetailsTab';
 import CveDetailsPage from './CveDetailsPage';
 import InsightsComplianceReportsPage from './InsightsCompliance/InsightsComplianceReportsPage';
@@ -41,6 +42,11 @@ export const routes = [
     exact: true,
     render: props => <InsightsCloudSync {...props} />,
   },
+  {
+    path: '/foreman_rh_cloud/recommendations/pathways/:slug',
+    exact: false,
+    render: props => <IopPathwayDetails {...props} />,
+  },
   {
     path: '/foreman_rh_cloud/recommendations',
     exact: false,
diff --git a/webpack/IopPathwayDetails/IopPathwayDetails.js b/webpack/IopPathwayDetails/IopPathwayDetails.js
new file mode 100644
index 00000000..e2fea1e1
--- /dev/null
+++ b/webpack/IopPathwayDetails/IopPathwayDetails.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import { ScalprumComponent, ScalprumProvider } from '@scalprum/react-core';
+
+import RemediationModal from '../InsightsCloudSync/Components/RemediationModal';
+import { createProviderOptions } from '../common/ScalprumModule/ScalprumContext';
+import { useInsightsPermissions } from '../common/Hooks/PermissionsHooks';
+
+const scope = 'advisor';
+const pathwayModule = './PathwayDetailsWrapped';
+
+const IopPathwayDetails = props => {
+  const pathwayMatch = useRouteMatch(
+    '/foreman_rh_cloud/recommendations/pathways/:slug'
+  );
+  const slug = pathwayMatch?.params?.slug;
+
+  return (
+    <div className="iop-pathway-details-scalprum advisor">
+      <ScalprumComponent
+        scope={scope}
+        module={pathwayModule}
+        pathwayId={slug}
+        IopRemediationModal={RemediationModal}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const IopPathwayDetailsWrapped = props => {
+  const permissions = useInsightsPermissions();
+  return (
+    <ScalprumProvider {...createProviderOptions(permissions)}>
+      <IopPathwayDetails {...props} />
+    </ScalprumProvider>
+  );
+};
+
+export default IopPathwayDetailsWrapped;
diff --git a/webpack/IopRecommendationDetails/IopRecommendationDetails.js b/webpack/IopRecommendationDetails/IopRecommendationDetails.js
index df6ced5e..c4d2b1ad 100644
--- a/webpack/IopRecommendationDetails/IopRecommendationDetails.js
+++ b/webpack/IopRecommendationDetails/IopRecommendationDetails.js
@@ -8,30 +8,12 @@ import { useInsightsPermissions } from '../common/Hooks/PermissionsHooks';
 
 const scope = 'advisor';
 const module = './RecommendationDetailsWrapped';
-const pathwayModule = './PathwayDetailsWrapped';
 
 const IopRecommendationDetails = props => {
-  const pathwayMatch = useRouteMatch(
-    '/foreman_rh_cloud/recommendations/pathways/:slug'
-  );
   const urlParams = useRouteMatch('/foreman_rh_cloud/recommendations/:rule_id');
   // eslint-disable-next-line camelcase
   const ruleId = urlParams?.params?.rule_id;
 
-  if (pathwayMatch) {
-    return (
-      <div className="iop-pathway-details-scalprum advisor">
-        <ScalprumComponent
-          scope={scope}
-          module={pathwayModule}
-          pathwayId={pathwayMatch.params.slug}
-          IopRemediationModal={RemediationModal}
-          {...props}
-        />
-      </div>
-    );
-  }
-
   return (
     <div className="iop-recommendation-details-scalprum advisor">
       <ScalprumComponent