diff --git a/src/components/nodes/NodeDropDownMenu.vue b/src/components/nodes/NodeDropDownMenu.vue
new file mode 100644
index 0000000..649f6b5
--- /dev/null
+++ b/src/components/nodes/NodeDropDownMenu.vue
@@ -0,0 +1,109 @@
+<template>
+    <DropDownMenu>
+        <template v-slot:button>
+            <IconButton v-if="node" class="mx-2 bg-transparent text-gray-700">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                </svg>
+            </IconButton>
+        </template>
+        <template v-slot:items>
+
+            <!-- node details -->
+            <div class="p-2 border-b">
+                <div class="text-sm text-gray-500 font-semibold">{{ getNodeLongName(node.num) }}</div>
+                <div class="text-sm text-gray-500">{{ getNodeHexId(node.num) }}</div>
+            </div>
+
+            <!-- node info button -->
+            <RouterLink :to="{ name: 'node', params: { nodeId: node.num }}">
+                <DropDownMenuItem>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+                    </svg>
+                    <span>Node Info</span>
+                </DropDownMenuItem>
+            </RouterLink>
+
+            <!-- direct message button -->
+            <RouterLink :to="{ name: 'node.messages', params: { nodeId: node.num }}">
+                <DropDownMenuItem>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                        <path fill-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
+                    </svg>
+                    <span>Direct Message</span>
+                </DropDownMenuItem>
+            </RouterLink>
+
+            <!-- exchange node info button -->
+            <DropDownMenuItem @click="onRequestNodeInfo(node)">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                    <path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" />
+                </svg>
+                <span>Request Node Info</span>
+            </DropDownMenuItem>
+
+            <!-- forget node button -->
+            <DropDownMenuItem @click="onDeleteNode(node)" class="border-t">
+                <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                </svg>
+                <span class="text-red-500">Forget Node</span>
+            </DropDownMenuItem>
+
+        </template>
+    </DropDownMenu>
+</template>
+
+<script>
+import NodeUtils from "../../js/NodeUtils.js";
+import IconButton from "../IconButton.vue";
+import DropDownMenu from "../DropDownMenu.vue";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
+import NodeAPI from "../../js/NodeAPI.js";
+
+export default {
+    name: 'NodeDropDownMenu',
+    components: {
+        DropDownMenuItem,
+        DropDownMenu,
+        IconButton,
+    },
+    props: {
+        node: Object,
+    },
+    emits: [
+        "node-deleted",
+    ],
+    methods: {
+        getNodeHexId: (nodeId) => NodeUtils.getNodeHexId(nodeId),
+        getNodeShortName: (nodeId) => NodeUtils.getNodeShortName(nodeId),
+        getNodeLongName: (nodeId) => NodeUtils.getNodeLongName(nodeId),
+        getNodeColour: (nodeId) => NodeUtils.getNodeColour(nodeId),
+        getNodeTextColour: (nodeId) => NodeUtils.getNodeTextColour(nodeId),
+        onRequestNodeInfo(node) {
+
+            // request node info
+            NodeAPI.requestNodeInfo(node.num);
+
+            // show alert
+            alert("A request has been sent to the node to send its info back to us.");
+
+        },
+        onDeleteNode(node) {
+
+            // confirm user wants to remove this node
+            if(!confirm("Are you sure you want to forget this node?")){
+                return;
+            }
+
+            // remove node
+            NodeAPI.removeNodeByNum(node.num);
+
+            // emit event
+            this.$emit("node-deleted", node);
+
+        },
+    },
+}
+</script>
diff --git a/src/components/nodes/NodesList.vue b/src/components/nodes/NodesList.vue
index f4d154f..2b7385b 100644
--- a/src/components/nodes/NodesList.vue
+++ b/src/components/nodes/NodesList.vue
@@ -40,61 +40,8 @@
                     </div>
                 </div>
 
-                <!-- drop down menu -->
-                <DropDownMenu>
-                    <template v-slot:button>
-                        <IconButton v-if="node" class="mx-2 bg-transparent text-gray-700">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
-                            </svg>
-                        </IconButton>
-                    </template>
-                    <template v-slot:items>
-
-                        <!-- node details -->
-                        <div class="p-2 border-b">
-                            <div class="text-sm text-gray-500 font-semibold">{{ getNodeLongName(node.num) }}</div>
-                            <div class="text-sm text-gray-500">{{ getNodeHexId(node.num) }}</div>
-                        </div>
-
-                        <!-- node info button -->
-                        <RouterLink :to="{ name: 'node', params: { nodeId: node.num }}">
-                            <DropDownMenuItem>
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
-                                    <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
-                                </svg>
-                                <span>Node Info</span>
-                            </DropDownMenuItem>
-                        </RouterLink>
-
-                        <!-- direct message button -->
-                        <RouterLink :to="{ name: 'node.messages', params: { nodeId: node.num }}">
-                            <DropDownMenuItem>
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
-                                    <path fill-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
-                                </svg>
-                                <span>Direct Message</span>
-                            </DropDownMenuItem>
-                        </RouterLink>
-
-                        <!-- exchange node info button -->
-                        <DropDownMenuItem @click="onRequestNodeInfo(node)">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
-                                <path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" />
-                            </svg>
-                            <span>Request Node Info</span>
-                        </DropDownMenuItem>
-
-                        <!-- forget node button -->
-                        <DropDownMenuItem @click="onDeleteNode(node)" class="border-t">
-                            <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
-                            </svg>
-                            <span class="text-red-500">Forget Node</span>
-                        </DropDownMenuItem>
-
-                    </template>
-                </DropDownMenu>
+                <!-- node dropdown menu -->
+                <NodeDropDownMenu :node="node"/>
 
             </div>
         </div>
@@ -107,14 +54,14 @@ import NodeUtils from "../../js/NodeUtils.js";
 import moment from "moment";
 import NodeIcon from "./NodeIcon.vue";
 import GlobalState from "../../js/GlobalState.js";
-import IconButton from "../IconButton.vue";
-import DropDownMenu from "../DropDownMenu.vue";
-import NodeAPI from "../../js/NodeAPI.js";
-import DropDownMenuItem from "../DropDownMenuItem.vue";
+import NodeDropDownMenu from "./NodeDropDownMenu.vue";
 
 export default {
     name: 'NodesList',
-    components: {DropDownMenuItem, DropDownMenu, IconButton, NodeIcon},
+    components: {
+        NodeDropDownMenu,
+        NodeIcon,
+    },
     emits: [
         "node-click",
     ],
@@ -139,26 +86,6 @@ export default {
         formatUnixSecondsAgo(unixSeconds) {
             return moment.unix(unixSeconds).fromNow();
         },
-        onRequestNodeInfo(node) {
-
-            // request node info
-            NodeAPI.requestNodeInfo(node.num);
-
-            // show alert
-            alert("A request has been sent to the node to send its info back to us.");
-
-        },
-        async onDeleteNode(node) {
-
-            // confirm user wants to remove this node
-            if(!confirm("Are you sure you want to forget this node?")){
-                return;
-            }
-
-            // remove node
-            await NodeAPI.removeNodeByNum(node.num);
-
-        },
     },
     computed: {
         GlobalState() {
diff --git a/src/components/pages/NodeMessagesPage.vue b/src/components/pages/NodeMessagesPage.vue
index 4294714..57211c3 100644
--- a/src/components/pages/NodeMessagesPage.vue
+++ b/src/components/pages/NodeMessagesPage.vue
@@ -7,11 +7,7 @@
                 <NodeIcon v-if="node" :node="node" class="mr-3"/>
             </template>
             <template v-slot:trailing>
-                <IconButton v-if="node" @click="onNodeInfoClick(node)" class="mr-3">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-                    </svg>
-                </IconButton>
+                <NodeDropDownMenu v-if="node" :node="node" @node-deleted="onNodeDeleted"/>
             </template>
         </AppBar>
 
@@ -31,10 +27,12 @@ import NodeIcon from "../nodes/NodeIcon.vue";
 import Page from "./Page.vue";
 import IconButton from "../IconButton.vue";
 import NodeUtils from "../../js/NodeUtils.js";
+import NodeDropDownMenu from "../nodes/NodeDropDownMenu.vue";
 
 export default {
     name: 'NodeMessagesPage',
     components: {
+        NodeDropDownMenu,
         IconButton,
         Page,
         NodeIcon,
@@ -57,13 +55,13 @@ export default {
     },
     methods: {
         getNodeLongName: (nodeId) => NodeUtils.getNodeLongName(nodeId),
-        onNodeInfoClick(node) {
+        onNodeDeleted() {
+
+            // go back to main page
             this.$router.push({
-                name: "node",
-                params: {
-                    nodeId: node.num,
-                },
+                name: "main",
             });
+
         },
     },
     computed: {
diff --git a/src/components/pages/NodePage.vue b/src/components/pages/NodePage.vue
index 81d7bf7..9577967 100644
--- a/src/components/pages/NodePage.vue
+++ b/src/components/pages/NodePage.vue
@@ -7,16 +7,7 @@
                 <NodeIcon v-if="node" :node="node" class="mr-3"/>
             </template>
             <template v-slot:trailing>
-                <IconButton v-if="node" @click="onRequestNodeInfo(node)" class="mr-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
-                    </svg>
-                </IconButton>
-                <IconButton v-if="node" @click="onDeleteNode(node)" class="mr-3">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                    </svg>
-                </IconButton>
+                <NodeDropDownMenu v-if="node" :node="node" @node-deleted="onNodeDeleted"/>
             </template>
         </AppBar>
 
@@ -99,14 +90,13 @@ import AppBar from "../AppBar.vue";
 import NodeIcon from "../nodes/NodeIcon.vue";
 import Page from "./Page.vue";
 import NodeUtils from "../../js/NodeUtils.js";
-import IconButton from "../IconButton.vue";
-import NodeAPI from "../../js/NodeAPI.js";
 import moment from "moment";
+import NodeDropDownMenu from "../nodes/NodeDropDownMenu.vue";
 
 export default {
     name: 'NodePage',
     components: {
-        IconButton,
+        NodeDropDownMenu,
         Page,
         NodeIcon,
         AppBar,
@@ -131,24 +121,13 @@ export default {
         getRoleName: (roleId) => NodeUtils.getRoleName(roleId),
         getHardwareName: (roleId) => NodeUtils.getHardwareName(roleId),
         latLongIntegerToLatLong: (latLongInteger) => NodeUtils.latLongIntegerToLatLong(latLongInteger),
-        async onDeleteNode(node) {
-
-            // confirm user wants to remove this node
-            if(!confirm("Are you sure you want to forget this node?")){
-                return;
-            }
+        onNodeDeleted() {
 
             // go back to main page
             this.$router.push({
                 name: "main",
             });
 
-            // remove node
-            await NodeAPI.removeNodeByNum(node.num);
-
-        },
-        onRequestNodeInfo(node) {
-            NodeAPI.requestNodeInfo(node.num);
         },
     },
     computed: {