diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
index 1c863b2cf..f07b10e4d 100644
--- a/locales/en/plugin__odf-console.json
+++ b/locales/en/plugin__odf-console.json
@@ -63,13 +63,6 @@
   "{{ pvcsWithIssueCount }} with issues": "{{ pvcsWithIssueCount }} with issues",
   "Snapshot": "Snapshot",
   "Last on: {{ lastSyncTime }}": "Last on: {{ lastSyncTime }}",
-  "Current value: ": "Current value: ",
-  "Max value: ": "Max value: ",
-  "Min value: ": "Min value: ",
-  "Snapshots synced": "Snapshots synced",
-  "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.": "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.",
-  "Replication throughput": "Replication throughput",
-  "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.": "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.",
   "Operator health": "Operator health",
   "Operators are responsible for maintaining and reconciling the state of the cluster.": "Operators are responsible for maintaining and reconciling the state of the cluster.",
   "Degraded": "Degraded",
@@ -86,6 +79,14 @@
   " {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues": " {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues",
   "PVCs": "PVCs",
   " {{ protectedPVCsCount }} protected": " {{ protectedPVCsCount }} protected",
+  "Current value: ": "Current value: ",
+  "Max value: ": "Max value: ",
+  "Min value: ": "Min value: ",
+  "Utilization": "Utilization",
+  "Snapshots synced": "Snapshots synced",
+  "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.": "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.",
+  "Replication throughput": "Replication throughput",
+  "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.": "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.",
   "Volume replication health": "Volume replication health",
   "Volumes": "Volumes",
   "Cluster: {{clusterName}}": "Cluster: {{clusterName}}",
@@ -443,7 +444,6 @@
   "In-transit encryption": "In-transit encryption",
   "Storage Cluster": "Storage Cluster",
   "Requested capacity": "Requested capacity",
-  "Utilization": "Utilization",
   "Expanding StorageCluster": "Expanding StorageCluster",
   "Upgrading Data Foundation's Operator": "Upgrading Data Foundation's Operator",
   "PersistentVolumeClaims": "PersistentVolumeClaims",
diff --git a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.scss b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.scss
index 272a16ecb..c243f0c34 100644
--- a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.scss
+++ b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.scss
@@ -41,6 +41,10 @@
     height: auto;
 }
 
+.mco-cluster-app__graph--margin-bottom {
+     margin-bottom: var(--pf-global--spacer--xl);
+}
+
 .mco-cluster-app__donut-chart {
     width: 350px;
     height: 220px; 
diff --git a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx
index 6824fd122..688d0d55c 100644
--- a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx
+++ b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx
@@ -14,17 +14,9 @@ import {
   MirrorPeerKind,
 } from '@odf/mco/types';
 import { getClusterNamesFromMirrorPeers } from '@odf/mco/utils';
-import { getMax, getMin } from '@odf/shared/charts';
-import { CustomUtilizationSummaryProps } from '@odf/shared/dashboards/utilization-card/utilization-item';
 import { DataUnavailableError } from '@odf/shared/generic/Error';
 import { useCustomPrometheusPoll } from '@odf/shared/hooks/custom-prometheus-poll';
-import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
-import {
-  humanizeBinaryBytes,
-  humanizeDecimalBytesPerSec,
-  humanizeNumber,
-  referenceForModel,
-} from '@odf/shared/utils';
+import { referenceForModel } from '@odf/shared/utils';
 import {
   PrometheusResponse,
   useK8sWatchResource,
@@ -46,7 +38,7 @@ import {
   getProtectedPVCFromVRG,
   filterPVCDataUsingAppsets,
 } from '../../../../utils';
-import { DRDashboard, getLastSyncPerClusterQuery } from '../../queries';
+import { getLastSyncPerClusterQuery } from '../../queries';
 import {
   CSVStatusesContext,
   DRResourcesContext,
@@ -61,43 +53,11 @@ import {
   PeerConnectionSection,
   ApplicationsSection,
   PVCsSection,
-  SnapshotUtilizationCard,
+  UtilizationCard,
 } from './cluster';
 import { ClusterAppDropdown, VolumeSummarySection } from './common';
 import './cluster-app-card.scss';
 
-const CustomUtilizationSummary: React.FC<CustomUtilizationSummaryProps> = ({
-  currentHumanized,
-  utilizationData,
-}) => {
-  const { t } = useCustomTranslation();
-  const maxVal = getMax(utilizationData);
-  const minVal = getMin(utilizationData);
-  const humanizedMax = !!maxVal ? humanizeBinaryBytes(maxVal).string : null;
-  const humanizedMin = !!minVal ? humanizeBinaryBytes(minVal).string : null;
-
-  return (
-    <div className="co-utilization-card__item-value co-utilization-card__item-summary">
-      <div>
-        <span>{t('Current value: ')}</span>
-        <span className="bold">{currentHumanized}</span>
-      </div>
-      {!!utilizationData?.length && (
-        <>
-          <div>
-            <span>{t('Max value: ')}</span>
-            <span className="bold">{humanizedMax}</span>
-          </div>
-          <div>
-            <span>{t('Min value: ')}</span>
-            <span className="bold">{humanizedMin}</span>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
 export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({
   clusterName,
   lastSyncTimeData,
@@ -105,7 +65,6 @@ export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({
   csvData,
   clusterResources,
 }) => {
-  const { t } = useCustomTranslation();
   const [mirrorPeers] = useK8sWatchResource<MirrorPeerKind[]>({
     kind: referenceForModel(MirrorPeerModel),
     isList: true,
@@ -145,26 +104,9 @@ export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({
         <VolumeSummarySection protectedPVCData={protectedPVCData} />
       </GridItem>
       <GridItem lg={12} rowSpan={8} sm={12}>
-        <SnapshotUtilizationCard
-          clusters={peerClusters}
-          title={t('Snapshots synced')}
-          queryType={DRDashboard.RBD_SNAPSHOT_SNAPSHOTS}
-          titleToolTip={t(
-            'The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.'
-          )}
-          humanizeValue={humanizeNumber}
-        />
-      </GridItem>
-      <GridItem lg={12} rowSpan={8} sm={12}>
-        <SnapshotUtilizationCard
-          clusters={[clusterName]}
-          title={t('Replication throughput')}
-          queryType={DRDashboard.RBD_SNAPSHOTS_SYNC_BYTES}
-          titleToolTip={t(
-            'The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.'
-          )}
-          humanizeValue={humanizeDecimalBytesPerSec}
-          CustomUtilizationSummary={CustomUtilizationSummary}
+        <UtilizationCard
+          clusterName={clusterName}
+          peerClusters={peerClusters}
         />
       </GridItem>
     </Grid>
diff --git a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
index adef3a42c..a7041af1b 100644
--- a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
+++ b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
@@ -26,6 +26,7 @@ import {
   getVolumeReplicationHealth,
   getManagedClusterAvailableCondition,
 } from '@odf/mco/utils';
+import { getMax, getMin } from '@odf/shared/charts';
 import HealthItem from '@odf/shared/dashboards/status-card/HealthItem';
 import { healthStateMapping } from '@odf/shared/dashboards/status-card/states';
 import { PrometheusUtilizationItem } from '@odf/shared/dashboards/utilization-card/prometheus-utilization-item';
@@ -34,6 +35,7 @@ import { FieldLevelHelp } from '@odf/shared/generic';
 import { useCustomPrometheusPoll } from '@odf/shared/hooks/custom-prometheus-poll';
 import Status, { StatusPopupSection } from '@odf/shared/popup/status-popup';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import { humanizeDecimalBytesPerSec, humanizeNumber } from '@odf/shared/utils';
 import {
   HealthState,
   PrometheusResponse,
@@ -266,9 +268,6 @@ export const SnapshotUtilizationCard: React.FC<SnapshotUtilizationCardProps> =
   }) => {
     return (
       <>
-        <div className="mco-dashboard__contentRow mco-cluster-app__contentRow--flexEnd">
-          <UtilizationDurationDropdown />
-        </div>
         <div>
           <StatusText>
             {title}
@@ -294,6 +293,88 @@ export const SnapshotUtilizationCard: React.FC<SnapshotUtilizationCardProps> =
     );
   };
 
+const CustomUtilizationSummary: React.FC<CustomUtilizationSummaryProps> = ({
+  currentHumanized,
+  utilizationData,
+}) => {
+  const { t } = useCustomTranslation();
+  const maxVal = getMax(utilizationData);
+  const minVal = getMin(utilizationData);
+  const humanizedMax = !!maxVal
+    ? humanizeDecimalBytesPerSec(maxVal).string
+    : null;
+  const humanizedMin = !!minVal
+    ? humanizeDecimalBytesPerSec(minVal).string
+    : null;
+
+  return (
+    <div className="co-utilization-card__item-value co-utilization-card__item-summary">
+      <div>
+        <span>{t('Current value: ')}</span>
+        <span className="bold">{currentHumanized}</span>
+      </div>
+      {!!utilizationData?.length && (
+        <>
+          <div>
+            <span>{t('Max value: ')}</span>
+            <span className="bold">{humanizedMax}</span>
+          </div>
+          <div>
+            <span>{t('Min value: ')}</span>
+            <span className="bold">{humanizedMin}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const UtilizationCard: React.FC<UtilizationCardProps> = ({
+  clusterName,
+  peerClusters,
+}) => {
+  const { t } = useCustomTranslation();
+
+  return (
+    <div className="mco-dashboard__contentColumn">
+      <div className="mco-dashboard__contentRow mco-cluster-app__contentRow--spaceBetween">
+        <Text
+          component={TextVariants.h3}
+          className="mco-cluster-app__contentRow--flexStart"
+        >
+          {t('Utilization')}
+        </Text>
+        <div className="mco-dashboard__contentRow mco-cluster-app__contentRow--flexEnd">
+          <UtilizationDurationDropdown />
+        </div>
+      </div>
+      <div className="mco-cluster-app__graph--margin-bottom">
+        <SnapshotUtilizationCard
+          clusters={peerClusters}
+          title={t('Snapshots synced')}
+          queryType={DRDashboard.RBD_SNAPSHOT_SNAPSHOTS}
+          titleToolTip={t(
+            'The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.'
+          )}
+          humanizeValue={humanizeNumber}
+        />
+      </div>
+      <div className="mco-cluster-app__graph--margin-bottom">
+        <SnapshotUtilizationCard
+          clusters={[clusterName]}
+          title={t('Replication throughput')}
+          queryType={DRDashboard.RBD_SNAPSHOTS_SYNC_BYTES}
+          humanizeValue={humanizeDecimalBytesPerSec}
+          titleToolTip={t(
+            'The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.'
+          )}
+          CustomUtilizationSummary={CustomUtilizationSummary}
+        />
+      </div>
+    </div>
+  );
+};
+
 type ClusterCSVStatus = {
   [ODR_CLUSTER_OPERATOR]: string;
   [VOL_SYNC]: string;
@@ -333,3 +414,8 @@ type SnapshotUtilizationCardProps = {
   titleToolTip: string;
   CustomUtilizationSummary?: React.FC<CustomUtilizationSummaryProps>;
 };
+
+type UtilizationCardProps = {
+  clusterName: string;
+  peerClusters: string[];
+};