diff --git a/src/api/query-hooks/health.tsx b/src/api/query-hooks/health.tsx
index 4c2e72116c..418d611de5 100644
--- a/src/api/query-hooks/health.tsx
+++ b/src/api/query-hooks/health.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { HealthCheck } from "../types/health";
 import { getStartValue } from "../../utils/common";
-import { getCanaryGraph } from "../services/topology";
+import { getCanaryGraph, getHealthCheckDetails } from "../services/topology";
+import { HealthCheck } from "../types/health";
 
 export function useCanaryGraphQuery(
   timeRange: string,
@@ -17,3 +17,14 @@ export function useCanaryGraphQuery(
     return res.data ?? undefined;
   });
 }
+
+export function useGetCheckDetails(checkId?: string) {
+  return useQuery({
+    queryKey: ["check", "details", checkId],
+    queryFn: async () => {
+      const res = await getHealthCheckDetails(checkId!);
+      return res;
+    },
+    enabled: checkId !== undefined
+  });
+}
diff --git a/src/api/services/topology.ts b/src/api/services/topology.ts
index 52f883c027..ff5b2447ef 100644
--- a/src/api/services/topology.ts
+++ b/src/api/services/topology.ts
@@ -8,15 +8,19 @@ import {
   Snapshot
 } from "../axios";
 import { resolve } from "../resolve";
+import { SchemaResourceI } from "../schemaResources";
 import { PaginationInfo } from "../types/common";
 import {
   HealthCheck,
   HealthCheckStatus,
   HealthCheckSummary
 } from "../types/health";
-import { ComponentHealthCheckView, Topology } from "../types/topology";
-import { ComponentTeamItem } from "../types/topology";
-import { ComponentTemplateItem } from "../types/topology";
+import {
+  ComponentHealthCheckView,
+  ComponentTeamItem,
+  ComponentTemplateItem,
+  Topology
+} from "../types/topology";
 
 interface IParam {
   id?: string;
@@ -224,8 +228,17 @@ export const getHealthCheckSummary = async (id: string) => {
   return null;
 };
 
+export const getHealthCheckDetails = async (id: string) => {
+  const res = await resolve<Omit<HealthCheck, "source">[] | null>(
+    IncidentCommander.get(
+      `/checks?id=eq.${id}&select=*,canaries(id,name,source),agents(id, name)`
+    )
+  );
+  return res.data?.[0];
+};
+
 export const getHealthCheckItem = async (id: string) => {
-  const res = await IncidentCommander.get<HealthCheck[] | null>(
+  const res = await IncidentCommander.get<SchemaResourceI[] | null>(
     `/canaries?id=eq.${id}`
   );
   return res.data?.[0];
diff --git a/src/api/types/health.ts b/src/api/types/health.ts
index d8929c2c85..436a14e050 100644
--- a/src/api/types/health.ts
+++ b/src/api/types/health.ts
@@ -1,4 +1,6 @@
+import { SchemaResourceI } from "../schemaResources";
 import { Agent, Avatar, Timestamped } from "../traits";
+import { AgentItem } from "./common";
 
 export interface HealthChecksResponse {
   duration: number;
@@ -21,7 +23,6 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   checkStatuses: HealthCheckStatus[];
   lastRuntime: string;
   description?: string;
-  source?: string;
   spec?: any;
   icon?: string;
   endpoint?: string;
@@ -32,11 +33,14 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   owner?: any;
   loading?: boolean;
   severity?: string;
+  next_runtime?: string;
+  agents?: AgentItem;
+  canaries?: SchemaResourceI;
 }
 
 export type HealthCheckSummary = Pick<
   HealthCheck,
-  "id" | "name" | "icon" | "type" | "status" | "severity"
+  "id" | "name" | "icon" | "type" | "status" | "severity" | "next_runtime"
 >;
 
 export interface HealthCheckStatus {
diff --git a/src/components/Canary/CanaryPopup/CheckDetails.tsx b/src/components/Canary/CanaryPopup/CheckDetails.tsx
index c202cccb2d..f8f14998c2 100644
--- a/src/components/Canary/CanaryPopup/CheckDetails.tsx
+++ b/src/components/Canary/CanaryPopup/CheckDetails.tsx
@@ -1,22 +1,25 @@
 import React, { Suspense, useMemo, useRef } from "react";
 import { useCanaryGraphQuery } from "../../../api/query-hooks/health";
 import { HealthCheck } from "../../../api/types/health";
+import { isCanaryUI } from "../../../context/Environment";
 import {
   capitalizeFirstLetter,
   toFixedIfNecessary
 } from "../../../utils/common";
-import { usePrevious } from "../../../utils/hooks";
+import { relativeDateTime } from "../../../utils/date";
 import mixins from "../../../utils/mixins.module.css";
 import { DropdownStandaloneWrapper } from "../../Dropdown/StandaloneWrapper";
 import { TimeRange, timeRanges } from "../../Dropdown/TimeRange";
+import { Head } from "../../Head/Head";
 import { Duration } from "../renderers";
 import { CanaryCheckDetailsSpecTab } from "./CanaryCheckDetailsSpec";
 import CheckLabels from "./CheckLabels";
 import { CheckStat } from "./CheckStat";
 import { StatusHistory } from "./StatusHistory/StatusHistory";
+import { calculateDefaultTimeRangeValue } from "./Utils/calculateDefaultTimeRangeValue";
 import { PopupTabs } from "./tabs";
 import { getUptimePercentage } from "./utils";
-import dayjs from "dayjs";
+
 const CanaryStatusChart = React.lazy(() =>
   import("../CanaryStatusChart").then(({ CanaryStatusChart }) => ({
     default: CanaryStatusChart
@@ -32,105 +35,18 @@ export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const statsRef = useRef<HTMLDivElement>(null);
 
-  const prevCheck = usePrevious(check);
-  const validCheck = check || prevCheck;
-
-  const timeRange = useMemo(() => {
-    // get time passed since last runtime
-    const lapsedTime = dayjs(validCheck?.lastRuntime!).diff(dayjs(), "minute");
-    // if passed time is less than 1 hour, use 1 hour time range
-    if (lapsedTime < 60) {
-      return "1h";
-    }
-    // if passed time is less than 3 hours, use 3 hours time range
-    if (lapsedTime < 180) {
-      return "3h";
-    }
-
-    // if passed time is less than 6 hours, use 6 hours time range
-    if (lapsedTime < 360) {
-      return "6h";
-    }
-
-    // if passed time is less than 12 hours, use 12 hours time range
-    if (lapsedTime < 720) {
-      return "12h";
-    }
-
-    // if passed time is less than 1 day, use 1 day time range
-    if (lapsedTime < 1440) {
-      return "1d";
-    }
-
-    // if passed time is less than 2 days, use 2 days time range
-    if (lapsedTime < 2880) {
-      return "2d";
-    }
-
-    // if passed time is less than 3 days, use 3 days time range
-    if (lapsedTime < 4320) {
-      return "3d";
-    }
-
-    // if passed time is less than 1 week, use 1 week time range
-    if (lapsedTime < 10080) {
-      return "1w";
-    }
-
-    // if passed time is less than 2 weeks, use 2 weeks time range
-    if (lapsedTime < 20160) {
-      return "2w";
-    }
-
-    // if passed time is less than 3 weeks, use 3 weeks time range
-    if (lapsedTime < 30240) {
-      return "3w";
-    }
-
-    // if passed time is less than 1 month, use 1 month time range
-    if (lapsedTime < 43200) {
-      return "1mo";
-    }
-
-    // if passed time is less than 2 months, use 2 months time range
-    if (lapsedTime < 86400) {
-      return "2mo";
-    }
-
-    // if passed time is less than 3 months, use 3 months time range
-    if (lapsedTime < 129600) {
-      return "3mo";
-    }
-
-    // if passed time is less than 6 months, use 6 months time range
-    if (lapsedTime < 259200) {
-      return "6mo";
-    }
-
-    // if passed time is less than 1 year, use 1 year time range
-    if (lapsedTime < 525600) {
-      return "1y";
-    }
-
-    // if passed time is less than 2 years, use 2 years time range
-    if (lapsedTime < 1051200) {
-      return "2y";
-    }
-
-    // if passed time is less than 3 years, use 3 years time range
-    if (lapsedTime < 1576800) {
-      return "3y";
-    }
+  const timeRange = useMemo(
+    () => calculateDefaultTimeRangeValue(check),
+    [check]
+  );
 
-    // if passed time is more than 3 years, use 3 years time range
-    if (lapsedTime > 1576800) {
-      return "5y";
-    }
+  const { data } = useCanaryGraphQuery(timeRange, check);
 
-    return "1h";
-  }, [validCheck?.lastRuntime]);
+  const lastRun = relativeDateTime(check?.lastRuntime!).replace(" ago", "");
 
-  const { data } = useCanaryGraphQuery(timeRange, validCheck);
+  const nextRun = check?.next_runtime
+    ? relativeDateTime(check?.next_runtime!).replace(" ago", "")
+    : "-";
 
   const uptimeValue = toFixedIfNecessary(
     getUptimePercentage(data)?.toString()!,
@@ -138,118 +54,139 @@ export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
   );
 
   const validUptime =
-    !Number.isNaN(validCheck?.uptime?.passed) &&
-    !Number.isNaN(validCheck?.uptime?.failed);
+    !Number.isNaN(check?.uptime?.passed) &&
+    !Number.isNaN(check?.uptime?.failed);
 
-  const severityValue =
-    validCheck?.severity ?? validCheck?.spec?.severity ?? "-";
+  const severityValue = check?.severity ?? check?.spec?.severity ?? "-";
 
-  if (validCheck == null) {
+  if (!check) {
     return null;
   }
 
+  const suffix = isCanaryUI ? "" : " | Mission Control";
+
   return (
-    <div {...rest} ref={containerRef}>
-      <div className="flex flex-col" ref={statsRef}>
-        <CheckLabels check={validCheck} />
-        <div className="flex flex-row flex-wrap">
-          <CheckStat
-            containerClassName="w-52 mb-4"
-            title="Uptime"
-            value={
-              !Number.isNaN(uptimeValue)
-                ? `${toFixedIfNecessary(uptimeValue.toString(), 2)}%`
-                : "-"
-            }
-            append={
-              validUptime &&
-              !Number.isNaN(uptimeValue) && (
+    <>
+      {check.name && <Head prefix={check.name} suffix={suffix} />}
+      <div {...rest} ref={containerRef}>
+        <div className="flex flex-col" ref={statsRef}>
+          <CheckLabels check={check} />
+          <div className="flex flex-row flex-wrap">
+            <CheckStat
+              containerClassName="w-52 mb-4"
+              title="Uptime"
+              value={
+                !Number.isNaN(uptimeValue)
+                  ? `${toFixedIfNecessary(uptimeValue.toString(), 2)}%`
+                  : "-"
+              }
+              append={
+                validUptime &&
+                !Number.isNaN(uptimeValue) && (
+                  <div className="flex flex-col justify-center mx-2 mt-0.5">
+                    <span className="text-xs text-green-700 ">
+                      {data?.uptime?.passed} passed
+                    </span>
+                    <span className="text-xs text-red-600">
+                      {data?.uptime?.failed} failed
+                    </span>
+                  </div>
+                )
+              }
+            />
+            <CheckStat
+              containerClassName="w-32 mb-4"
+              title="Latency (95%)"
+              value={<Duration ms={data?.latency?.p95} />}
+            />
+            <CheckStat
+              containerClassName="w-32 mb-4"
+              title="Latency  (97%)"
+              value={<Duration ms={data?.latency?.p97} />}
+            />
+            <CheckStat
+              containerClassName="w-32 mb-4"
+              title="Latency  (99%)"
+              value={<Duration ms={data?.latency?.p99} />}
+            />
+            <CheckStat
+              containerClassName="w-32 mb-4"
+              title="Severity"
+              value={capitalizeFirstLetter(severityValue)}
+            />
+            <CheckStat
+              containerClassName="w-32 mb-4"
+              title="Last Run"
+              value={undefined}
+              append={
                 <div className="flex flex-col justify-center mx-2 mt-0.5">
-                  <span className="text-xs text-green-700 ">
-                    {data?.uptime?.passed} passed
+                  <span className="">
+                    <strong>{lastRun}</strong>{" "}
+                    <span className="text-xs">ago</span>
                   </span>
-                  <span className="text-xs text-red-600">
-                    {data?.uptime?.failed} failed
+                  <span className="text-gray-400">
+                    <strong>{nextRun}</strong>{" "}
+                    <span className="text-xs">(next run)</span>
                   </span>
                 </div>
-              )
-            }
-          />
-          <CheckStat
-            containerClassName="w-40 mb-4"
-            title="Latency (95%)"
-            value={<Duration ms={data?.latency?.p95} />}
-          />
-          <CheckStat
-            containerClassName="w-40 mb-4"
-            title="Latency  (97%)"
-            value={<Duration ms={data?.latency?.p97} />}
-          />
-          <CheckStat
-            containerClassName="w-40 mb-4"
-            title="Latency  (99%)"
-            value={<Duration ms={data?.latency?.p99} />}
-          />
-          <CheckStat
-            containerClassName="w-40 mb-4"
-            title="Severity"
-            value={capitalizeFirstLetter(severityValue)}
-          />
-        </div>
-        <div className="mb-3">
-          <div className="flex justify-between items-center mb-2 pr-2">
-            <span className="text-lg font-medium">Health overview</span>
-            <DropdownStandaloneWrapper
-              className="w-48"
-              paramKey="timeRange"
-              dropdownElem={<TimeRange name="time-range" />}
-              defaultValue={timeRange ?? timeRanges[1].value}
-              name="timeRange"
+              }
             />
           </div>
-          <div className="w-full h-52 overflow-visible">
-            <Suspense fallback={<div>Loading..</div>}>
-              <CanaryStatusChart timeRange={timeRange} check={validCheck} />
-            </Suspense>
+          <div className="mb-3">
+            <div className="flex justify-between items-center mb-2 pr-2">
+              <span className="text-lg font-medium">Health overview</span>
+              <DropdownStandaloneWrapper
+                className="w-48"
+                paramKey="timeRange"
+                dropdownElem={<TimeRange name="time-range" />}
+                defaultValue={timeRange ?? timeRanges[1].value}
+                name="timeRange"
+              />
+            </div>
+            <div className="w-full h-52 overflow-visible">
+              <Suspense fallback={<div>Loading..</div>}>
+                <CanaryStatusChart timeRange={timeRange} check={check} />
+              </Suspense>
+            </div>
           </div>
         </div>
+        <PopupTabs
+          shareHeight={false}
+          style={{
+            flexDirection: "column",
+            overflowY: "hidden"
+          }}
+          className="flex-1 flex"
+          contentStyle={{
+            marginTop: "-1px",
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "hidden",
+            overflowX: "hidden",
+            height: "100%"
+          }}
+          tabs={{
+            statusHistory: {
+              label: "Status history",
+              content: (
+                <div
+                  key="status-history"
+                  className={`border border-b-0 border-gray-300 bg-white overflow-y-auto flex flex-col flex-1 relative -mb-px ${mixins.appleScrollbar}`}
+                >
+                  <StatusHistory timeRange={timeRange} check={check} />
+                </div>
+              ),
+              class:
+                "flex-1 flex flex-col overflow-y-hidden border-b h-full border-gray-300"
+            },
+            specs: {
+              label: "Spec",
+              content: <CanaryCheckDetailsSpecTab check={check} />,
+              class: `flex-1 flex flex-col overflow-y-auto  border border-gray-300 ${mixins.appleScrollbar}`
+            }
+          }}
+        />
       </div>
-      <PopupTabs
-        shareHeight={false}
-        style={{
-          flexDirection: "column",
-          overflowY: "hidden"
-        }}
-        className="flex-1 flex"
-        contentStyle={{
-          marginTop: "-1px",
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "hidden",
-          overflowX: "hidden",
-          height: "100%"
-        }}
-        tabs={{
-          statusHistory: {
-            label: "Status history",
-            content: (
-              <div
-                key="status-history"
-                className={`border border-b-0 border-gray-300 bg-white overflow-y-auto flex flex-col flex-1 relative -mb-px ${mixins.appleScrollbar}`}
-              >
-                <StatusHistory timeRange={timeRange} check={validCheck} />
-              </div>
-            ),
-            class:
-              "flex-1 flex flex-col overflow-y-hidden border-b h-full border-gray-300"
-          },
-          specs: {
-            label: "Spec",
-            content: <CanaryCheckDetailsSpecTab check={validCheck} />,
-            class: `flex-1 flex flex-col overflow-y-auto  border border-gray-300 ${mixins.appleScrollbar}`
-          }
-        }}
-      />
-    </div>
+    </>
   );
 }
diff --git a/src/components/Canary/CanaryPopup/CheckLabels.tsx b/src/components/Canary/CanaryPopup/CheckLabels.tsx
index cc9b62cf92..abf3233bc4 100644
--- a/src/components/Canary/CanaryPopup/CheckLabels.tsx
+++ b/src/components/Canary/CanaryPopup/CheckLabels.tsx
@@ -64,6 +64,8 @@ export default function CheckLabels({ check }: Props) {
                   className="bg-blue-100 text-blue-800"
                   key={item.key}
                   tag={item}
+                  keyClassName="text-gray-500"
+                  valueClassName="text-gray-800"
                 />
               ))}
             </div>
@@ -83,6 +85,8 @@ export default function CheckLabels({ check }: Props) {
               tags={checkLabels}
               minimumItemsToShow={checkLabels.length}
               childClassName="bg-blue-100 text-blue-800"
+              keyClassName="text-gray-500"
+              valueClassName="text-gray-800"
             />
           </div>
         </div>
diff --git a/src/components/Canary/CanaryPopup/CheckStat.tsx b/src/components/Canary/CanaryPopup/CheckStat.tsx
index eabf4338d3..41fbe5057d 100644
--- a/src/components/Canary/CanaryPopup/CheckStat.tsx
+++ b/src/components/Canary/CanaryPopup/CheckStat.tsx
@@ -26,7 +26,9 @@ export function CheckStat({
       className={`flex flex-col ${containerClassName} ${className}`}
       {...rest}
     >
-      <div className="text-sm font-medium text-gray-500">{title}</div>
+      {title && (
+        <div className="text-sm font-medium text-gray-500">{title}</div>
+      )}
       <div className={`flex ${valueContainerClassName}`}>
         <span className={`text-4xl font-bold ${valueClass}`}>{value}</span>
         {append}
diff --git a/src/components/Canary/CanaryPopup/CheckTitle.tsx b/src/components/Canary/CanaryPopup/CheckTitle.tsx
index e87baf28fa..a5160633a7 100644
--- a/src/components/Canary/CanaryPopup/CheckTitle.tsx
+++ b/src/components/Canary/CanaryPopup/CheckTitle.tsx
@@ -1,10 +1,9 @@
 import clsx from "clsx";
-import React, { useMemo } from "react";
+import React from "react";
 import { HealthCheck } from "../../../api/types/health";
-import { usePrevious } from "../../../utils/hooks";
+import AgentName from "../../Agents/AgentName";
 import { Badge } from "../../Badge";
 import { Icon } from "../../Icon";
-import AgentName from "../../Agents/AgentName";
 
 type CheckTitleProps = Omit<React.HTMLProps<HTMLDivElement>, "size"> & {
   check?: Partial<HealthCheck>;
@@ -17,13 +16,10 @@ export function CheckTitle({
   size = "large",
   ...rest
 }: CheckTitleProps) {
-  const prevCheck = usePrevious(check);
-  const validCheck = check || prevCheck;
-
   // todo: this is a hack to get the agent id from the check, before it gets
   // update to a check without the agent id
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const agentID = useMemo(() => check?.agent_id, []);
+  const agentID = check?.agent_id;
+  const namespace = check?.namespace;
 
   return (
     <div className={`flex flex-row items-center ${className}`} {...rest}>
@@ -34,49 +30,56 @@ export function CheckTitle({
         )}
       >
         <Icon
-          name={validCheck?.icon || validCheck?.type}
+          name={check?.icon || check?.type}
           className={size === "large" ? "w-14 h-auto" : "w-6 h-auto"}
         />
       </div>
       <div
         className={clsx(
-          "flex flex-1 flex-row whitespace-nowrap overflow-ellipsis overflow-hidden",
+          "flex flex-1 flex-row whitespace-nowrap overflow-ellipsis overflow-hidden gap-2 ",
           size === "large" ? " mr-10" : ""
         )}
       >
         <div className="flex flex-row flex-1 overflow-x-auto items-center">
           <span
-            title={validCheck?.name}
+            title={check?.name}
             className={clsx(
               "text-gray-800 flex-1 font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden pr-4",
               size === "large" ? "text-2xl" : ""
             )}
           >
-            {validCheck?.name}
+            {check?.name}
           </span>{" "}
           {size === "large" && (
             <span
               className="hidden sm:block "
-              title={`Namespace for ${validCheck?.name}`}
+              title={`Namespace for ${check?.name}`}
               style={{ paddingTop: "1px" }}
             >
-              <Badge text={validCheck?.namespace ?? ""} />
+              <Badge text={check?.namespace ?? ""} />
             </span>
           )}
         </div>
         <div
-          title={`Endpoint for ${validCheck?.name}`}
+          title={`Endpoint for ${check?.name}`}
           className="text-sm text-gray-400 mt-0.5 overflow-x-hidden overflow-ellipsis break-all"
         >
-          {validCheck?.endpoint}
+          {check?.endpoint}
         </div>
-        <span
-          className="block sm:hidden mt-2"
-          title={`Namespace for ${validCheck?.name}`}
+        <div
+          className="flex items-center"
+          title={`Namespace for ${check?.name}`}
         >
-          <Badge text={validCheck?.namespace ?? ""} />
-        </span>
-        <AgentName agentId={agentID} />
+          <Badge
+            colorClass="bg-blue-100 text-blue-500"
+            text={namespace}
+            size="sm"
+          />
+        </div>
+        <AgentName
+          className="bg-blue-100 py-1 px-2 text-blue-500"
+          agentId={agentID}
+        />
       </div>
     </div>
   );
diff --git a/src/components/Canary/CanaryPopup/Utils/calculateDefaultTimeRangeValue.tsx b/src/components/Canary/CanaryPopup/Utils/calculateDefaultTimeRangeValue.tsx
new file mode 100644
index 0000000000..fe785979cb
--- /dev/null
+++ b/src/components/Canary/CanaryPopup/Utils/calculateDefaultTimeRangeValue.tsx
@@ -0,0 +1,100 @@
+import dayjs from "dayjs";
+import { HealthCheck } from "../../../../api/types/health";
+
+export function calculateDefaultTimeRangeValue(
+  validCheck: Pick<Partial<HealthCheck>, "lastRuntime"> | undefined
+) {
+  // get time passed since last runtime
+  const lapsedTime = dayjs(validCheck?.lastRuntime!).diff(dayjs(), "minute");
+  console.log("lapsedTime", lapsedTime);
+  // if passed time is less than 1 hour, use 1 hour time range
+  if (lapsedTime < 60) {
+    return "1h";
+  }
+  // if passed time is less than 3 hours, use 3 hours time range
+  if (lapsedTime < 180) {
+    return "3h";
+  }
+
+  // if passed time is less than 6 hours, use 6 hours time range
+  if (lapsedTime < 360) {
+    return "6h";
+  }
+
+  // if passed time is less than 12 hours, use 12 hours time range
+  if (lapsedTime < 720) {
+    return "12h";
+  }
+
+  // if passed time is less than 1 day, use 1 day time range
+  if (lapsedTime < 1440) {
+    return "1d";
+  }
+
+  // if passed time is less than 2 days, use 2 days time range
+  if (lapsedTime < 2880) {
+    return "2d";
+  }
+
+  // if passed time is less than 3 days, use 3 days time range
+  if (lapsedTime < 4320) {
+    return "3d";
+  }
+
+  // if passed time is less than 1 week, use 1 week time range
+  if (lapsedTime < 10080) {
+    return "1w";
+  }
+
+  // if passed time is less than 2 weeks, use 2 weeks time range
+  if (lapsedTime < 20160) {
+    return "2w";
+  }
+
+  // if passed time is less than 3 weeks, use 3 weeks time range
+  if (lapsedTime < 30240) {
+    return "3w";
+  }
+
+  // if passed time is less than 1 month, use 1 month time range
+  if (lapsedTime < 43200) {
+    return "1mo";
+  }
+
+  // if passed time is less than 2 months, use 2 months time range
+  if (lapsedTime < 86400) {
+    return "2mo";
+  }
+
+  // if passed time is less than 3 months, use 3 months time range
+  if (lapsedTime < 129600) {
+    return "3mo";
+  }
+
+  // if passed time is less than 6 months, use 6 months time range
+  if (lapsedTime < 259200) {
+    return "6mo";
+  }
+
+  // if passed time is less than 1 year, use 1 year time range
+  if (lapsedTime < 525600) {
+    return "1y";
+  }
+
+  // if passed time is less than 2 years, use 2 years time range
+  if (lapsedTime < 1051200) {
+    return "2y";
+  }
+
+  // if passed time is less than 3 years, use 3 years time range
+  if (lapsedTime < 1576800) {
+    return "3y";
+  }
+
+  // if passed time is more than 3 years, use 3 years time range
+  if (lapsedTime > 1576800) {
+    return "5y";
+  }
+
+  return "1h";
+}
diff --git a/src/components/Canary/HealthCheckEdit/index.tsx b/src/components/Canary/HealthCheckEdit/index.tsx
index 45a58b8eb7..b7d5f8cbcb 100644
--- a/src/components/Canary/HealthCheckEdit/index.tsx
+++ b/src/components/Canary/HealthCheckEdit/index.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { FaEdit } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { useCanaryCheckItemQuery } from "../../../api/query-hooks";
+import { SchemaResourceI } from "../../../api/schemaResources";
 import {
   getComponentTemplate,
   getTopology
@@ -11,7 +12,7 @@ import { Icon } from "../../Icon";
 import TextSkeletonLoader from "../../SkeletonLoader/TextSkeletonLoader";
 
 type HealthCheckEditComponentProps = {
-  check: Pick<HealthCheck, "source">;
+  check: Pick<SchemaResourceI, "source">;
 };
 
 function HealthCheckEditComponent({ check }: HealthCheckEditComponentProps) {
diff --git a/src/components/Canary/minimal.tsx b/src/components/Canary/minimal.tsx
index 05851b2d33..792b77faee 100644
--- a/src/components/Canary/minimal.tsx
+++ b/src/components/Canary/minimal.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useGetCheckDetails } from "../../api/query-hooks/health";
 import { getCanaries } from "../../api/services/topology";
 import { EvidenceType } from "../../api/types/evidence";
 import { HealthCheck } from "../../api/types/health";
@@ -42,6 +43,8 @@ const MinimalCanaryFC = ({
   const [selectedCheck, setSelectedCheck] = useState<Partial<HealthCheck>>();
   const [openChecksModal, setOpenChecksModal] = useState(false);
 
+  const { data: check } = useGetCheckDetails(selectedCheck?.id);
+
   const handleCheckSelect = useCallback(
     (check: Pick<HealthCheck, "id">) => {
       setSelectedCheck({
@@ -108,16 +111,16 @@ const MinimalCanaryFC = ({
         />
       )}
       <Modal
-        open={openChecksModal}
+        open={openChecksModal && !!check}
         onClose={() => clearCheck()}
-        title={<CheckTitle check={selectedCheck} size="" />}
+        title={<CheckTitle check={check ?? selectedCheck} size="" />}
         size="full"
         containerClassName="flex flex-col h-full overflow-y-auto"
         bodyClass="flex flex-col flex-1 overflow-y-auto"
       >
         <div className="flex flex-col flex-1 overflow-y-auto px-4 py-4 mb-16">
           <CheckDetails
-            check={selectedCheck}
+            check={check}
             timeRange={timeRange}
             className={`flex flex-col overflow-y-auto flex-1`}
           />
diff --git a/src/components/TagList/TagList.tsx b/src/components/TagList/TagList.tsx
index ba319bd119..fd72e5c6f8 100644
--- a/src/components/TagList/TagList.tsx
+++ b/src/components/TagList/TagList.tsx
@@ -40,6 +40,8 @@ type TagListProps = React.HTMLProps<HTMLDivElement> & {
   tags: TagEntry[];
   minimumItemsToShow?: number;
   childClassName?: string;
+  keyClassName?: string;
+  valueClassName?: string;
 };
 
 type TagItemProps = {
@@ -49,12 +51,16 @@ type TagItemProps = {
     key: string;
     value: string;
   };
+  keyClassName?: string;
+  valueClassName?: string;
 };
 
 export function TagItem({
   tag: { key, value },
   containerWidth,
-  className = "bg-gray-200 text-gray-600 mx-1"
+  className = "bg-gray-200 text-gray-600 mx-1",
+  keyClassName = "",
+  valueClassName = "font-light"
 }: TagItemProps) {
   return (
     <div
@@ -65,8 +71,8 @@ export function TagItem({
         className="flex flex-row space-x-1 font-semibold p-[0.2rem]  text-xs whitespace-nowrap break-inside-avoid-column"
         style={containerWidth ? { width: containerWidth } : {}}
       >
-        <span className="inline">{key}:</span>
-        <span className="inline font-light">{value}</span>
+        <span className={keyClassName}>{key}:</span>
+        <span className={valueClassName}>{value}</span>
       </div>
     </div>
   );
@@ -77,6 +83,8 @@ export function TagList({
   minimumItemsToShow = 1,
   className = `flex flex-row text-left items-start flex-1`,
   childClassName = "bg-gray-200 text-gray-600 mx-1",
+  keyClassName = "",
+  valueClassName = "font-light",
   ...rest
 }: TagListProps) {
   const [showAll, setShowAll] = useState(false);
@@ -142,6 +150,8 @@ export function TagList({
             tag={{ key, value }}
             className={childClassName}
             containerWidth={containerWidth}
+            keyClassName={keyClassName}
+            valueClassName={valueClassName}
           />
         ))}
       </div>