diff --git a/src/components/FeatureIdeaCloud.tsx b/src/components/FeatureIdeaCloud.tsx
index 09e7604..5094c67 100644
--- a/src/components/FeatureIdeaCloud.tsx
+++ b/src/components/FeatureIdeaCloud.tsx
@@ -31,6 +31,7 @@ import prioritiesData from './FeatureIdeaCloud/data/priorities.json'
 import statusesData from './FeatureIdeaCloud/data/statuses.json'
 import groupColorsData from './FeatureIdeaCloud/data/group-colors.json'
 import { nodeTypes } from './FeatureIdeaCloud/nodes'
+import { dispatchConnectionCountUpdate } from './FeatureIdeaCloud/dispatchConnectionCountUpdate'
 
 type SeedIdeaJson = Omit<FeatureIdea, 'createdAt'> & { createdAtOffsetMs: number }
 
@@ -133,10 +134,7 @@ export function FeatureIdeaCloud() {
         bottom: connections.bottom.size,
       }
       
-      const event = new CustomEvent('updateConnectionCounts', {
-        detail: { nodeId, counts }
-      })
-      window.dispatchEvent(event)
+      dispatchConnectionCountUpdate(nodeId, counts)
     })
   }, [])
 
diff --git a/src/components/FeatureIdeaCloud/GroupNode.tsx b/src/components/FeatureIdeaCloud/GroupNode.tsx
new file mode 100644
index 0000000..61a1968
--- /dev/null
+++ b/src/components/FeatureIdeaCloud/GroupNode.tsx
@@ -0,0 +1,44 @@
+import { NodeProps } from 'reactflow'
+import { Button } from '@/components/ui/button'
+import { DotsThree } from '@phosphor-icons/react'
+import { IdeaGroup } from './types'
+import { GROUP_COLORS } from './constants'
+import { dispatchEditGroup } from './dispatchEditGroup'
+
+export function GroupNode({ data, selected }: NodeProps<IdeaGroup>) {
+  const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0]
+
+  return (
+    <div
+      className="rounded-2xl backdrop-blur-sm transition-all"
+      style={{
+        width: 450,
+        height: 350,
+        backgroundColor: colorScheme.bg,
+        border: `3px dashed ${colorScheme.border}`,
+        boxShadow: selected ? `0 0 0 2px ${colorScheme.value}` : 'none',
+      }}
+    >
+      <div
+        className="absolute -top-3 left-4 px-3 py-1 rounded-full text-xs font-semibold shadow-md"
+        style={{
+          backgroundColor: colorScheme.value,
+          color: 'white',
+        }}
+      >
+        {data.label}
+      </div>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute -top-2 -right-2 h-7 w-7 rounded-full shadow-md bg-background hover:bg-destructive hover:text-destructive-foreground"
+        onClick={(e) => {
+          e.stopPropagation()
+          dispatchEditGroup(data)
+        }}
+      >
+        <DotsThree size={16} />
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/FeatureIdeaCloud/IdeaNode.tsx b/src/components/FeatureIdeaCloud/IdeaNode.tsx
new file mode 100644
index 0000000..1b1ed52
--- /dev/null
+++ b/src/components/FeatureIdeaCloud/IdeaNode.tsx
@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { NodeProps, Position } from 'reactflow'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { DotsThree } from '@phosphor-icons/react'
+import { FeatureIdea } from './types'
+import { PRIORITY_COLORS, STATUS_COLORS } from './constants'
+import { generateHandles } from './generateHandles'
+import { dispatchEditIdea } from './dispatchEditIdea'
+
+export function IdeaNode({ data, selected, id }: NodeProps<FeatureIdea> & { id: string }) {
+  const [connectionCounts, setConnectionCounts] = useState<Record<string, number>>({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  })
+
+  useEffect(() => {
+    const updateConnectionCounts = (event: CustomEvent) => {
+      const { nodeId, counts } = event.detail
+      if (nodeId === id) {
+        setConnectionCounts(counts)
+      }
+    }
+
+    window.addEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
+    return () => {
+      window.removeEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener)
+    }
+  }, [id])
+
+  return (
+    <div className="relative">
+      {generateHandles({ position: Position.Left, type: 'target', side: 'left', count: connectionCounts.left })}
+      {generateHandles({ position: Position.Right, type: 'source', side: 'right', count: connectionCounts.right })}
+      {generateHandles({ position: Position.Top, type: 'target', side: 'top', count: connectionCounts.top })}
+      {generateHandles({ position: Position.Bottom, type: 'source', side: 'bottom', count: connectionCounts.bottom })}
+
+      <Card className={`p-4 shadow-xl hover:shadow-2xl transition-all border-2 ${PRIORITY_COLORS[data.priority]} w-[240px] ${selected ? 'ring-2 ring-primary' : ''}`}>
+        <div className="space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="font-semibold text-sm line-clamp-2 flex-1">{data.title}</h3>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 shrink-0"
+              onClick={(e) => {
+                e.stopPropagation()
+                dispatchEditIdea(data)
+              }}
+            >
+              <DotsThree size={16} />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {data.description}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            <Badge variant="secondary" className="text-xs">
+              {data.category}
+            </Badge>
+            <Badge className={`text-xs ${STATUS_COLORS[data.status]}`}>
+              {data.status}
+            </Badge>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/components/FeatureIdeaCloud/dispatchConnectionCountUpdate.ts b/src/components/FeatureIdeaCloud/dispatchConnectionCountUpdate.ts
new file mode 100644
index 0000000..3d7f85c
--- /dev/null
+++ b/src/components/FeatureIdeaCloud/dispatchConnectionCountUpdate.ts
@@ -0,0 +1,6 @@
+export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
+  const event = new CustomEvent('updateConnectionCounts', {
+    detail: { nodeId, counts }
+  })
+  window.dispatchEvent(event)
+}
diff --git a/src/components/FeatureIdeaCloud/dispatchEditGroup.ts b/src/components/FeatureIdeaCloud/dispatchEditGroup.ts
new file mode 100644
index 0000000..3af9800
--- /dev/null
+++ b/src/components/FeatureIdeaCloud/dispatchEditGroup.ts
@@ -0,0 +1,6 @@
+import { IdeaGroup } from './types'
+
+export function dispatchEditGroup(group: IdeaGroup) {
+  const event = new CustomEvent('editGroup', { detail: group })
+  window.dispatchEvent(event)
+}
diff --git a/src/components/FeatureIdeaCloud/dispatchEditIdea.ts b/src/components/FeatureIdeaCloud/dispatchEditIdea.ts
new file mode 100644
index 0000000..2a7bfdd
--- /dev/null
+++ b/src/components/FeatureIdeaCloud/dispatchEditIdea.ts
@@ -0,0 +1,6 @@
+import { FeatureIdea } from './types'
+
+export function dispatchEditIdea(idea: FeatureIdea) {
+  const event = new CustomEvent('editIdea', { detail: idea })
+  window.dispatchEvent(event)
+}
diff --git a/src/components/FeatureIdeaCloud/utils.tsx b/src/components/FeatureIdeaCloud/generateHandles.tsx
similarity index 69%
rename from src/components/FeatureIdeaCloud/utils.tsx
rename to src/components/FeatureIdeaCloud/generateHandles.tsx
index 1a08ee7..01411c6 100644
--- a/src/components/FeatureIdeaCloud/utils.tsx
+++ b/src/components/FeatureIdeaCloud/generateHandles.tsx
@@ -11,7 +11,7 @@ interface GenerateHandlesProps {
 export function generateHandles({ position, type, side, count }: GenerateHandlesProps): ReactElement[] {
   const totalHandles = Math.max(2, count + 1)
   const handles: ReactElement[] = []
-  
+
   for (let i = 0; i < totalHandles; i++) {
     const handleId = `${side}-${i}`
     const isVertical = position === Position.Top || position === Position.Bottom
@@ -20,7 +20,7 @@ export function generateHandles({ position, type, side, count }: GenerateHandles
     const positionStyle = isVertical
       ? { left: `${leftPercent}%` }
       : { top: `${topPercent}%` }
-    
+
     const element = (
       <Handle
         key={handleId}
@@ -36,23 +36,6 @@ export function generateHandles({ position, type, side, count }: GenerateHandles
     )
     handles.push(element)
   }
-  
+
   return handles
 }
-
-export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
-  const event = new CustomEvent('updateConnectionCounts', {
-    detail: { nodeId, counts }
-  })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditIdea(idea: any) {
-  const event = new CustomEvent('editIdea', { detail: idea })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditGroup(group: any) {
-  const event = new CustomEvent('editGroup', { detail: group })
-  window.dispatchEvent(event)
-}
diff --git a/src/components/FeatureIdeaCloud/utils.ts b/src/components/FeatureIdeaCloud/utils.ts
deleted file mode 100644
index b096f6a..0000000
--- a/src/components/FeatureIdeaCloud/utils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export function dispatchConnectionCountUpdate(nodeId: string, counts: Record<string, number>) {
-  const event = new CustomEvent('updateConnectionCounts', {
-    detail: { nodeId, counts }
-  })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditIdea(idea: any) {
-  const event = new CustomEvent('editIdea', { detail: idea })
-  window.dispatchEvent(event)
-}
-
-export function dispatchEditGroup(group: any) {
-  const event = new CustomEvent('editGroup', { detail: group })
-  window.dispatchEvent(event)
-}