diff --git a/app/public/swarm/hiverelay.png b/app/public/swarm/hiverelay.png
new file mode 100644
index 00000000..ae7ad62f
Binary files /dev/null and b/app/public/swarm/hiverelay.png differ
diff --git a/app/src/HiveRelay.svelte b/app/src/HiveRelay.svelte
new file mode 100644
index 00000000..81040f14
--- /dev/null
+++ b/app/src/HiveRelay.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { InlineNotification } from "carbon-components-svelte";
+  import NodeVersionupdater from "./components/NodeVersionupdater.svelte";
+  export let updateBody = () => {};
+  import { selectedNode } from "./store";
+  let success = false;
+  let notification_message = "";
+  let show_notification = false;
+
+  function handleNodeVersionUpdateSuccess() {
+    updateBody();
+
+    success = true;
+    notification_message = `${$selectedNode.name} version updated successfully`;
+    show_notification = true;
+  }
+
+  function handleNodeVersionUpdateError(errMsg: string) {
+    success = false;
+    notification_message = errMsg;
+    show_notification = true;
+  }
+</script>
+
+<main class="hiverelay_container">
+  {#if show_notification}
+    <InlineNotification
+      lowContrast
+      kind={success ? "success" : "error"}
+      title={success ? "Success:" : "Error:"}
+      subtitle={notification_message}
+      timeout={9000}
+      on:close={(e) => {
+        e.preventDefault();
+        show_notification = false;
+      }}
+    />
+  {/if}
+  {#if $selectedNode && $selectedNode.host}
+    <div class="open-link">
+      <a href={`https://${$selectedNode.host}`} target="_blank" rel="noreferrer">
+        Open
+      </a>
+    </div>
+  {/if}
+  <NodeVersionupdater
+    handleSuccess={handleNodeVersionUpdateSuccess}
+    handleError={handleNodeVersionUpdateError}
+  />
+</main>
+
+<style>
+  .hiverelay_container {
+    padding: 1rem;
+  }
+  .open-link {
+    margin-bottom: 1rem;
+  }
+  .open-link a {
+    color: #61dafb;
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+  .open-link a:hover {
+    text-decoration: underline;
+  }
+</style>
diff --git a/app/src/controls/Controller.svelte b/app/src/controls/Controller.svelte
index c7ef0956..ce101c34 100644
--- a/app/src/controls/Controller.svelte
+++ b/app/src/controls/Controller.svelte
@@ -18,6 +18,7 @@
   import Neo4j from "../Neo4j.svelte";
   import Stakgraph from "../Stakgraph.svelte";
   import Repo2Graph from "../Repo2Graph.svelte";
+  import HiveRelay from "../HiveRelay.svelte";
   import Bot from "../Bot.svelte";
 
   export let updateBody = () => {};
@@ -113,6 +114,8 @@
         <Stakgraph {updateBody} />
       {:else if type === "Repo2Graph"}
         <Repo2Graph {updateBody} />
+      {:else if type === "HiveRelay"}
+        <HiveRelay {updateBody} />
       {:else if type === "Bot"}
         <Bot />
       {:else}
diff --git a/app/src/controls/controls.ts b/app/src/controls/controls.ts
index e57dfa47..6a71d275 100644
--- a/app/src/controls/controls.ts
+++ b/app/src/controls/controls.ts
@@ -90,6 +90,8 @@ const stakgraphControls: Control[] = [];
 
 const repo2graphControls: Control[] = [];
 
+const hiverelayControls: Control[] = [];
+
 const botControls: Control[] = [];
 
 export const controls = {
@@ -106,5 +108,6 @@ export const controls = {
   Neo4j: neo4jControls,
   Stakgraph: stakgraphControls,
   Repo2Graph: repo2graphControls,
+  HiveRelay: hiverelayControls,
   Bot: botControls,
 };
diff --git a/app/src/nodes.ts b/app/src/nodes.ts
index 342e66e7..1e9048bc 100644
--- a/app/src/nodes.ts
+++ b/app/src/nodes.ts
@@ -56,6 +56,7 @@ export type NodeType =
   | "Llama"
   | "Repo2Graph"
   | "Stakgraph"
+  | "HiveRelay"
   | "Bot";
 
 export const allNodeTypes: NodeType[] = [
@@ -214,6 +215,7 @@ const defpos = {
   tribes_1: [1160, 175],
   tribes_2: [1160, 425],
   tribes_3: [1160, 675],
+  hive_relay: [1150, 675],
 };
 
 export const smalls = ["lss", "neo4j", "elastic", "cache", "lss_1"];