diff --git a/App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx b/App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx
index 13485a160b..304e257207 100644
--- a/App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx
+++ b/App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx
@@ -11,7 +11,8 @@ import RangeStartAndEndDateTime, {
   RangeStartAndEndDateTimeUtil,
 } from "Common/Types/Time/RangeStartAndEndDateTime";
 import TimeRange from "Common/Types/Time/TimeRange";
-import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
+import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
+import Card from "Common/UI/Components/Card/Card";
 
 export interface ComponentProps {
   queryConfigs: Array<MetricQueryConfigData>;
@@ -37,7 +38,8 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
   ) => void = useCallback(
     (newTimeRange: RangeStartAndEndDateTime): void => {
       setTimeRange(newTimeRange);
-      const dateRange = RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
+      const dateRange =
+        RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
       setMetricViewData((prev: MetricViewData) => {
         return {
           ...prev,
@@ -49,15 +51,16 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
   );
 
   return (
-    <div>
-      <div className="mb-4 flex items-center justify-end">
-        <div className="w-64">
-          <RangeStartAndEndDateEdit
-            value={timeRange}
-            onChange={handleTimeRangeChange}
-          />
-        </div>
-      </div>
+    <Card
+      title="Metrics"
+      description="Resource utilization metrics for this pod."
+      rightElement={
+        <RangeStartAndEndDateView
+          dashboardStartAndEndDate={timeRange}
+          onChange={handleTimeRangeChange}
+        />
+      }
+    >
       <MetricView
         data={{
           ...metricViewData,
@@ -65,6 +68,7 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
         }}
         hideQueryElements={true}
         hideStartAndEndDate={true}
+        hideCardInCharts={true}
         onChange={(data: MetricViewData) => {
           setMetricViewData({
             ...data,
@@ -73,7 +77,7 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
           });
         }}
       />
-    </div>
+    </Card>
   );
 };
 
diff --git a/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx b/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx
index e87fd53dc7..73ad3deeee 100644
--- a/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx
+++ b/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx
@@ -32,7 +32,8 @@ import RangeStartAndEndDateTime, {
   RangeStartAndEndDateTimeUtil,
 } from "Common/Types/Time/RangeStartAndEndDateTime";
 import TimeRange from "Common/Types/Time/TimeRange";
-import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
+import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
+import Card from "Common/UI/Components/Card/Card";
 
 export interface ComponentProps {
   monitorId: ObjectID;
@@ -307,19 +308,21 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
   }
 
   return (
-    <div>
-      <div className="mb-4 flex items-center justify-end">
-        <div className="w-64">
-          <RangeStartAndEndDateEdit
-            value={timeRange}
-            onChange={handleTimeRangeChange}
-          />
-        </div>
-      </div>
+    <Card
+      title="Monitor Metrics"
+      description="Performance metrics collected from this monitor."
+      rightElement={
+        <RangeStartAndEndDateView
+          dashboardStartAndEndDate={timeRange}
+          onChange={handleTimeRangeChange}
+        />
+      }
+    >
       <MetricView
         data={metricViewData}
         hideQueryElements={true}
         hideStartAndEndDate={true}
+        hideCardInCharts={true}
         onChange={(data: MetricViewData) => {
           setMetricViewData({
             ...data,
@@ -328,7 +331,7 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
           });
         }}
       />
-    </div>
+    </Card>
   );
 };
 
diff --git a/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx b/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx
index a0fcb4f938..bd6587e968 100644
--- a/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx
+++ b/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx
@@ -37,6 +37,10 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const gridCols: string =
     props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
 
+  const isLastChart: (index: number) => boolean = (index: number): boolean => {
+    return index === props.charts.length - 1;
+  };
+
   return (
     <div
       className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
@@ -46,6 +50,11 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
           ? ""
           : "rounded-lg border border-gray-200 bg-white shadow-sm";
 
+        const dividerClass: string =
+          props.hideCard && !isLastChart(index)
+            ? "border-b border-gray-200 pb-5"
+            : "";
+
         const chartContent: ReactElement = (() => {
           switch (chart.type) {
             case ChartType.LINE:
@@ -83,7 +92,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
         return (
           <div
             key={index}
-            className={`p-5 ${cardClass} ${props.chartCssClass || ""}`}
+            className={`p-5 ${cardClass} ${dividerClass} ${props.chartCssClass || ""}`}
           >
             <h2
               data-testid="card-details-heading"