diff --git a/web/src/Root.tsx b/web/src/Root.tsx
index 2e7930a438..684fe64170 100644
--- a/web/src/Root.tsx
+++ b/web/src/Root.tsx
@@ -58,6 +58,7 @@ import SnapshotDetails from "@components/snapshots/SnapshotDetails";
 import SnapshotRestore from "@components/snapshots/SnapshotRestore";
 import AppSnapshots from "@components/snapshots/AppSnapshots";
 import AppSnapshotRestore from "@components/snapshots/AppSnapshotRestore";
+import HelmVMViewNode from "@components/apps/HelmVMViewNode";
 
 // react-query client
 const queryClient = new QueryClient();
@@ -579,10 +580,11 @@ const Root = () => {
                   state.adminConsoleMetadata?.isKurl ? (
                     <KurlClusterManagement appName={state.selectedAppName} />
                   ) : (
-                    <HelmVMClusterManagement appName={state.selectedAppName} />
+                    <HelmVMClusterManagement />
                   )
                 }
               />
+              <Route path="/cluster/:nodeId" element={<HelmVMViewNode />} />
               <Route
                 path="/gitops"
                 element={<GitOps appName={state.selectedAppName || ""} />}
diff --git a/web/src/components/apps/HelmVMClusterManagement.jsx b/web/src/components/apps/HelmVMClusterManagement.jsx
index 4d1712f258..5d2ef854af 100644
--- a/web/src/components/apps/HelmVMClusterManagement.jsx
+++ b/web/src/components/apps/HelmVMClusterManagement.jsx
@@ -1,96 +1,167 @@
-import React, { Component, Fragment } from "react";
 import classNames from "classnames";
 import dayjs from "dayjs";
+import React, { useEffect, useReducer } from "react";
+import Modal from "react-modal";
+import { useQuery } from "react-query";
+
 import { KotsPageTitle } from "@components/Head";
-import CodeSnippet from "../shared/CodeSnippet";
-import HelmVMNodeRow from "./HelmVMNodeRow";
-import Loader from "../shared/Loader";
 import { rbacRoles } from "../../constants/rbac";
-import { Utilities } from "../../utilities/utilities";
 import { Repeater } from "../../utilities/repeater";
+import { Utilities } from "../../utilities/utilities";
+import Icon from "../Icon";
 import ErrorModal from "../modals/ErrorModal";
-import Modal from "react-modal";
+import CodeSnippet from "../shared/CodeSnippet";
+import Loader from "../shared/Loader";
+import HelmVMNodeRow from "./HelmVMNodeRow";
 
 import "@src/scss/components/apps/HelmVMClusterManagement.scss";
-import Icon from "../Icon";
 
-export class HelmVMClusterManagement extends Component {
-  state = {
-    generating: false,
-    command: "",
-    expiry: null,
-    displayAddNode: false,
-    selectedNodeType: "primary",
-    generateCommandErrMsg: "",
-    helmvm: null,
-    getNodeStatusJob: new Repeater(),
-    deletNodeError: "",
-    confirmDeleteNode: "",
-    showConfirmDrainModal: false,
-    nodeNameToDrain: "",
-    drainingNodeName: null,
-    drainNodeSuccessful: false,
-  };
-
-  componentDidMount() {
-    this.getNodeStatus();
-    this.state.getNodeStatusJob.start(this.getNodeStatus, 1000);
-  }
+const testData = {
+  isHelmVMEnabled: true,
+  ha: false,
+  nodes: [
+    {
+      name: "test-helmvm-node",
+      isConnected: true,
+      isReady: true,
+      isPrimaryNode: true,
+      canDelete: false,
+      kubeletVersion: "v1.28.2",
+      cpu: {
+        capacity: 8,
+        available: 7.466876775,
+      },
+      memory: {
+        capacity: 31.33294677734375,
+        available: 24.23790740966797,
+      },
+      pods: {
+        capacity: 110,
+        available: 77,
+      },
+      labels: [
+        "beta.kubernetes.io/arch:amd64",
+        "beta.kubernetes.io/os:linux",
+        "node-role.kubernetes.io/master:",
+        "node.kubernetes.io/exclude-from-external-load-balancers:",
+        "kubernetes.io/arch:amd64",
+        "kubernetes.io/hostname:laverya-kurl",
+        "kubernetes.io/os:linux",
+        "node-role.kubernetes.io/control-plane:",
+      ],
+      conditions: {
+        memoryPressure: false,
+        diskPressure: false,
+        pidPressure: false,
+        ready: true,
+      },
+    },
+    {
+      name: "test-helmvm-worker",
+      isConnected: true,
+      isReady: true,
+      isPrimaryNode: false,
+      canDelete: false,
+      kubeletVersion: "v1.28.2",
+      cpu: {
+        capacity: 4,
+        available: 3.761070507,
+      },
+      memory: {
+        capacity: 15.50936508178711,
+        available: 11.742542266845703,
+      },
+      pods: {
+        capacity: 110,
+        available: 94,
+      },
+      labels: [
+        "beta.kubernetes.io/arch:amd64",
+        "beta.kubernetes.io/os:linux",
+        "kubernetes.io/arch:amd64",
+        "kubernetes.io/os:linux",
+        "kurl.sh/cluster:true",
+      ],
+      conditions: {
+        memoryPressure: false,
+        diskPressure: false,
+        pidPressure: false,
+        ready: true,
+      },
+    },
+  ],
+};
 
-  componentWillUnmount() {
-    this.state.getNodeStatusJob.stop();
-  }
+const HelmVMClusterManagement = () => {
+  const [state, setState] = useReducer(
+    (state, newState) => ({ ...state, ...newState }),
+    {
+      generating: false,
+      command: "",
+      expiry: null,
+      displayAddNode: false,
+      selectedNodeType: "primary",
+      generateCommandErrMsg: "",
+      helmvm: null,
+      deletNodeError: "",
+      confirmDeleteNode: "",
+      showConfirmDrainModal: false,
+      nodeNameToDrain: "",
+      drainingNodeName: null,
+      drainNodeSuccessful: false,
+    }
+  );
 
-  getNodeStatus = async () => {
-    try {
-      const res = await fetch(`${process.env.API_ENDPOINT}/helmvm/nodes`, {
-        headers: {
-          Accept: "application/json",
-        },
-        credentials: "include",
-        method: "GET",
-      });
-      if (!res.ok) {
-        if (res.status === 401) {
-          Utilities.logoutUser();
-          return;
-        }
-        console.log(
-          "failed to get node status list, unexpected status code",
-          res.status
-        );
+  const { data: nodes, isLoading: nodesLoading } = useQuery({
+    queryKey: "helmVmNodes",
+    queryFn: async () => {
+      return (
+        await fetch(`${process.env.API_ENDPOINT}/helmvm/nodes`, {
+          headers: {
+            Accept: "application/json",
+          },
+          credentials: "include",
+          method: "GET",
+        })
+      ).json();
+    },
+    onError: (err) => {
+      if (err.status === 401) {
+        Utilities.logoutUser();
         return;
       }
-      const response = await res.json();
-      this.setState({
-        helmvm: response,
+      console.log(
+        "failed to get node status list, unexpected status code",
+        err.status
+      );
+    },
+    onSuccess: (data) => {
+      setState({
         // if cluster doesn't support ha, then primary will be disabled. Force into secondary
-        selectedNodeType: !response.ha
-          ? "secondary"
-          : this.state.selectedNodeType,
+        selectedNodeType: !data.ha ? "secondary" : state.selectedNodeType,
       });
-      return response;
-    } catch (err) {
-      console.log(err);
-      throw err;
-    }
-  };
+    },
+    config: {
+      refetchInterval: 1000,
+      retry: false,
+    },
+  });
 
-  deleteNode = (name) => {
-    this.setState({
+  const deleteNode = (name) => {
+    setState({
       confirmDeleteNode: name,
     });
   };
 
-  cancelDeleteNode = () => {
-    this.setState({
+  const cancelDeleteNode = () => {
+    setState({
       confirmDeleteNode: "",
     });
   };
 
-  reallyDeleteNode = () => {
-    const name = this.state.confirmDeleteNode;
-    this.cancelDeleteNode();
+  const reallyDeleteNode = () => {
+    const name = state.confirmDeleteNode;
+    cancelDeleteNode();
 
     fetch(`${process.env.API_ENDPOINT}/helmvm/nodes/${name}`, {
       headers: {
@@ -106,7 +177,7 @@ export class HelmVMClusterManagement extends Component {
             Utilities.logoutUser();
             return;
           }
-          this.setState({
+          setState({
             deleteNodeError: `Delete failed with status ${res.status}`,
           });
         }
@@ -116,8 +187,8 @@ export class HelmVMClusterManagement extends Component {
       });
   };
 
-  generateWorkerAddNodeCommand = async () => {
-    this.setState({
+  const generateWorkerAddNodeCommand = async () => {
+    setState({
       generating: true,
       command: "",
       expiry: null,
@@ -137,13 +208,13 @@ export class HelmVMClusterManagement extends Component {
     )
       .then(async (res) => {
         if (!res.ok) {
-          this.setState({
+          setState({
             generating: false,
             generateCommandErrMsg: `Failed to generate command with status ${res.status}`,
           });
         } else {
           const data = await res.json();
-          this.setState({
+          setState({
             generating: false,
             command: data.command,
             expiry: data.expiry,
@@ -152,22 +223,22 @@ export class HelmVMClusterManagement extends Component {
       })
       .catch((err) => {
         console.log(err);
-        this.setState({
+        setState({
           generating: false,
           generateCommandErrMsg: err ? err.message : "Something went wrong",
         });
       });
   };
 
-  onDrainNodeClick = (name) => {
-    this.setState({
+  const onDrainNodeClick = (name) => {
+    setState({
       showConfirmDrainModal: true,
       nodeNameToDrain: name,
     });
   };
 
-  drainNode = async (name) => {
-    this.setState({ showConfirmDrainModal: false, drainingNodeName: name });
+  const drainNode = async (name) => {
+    setState({ showConfirmDrainModal: false, drainingNodeName: name });
     fetch(`${process.env.API_ENDPOINT}/helmvm/nodes/${name}/drain`, {
       headers: {
         "Content-Type": "application/json",
@@ -177,9 +248,9 @@ export class HelmVMClusterManagement extends Component {
       method: "POST",
     })
       .then(async (res) => {
-        this.setState({ drainNodeSuccessful: true });
+        setState({ drainNodeSuccessful: true });
         setTimeout(() => {
-          this.setState({
+          setState({
             drainingNodeName: null,
             drainNodeSuccessful: false,
           });
@@ -187,15 +258,15 @@ export class HelmVMClusterManagement extends Component {
       })
       .catch((err) => {
         console.log(err);
-        this.setState({
+        setState({
           drainingNodeName: null,
           drainNodeSuccessful: false,
         });
       });
   };
 
-  generatePrimaryAddNodeCommand = async () => {
-    this.setState({
+  const generatePrimaryAddNodeCommand = async () => {
+    setState({
       generating: true,
       command: "",
       expiry: null,
@@ -215,13 +286,13 @@ export class HelmVMClusterManagement extends Component {
     )
       .then(async (res) => {
         if (!res.ok) {
-          this.setState({
+          setState({
             generating: false,
             generateCommandErrMsg: `Failed to generate command with status ${res.status}`,
           });
         } else {
           const data = await res.json();
-          this.setState({
+          setState({
             generating: false,
             command: data.command,
             expiry: data.expiry,
@@ -230,257 +301,299 @@ export class HelmVMClusterManagement extends Component {
       })
       .catch((err) => {
         console.log(err);
-        this.setState({
+        setState({
           generating: false,
           generateCommandErrMsg: err ? err.message : "Something went wrong",
         });
       });
   };
 
-  onAddNodeClick = () => {
-    this.setState(
+  const onAddNodeClick = () => {
+    setState(
       {
         displayAddNode: true,
       },
       async () => {
-        await this.generateWorkerAddNodeCommand();
+        await generateWorkerAddNodeCommand();
       }
     );
   };
 
-  onSelectNodeType = (event) => {
+  const onSelectNodeType = (event) => {
     const value = event.currentTarget.value;
-    this.setState(
+    setState(
       {
         selectedNodeType: value,
       },
       async () => {
-        if (this.state.selectedNodeType === "secondary") {
-          await this.generateWorkerAddNodeCommand();
+        if (state.selectedNodeType === "secondary") {
+          await generateWorkerAddNodeCommand();
         } else {
-          await this.generatePrimaryAddNodeCommand();
+          await generatePrimaryAddNodeCommand();
         }
       }
     );
   };
 
-  ackDeleteNodeError = () => {
-    this.setState({ deleteNodeError: "" });
+  const ackDeleteNodeError = () => {
+    setState({ deleteNodeError: "" });
   };
 
-  render() {
-    const { helmvm } = this.state;
-    const { displayAddNode, generateCommandErrMsg } = this.state;
-
-    if (!helmvm) {
-      return (
-        <div className="flex-column flex1 alignItems--center justifyContent--center">
-          <Loader size="60" />
-        </div>
-      );
-    }
+  const { displayAddNode, generateCommandErrMsg } = state;
 
+  if (nodesLoading) {
     return (
-      <div className="HelmVMClusterManagement--wrapper container flex-column flex1 u-overflow--auto u-paddingTop--50">
-        <KotsPageTitle pageName="Cluster Management" />
-        <div className="flex-column flex1 alignItems--center">
-          <div className="flex1 flex-column centered-container">
-            <div className="u-paddingBottom--30">
-              <p className="flex-auto u-fontSize--larger u-fontWeight--bold u-textColor--primary u-paddingBottom--10">
-                Your nodes
-              </p>
-              <div className="flex1 u-overflow--auto">
-                {helmvm?.nodes &&
-                  helmvm?.nodes.map((node, i) => (
-                    <HelmVMNodeRow
-                      key={i}
-                      node={node}
-                      drainingNodeName={this.state.drainingNodeName}
-                      drainNodeSuccessful={this.state.drainNodeSuccessful}
-                      drainNode={
-                        helmvm?.isHelmVMEnabled ? this.onDrainNodeClick : null
-                      }
-                      deleteNode={
-                        helmvm?.isHelmVMEnabled ? this.deleteNode : null
-                      }
-                    />
-                  ))}
-              </div>
+      <div className="flex-column flex1 alignItems--center justifyContent--center">
+        <Loader size="60" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="HelmVMClusterManagement--wrapper container flex-column flex1 u-overflow--auto u-paddingTop--50">
+      <KotsPageTitle pageName="Cluster Management" />
+      <div className="flex-column flex1 alignItems--center u-paddingBottom--50">
+        <div className="flex1 flex-column centered-container">
+          <div className="u-paddingBottom--30">
+            <p className="flex-auto u-fontSize--larger u-fontWeight--bold u-textColor--primary u-paddingBottom--10">
+              Cluster Nodes
+            </p>
+            <p className="u-paddingBottom--10">
+              This section lists the nodes that are configured and shows the
+              status/health of each. To add additional nodes to this cluster,
+              click the "Add node" button at the bottom of this page.
+            </p>
+            <div className="flex1 u-overflow--auto">
+              {(nodes?.nodes || testData?.nodes) &&
+                (nodes?.nodes || testData?.nodes).map((node, i) => (
+                  <HelmVMNodeRow
+                    key={i}
+                    node={node}
+                    drainingNodeName={state.drainingNodeName}
+                    drainNodeSuccessful={state.drainNodeSuccessful}
+                    drainNode={nodes?.isHelmVMEnabled ? onDrainNodeClick : null}
+                    deleteNode={nodes?.isHelmVMEnabled ? deleteNode : null}
+                  />
+                ))}
             </div>
-            {helmvm?.isHelmVMEnabled &&
-            Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) ? (
-              !displayAddNode ? (
-                <div className="flex justifyContent--center alignItems--center">
-                  <button className="btn primary" onClick={this.onAddNodeClick}>
+          </div>
+          {(nodes?.isHelmVMEnabled || testData.isHelmVMEnabled) &&
+          Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) ? (
+            !displayAddNode ? (
+              <div className="flex justifyContent--center alignItems--center">
+                <button className="btn primary" onClick={onAddNodeClick}>
+                  Add a node
+                </button>
+              </div>
+            ) : (
+              <div className="flex-column">
+                <div>
+                  <p className="u-width--full u-fontSize--larger u-textColor--primary u-fontWeight--bold u-lineHeight--normal u-borderBottom--gray u-paddingBottom--10">
                     Add a node
-                  </button>
+                  </p>
                 </div>
-              ) : (
-                <div className="flex-column">
-                  <div>
-                    <p className="u-width--full u-fontSize--larger u-textColor--primary u-fontWeight--bold u-lineHeight--normal u-borderBottom--gray u-paddingBottom--10">
-                      Add a Node
-                    </p>
-                  </div>
-                  <div className="flex justifyContent--center alignItems--center u-marginTop--15">
-                    <div
-                      className={classNames(
-                        "BoxedCheckbox flex-auto flex u-marginRight--20",
-                        {
-                          "is-active":
-                            this.state.selectedNodeType === "primary",
-                          "is-disabled": !helmvm?.ha,
-                        }
-                      )}
+                <div className="flex justifyContent--center alignItems--center u-marginTop--15">
+                  <div
+                    className={classNames(
+                      "BoxedCheckbox flex-auto flex u-marginRight--20",
+                      {
+                        "is-active": state.selectedNodeType === "primary",
+                        "is-disabled": nodes ? !nodes?.ha : !testData?.ha,
+                      }
+                    )}
+                  >
+                    <input
+                      id="primaryNode"
+                      className="u-cursor--pointer hidden-input"
+                      type="radio"
+                      name="nodeType"
+                      value="primary"
+                      disabled={nodes ? !nodes?.ha : !testData?.ha}
+                      checked={state.selectedNodeType === "primary"}
+                      onChange={onSelectNodeType}
+                    />
+                    <label
+                      htmlFor="primaryNode"
+                      className="flex1 flex u-width--full u-position--relative u-cursor--pointer u-userSelect--none"
                     >
-                      <input
-                        id="primaryNode"
-                        className="u-cursor--pointer hidden-input"
-                        type="radio"
-                        name="nodeType"
-                        value="primary"
-                        disabled={!helmvm?.ha}
-                        checked={this.state.selectedNodeType === "primary"}
-                        onChange={this.onSelectNodeType}
-                      />
-                      <label
-                        htmlFor="primaryNode"
-                        className="flex1 flex u-width--full u-position--relative u-cursor--pointer u-userSelect--none"
-                      >
-                        <div className="flex-auto">
-                          <Icon
-                            icon="commit"
-                            size={32}
-                            className="clickable u-marginRight--10"
-                          />
-                        </div>
-                        <div className="flex1">
-                          <p className="u-textColor--primary u-fontSize--normal u-fontWeight--medium">
-                            Primary Node
-                          </p>
-                          <p className="u-textColor--bodyCopy u-lineHeight--normal u-fontSize--small u-fontWeight--medium u-marginTop--5">
-                            Provides high availability
-                          </p>
-                        </div>
-                      </label>
-                    </div>
-                    <div
-                      className={classNames(
-                        "BoxedCheckbox flex-auto flex u-marginRight--20",
-                        {
-                          "is-active":
-                            this.state.selectedNodeType === "secondary",
-                        }
-                      )}
+                      <div className="flex-auto">
+                        <Icon
+                          icon="commit"
+                          size={32}
+                          className="clickable u-marginRight--10"
+                        />
+                      </div>
+                      <div className="flex1">
+                        <p className="u-textColor--primary u-fontSize--normal u-fontWeight--medium">
+                          Primary Node
+                        </p>
+                        <p className="u-textColor--bodyCopy u-lineHeight--normal u-fontSize--small u-fontWeight--medium u-marginTop--5">
+                          Provides high availability
+                        </p>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    className={classNames(
+                      "BoxedCheckbox flex-auto flex u-marginRight--20",
+                      {
+                        "is-active": state.selectedNodeType === "secondary",
+                      }
+                    )}
+                  >
+                    <input
+                      id="secondaryNode"
+                      className="u-cursor--pointer hidden-input"
+                      type="radio"
+                      name="nodeType"
+                      value="secondary"
+                      checked={state.selectedNodeType === "secondary"}
+                      onChange={onSelectNodeType}
+                    />
+                    <label
+                      htmlFor="secondaryNode"
+                      className="flex1 flex u-width--full u-position--relative u-cursor--pointer u-userSelect--none"
                     >
-                      <input
-                        id="secondaryNode"
-                        className="u-cursor--pointer hidden-input"
-                        type="radio"
-                        name="nodeType"
-                        value="secondary"
-                        checked={this.state.selectedNodeType === "secondary"}
-                        onChange={this.onSelectNodeType}
-                      />
-                      <label
-                        htmlFor="secondaryNode"
-                        className="flex1 flex u-width--full u-position--relative u-cursor--pointer u-userSelect--none"
-                      >
-                        <div className="flex-auto">
-                          <Icon
-                            icon="commit"
-                            size={32}
-                            className="clickable u-marginRight--10"
-                          />
-                        </div>
-                        <div className="flex1">
-                          <p className="u-textColor--primary u-fontSize--normal u-fontWeight--medium">
-                            Secondary Node
-                          </p>
-                          <p className="u-textColor--bodyCopy u-lineHeight--normal u-fontSize--small u-fontWeight--medium u-marginTop--5">
-                            Optimal for running application workloads
-                          </p>
-                        </div>
-                      </label>
-                    </div>
+                      <div className="flex-auto">
+                        <Icon
+                          icon="commit"
+                          size={32}
+                          className="clickable u-marginRight--10"
+                        />
+                      </div>
+                      <div className="flex1">
+                        <p className="u-textColor--primary u-fontSize--normal u-fontWeight--medium">
+                          Secondary Node
+                        </p>
+                        <p className="u-textColor--bodyCopy u-lineHeight--normal u-fontSize--small u-fontWeight--medium u-marginTop--5">
+                          Optimal for running application workloads
+                        </p>
+                      </div>
+                    </label>
                   </div>
-                  {this.state.generating && (
-                    <div className="flex u-width--full justifyContent--center">
-                      <Loader size={60} />
-                    </div>
-                  )}
-                  {!this.state.generating && this.state.command?.length > 0 ? (
-                    <Fragment>
-                      <p className="u-fontSize--normal u-textColor--bodyCopy u-fontWeight--medium u-lineHeight--normal u-marginBottom--5 u-marginTop--15">
-                        Run this command on the node you wish to join the
-                        cluster
-                      </p>
-                      <CodeSnippet
-                        language="bash"
-                        canCopy={true}
-                        onCopyText={
-                          <span className="u-textColor--success">
-                            Command has been copied to your clipboard
-                          </span>
-                        }
-                      >
-                        {[this.state.command.join(" \\\n  ")]}
-                      </CodeSnippet>
-                      {this.state.expiry && (
-                        <span className="timestamp u-marginTop--15 u-width--full u-textAlign--right u-fontSize--small u-fontWeight--bold u-textColor--primary">
-                          {`Expires on ${dayjs(this.state.expiry).format(
-                            "MMM Do YYYY, h:mm:ss a z"
-                          )} UTC${(-1 * new Date().getTimezoneOffset()) / 60}`}
-                        </span>
-                      )}
-                    </Fragment>
-                  ) : (
-                    <Fragment>
-                      {generateCommandErrMsg && (
-                        <div className="alignSelf--center u-marginTop--15">
-                          <span className="u-textColor--error">
-                            {generateCommandErrMsg}
-                          </span>
-                        </div>
-                      )}
-                    </Fragment>
-                  )}
                 </div>
-              )
-            ) : null}
+                {state.generating && (
+                  <div className="flex u-width--full justifyContent--center">
+                    <Loader size={60} />
+                  </div>
+                )}
+                {!state.generating && state.command?.length > 0 ? (
+                  <>
+                    <p className="u-fontSize--normal u-textColor--bodyCopy u-fontWeight--medium u-lineHeight--normal u-marginBottom--5 u-marginTop--15">
+                      Run this command on the node you wish to join the cluster
+                    </p>
+                    <CodeSnippet
+                      language="bash"
+                      canCopy={true}
+                      onCopyText={
+                        <span className="u-textColor--success">
+                          Command has been copied to your clipboard
+                        </span>
+                      }
+                    >
+                      {[state.command.join(" \\\n  ")]}
+                    </CodeSnippet>
+                    {state.expiry && (
+                      <span className="timestamp u-marginTop--15 u-width--full u-textAlign--right u-fontSize--small u-fontWeight--bold u-textColor--primary">
+                        {`Expires on ${dayjs(state.expiry).format(
+                          "MMM Do YYYY, h:mm:ss a z"
+                        )} UTC${(-1 * new Date().getTimezoneOffset()) / 60}`}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    {generateCommandErrMsg && (
+                      <div className="alignSelf--center u-marginTop--15">
+                        <span className="u-textColor--error">
+                          {generateCommandErrMsg}
+                        </span>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )
+          ) : null}
+        </div>
+      </div>
+      {state.deleteNodeError && (
+        <ErrorModal
+          errorModal={true}
+          toggleErrorModal={ackDeleteNodeError}
+          err={"Failed to delete node"}
+          errMsg={state.deleteNodeError}
+        />
+      )}
+      <Modal
+        isOpen={!!state.confirmDeleteNode}
+        onRequestClose={cancelDeleteNode}
+        shouldReturnFocusAfterClose={false}
+        contentLabel="Confirm Delete Node"
+        ariaHideApp={false}
+        className="Modal"
+      >
+        <div className="Modal-body">
+          <p className="u-fontSize--normal u-textColor--bodyCopy u-lineHeight--normal u-marginBottom--20">
+            Deleting this node may cause data loss. Are you sure you want to
+            proceed?
+          </p>
+          <div className="u-marginTop--10 flex">
+            <button
+              onClick={reallyDeleteNode}
+              type="button"
+              className="btn red primary"
+            >
+              Delete {state.confirmDeleteNode}
+            </button>
+            <button
+              onClick={cancelDeleteNode}
+              type="button"
+              className="btn secondary u-marginLeft--20"
+            >
+              Cancel
+            </button>
           </div>
         </div>
-        {this.state.deleteNodeError && (
-          <ErrorModal
-            errorModal={true}
-            toggleErrorModal={this.ackDeleteNodeError}
-            err={"Failed to delete node"}
-            errMsg={this.state.deleteNodeError}
-          />
-        )}
+      </Modal>
+      {state.showConfirmDrainModal && (
         <Modal
-          isOpen={!!this.state.confirmDeleteNode}
-          onRequestClose={this.cancelDeleteNode}
+          isOpen={true}
+          onRequestClose={() =>
+            setState({
+              showConfirmDrainModal: false,
+              nodeNameToDrain: "",
+            })
+          }
           shouldReturnFocusAfterClose={false}
-          contentLabel="Confirm Delete Node"
+          contentLabel="Confirm Drain Node"
           ariaHideApp={false}
-          className="Modal"
+          className="Modal MediumSize"
         >
           <div className="Modal-body">
+            <p className="u-fontSize--larger u-textColor--primary u-fontWeight--bold u-lineHeight--normal">
+              Are you sure you want to drain {state.nodeNameToDrain}?
+            </p>
             <p className="u-fontSize--normal u-textColor--bodyCopy u-lineHeight--normal u-marginBottom--20">
-              Deleting this node may cause data loss. Are you sure you want to
-              proceed?
+              Draining this node may cause data loss. If you want to delete{" "}
+              {state.nodeNameToDrain} you must disconnect it after it has been
+              drained.
             </p>
             <div className="u-marginTop--10 flex">
               <button
-                onClick={this.reallyDeleteNode}
+                onClick={() => drainNode(state.nodeNameToDrain)}
                 type="button"
                 className="btn red primary"
               >
-                Delete {this.state.confirmDeleteNode}
+                Drain {state.nodeNameToDrain}
               </button>
               <button
-                onClick={this.cancelDeleteNode}
+                onClick={() =>
+                  setState({
+                    showConfirmDrainModal: false,
+                    nodeNameToDrain: "",
+                  })
+                }
                 type="button"
                 className="btn secondary u-marginLeft--20"
               >
@@ -489,56 +602,9 @@ export class HelmVMClusterManagement extends Component {
             </div>
           </div>
         </Modal>
-        {this.state.showConfirmDrainModal && (
-          <Modal
-            isOpen={true}
-            onRequestClose={() =>
-              this.setState({
-                showConfirmDrainModal: false,
-                nodeNameToDrain: "",
-              })
-            }
-            shouldReturnFocusAfterClose={false}
-            contentLabel="Confirm Drain Node"
-            ariaHideApp={false}
-            className="Modal MediumSize"
-          >
-            <div className="Modal-body">
-              <p className="u-fontSize--larger u-textColor--primary u-fontWeight--bold u-lineHeight--normal">
-                Are you sure you want to drain {this.state.nodeNameToDrain}?
-              </p>
-              <p className="u-fontSize--normal u-textColor--bodyCopy u-lineHeight--normal u-marginBottom--20">
-                Draining this node may cause data loss. If you want to delete{" "}
-                {this.state.nodeNameToDrain} you must disconnect it after it has
-                been drained.
-              </p>
-              <div className="u-marginTop--10 flex">
-                <button
-                  onClick={() => this.drainNode(this.state.nodeNameToDrain)}
-                  type="button"
-                  className="btn red primary"
-                >
-                  Drain {this.state.nodeNameToDrain}
-                </button>
-                <button
-                  onClick={() =>
-                    this.setState({
-                      showConfirmDrainModal: false,
-                      nodeNameToDrain: "",
-                    })
-                  }
-                  type="button"
-                  className="btn secondary u-marginLeft--20"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </Modal>
-        )}
-      </div>
-    );
-  }
-}
+      )}
+    </div>
+  );
+};
 
 export default HelmVMClusterManagement;
diff --git a/web/src/components/apps/HelmVMNodeRow.jsx b/web/src/components/apps/HelmVMNodeRow.jsx
index 93f2c5489c..e7dac9025d 100644
--- a/web/src/components/apps/HelmVMNodeRow.jsx
+++ b/web/src/components/apps/HelmVMNodeRow.jsx
@@ -1,15 +1,20 @@
-import React from "react";
 import classNames from "classnames";
-import Loader from "../shared/Loader";
+import React from "react";
+import { Link } from "react-router-dom";
+
 import { rbacRoles } from "../../constants/rbac";
 import { getPercentageStatus, Utilities } from "../../utilities/utilities";
 import Icon from "../Icon";
+import Loader from "../shared/Loader";
 
-export default function HelmVMNodeRow(props) {
-  const { node } = props;
-
+export default function HelmVMNodeRow({
+  node,
+  drainNode,
+  drainNodeSuccessful,
+  drainingNodeName,
+  deleteNode,
+}) {
   const DrainDeleteNode = () => {
-    const { drainNode, drainNodeSuccessful, drainingNodeName } = props;
     if (drainNode && Utilities.sessionRolesHasOneOf(rbacRoles.DRAIN_NODE)) {
       if (
         !drainNodeSuccessful &&
@@ -44,9 +49,7 @@ export default function HelmVMNodeRow(props) {
           <div className="flex-auto flex-column justifyContent--center">
             <button
               onClick={() =>
-                node?.canDelete
-                  ? props.deleteNode(node?.name)
-                  : props.drainNode(node?.name)
+                node?.canDelete ? deleteNode(node?.name) : drainNode(node?.name)
               }
               className="btn secondary red"
             >
@@ -62,9 +65,12 @@ export default function HelmVMNodeRow(props) {
     <div className="flex flex-auto HelmVMNodeRow--wrapper">
       <div className="flex-column flex1">
         <div className="flex flex-auto alignItems--center u-fontWeight--bold u-textColor--primary">
-          <p className="u-fontSize--normal u-fontWeight--bold u-textColor--primary">
+          <Link
+            to={`/cluster/${node?.name}`}
+            className="u-fontSize--normal u-fontWeight--bold u-textColor--primary"
+          >
             {node?.name}
-          </p>
+          </Link>
           {node?.isPrimaryNode && (
             <span className="nodeTag flex-auto alignItems--center u-fontWeight--medium u-marginLeft--10">
               Primary node
diff --git a/web/src/components/apps/HelmVMViewNode.jsx b/web/src/components/apps/HelmVMViewNode.jsx
new file mode 100644
index 0000000000..f9e7106938
--- /dev/null
+++ b/web/src/components/apps/HelmVMViewNode.jsx
@@ -0,0 +1,158 @@
+import React, { useMemo } from "react";
+import { useQuery } from "react-query";
+import { Link } from "react-router-dom";
+
+const HelmVMViewNode = () => {
+  const { data: nodes } = useQuery({
+    queryKey: "helmVmNodes",
+    queryFn: async () => {
+      return (
+        await fetch(`${process.env.API_ENDPOINT}/helmvm/nodes`, {
+          headers: {
+            Accept: "application/json",
+          },
+          credentials: "include",
+          method: "GET",
+        })
+      ).json();
+    },
+    onError: (err) => {
+      if (err.status === 401) {
+        Utilities.logoutUser();
+        return;
+      }
+      console.log(
+        "failed to get node status list, unexpected status code",
+        err.status
+      );
+    },
+    onSuccess: (data) => {
+      setState({
+        // if cluster doesn't support ha, then primary will be disabled. Force into secondary
+        selectedNodeType: !data.ha ? "secondary" : state.selectedNodeType,
+      });
+    },
+    config: {
+      retry: false,
+    },
+  });
+
+  const node = nodes.nodes[0];
+
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Name",
+        enableHiding: false,
+        enableColumnDragging: false,
+        size: 150,
+      },
+      {
+        accessorKey: "isConnected",
+        header: "Connection",
+        size: 150,
+      },
+      {
+        accessorKey: "kubeletVersion",
+        header: "Kubelet Version",
+        size: 170,
+      },
+      {
+        accessorKey: "cpu",
+        header: "CPU",
+        size: 150,
+      },
+      {
+        accessorKey: "memory",
+        header: "Memory",
+        size: 150,
+      },
+      {
+        accessorKey: "pods",
+        header: "Pods",
+        size: 150,
+      },
+      {
+        accessorKey: "canDelete",
+        header: "Delete Node",
+        size: 150,
+      },
+    ],
+    []
+  );
+
+  return (
+    <div className="container u-paddingTop--50 tw-flex tw-flex-col tw-gap-6 tw-font-sans">
+      {/* Breadcrumbs */}
+      <p className="tw-text-sm tw-text-gray-400">
+        <Link
+          to="/cluster/manage"
+          className="!tw-text-blue-300 tw-font-semibold hover:tw-underline"
+        >
+          Cluster Nodes
+        </Link>{" "}
+        / {node?.name}
+      </p>
+      {/* Node Info */}
+      <div
+        className="tw-flex tw-flex-col tw-gap-2 tw-bg-white tw-border tw-border-solid tw-border-gray-100 tw-rounded 
+      tw-shadow-md tw-p-3"
+      >
+        <p className="tw-font-semibold tw-text-2xl tw-text-gray-800">
+          Node Info
+        </p>
+        <div className="tw-flex tw-gap-2">
+          <p className="tw-text-base tw-text-gray-800 tw-font-semibold">Name</p>
+          <p className="tw-text-base tw-text-gray-400">{node?.name}</p>
+        </div>
+      </div>
+      {/* Pods table */}
+      <div
+        className="tw-bg-white tw-border tw-border-solid tw-border-gray-100 tw-rounded 
+      tw-shadow-md tw-p-3"
+      >
+        <p className="tw-font-semibold tw-text-2xl tw-text-gray-800">Pods</p>
+        <table>
+          <thead>
+            <tr>
+              {columns.map((col) => {
+                return (
+                  <th key={col.accessorKey}>
+                    <p className="tw-font-semibold tw-text-gray-800 tw-px-2 tw-py-1.5">
+                      {col.header}
+                    </p>
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>Some pods here</tbody>
+        </table>
+      </div>
+      {/* Troubleshooting */}
+      <div
+        className="tw-bg-white tw-border tw-border-solid tw-border-gray-100 tw-rounded 
+      tw-shadow-md tw-p-3"
+      >
+        <p className="tw-font-semibold tw-text-2xl tw-text-gray-800">
+          Troubleshooting
+        </p>
+      </div>
+      {/* Danger Zone */}
+      <div
+        className="tw-bg-white tw-border tw-border-solid tw-border-gray-100 tw-rounded 
+      tw-shadow-md tw-p-3 tw-flex tw-flex-col tw-gap-3"
+      >
+        <p className="tw-font-semibold tw-text-2xl tw-text-gray-800">
+          Danger Zone
+        </p>
+        <button className="btn red primary tw-w-fit">
+          Prepare node for delete
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default HelmVMViewNode;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1ea5c980de..d89f3af2a5 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -13,17 +13,60 @@ module.exports = {
       "teal-muted-dark": "#577981",
       "teal-medium": "#097992",
       gray: {
-        100: "#dfdfdf",
+        100: "#dedede",
         200: "#c4c8ca",
         300: "#b3b3b3",
+        410: "#9b9b9b",
         400: "#959595",
         500: "#717171",
         600: "#585858",
         700: "#4f4f4f",
-        800: "#323232"
+        800: "#323232",
+        900: "#2c2c2c",
+      },
+      blue: {
+        50: "#ecf4fe",
+        75: "#b3d2fc",
+        200: "#65a4f8",
+        300: "#4591f7",
+        400: "#3066ad",
+      },
+      green: {
+        50: "#e7f7f3",
+        75: "#9cdfcf",
+        100: "#73d2bb",
+        200: "#37bf9e",
+        300: "#0eb28a",
+        400: "#0a7d61",
+        500: "#096d54",
+      },
+      indigo: {
+        100: "#f0f1ff",
+        200: "#c2c7fd",
+        300: "#a9b0fd",
+        400: "#838efc",
+        500: "#6a77fb",
+        600: "#4a53b0",
+        700: "#414999",
       },
       neutral: {
-        700: "#4A4A4A"
+        700: "#4A4A4A",
+      },
+      teal: {
+        300: "#4db9c0",
+        400: "#38a3a8",
+      },
+      pink: {
+        50: "#fff0f3",
+        100: "#ffc1cf",
+        200: "#fea7bc",
+        300: "#fe819f",
+        400: "#fe678b",
+        500: "#b24861",
+        600: "#9b3f55",
+      },
+      purple: {
+        400: "#7242b0",
       },
       error: "#bc4752",
       "error-xlight": "#fbedeb",
@@ -34,26 +77,26 @@ module.exports = {
       "warning-bright": "#ec8f39",
       "info-bright": "#76bbca",
       "disabled-teal": "#76a6cf",
-      "dark-neon-green": "#38cc97"
+      "dark-neon-green": "#38cc97",
     },
     extend: {
       borderRadius: {
         xs: "0.125rem",
         sm: "0.187rem",
-        variants: ["first", "last"]
+        variants: ["first", "last"],
       },
       fontFamily: {
-        sans: ["Open Sans", ...defaultTheme.fontFamily.sans]
-      }
-    }
+        sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
+      },
+    },
   },
   corePlugins: {
-    preflight: false
+    preflight: false,
   },
   plugins: [
     plugin(function ({ addVariant }) {
       addVariant("is-enabled", "&:not([disabled])");
       addVariant("is-disabled", "&[disabled]");
-    })
-  ]
+    }),
+  ],
 };