diff --git a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
index 6ea8528..69e6d7a 100644
--- a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
+++ b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Resource } from '../../graph';
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, Position, NodeToolbar } from 'reactflow';
+import { parseResourceId } from '@radapp.io/rad-components';
 
 //  Note: the default style assigned to a node gives it a 150px width
 // from style: .react-flow__node-default.
@@ -8,8 +9,20 @@ import { Handle, NodeProps, Position } from 'reactflow';
 export type ResourceNodeProps = Pick<NodeProps<Resource>, 'data'>;
 
 function ResourceNode(props: ResourceNodeProps) {
+  const group = parseResourceId(props.data.id)?.group;
+
   return (
     <>
+      <NodeToolbar position={Position.Left} align={'center'}>
+        <div
+          style={{ padding: '4px', backgroundColor: 'grey', fontSize: '.6rem' }}
+        >
+          <p style={{ textAlign: 'left' }}>Name: {props.data.name}</p>
+          <p style={{ textAlign: 'left' }}>Type: {props.data.type}</p>
+          <p style={{ textAlign: 'left' }}>Group: {group}</p>
+        </div>
+      </NodeToolbar>
+
       <Handle type="target" position={Position.Top} />
       <div style={{ padding: '2px', fontSize: '.6rem' }}>
         <h3 style={{ textAlign: 'center' }}>{props.data.name}</h3>
@@ -21,4 +34,4 @@ function ResourceNode(props: ResourceNodeProps) {
   );
 }
 
-export default ResourceNode;
+export default React.memo(ResourceNode);