diff --git a/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/details-card.tsx b/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/details-card.tsx
index e0806aa7c61..3e2db0996fe 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/details-card.tsx
+++ b/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/details-card.tsx
@@ -60,10 +60,12 @@ const DetailsCard: React.FC<DashboardItemProps> = ({
   const infrastructure = _.get(resources, 'infrastructure');
   const infrastructureLoaded = _.get(infrastructure, 'loaded', false);
   const infrastructureData = _.get(infrastructure, 'data') as K8sResourceKind;
+  const infrastructurePlatform = getInfrastructurePlatform(infrastructureData);
 
   const cephCluster = _.get(resources, 'ceph');
   const cephClusterLoaded = _.get(cephCluster, 'loaded', false);
   const cephClusterData = _.get(cephCluster, 'data') as K8sResourceKind[];
+  const cephClusterName = getName(_.get(cephClusterData, 0));
 
   const subscription = _.get(resources, 'subscription');
   const subscriptionLoaded = _.get(subscription, 'loaded');
@@ -76,30 +78,33 @@ const DetailsCard: React.FC<DashboardItemProps> = ({
       </DashboardCardHeader>
       <DashboardCardBody>
         <DetailsBody>
-          <DetailItem
-            key="service_name"
-            title="Service Name"
-            value="OpenShift Container Storage"
-            isLoading={false}
-          />
+          <DetailItem key="service_name" title="Service Name" isLoading={false} error={false}>
+            OpenShift Container Storage
+          </DetailItem>
           <DetailItem
             key="cluster_name"
             title="Cluster Name"
-            value={getName(_.get(cephClusterData, 0))}
+            error={!cephClusterName}
             isLoading={!cephClusterLoaded}
-          />
+          >
+            {cephClusterName}
+          </DetailItem>
           <DetailItem
             key="provider"
             title="Provider"
-            value={getInfrastructurePlatform(infrastructureData)}
+            error={!infrastructurePlatform}
             isLoading={!infrastructureLoaded}
-          />
+          >
+            {infrastructurePlatform}
+          </DetailItem>
           <DetailItem
             key="version"
             title="Version"
-            value={ocsVersion}
             isLoading={!subscriptionLoaded}
-          />
+            error={!ocsVersion}
+          >
+            {ocsVersion}
+          </DetailItem>
         </DetailsBody>
       </DashboardCardBody>
     </DashboardCard>
diff --git a/frontend/packages/noobaa-storage-plugin/src/components/details-card/details-card.tsx b/frontend/packages/noobaa-storage-plugin/src/components/details-card/details-card.tsx
index 518b66e67e1..5cd5e683478 100644
--- a/frontend/packages/noobaa-storage-plugin/src/components/details-card/details-card.tsx
+++ b/frontend/packages/noobaa-storage-plugin/src/components/details-card/details-card.tsx
@@ -11,10 +11,11 @@ import {
   DashboardItemProps,
   withDashboardResources,
 } from '@console/internal/components/dashboards-page/with-dashboard-resources';
-import { FirehoseResource } from '@console/internal/components/utils';
+import { FirehoseResource, ExternalLink } from '@console/internal/components/utils';
 import { InfrastructureModel, SubscriptionModel } from '@console/internal/models/index';
 import { referenceForModel, K8sResourceKind } from '@console/internal/module/k8s';
 import { getInfrastructurePlatform } from '@console/ceph-storage-plugin/src/selectors';
+import { getMetric } from '../../utils';
 
 const NOOBAA_SYSTEM_NAME_QUERY = 'NooBaa_system_info';
 
@@ -55,11 +56,15 @@ export const ObjectServiceDetailsCard: React.FC<DashboardItemProps> = ({
 
   const queryResult = prometheusResults.getIn([NOOBAA_SYSTEM_NAME_QUERY, 'result']);
 
-  const systemName = _.get(queryResult, 'data.result[0].metric.system_name');
+  const systemName = getMetric(queryResult, 'system_name');
+  const systemAddress = getMetric(queryResult, 'system_address');
+  const systemLink =
+    systemName && systemAddress ? `${systemAddress}fe/systems/${systemName}` : undefined;
 
   const infrastructure = _.get(resources, 'infrastructure');
   const infrastructureLoaded = _.get(infrastructure, 'loaded', false);
   const infrastructureData = _.get(infrastructure, 'data') as K8sResourceKind;
+  const infrastructurePlatform = getInfrastructurePlatform(infrastructureData);
 
   const subscription = _.get(resources, 'subscription');
   const subscriptionLoaded = _.get(subscription, 'loaded');
@@ -72,30 +77,33 @@ export const ObjectServiceDetailsCard: React.FC<DashboardItemProps> = ({
       </DashboardCardHeader>
       <DashboardCardBody>
         <DetailsBody>
-          <DetailItem
-            key="service_name"
-            title="Service Name"
-            value="OpenShift Container Storage"
-            isLoading={false}
-          />
+          <DetailItem key="service_name" title="Service Name" error={false} isLoading={false}>
+            OpenShift Container Storage
+          </DetailItem>
           <DetailItem
             key="system_name"
             title="System Name"
-            value={systemName}
             isLoading={!queryResult}
-          />
+            error={!systemLink}
+          >
+            <ExternalLink href={systemLink} text={systemName} />
+          </DetailItem>
           <DetailItem
             key="provider"
             title="Provider"
-            value={getInfrastructurePlatform(infrastructureData)}
+            error={!infrastructurePlatform}
             isLoading={!infrastructureLoaded}
-          />
+          >
+            {infrastructurePlatform}
+          </DetailItem>
           <DetailItem
             key="version"
             title="Version"
-            value={ocsVersion}
             isLoading={!subscriptionLoaded}
-          />
+            error={!ocsVersion}
+          >
+            {ocsVersion}
+          </DetailItem>
         </DetailsBody>
       </DashboardCardBody>
     </DashboardCard>
diff --git a/frontend/public/components/dashboard/details-card/detail-item.tsx b/frontend/public/components/dashboard/details-card/detail-item.tsx
index 9c8030188be..189c4649634 100644
--- a/frontend/public/components/dashboard/details-card/detail-item.tsx
+++ b/frontend/public/components/dashboard/details-card/detail-item.tsx
@@ -1,19 +1,28 @@
 import * as React from 'react';
-import classNames from 'classnames';
-
 import { LoadingInline } from '../../utils';
 
-export const DetailItem: React.FC<DetailItemProps> = React.memo(({ title, value, isLoading }) => (
-  <React.Fragment>
-    <dt className="co-details-card__item-title">{title}</dt>
-    <dd className={classNames('co-details-card__item-value', {'text-secondary': !value})}>
-      {isLoading ? <LoadingInline /> : value || 'Unavailable'}
-    </dd>
-  </React.Fragment>
-));
+export const DetailItem: React.FC<DetailItemProps> = React.memo(
+  ({ title, isLoading = false, children, error = false }) => {
+    let status: React.ReactNode;
+    if (isLoading) {
+      status = <LoadingInline />;
+    } else if (error) {
+      status = <span className="text-secondary">Unavailable</span>;
+    } else {
+      status = children;
+    }
+    return (
+      <React.Fragment>
+        <dt className="co-details-card__item-title">{title}</dt>
+        <dd className="co-details-card__item-value">{status}</dd>
+      </React.Fragment>
+    );
+  }
+);
 
 type DetailItemProps = {
   title: string;
-  value?: string;
-  isLoading: boolean;
+  isLoading?: boolean;
+  error?: boolean;
+  children: React.ReactNode;
 };
diff --git a/frontend/public/components/dashboards-page/overview-dashboard/details-card.tsx b/frontend/public/components/dashboards-page/overview-dashboard/details-card.tsx
index d928e921ddf..ba005005ded 100644
--- a/frontend/public/components/dashboards-page/overview-dashboard/details-card.tsx
+++ b/frontend/public/components/dashboards-page/overview-dashboard/details-card.tsx
@@ -69,13 +69,16 @@ export const DetailsCard_ = connect(mapStateToProps)(({
   const clusterVersionLoaded = _.get(resources.cv, 'loaded', false);
   const clusterVersionError = _.get(resources.cv, 'loadError');
   const clusterVersionData = _.get(resources.cv, 'data') as ClusterVersionKind;
+  const clusterId = getClusterID(clusterVersionData);
+  const openShiftVersion = getOpenShiftVersion(clusterVersionData);
 
   const infrastructureLoaded = _.get(resources.infrastructure, 'loaded', false);
   const infrastructureError = _.get(resources.infrastructure, 'loadError');
   const infrastructureData = _.get(resources.infrastructure, 'data') as K8sResourceKind;
-
+  const infrastructurePlatform = getInfrastructurePlatform(infrastructureData);
 
   const kubernetesVersionResponse = urlResults.getIn(['version', 'result']);
+  const k8sGitVersion = getK8sGitVersion(kubernetesVersionResponse);
 
   return (
     <DashboardCard>
@@ -89,29 +92,37 @@ export const DetailsCard_ = connect(mapStateToProps)(({
               <DetailItem
                 key="clusterid"
                 title="Cluster ID"
-                value={getClusterID(clusterVersionData)}
+                error={!clusterId}
                 isLoading={!clusterVersionLoaded && !clusterVersionError}
-              />
+              >
+                {clusterId}
+              </DetailItem>
               <DetailItem
                 key="provider"
                 title="Provider"
-                value={getInfrastructurePlatform(infrastructureData)}
+                error={!infrastructurePlatform}
                 isLoading={!infrastructureLoaded && !infrastructureError}
-              />
+              >
+                {infrastructurePlatform}
+              </DetailItem>
               <DetailItem
                 key="openshift"
                 title="OpenShift version"
-                value={getOpenShiftVersion(clusterVersionData)}
+                error={!openShiftVersion}
                 isLoading={!clusterVersionLoaded && !clusterVersionError}
-              />
+              >
+                {openShiftVersion}
+              </DetailItem>
             </>
           ) : (
             <DetailItem
               key="kubernetes"
               title="Kubernetes version"
-              value={getK8sGitVersion(kubernetesVersionResponse)}
+              error={!k8sGitVersion}
               isLoading={!kubernetesVersionResponse}
-            />
+            >
+              {k8sGitVersion}
+            </DetailItem>
           )}
         </DetailsBody>
       </DashboardCardBody>