diff --git a/app/w/[id]/components/comment-block/comment-block.tsx b/app/w/[id]/components/comment-block/comment-block.tsx
new file mode 100644
index 0000000000..0b01970789
--- /dev/null
+++ b/app/w/[id]/components/comment-block/comment-block.tsx
@@ -0,0 +1,106 @@
+import { useState, useEffect, useRef } from 'react'
+import { Card } from '@/components/ui/card'
+import { Textarea } from '@/components/ui/textarea'
+import { X } from 'lucide-react'
+import { useCommentStore } from '@/stores/comments/store'
+import { NodeProps } from 'reactflow'
+import { cn } from '@/lib/utils'
+
+interface CommentBlockData {
+  id: string
+  text: string
+}
+
+export function CommentBlock({ data }: NodeProps<CommentBlockData>) {
+  const [text, setText] = useState(data.text)
+  const [isEditing, setIsEditing] = useState(!data.text)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const { updateComment, removeComment } = useCommentStore()
+
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [isEditing])
+
+  const handleBlur = () => {
+    setIsEditing(false)
+    setIsExpanded(false)
+    if (text.trim()) {
+      updateComment(data.id, text)
+    } else {
+      removeComment(data.id)
+    }
+  }
+
+  const handleClick = () => {
+    setIsExpanded(true)
+    if (!text) {
+      setIsEditing(true)
+    }
+  }
+
+  if (!isExpanded) {
+    return (
+      <div
+        className={cn(
+          'w-6 h-6 rounded-full bg-white border border-gray-200 shadow-sm cursor-pointer',
+          'hover:shadow-md transition-all duration-200 ease-in-out transform scale-100',
+          'flex items-center justify-center'
+        )}
+        onClick={handleClick}
+        onMouseEnter={() => setIsExpanded(true)}
+      >
+        <div className="w-2 h-2 rounded-full bg-yellow-500" />
+      </div>
+    )
+  }
+
+  return (
+    <Card
+      className={cn(
+        'w-[240px] shadow-md select-none relative cursor-default focus:outline-none focus-visible:ring-0',
+        'bg-white hover:bg-gray-50/50',
+        'border border-gray-200',
+        'transition-all duration-200 ease-in-out transform scale-100',
+        'animate-in fade-in-0 zoom-in-95'
+      )}
+      onMouseLeave={() => !isEditing && setIsExpanded(false)}
+    >
+      <div className="flex items-center justify-between p-2 border-b border-gray-200">
+        <div className="text-sm font-medium text-gray-600">Note</div>
+        <button
+          className="opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={(e) => {
+            e.stopPropagation()
+            removeComment(data.id)
+          }}
+        >
+          <X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
+        </button>
+      </div>
+
+      <div className="p-2.5" onClick={() => setIsEditing(true)}>
+        {isEditing ? (
+          <Textarea
+            ref={textareaRef}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onBlur={handleBlur}
+            className={cn(
+              'min-h-[80px] max-h-[240px] resize-none',
+              'bg-transparent border-0 outline-none focus:outline-none focus-visible:ring-0 focus:ring-0 p-0',
+              'text-sm text-gray-900 placeholder:text-gray-400'
+            )}
+            placeholder="Type your note here..."
+          />
+        ) : (
+          <div className="text-sm text-gray-900 whitespace-pre-wrap">
+            {text}
+          </div>
+        )}
+      </div>
+    </Card>
+  )
+}
diff --git a/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx b/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
index f1d938f333..51b332cee2 100644
--- a/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
+++ b/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
@@ -16,9 +16,14 @@ import { NotificationList } from '@/app/w/components/notifications/notifications
 import { WorkflowNode } from '../workflow-node/workflow-node'
 import { CustomEdge } from '../custom-edge/custom-edge'
 import { initializeStateLogger } from '@/stores/workflow/logger'
+import { useCommentStore } from '@/stores/comments/store'
+import { CommentBlock } from '../comment-block/comment-block'
 
 // Define custom node and edge types for ReactFlow
-const nodeTypes: NodeTypes = { workflowBlock: WorkflowNode }
+const nodeTypes: NodeTypes = {
+  workflowBlock: WorkflowNode,
+  commentBlock: CommentBlock,
+}
 const edgeTypes: EdgeTypes = { custom: CustomEdge }
 
 export function WorkflowCanvas() {
@@ -43,6 +48,8 @@ export function WorkflowCanvas() {
   } = useWorkflowStore()
   const { addNotification } = useNotificationStore()
   const { project } = useReactFlow()
+  const { comments, isCommentMode, addComment, updateCommentPosition } =
+    useCommentStore()
 
   // Transform blocks into ReactFlow node format
   const nodes = Object.values(blocks).map((block) => ({
@@ -63,11 +70,16 @@ export function WorkflowCanvas() {
     (changes: any) => {
       changes.forEach((change: any) => {
         if (change.type === 'position' && change.position) {
-          updateBlockPosition(change.id, change.position)
+          if (change.id.startsWith('comment-')) {
+            const commentId = change.id.replace('comment-', '')
+            updateCommentPosition(commentId, change.position)
+          } else {
+            updateBlockPosition(change.id, change.position)
+          }
         }
       })
     },
-    [updateBlockPosition]
+    [updateBlockPosition, updateCommentPosition]
   )
 
   // Handle edge removal and updates
@@ -135,11 +147,23 @@ export function WorkflowCanvas() {
     setSelectedEdgeId(null)
   }, [])
 
-  // Clear selection when clicking on the canvas
-  const onPaneClick = useCallback(() => {
-    setSelectedBlockId(null)
-    setSelectedEdgeId(null)
-  }, [])
+  // Update onPaneClick to handle comment mode
+  const onPaneClick = useCallback(
+    (event: React.MouseEvent) => {
+      setSelectedBlockId(null)
+      setSelectedEdgeId(null)
+
+      if (isCommentMode) {
+        const reactFlowBounds = event.currentTarget.getBoundingClientRect()
+        const position = project({
+          x: event.clientX - reactFlowBounds.left,
+          y: event.clientY - reactFlowBounds.top,
+        })
+        addComment(position)
+      }
+    },
+    [isCommentMode, project, addComment]
+  )
 
   // Update selected edge when clicking on connections
   const onEdgeClick = useCallback((event: React.MouseEvent, edge: any) => {
@@ -180,11 +204,20 @@ export function WorkflowCanvas() {
     },
   }))
 
+  // Create comment nodes
+  const commentNodes = Object.values(comments).map((comment) => ({
+    id: `comment-${comment.id}`,
+    type: 'commentBlock',
+    position: comment.position,
+    data: { id: comment.id, text: comment.text },
+    draggable: true,
+  }))
+
   return (
     <div className="relative w-full h-[calc(100vh-4rem)]">
       <NotificationList />
       <ReactFlow
-        nodes={nodes}
+        nodes={[...nodes, ...commentNodes]}
         edges={edgesWithSelection}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index af9510d34a..65dd1f36e0 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { History, Bell, Play, Trash2 } from 'lucide-react'
+import { History, Bell, Play, Trash2, MessageSquare } from 'lucide-react'
 import { useNotificationStore } from '@/stores/notifications/store'
 import { NotificationDropdownItem } from './components/notification-dropdown-item'
 import { useWorkflowStore } from '@/stores/workflow/store'
@@ -33,6 +33,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
+import { useCommentStore } from '@/stores/comments/store'
 
 export function ControlBar() {
   const { notifications, getWorkflowNotifications } = useNotificationStore()
@@ -44,6 +45,7 @@ export function ControlBar() {
   const [, forceUpdate] = useState({})
   const { isExecuting, handleRunWorkflow } = useWorkflowExecution()
   const router = useRouter()
+  const { isCommentMode, toggleCommentMode } = useCommentStore()
 
   // Use client-side only rendering for the timestamp
   const [mounted, setMounted] = useState(false)
@@ -163,6 +165,22 @@ export function ControlBar() {
             <TooltipContent>Delete Workflow</TooltipContent>
           </Tooltip>
 
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={isCommentMode ? 'secondary' : 'ghost'}
+                size="icon"
+                onClick={toggleCommentMode}
+              >
+                <MessageSquare className="h-5 w-5" />
+                <span className="sr-only">Toggle Comment Mode</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isCommentMode ? 'Exit Comment Mode' : 'Add Comments'}
+            </TooltipContent>
+          </Tooltip>
+
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Delete Workflow</AlertDialogTitle>
diff --git a/stores/comments/store.ts b/stores/comments/store.ts
new file mode 100644
index 0000000000..edb42af748
--- /dev/null
+++ b/stores/comments/store.ts
@@ -0,0 +1,85 @@
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+
+export interface Comment {
+  id: string
+  text: string
+  position: { x: number; y: number }
+  createdAt: number
+}
+
+interface CommentStore {
+  comments: Record<string, Comment>
+  isCommentMode: boolean
+  addComment: (position: { x: number; y: number }) => void
+  updateComment: (id: string, text: string) => void
+  updateCommentPosition: (id: string, position: { x: number; y: number }) => void
+  removeComment: (id: string) => void
+  toggleCommentMode: () => void
+}
+
+export const useCommentStore = create<CommentStore>()(
+  devtools(
+    persist(
+      (set) => ({
+        comments: {},
+        isCommentMode: false,
+
+        addComment: (position) => {
+          const id = crypto.randomUUID()
+          set((state) => ({
+            comments: {
+              ...state.comments,
+              [id]: {
+                id,
+                text: '',
+                position,
+                createdAt: Date.now(),
+              },
+            },
+            isCommentMode: false,
+          }))
+        },
+
+        updateComment: (id, text) => {
+          set((state) => ({
+            comments: {
+              ...state.comments,
+              [id]: {
+                ...state.comments[id],
+                text,
+              },
+            },
+          }))
+        },
+
+        updateCommentPosition: (id, position) => {
+          set((state) => ({
+            comments: {
+              ...state.comments,
+              [id]: {
+                ...state.comments[id],
+                position,
+              },
+            },
+          }))
+        },
+
+        removeComment: (id) => {
+          set((state) => {
+            const newComments = { ...state.comments }
+            delete newComments[id]
+            return { comments: newComments }
+          })
+        },
+
+        toggleCommentMode: () => {
+          set((state) => ({ isCommentMode: !state.isCommentMode }))
+        },
+      }),
+      {
+        name: 'comments-storage',
+      }
+    )
+  )
+)
\ No newline at end of file
diff --git a/stores/comments/types.ts b/stores/comments/types.ts
new file mode 100644
index 0000000000..e69de29bb2