diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/CodeSnippetBlock.tsx b/src/pages/AdvancedSearch/CodeSnippetBlock/CodeSnippetBlock.tsx
index 27a43bd03..d30bcddd1 100644
--- a/src/pages/AdvancedSearch/CodeSnippetBlock/CodeSnippetBlock.tsx
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/CodeSnippetBlock.tsx
@@ -2,30 +2,19 @@ import {
   CodeSnippet,
   CodeSnippetBlockAppearance,
 } from "@canonical/react-components";
-import { isValid, parseISO } from "date-fns";
 import { Highlight } from "prism-react-renderer";
 import Prism from "prismjs/components/prism-core";
-import { useCallback, useState } from "react";
-import type { KeyPath } from "react-json-tree";
-import {
-  JSONTree,
-  type LabelRenderer,
-  type ValueRenderer,
-} from "react-json-tree";
+import { useState } from "react";
+import { JSONTree } from "react-json-tree";
 import "prismjs/components/prism-json";
 
-import AppLink from "components/AppLink";
-import MachineLink from "components/MachineLink";
-import Status from "components/Status";
-import UnitLink from "components/UnitLink";
-import { formatFriendlyDateToNow } from "components/utils";
 import { type CrossModelQueryResponse } from "juju/jimm/JIMMV4";
-import type { CrossModelQueryState } from "store/juju/types";
-import { ModelTab } from "urls";
 
-import ResultsModelLink from "../ResultsModelLink";
 import { CodeSnippetView } from "../types";
 
+import Label from "./Label";
+import Value from "./Value";
+
 type Props = {
   className: string;
   title: string;
@@ -54,226 +43,11 @@ const THEME = {
   base0F: DEFAULT_THEME_COLOUR,
 };
 
-const getTab = (key: string) => {
-  switch (key) {
-    case "applications":
-    case "offers":
-      return ModelTab.APPS;
-    case "machines":
-      return ModelTab.MACHINES;
-    case "relations":
-      return ModelTab.INTEGRATIONS;
-    default:
-      return;
-  }
-};
-
-// Use a key path to get the parent object that contains the current item from the results data.
-const getCurrentObject = (
-  keyPath: KeyPath,
-  results: CrossModelQueryState["results"],
-) =>
-  keyPath
-    // Ignore the first item, as we want to get the parent object.
-    .slice(1, keyPath.length)
-    // The first item in the key path is the current parameter and then has
-    // the parents in ascending order (e.g. [current, parent, grandparent]),
-    // but we need to follow the path from the outside in.
-    .reverse()
-    // This reduce follows the keypath by returning the next child until it
-    // finally reaches the end.
-    .reduce<object | null>((current, key) => {
-      // Check that the current item in the path is a valid object.
-      if (current && typeof current === "object" && key in current) {
-        const inner = current[key as keyof typeof current];
-        // Check that the next child is a valid object.
-        if (typeof inner === "object") {
-          // Store the next child.
-          return inner;
-        }
-      }
-      // Handle the case where the key path does not match the object that was provided.
-      return null;
-    }, results);
-
-const labelRenderer: LabelRenderer = (keyPath) => {
-  const currentKey = keyPath[0];
-  const parentKey = keyPath.length >= 2 ? keyPath[1] : null;
-  // The last item in keyPath should always be the model UUID.
-  const modelUUID = keyPath[keyPath.length - 1];
-  if (!modelUUID || typeof modelUUID !== "string") {
-    // If this is not a value that can be displayed then display "[none]" instead.
-    return <span className="u-text--muted">[none]:</span>;
-  }
-  // If this is a top level key then it is a model UUID.
-  if (keyPath.length === 1) {
-    return (
-      <ResultsModelLink
-        replaceLabel
-        title={`UUID: ${modelUUID}`}
-        uuid={modelUUID}
-      />
-    );
-  }
-  // Link units[unit-key] to unit in model details.
-  if (parentKey === "units" && typeof currentKey === "string") {
-    const [appName, unitId] = currentKey.split("/");
-    return (
-      <UnitLink uuid={modelUUID} appName={appName} unitId={unitId}>
-        {currentKey}:
-      </UnitLink>
-    );
-  }
-  // Link machines[machine-key] to machine in model details.
-  if (parentKey === "machines" && typeof currentKey === "string") {
-    return (
-      <MachineLink uuid={modelUUID} machineId={currentKey}>
-        {currentKey}:
-      </MachineLink>
-    );
-  }
-  // Link offers[app-key] and applications[app-key] to app in model details.
-  if (
-    (parentKey === "offers" || parentKey === "applications") &&
-    typeof currentKey === "string"
-  ) {
-    return (
-      <AppLink uuid={modelUUID} appName={currentKey}>
-        {currentKey}:
-      </AppLink>
-    );
-  }
-  switch (currentKey) {
-    case "applications":
-    case "machines":
-    case "offers":
-    case "relations":
-    case "model":
-      return (
-        <ResultsModelLink uuid={modelUUID} view={getTab(currentKey)}>
-          {currentKey}
-        </ResultsModelLink>
-      );
-    // Display something when the key is a blank string.
-    case "":
-      return <span className="u-text--muted">[none]:</span>;
-    default:
-      return <>{currentKey}:</>;
-  }
-};
-
 const CodeSnippetBlock = ({ className, title, code }: Props): JSX.Element => {
   const [codeSnippetView, setCodeSnippetView] = useState<CodeSnippetView>(
     CodeSnippetView.TREE,
   );
 
-  const valueRenderer = useCallback<ValueRenderer>(
-    (valueAsString, value, ...keyPath) => {
-      const currentKey = keyPath[0];
-      const parentKey = keyPath.length >= 2 ? keyPath[1] : null;
-      const grandparentKey = keyPath.length >= 3 ? keyPath[2] : null;
-      const modelUUID = keyPath[keyPath.length - 1];
-      // Match a status of the following structure:
-      //   "application-status": {
-      //     "current": "unknown",
-      //     ...
-      //   }
-      if (
-        currentKey === "current" &&
-        typeof parentKey === "string" &&
-        parentKey.endsWith("-status") &&
-        typeof value === "string" &&
-        typeof valueAsString === "string"
-      ) {
-        return <Status status={value}>{valueAsString}</Status>;
-      }
-      // Display date values as tooltip with relative date.
-      if (typeof value === "string" && isValid(parseISO(value))) {
-        return (
-          <>
-            {value}{" "}
-            <span className="u-text--muted">
-              ({formatFriendlyDateToNow(value)})
-            </span>
-          </>
-        );
-      }
-      // Match charms with the following structure:
-      //   "charm": "mysql",
-      //   "charm-channel": "8.0/stable",
-      //   "charm-name": "mysql",
-      //   "charm-origin": "charmhub",
-      if (currentKey === "charm" && typeof valueAsString === "string") {
-        const currentObject = getCurrentObject(keyPath, code);
-        if (
-          currentObject &&
-          "charm-name" in currentObject &&
-          currentObject["charm-name"] &&
-          "charm-origin" in currentObject &&
-          currentObject["charm-origin"] === "charmhub"
-        ) {
-          let charmURL = `https://charmhub.io/${currentObject["charm-name"]}`;
-          if (
-            "charm-channel" in currentObject &&
-            currentObject["charm-channel"]
-          ) {
-            charmURL += `?channel=${currentObject["charm-channel"]}`;
-          }
-          return (
-            <a href={charmURL} target="_blank" rel="noopener noreferrer">
-              {valueAsString}
-            </a>
-          );
-        }
-      }
-      // Link units[unit-key].machine to machine in model details.
-      if (
-        grandparentKey === "units" &&
-        currentKey === "machine" &&
-        typeof valueAsString === "string" &&
-        typeof value === "string" &&
-        typeof modelUUID === "string"
-      ) {
-        return (
-          <MachineLink uuid={modelUUID} machineId={value}>
-            {valueAsString}
-          </MachineLink>
-        );
-      }
-      // Link relations[key][app-key] and 'subordinate-to'[value]
-      // to app in model details.
-      if (
-        (grandparentKey === "relations" || parentKey === "subordinate-to") &&
-        typeof valueAsString === "string" &&
-        typeof value === "string" &&
-        typeof modelUUID === "string"
-      ) {
-        return (
-          <AppLink uuid={modelUUID} appName={value}>
-            {valueAsString}
-          </AppLink>
-        );
-      }
-      // Link ‘application-endpoints’[app-key].url to the app in the
-      // offer’s model details.
-      if (
-        grandparentKey === "application-endpoints" &&
-        currentKey === "url" &&
-        typeof valueAsString === "string" &&
-        typeof parentKey === "string" &&
-        typeof modelUUID === "string"
-      ) {
-        return (
-          <AppLink uuid={modelUUID} appName={parentKey}>
-            {valueAsString}
-          </AppLink>
-        );
-      }
-      return <>{valueAsString}</>;
-    },
-    [code],
-  );
-
   return (
     <Highlight
       code={JSON.stringify(code, null, 2)}
@@ -312,12 +86,19 @@ const CodeSnippetBlock = ({ className, title, code }: Props): JSX.Element => {
                   <JSONTree
                     data={code}
                     hideRoot
-                    labelRenderer={labelRenderer}
-                    shouldExpandNodeInitially={(keyPath, data, level) =>
+                    labelRenderer={(keyPath) => <Label keyPath={keyPath} />}
+                    shouldExpandNodeInitially={(_keyPath, _data, level) =>
                       level <= 2
                     }
                     theme={THEME}
-                    valueRenderer={valueRenderer}
+                    valueRenderer={(valueAsString, value, ...keyPath) => (
+                      <Value
+                        valueAsString={valueAsString}
+                        value={value}
+                        keyPath={keyPath}
+                        code={code}
+                      />
+                    )}
                   />
                 ),
               dropdowns: [
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.test.tsx b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.test.tsx
new file mode 100644
index 000000000..f0ff63c66
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.test.tsx
@@ -0,0 +1,218 @@
+import { screen } from "@testing-library/react";
+
+import type { RootState } from "store/store";
+import { jujuStateFactory, rootStateFactory } from "testing/factories";
+import { modelListInfoFactory } from "testing/factories/juju/juju";
+import { renderComponent } from "testing/utils";
+import urls from "urls";
+
+import Label from "./Label";
+import { getTab } from "./utils";
+
+describe("Label", () => {
+  let state: RootState;
+
+  beforeEach(() => {
+    state = rootStateFactory.withGeneralConfig().build({
+      juju: jujuStateFactory.build({
+        models: {
+          abc123: modelListInfoFactory.build({
+            uuid: "abc123",
+            name: "test-model",
+            ownerTag: "user-eggman@external",
+          }),
+        },
+      }),
+    });
+  });
+
+  it("should display '[none]:' if invalid key path is passed", () => {
+    renderComponent(<Label keyPath={[]} />);
+    expect(screen.getByText("[none]:")).toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("should display results model link for a model UUID", () => {
+    renderComponent(<Label keyPath={["abc123"]} />, { state });
+    const link = screen.getByRole("link", {
+      name: "eggman@external/test-model",
+    });
+    expect(link).toHaveAttribute(
+      "href",
+      urls.model.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+      }),
+    );
+    expect(link).toHaveAttribute("title", "UUID: abc123");
+  });
+
+  it("should display unit link for a link", () => {
+    renderComponent(
+      <Label
+        keyPath={[
+          "easyrsa/0",
+          "units",
+          "application_0",
+          "applications",
+          0,
+          "abc123",
+        ]}
+      />,
+      { state },
+    );
+    expect(screen.getByRole("link", { name: "easyrsa/0:" })).toHaveAttribute(
+      "href",
+      urls.model.unit({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "easyrsa",
+        unitId: "0",
+      }),
+    );
+  });
+
+  it("should display machine link for a machine", () => {
+    renderComponent(
+      <Label
+        keyPath={[
+          "easyrsa/0",
+          "units",
+          "application_0",
+          "applications",
+          0,
+          "abc123",
+        ]}
+      />,
+      { state },
+    );
+    expect(screen.getByRole("link", { name: "easyrsa/0:" })).toHaveAttribute(
+      "href",
+      urls.model.unit({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "easyrsa",
+        unitId: "0",
+      }),
+    );
+  });
+
+  it("should display app link for an offer", () => {
+    renderComponent(<Label keyPath={["offer_0", "offers", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "offer_0:" })).toHaveAttribute(
+      "href",
+      urls.model.app.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "offer_0",
+      }),
+    );
+  });
+
+  it("should display app link for an application", () => {
+    renderComponent(
+      <Label keyPath={["application_0", "applications", 0, "abc123"]} />,
+      {
+        state,
+      },
+    );
+    expect(
+      screen.getByRole("link", { name: "application_0:" }),
+    ).toHaveAttribute(
+      "href",
+      urls.model.app.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "application_0",
+      }),
+    );
+  });
+
+  it("should display results model link for applications", () => {
+    renderComponent(<Label keyPath={["applications", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "applications:" })).toHaveAttribute(
+      "href",
+      urls.model.tab({
+        userName: "eggman@external",
+        modelName: "test-model",
+        tab: getTab("applications")!,
+      }),
+    );
+  });
+
+  it("should display results model link for machines", () => {
+    renderComponent(<Label keyPath={["machines", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "machines:" })).toHaveAttribute(
+      "href",
+      urls.model.tab({
+        userName: "eggman@external",
+        modelName: "test-model",
+        tab: getTab("machines")!,
+      }),
+    );
+  });
+
+  it("should display results model link for offers", () => {
+    renderComponent(<Label keyPath={["offers", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "offers:" })).toHaveAttribute(
+      "href",
+      urls.model.tab({
+        userName: "eggman@external",
+        modelName: "test-model",
+        tab: getTab("offers")!,
+      }),
+    );
+  });
+
+  it("should display results model link for relations", () => {
+    renderComponent(<Label keyPath={["relations", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "relations:" })).toHaveAttribute(
+      "href",
+      urls.model.tab({
+        userName: "eggman@external",
+        modelName: "test-model",
+        tab: getTab("relations")!,
+      }),
+    );
+  });
+
+  it("should display results model link for model", () => {
+    renderComponent(<Label keyPath={["model", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByRole("link", { name: "model:" })).toHaveAttribute(
+      "href",
+      urls.model.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+      }),
+    );
+  });
+
+  it("should display '[none]:' if the current key is an empty string", () => {
+    renderComponent(<Label keyPath={["", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByText("[none]:")).toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("should display the current key for all other cases", () => {
+    renderComponent(<Label keyPath={["something else", 0, "abc123"]} />, {
+      state,
+    });
+    expect(screen.getByText("something else:")).toBeInTheDocument();
+    expect(screen.queryByText("[none]:")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.tsx b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.tsx
new file mode 100644
index 000000000..a49cd3e24
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/Label.tsx
@@ -0,0 +1,80 @@
+import type { KeyPath, LabelRenderer } from "react-json-tree";
+
+import AppLink from "components/AppLink";
+import MachineLink from "components/MachineLink";
+import UnitLink from "components/UnitLink";
+import ResultsModelLink from "pages/AdvancedSearch/ResultsModelLink";
+
+import { getTab } from "./utils";
+
+type Props = {
+  keyPath: KeyPath;
+};
+
+const Label = ({ keyPath }: Props): ReturnType<LabelRenderer> => {
+  const currentKey = keyPath[0];
+  const parentKey = keyPath.length >= 2 ? keyPath[1] : null;
+  // The last item in keyPath should always be the model UUID.
+  const modelUUID = keyPath[keyPath.length - 1];
+  if (!modelUUID || typeof modelUUID !== "string") {
+    // If this is not a value that can be displayed then display "[none]" instead.
+    return <span className="u-text--muted">[none]:</span>;
+  }
+  // If this is a top level key then it is a model UUID.
+  if (keyPath.length === 1) {
+    return (
+      <ResultsModelLink
+        replaceLabel
+        title={`UUID: ${modelUUID}`}
+        uuid={modelUUID}
+      />
+    );
+  }
+  // Link units[unit-key] to unit in model details.
+  if (parentKey === "units" && typeof currentKey === "string") {
+    const [appName, unitId] = currentKey.split("/");
+    return (
+      <UnitLink uuid={modelUUID} appName={appName} unitId={unitId}>
+        {currentKey}:
+      </UnitLink>
+    );
+  }
+  // Link machines[machine-key] to machine in model details.
+  if (parentKey === "machines" && typeof currentKey === "string") {
+    return (
+      <MachineLink uuid={modelUUID} machineId={currentKey}>
+        {currentKey}:
+      </MachineLink>
+    );
+  }
+  // Link offers[app-key] and applications[app-key] to app in model details.
+  if (
+    (parentKey === "offers" || parentKey === "applications") &&
+    typeof currentKey === "string"
+  ) {
+    return (
+      <AppLink uuid={modelUUID} appName={currentKey}>
+        {currentKey}:
+      </AppLink>
+    );
+  }
+  switch (currentKey) {
+    case "applications":
+    case "machines":
+    case "offers":
+    case "relations":
+    case "model":
+      return (
+        <ResultsModelLink uuid={modelUUID} view={getTab(currentKey)}>
+          {currentKey}
+        </ResultsModelLink>
+      );
+    // Display something when the key is a blank string.
+    case "":
+      return <span className="u-text--muted">[none]:</span>;
+    default:
+      return <>{currentKey}:</>;
+  }
+};
+
+export default Label;
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Label/index.ts b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/index.ts
new file mode 100644
index 000000000..8c8faebf8
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/index.ts
@@ -0,0 +1 @@
+export { default } from "./Label";
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Label/utils.ts b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/utils.ts
new file mode 100644
index 000000000..7fe047884
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Label/utils.ts
@@ -0,0 +1,15 @@
+import { ModelTab } from "urls";
+
+export const getTab = (key: string) => {
+  switch (key) {
+    case "applications":
+    case "offers":
+      return ModelTab.APPS;
+    case "machines":
+      return ModelTab.MACHINES;
+    case "relations":
+      return ModelTab.INTEGRATIONS;
+    default:
+      return;
+  }
+};
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.test.tsx b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.test.tsx
new file mode 100644
index 000000000..418f28552
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.test.tsx
@@ -0,0 +1,249 @@
+import { screen, within } from "@testing-library/react";
+
+import { jujuStateFactory, rootStateFactory } from "testing/factories";
+import {
+  crossModelQueryApplicationFactory,
+  crossModelQueryFactory,
+} from "testing/factories/juju/jimm";
+import { modelListInfoFactory } from "testing/factories/juju/juju";
+import { renderComponent } from "testing/utils";
+import urls from "urls";
+
+import Value from "./Value";
+
+describe("Value", () => {
+  it("should display status", () => {
+    renderComponent(
+      <Value
+        valueAsString='"active"'
+        value="active"
+        keyPath={["application-status", "current", 0, "abc123"]}
+        code={{}}
+      />,
+    );
+    expect(screen.getByText('"active"')).toBeInTheDocument();
+  });
+
+  it("should display date as tooltip with relative date", () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 1);
+    renderComponent(
+      <Value
+        valueAsString={`"${date.toISOString()}"`}
+        value={date.toISOString()}
+        keyPath={["date", 0, "abc123"]}
+        code={{}}
+      />,
+    );
+    expect(
+      within(screen.getByText(date.toISOString())).getByText("1 day ago", {
+        exact: false,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("should display link to charmhub", () => {
+    renderComponent(
+      <Value
+        valueAsString='"cs:~calico"'
+        value="cs:~calico"
+        keyPath={["charm", "calico", "applications", 0, "abc123"]}
+        code={{
+          abc123: [
+            crossModelQueryFactory.build({
+              applications: {
+                calico: crossModelQueryApplicationFactory.build({
+                  charm: "cs:~calico",
+                  "charm-channel": undefined,
+                  "charm-name": "calico",
+                  "charm-origin": "charmhub",
+                }),
+              },
+            }),
+          ],
+        }}
+      />,
+    );
+    expect(screen.getByRole("link", { name: '"cs:~calico"' })).toHaveAttribute(
+      "href",
+      "https://charmhub.io/calico",
+    );
+  });
+
+  it("should display link to charmhub with channels", () => {
+    renderComponent(
+      <Value
+        valueAsString='"cs:~calico"'
+        value="cs:~calico"
+        keyPath={["charm", "calico", "applications", 0, "abc123"]}
+        code={{
+          abc123: [
+            crossModelQueryFactory.build({
+              applications: {
+                calico: crossModelQueryApplicationFactory.build({
+                  charm: "cs:~calico",
+                  "charm-channel": "8.0/stable",
+                  "charm-name": "calico",
+                  "charm-origin": "charmhub",
+                }),
+              },
+            }),
+          ],
+        }}
+      />,
+    );
+    expect(screen.getByRole("link", { name: '"cs:~calico"' })).toHaveAttribute(
+      "href",
+      "https://charmhub.io/calico?channel=8.0/stable",
+    );
+  });
+
+  it("should display linked units[unit-key].machine to machine", () => {
+    const state = rootStateFactory.withGeneralConfig().build({
+      juju: jujuStateFactory.build({
+        models: {
+          abc123: modelListInfoFactory.build({
+            uuid: "abc123",
+            name: "test-model",
+            ownerTag: "user-eggman@external",
+          }),
+        },
+      }),
+    });
+
+    renderComponent(
+      <Value
+        valueAsString='"0"'
+        value="0"
+        keyPath={["machine", "easyrsa/0", "units", 0, "abc123"]}
+        code={{}}
+      />,
+      { state },
+    );
+    expect(screen.getByRole("link", { name: '"0"' })).toHaveAttribute(
+      "href",
+      urls.model.machine({
+        userName: "eggman@external",
+        modelName: "test-model",
+        machineId: "0",
+      }),
+    );
+  });
+
+  it("should display linked relations[key][app-key] to app", () => {
+    const state = rootStateFactory.withGeneralConfig().build({
+      juju: jujuStateFactory.build({
+        models: {
+          abc123: modelListInfoFactory.build({
+            uuid: "abc123",
+            name: "test-model",
+            ownerTag: "user-eggman@external",
+          }),
+        },
+      }),
+    });
+
+    renderComponent(
+      <Value
+        valueAsString='"slurmdbd"'
+        value="slurmdbd"
+        keyPath={["mock-app-key", "mock-key", "relations", 0, "abc123"]}
+        code={{}}
+      />,
+      { state },
+    );
+    expect(screen.getByRole("link", { name: '"slurmdbd"' })).toHaveAttribute(
+      "href",
+      urls.model.app.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "slurmdbd",
+      }),
+    );
+  });
+
+  it("should display linked 'subordinate-to'[value] to app", () => {
+    const state = rootStateFactory.withGeneralConfig().build({
+      juju: jujuStateFactory.build({
+        models: {
+          abc123: modelListInfoFactory.build({
+            uuid: "abc123",
+            name: "test-model",
+            ownerTag: "user-eggman@external",
+          }),
+        },
+      }),
+    });
+
+    renderComponent(
+      <Value
+        valueAsString='"slurmdbd"'
+        value="slurmdbd"
+        keyPath={["mock-value", "subordinate-to", 0, "abc123"]}
+        code={{}}
+      />,
+      { state },
+    );
+    expect(screen.getByRole("link", { name: '"slurmdbd"' })).toHaveAttribute(
+      "href",
+      urls.model.app.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "slurmdbd",
+      }),
+    );
+  });
+
+  it("should display linked 'application-endpoints'[app-key].url to app", () => {
+    const state = rootStateFactory.withGeneralConfig().build({
+      juju: jujuStateFactory.build({
+        models: {
+          abc123: modelListInfoFactory.build({
+            uuid: "abc123",
+            name: "test-model",
+            ownerTag: "user-eggman@external",
+          }),
+        },
+      }),
+    });
+
+    renderComponent(
+      <Value
+        valueAsString='"http://mock-url.com"'
+        value="http://mock-url.com"
+        keyPath={[
+          "url",
+          "mock-app-key",
+          "application-endpoints",
+          "mock-app-key",
+          "abc123",
+        ]}
+        code={{}}
+      />,
+      { state },
+    );
+    expect(
+      screen.getByRole("link", { name: '"http://mock-url.com"' }),
+    ).toHaveAttribute(
+      "href",
+      urls.model.app.index({
+        userName: "eggman@external",
+        modelName: "test-model",
+        appName: "mock-app-key",
+      }),
+    );
+  });
+
+  it("should display the value as string in all other cases", () => {
+    renderComponent(
+      <Value
+        valueAsString='"mock-value"'
+        value="mock-value"
+        keyPath={["mock-random-key", "abc123"]}
+        code={{}}
+      />,
+    );
+    expect(screen.getByText('"mock-value"')).toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.tsx b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.tsx
new file mode 100644
index 000000000..484f5e88e
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/Value.tsx
@@ -0,0 +1,152 @@
+import { isValid, parseISO } from "date-fns";
+import type { KeyPath, ValueRenderer } from "react-json-tree";
+
+import AppLink from "components/AppLink";
+import MachineLink from "components/MachineLink";
+import Status from "components/Status";
+import { formatFriendlyDateToNow } from "components/utils";
+import type { CrossModelQueryResponse } from "juju/jimm/JIMMV4";
+import type { CrossModelQueryState } from "store/juju/types";
+
+type Props = {
+  valueAsString: unknown;
+  value: unknown;
+  keyPath: KeyPath;
+  code: CrossModelQueryResponse["results"] | CrossModelQueryResponse["errors"];
+};
+
+// Use a key path to get the parent object that contains the current item from the results data.
+const getCurrentObject = (
+  keyPath: KeyPath,
+  results: CrossModelQueryState["results"],
+) =>
+  keyPath
+    // Ignore the first item, as we want to get the parent object.
+    .slice(1, keyPath.length)
+    // The first item in the key path is the current parameter and then has
+    // the parents in ascending order (e.g. [current, parent, grandparent]),
+    // but we need to follow the path from the outside in.
+    .reverse()
+    // This reduce follows the keypath by returning the next child until it
+    // finally reaches the end.
+    .reduce<object | null>((current, key) => {
+      // Check that the current item in the path is a valid object.
+      if (current && typeof current === "object" && key in current) {
+        const inner = current[key as keyof typeof current];
+        // Check that the next child is a valid object.
+        if (typeof inner === "object") {
+          // Store the next child.
+          return inner;
+        }
+      }
+      // Handle the case where the key path does not match the object that was provided.
+      return null;
+    }, results);
+
+const Value = ({
+  valueAsString,
+  value,
+  keyPath,
+  code,
+}: Props): ReturnType<ValueRenderer> => {
+  const currentKey = keyPath[0];
+  const parentKey = keyPath.length >= 2 ? keyPath[1] : null;
+  const grandparentKey = keyPath.length >= 3 ? keyPath[2] : null;
+  const modelUUID = keyPath[keyPath.length - 1];
+  // Match a status of the following structure:
+  //   "application-status": {
+  //     "current": "unknown",
+  //     ...
+  //   }
+  if (
+    currentKey === "current" &&
+    typeof parentKey === "string" &&
+    parentKey.endsWith("-status") &&
+    typeof value === "string" &&
+    typeof valueAsString === "string"
+  ) {
+    return <Status status={value}>{valueAsString}</Status>;
+  }
+  // Display date values as tooltip with relative date.
+  if (typeof value === "string" && isValid(parseISO(value))) {
+    return (
+      <>
+        {value}{" "}
+        <span className="u-text--muted">
+          ({formatFriendlyDateToNow(value)})
+        </span>
+      </>
+    );
+  }
+  // Match charms with the following structure:
+  //   "charm": "mysql",
+  //   "charm-channel": "8.0/stable",
+  //   "charm-name": "mysql",
+  //   "charm-origin": "charmhub",
+  if (currentKey === "charm" && typeof valueAsString === "string") {
+    const currentObject = getCurrentObject(keyPath, code);
+    if (
+      currentObject &&
+      "charm-name" in currentObject &&
+      currentObject["charm-name"] &&
+      "charm-origin" in currentObject &&
+      currentObject["charm-origin"] === "charmhub"
+    ) {
+      let charmURL = `https://charmhub.io/${currentObject["charm-name"]}`;
+      if ("charm-channel" in currentObject && currentObject["charm-channel"]) {
+        charmURL += `?channel=${currentObject["charm-channel"]}`;
+      }
+      return (
+        <a href={charmURL} target="_blank" rel="noopener noreferrer">
+          {valueAsString}
+        </a>
+      );
+    }
+  }
+  // Link units[unit-key].machine to machine in model details.
+  if (
+    grandparentKey === "units" &&
+    currentKey === "machine" &&
+    typeof valueAsString === "string" &&
+    typeof value === "string" &&
+    typeof modelUUID === "string"
+  ) {
+    return (
+      <MachineLink uuid={modelUUID} machineId={value}>
+        {valueAsString}
+      </MachineLink>
+    );
+  }
+  // Link relations[key][app-key] and 'subordinate-to'[value]
+  // to app in model details.
+  if (
+    (grandparentKey === "relations" || parentKey === "subordinate-to") &&
+    typeof valueAsString === "string" &&
+    typeof value === "string" &&
+    typeof modelUUID === "string"
+  ) {
+    return (
+      <AppLink uuid={modelUUID} appName={value}>
+        {valueAsString}
+      </AppLink>
+    );
+  }
+  // Link ‘application-endpoints’[app-key].url to the app in the
+  // offer’s model details.
+  if (
+    grandparentKey === "application-endpoints" &&
+    currentKey === "url" &&
+    typeof valueAsString === "string" &&
+    typeof parentKey === "string" &&
+    typeof modelUUID === "string"
+  ) {
+    return (
+      <AppLink uuid={modelUUID} appName={parentKey}>
+        {valueAsString}
+      </AppLink>
+    );
+  }
+  return <>{valueAsString}</>;
+};
+
+export default Value;
diff --git a/src/pages/AdvancedSearch/CodeSnippetBlock/Value/index.ts b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/index.ts
new file mode 100644
index 000000000..bcc109bcd
--- /dev/null
+++ b/src/pages/AdvancedSearch/CodeSnippetBlock/Value/index.ts
@@ -0,0 +1 @@
+export { default } from "./Value";