diff --git a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
index fd9ad41cdf2..d9cea86c8f0 100644
--- a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
+++ b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
@@ -59,24 +59,21 @@ class SubscriptionDetails extends Component {
 
     return (
       <div id="subscription-details">
-        {!subscriptionDetails.loading &&
-          <BreadcrumbsBar
-            onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
-            data={{
-              isSwitchable: true,
-              breadcrumbItems: [
-                {
-                  caption: __('Subscriptions'),
-                  onClick: () =>
-                    this.props.history.push('/subscriptions'),
-                },
-                {
-                  caption: String(subscriptionDetails.name || __('Subscription Details')),
-                },
-              ],
-              resource,
-            }}
-          />}
+        {!subscriptionDetails.loading && <BreadcrumbsBar
+          isLoadingResources={subscriptionDetails.loading}
+          onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
+          isSwitchable
+          breadcrumbItems={[
+            {
+              caption: __('Subscriptions'),
+              url: '/subscriptions/',
+            },
+            {
+              caption: String(subscriptionDetails.name || __('Subscription Details')),
+            },
+          ]}
+          resource={resource}
+        />}
 
         <TabContainer id="subscription-tabs-container" defaultActiveKey={1}>
           <div>
diff --git a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
index 6462349dc78..594c64c85ab 100644
--- a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
+++ b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
@@ -1,4 +1,6 @@
 #subscription-details {
+  margin: 24px;
+
   .scrolld-list {
     max-height: 400px;
     overflow-y: auto;
@@ -8,4 +10,4 @@
     max-height: 20px;
     padding: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap b/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
index 99087bf578d..fa0def3b02d 100644
--- a/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
+++ b/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
@@ -5,26 +5,27 @@ exports[`subscriptions details page should render and contain appropiate compone
   id="subscription-details"
 >
   <BreadcrumbsBar
-    data={
-      Object {
-        "breadcrumbItems": Array [
-          Object {
-            "caption": "Subscriptions",
-            "onClick": [Function],
-          },
-          Object {
-            "caption": "OpenShift Employee Subscription",
-          },
-        ],
-        "isSwitchable": true,
-        "resource": Object {
-          "nameField": "name",
-          "resourceUrl": "/katello/api/v2/organizations/1/subscriptions",
-          "switcherItemUrl": "/subscriptions/:id",
+    breadcrumbItems={
+      Array [
+        Object {
+          "caption": "Subscriptions",
+          "url": "/subscriptions/",
         },
-      }
+        Object {
+          "caption": "OpenShift Employee Subscription",
+        },
+      ]
     }
+    isLoadingResources={false}
+    isSwitchable={true}
     onSwitcherItemClick={[Function]}
+    resource={
+      Object {
+        "nameField": "name",
+        "resourceUrl": "/katello/api/v2/organizations/1/subscriptions",
+        "switcherItemUrl": "/subscriptions/:id",
+      }
+    }
   />
   <ForwardRef
     defaultActiveKey={1}