diff --git a/apps/client/package.json b/apps/client/package.json
index 9ccb98d..d356238 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -45,7 +45,8 @@
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
diff --git a/apps/client/src/features/project/board/api.ts b/apps/client/src/features/project/board/api.ts
index 80b288a..64534ab 100644
--- a/apps/client/src/features/project/board/api.ts
+++ b/apps/client/src/features/project/board/api.ts
@@ -8,9 +8,9 @@ export const boardAPI = {
     return response.data.result;
   },
 
-  getEvent: async (projectId: number, config: AxiosRequestConfig = {}) => {
+  getEvent: async (projectId: number, version: number, config: AxiosRequestConfig = {}) => {
     const response = await axiosInstance.get<EventResponse>(
-      `/event?projectId=${projectId}`,
+      `/event?projectId=${projectId}&version=${version}`,
       config
     );
     return response.data.result;
diff --git a/apps/client/src/features/project/board/components/KanbanBoard.tsx b/apps/client/src/features/project/board/components/KanbanBoard.tsx
index 108bf6a..9e88377 100644
--- a/apps/client/src/features/project/board/components/KanbanBoard.tsx
+++ b/apps/client/src/features/project/board/components/KanbanBoard.tsx
@@ -1,15 +1,9 @@
-import { ReactNode, useEffect, useState, DragEvent, useCallback } from 'react';
-import { Link, useLoaderData } from '@tanstack/react-router';
+import { ReactNode, useState, DragEvent } from 'react';
+import { Link } from '@tanstack/react-router';
 import { motion, AnimatePresence } from 'framer-motion';
 import { HamburgerMenuIcon, PlusIcon } from '@radix-ui/react-icons';
 import { PanelLeftOpen } from 'lucide-react';
-import { AxiosError } from 'axios';
-import {
-  Section as TSection,
-  Task,
-  TaskEvent,
-  TaskEventType,
-} from '@/features/project/board/types.ts';
+
 import {
   Section,
   SectionContent,
@@ -23,270 +17,76 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu.tsx';
 import { Button } from '@/components/ui/button.tsx';
-import { Card, CardContent, CardHeader } from '@/components/ui/card.tsx';
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card.tsx';
 import { cn } from '@/lib/utils.ts';
 import { Badge } from '@/components/ui/badge.tsx';
-import { boardAPI } from '@/features/project/board/api.ts';
 import { useToast } from '@/lib/useToast.tsx';
 import { useBoardMutations } from '@/features/project/board/useBoardMutations.ts';
-import { throttle } from '@/shared/utils/throttle.ts';
 import { AssigneeAvatars } from '@/features/project/board/components/AssigneeAvatars.tsx';
 import { calculatePosition, findDiff, findTask } from '@/features/project/board/utils.ts';
 import { TaskTextarea } from '@/features/project/board/components/TaskTextarea.tsx';
+import { useBoardStore } from '@/features/project/board/useBoardStore.ts';
+import { SubtaskProgress } from '@/features/project/board/components/SubtaskProgress.tsx';
+
+interface KanbanBoardProps {
+  projectId: number;
+}
 
-export function KanbanBoard({ sections: initialSections }: { sections: TSection[] }) {
-  const { projectId } = useLoaderData({
-    from: '/_auth/$project/board',
-  });
+export function KanbanBoard({ projectId }: KanbanBoardProps) {
+  const { sections } = useBoardStore();
+  const { updateTaskPosition, updateTaskTitle, createTask, restoreState } = useBoardStore();
 
   const toast = useToast();
-  const { createTask, updatePosition, updateTitle } = useBoardMutations(projectId);
-  const [sections, setSections] = useState<TSection[]>(initialSections);
+  const mutations = useBoardMutations(projectId);
   const [belowSectionId, setBelowSectionId] = useState<number>(-1);
   const [belowTaskId, setBelowTaskId] = useState<number>(-1);
 
-  const handleEvent = useCallback((event: TaskEvent) => {
-    setSections((currentSections) => {
-      const handleTaskCreated = (sections: TSection[]): TSection[] => {
-        return sections.map((section) =>
-          section.id === event.task.sectionId
-            ? {
-                ...section,
-                tasks: [
-                  ...section.tasks,
-                  {
-                    id: event.task.id,
-                    title: event.task.title ?? '',
-                    sectionId: event.task.sectionId!,
-                    position: event.task.position!,
-                    assignees: event.task.assignees ?? [],
-                    labels: event.task.labels ?? [],
-                    subtasks: event.task.subtasks ?? { total: 0, completed: 0 },
-                  } as Task,
-                ],
-              }
-            : section
-        );
-      };
-
-      const handlePositionUpdated = (sections: TSection[]): TSection[] => {
-        const task = findTask(sections, event.task.id);
-        if (!task) return sections;
-
-        return sections.map((section) => {
-          const filteredTasks = section.tasks.filter((t) => t.id !== task.id);
-
-          if (section.id === event.task.sectionId) {
-            return {
-              ...section,
-              tasks: [
-                ...filteredTasks,
-                {
-                  ...task,
-                  sectionId: event.task.sectionId!,
-                  position: event.task.position!,
+  const handleTitleChange = (taskId: number, newTitle: string) => {
+    const task = findTask(sections, taskId);
+    if (!task) return;
+
+    const diff = findDiff(task.title, newTitle);
+
+    if (diff.originalContent.length > 0) {
+      mutations.updateTitle.mutate(
+        {
+          event: 'DELETE_TITLE',
+          taskId,
+          title: {
+            position: diff.position,
+            content: diff.originalContent,
+            length: diff.originalContent.length,
+          },
+        },
+        {
+          onSuccess: () => {
+            if (diff.content.length > 0) {
+              mutations.updateTitle.mutate({
+                event: 'INSERT_TITLE',
+                taskId,
+                title: {
+                  position: diff.position,
+                  content: diff.content,
+                  length: diff.content.length,
                 },
-              ].sort((a, b) => a.position.localeCompare(b.position)),
-            };
-          }
-
-          return {
-            ...section,
-            tasks: filteredTasks,
-          };
-        });
-      };
-
-      const handleTaskUpdated = (sections: TSection[]): TSection[] => {
-        return sections.map((section) => ({
-          ...section,
-          tasks: section.tasks.map((task) =>
-            task.id === event.task.id ? ({ ...task, ...event.task } as Task) : task
-          ),
-        }));
-      };
-
-      const handleTaskDeleted = (sections: TSection[]): TSection[] => {
-        return sections.map((section) => ({
-          ...section,
-          tasks: section.tasks.filter((task) => task.id !== event.task.id),
-        }));
-      };
-
-      let updatedSections = currentSections;
-
-      switch (event.event) {
-        case TaskEventType.TASK_CREATED:
-          updatedSections = handleTaskCreated(currentSections);
-          break;
-
-        case TaskEventType.POSITION_UPDATED:
-          updatedSections = handlePositionUpdated(currentSections);
-          break;
-
-        case TaskEventType.TITLE_UPDATED:
-          updatedSections = handleTaskUpdated(currentSections);
-          break;
-
-        case TaskEventType.TASK_DELETED:
-          updatedSections = handleTaskDeleted(currentSections);
-          break;
-
-        case TaskEventType.ASSIGNEES_CHANGED:
-        case TaskEventType.LABELS_CHANGED:
-        case TaskEventType.SUBTASKS_CHANGED:
-          updatedSections = handleTaskUpdated(currentSections);
-          break;
-
-        default:
-          break;
-      }
-
-      return updatedSections.map((section) => ({
-        ...section,
-        tasks: [...section.tasks].sort((a, b) => a.position.localeCompare(b.position)),
-      }));
-    });
-  }, []);
-
-  const handleTitleChange = useCallback(
-    (taskId: number, newTitle: string) => {
-      setSections((currentSections) => {
-        const task = findTask(currentSections, taskId);
-        if (!task) return currentSections;
-
-        const diff = findDiff(task.title, newTitle);
-
-        if (diff.originalContent.length > 0) {
-          updateTitle.mutate(
-            {
-              event: 'DELETE_TITLE',
-              taskId,
-              title: {
-                position: diff.position,
-                content: diff.originalContent,
-                length: diff.originalContent.length,
-              },
-            },
-            {
-              onSuccess: () => {
-                if (diff.content.length > 0) {
-                  updateTitle.mutate({
-                    event: 'INSERT_TITLE',
-                    taskId,
-                    title: {
-                      position: diff.position,
-                      content: diff.content,
-                      length: diff.content.length,
-                    },
-                  });
-                }
-              },
+              });
             }
-          );
-        } else if (diff.content.length > 0) {
-          updateTitle.mutate({
-            event: 'INSERT_TITLE',
-            taskId,
-            title: {
-              position: diff.position,
-              content: diff.content,
-              length: diff.content.length,
-            },
-          });
+          },
         }
-
-        return currentSections.map((section) => ({
-          ...section,
-          tasks: section.tasks.map((t) => (t.id === taskId ? { ...t, title: newTitle } : t)),
-        }));
+      );
+    } else if (diff.content.length > 0) {
+      mutations.updateTitle.mutate({
+        event: 'INSERT_TITLE',
+        taskId,
+        title: {
+          position: diff.position,
+          content: diff.content,
+          length: diff.content.length,
+        },
       });
-    },
-    [updateTitle]
-  );
-
-  useEffect(() => {
-    let timeoutId: number;
-    const controller = new AbortController();
-    let isPolling = false;
-    let isStopped = false;
-
-    let retryCount = 0;
-    const MAX_RETRY_COUNT = 5;
-    const POLLING_INTERVAL = 500;
-
-    const pollEvent = async () => {
-      if (isPolling || isStopped) return;
-
-      try {
-        isPolling = true;
-
-        const event = await boardAPI.getEvent(projectId, {
-          signal: controller.signal,
-        });
-
-        if (event) {
-          handleEvent(event);
-          retryCount = 0;
-        }
-      } catch (error) {
-        retryCount += 1;
-
-        if ((error as AxiosError).status === 404) {
-          retryCount = 0;
-        }
-
-        if (retryCount >= MAX_RETRY_COUNT) {
-          toast.error('Failed to poll event. Please refresh the page.', 5000);
-          isStopped = true;
-          controller.abort();
-          clearTimeout(timeoutId);
-          return;
-        }
-      } finally {
-        isPolling = false;
-        if (!isStopped) {
-          timeoutId = setTimeout(pollEvent, POLLING_INTERVAL);
-        }
-      }
-    };
-
-    timeoutId = setTimeout(pollEvent, POLLING_INTERVAL);
-
-    return () => {
-      isStopped = true;
-      controller.abort();
-      clearTimeout(timeoutId);
-    };
-  }, [projectId, handleEvent, toast]);
-
-  const handleDragStart = (event: DragEvent<HTMLDivElement>, sectionId: number, taskId: number) => {
-    event.dataTransfer.setData('taskId', taskId.toString());
-    event.dataTransfer.setData('sectionId', sectionId.toString());
-  };
-
-  const handleDragOver = (e: DragEvent<HTMLDivElement>, sectionId: number, taskId?: number) => {
-    e.preventDefault();
-    setBelowSectionId(sectionId);
-
-    if (!taskId) {
-      setBelowTaskId(-1);
-      return;
     }
 
-    setBelowTaskId(taskId);
-  };
-
-  const handleDragLeave = () => {
-    setBelowTaskId(-1);
-    setBelowSectionId(-1);
-  };
-
-  const throttledDragLeave = throttle(handleDragLeave);
-
-  const handleDragEnd = () => {
-    setBelowTaskId(-1);
-    setBelowSectionId(-1);
+    updateTaskTitle(taskId, newTitle);
   };
 
   const handleDrop = (event: DragEvent<HTMLDivElement>, sectionId: number) => {
@@ -311,39 +111,12 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
 
     const previousSections = [...sections];
 
-    setSections((currentSections) => {
-      const task = findTask(currentSections, taskId);
-      if (!task) return currentSections;
-
-      const updatedTask = {
-        ...task,
-        position,
-        sectionId,
-      };
-
-      return currentSections.map((section) => {
-        const filteredTasks = section.tasks.filter((t) => t.id !== taskId);
-
-        if (section.id === sectionId) {
-          return {
-            ...section,
-            tasks: [...filteredTasks, updatedTask].sort((a, b) =>
-              a.position.localeCompare(b.position)
-            ),
-          };
-        }
-
-        return {
-          ...section,
-          tasks: filteredTasks,
-        };
-      });
-    });
+    updateTaskPosition(sectionId, taskId, position);
 
     setBelowTaskId(-1);
     setBelowSectionId(-1);
 
-    updatePosition.mutate(
+    mutations.updatePosition.mutate(
       {
         event: 'UPDATE_POSITION',
         sectionId,
@@ -352,7 +125,7 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
       },
       {
         onError: () => {
-          setSections(previousSections);
+          restoreState(previousSections);
           toast.error('Failed to update task position');
         },
       }
@@ -365,7 +138,7 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
 
     const position = calculatePosition(section.tasks, -1);
 
-    createTask.mutate(
+    mutations.createTask.mutate(
       {
         event: 'CREATE_TASK',
         sectionId,
@@ -373,28 +146,15 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
       },
       {
         onSuccess: (response) => {
-          setSections((currentSections) =>
-            currentSections.map((section) => {
-              if (section.id === sectionId) {
-                return {
-                  ...section,
-                  tasks: [
-                    ...section.tasks,
-                    {
-                      id: response.id,
-                      title: '',
-                      sectionId,
-                      position,
-                      assignees: [],
-                      labels: [],
-                      subtasks: { total: 0, completed: 0 },
-                    },
-                  ].sort((a, b) => a.position.localeCompare(b.position)),
-                };
-              }
-              return section;
-            })
-          );
+          createTask(sectionId, {
+            id: response.id,
+            title: '',
+            sectionId,
+            position,
+            assignees: [],
+            labels: [],
+            subtasks: { total: 0, completed: 0 },
+          });
         },
         onError: () => {
           toast.error('Failed to create task');
@@ -403,6 +163,33 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
     );
   };
 
+  const handleDragStart = (event: DragEvent<HTMLDivElement>, sectionId: number, taskId: number) => {
+    event.dataTransfer.setData('taskId', taskId.toString());
+    event.dataTransfer.setData('sectionId', sectionId.toString());
+  };
+
+  const handleDragEnd = () => {
+    setBelowTaskId(-1);
+    setBelowSectionId(-1);
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>, sectionId: number, taskId?: number) => {
+    e.preventDefault();
+    setBelowSectionId(sectionId);
+
+    if (!taskId) {
+      setBelowTaskId(-1);
+      return;
+    }
+
+    setBelowTaskId(taskId);
+  };
+
+  const handleDragLeave = () => {
+    setBelowTaskId(-1);
+    setBelowSectionId(-1);
+  };
+
   return (
     <div className="spazce-x-2 flex h-[calc(100vh-110px)] gap-2 overflow-x-auto p-4">
       <AnimatePresence mode="popLayout">
@@ -414,8 +201,6 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
               'bg-transparent',
               section.id === belowSectionId && belowTaskId === -1 && 'border-2 border-blue-400'
             )}
-            onDragOver={(e) => handleDragOver(e, section.id)}
-            onDrop={(e) => handleDrop(e, section.id)}
           >
             <SectionHeader className="flex w-full items-center justify-between gap-2 space-y-0">
               <div className="flex items-center gap-2">
@@ -436,82 +221,84 @@ export function KanbanBoard({ sections: initialSections }: { sections: TSection[
             </SectionHeader>
             <SectionContent
               key={section.id}
-              className="flex flex-1 flex-col gap-2 overflow-y-auto pt-1"
+              className="flex w-full flex-1 flex-col items-center gap-2 overflow-y-auto pt-1"
               onDragOver={(e) => handleDragOver(e, section.id)}
-              onDragLeave={throttledDragLeave}
+              onDragLeave={handleDragLeave}
               onDrop={(e) => handleDrop(e, section.id)}
               onDragEnd={handleDragEnd}
             >
-              {section.tasks
-                .sort((a, b) => a.position.localeCompare(b.position))
-                .map((task) => (
-                  <motion.div
-                    key={task.id}
-                    layout
-                    layoutId={task.id.toString()}
-                    draggable
-                    initial={{ opacity: 1, zIndex: 1 }}
-                    animate={{
-                      zIndex: task.id === belowTaskId ? 50 : 1,
-                      scale: task.id === belowTaskId ? 1.02 : 1,
-                    }}
-                    transition={{
-                      layout: { duration: 0.3 },
-                      scale: { duration: 0.2 },
-                    }}
-                    style={{ position: 'relative' }}
-                    onDragStart={(e) =>
-                      handleDragStart(
-                        e as unknown as DragEvent<HTMLDivElement>,
-                        section.id,
-                        task.id
-                      )
-                    }
-                    onDrop={(e) => handleDrop(e, section.id)}
-                    onDragOver={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleDragOver(e, section.id, task.id);
-                    }}
-                    onDragLeave={throttledDragLeave}
+              {section.tasks.map((task) => (
+                <motion.div
+                  key={task.id}
+                  layout
+                  layoutId={task.id.toString()}
+                  draggable
+                  initial={{ opacity: 1, zIndex: 1 }}
+                  animate={{
+                    zIndex: task.id === belowTaskId ? 50 : 1,
+                    scale: task.id === belowTaskId ? 1.02 : 1,
+                  }}
+                  transition={{
+                    layout: { duration: 0.3 },
+                    scale: { duration: 0.2 },
+                  }}
+                  style={{ position: 'relative' }}
+                  onDragStart={(e) =>
+                    handleDragStart(e as unknown as DragEvent<HTMLDivElement>, section.id, task.id)
+                  }
+                  onDrop={(e) => handleDrop(e, section.id)}
+                  onDragOver={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDragOver(e, section.id, task.id);
+                  }}
+                  onDragLeave={handleDragLeave}
+                >
+                  <Card
+                    className={cn(
+                      'w-56 border bg-white transition-all duration-300 md:w-80',
+                      task.id === belowTaskId && 'border-2 border-blue-400',
+                      'hover:shadow-md'
+                    )}
                   >
-                    <Card
-                      className={cn(
-                        'w-56 border bg-white transition-all duration-300 md:w-80',
-                        task.id === belowTaskId && 'border-2 border-blue-400',
-                        'hover:shadow-md'
-                      )}
-                    >
-                      <CardHeader className="flex flex-row items-start gap-2 space-y-0">
-                        <TaskTextarea
-                          taskId={task.id}
-                          initialTitle={task.title}
-                          onTitleChange={handleTitleChange}
+                    <CardHeader className="flex flex-row items-start gap-2 space-y-0">
+                      <TaskTextarea
+                        taskId={task.id}
+                        initialTitle={task.title}
+                        onTitleChange={handleTitleChange}
+                      />
+                      <Button
+                        variant="ghost"
+                        type="button"
+                        asChild
+                        className="hover:text-primary px-2 hover:bg-transparent"
+                      >
+                        <Link to={`/${projectId}/board/${task.id}`} className="p-0">
+                          <PanelLeftOpen className="h-6 w-6" />
+                        </Link>
+                      </Button>
+                    </CardHeader>
+                    <CardContent className="flex items-end justify-between">
+                      <div className="flex flex-wrap gap-1">
+                        {task.labels.map((label) => (
+                          <Badge key={label.id} style={{ backgroundColor: label.color }}>
+                            {label.name}
+                          </Badge>
+                        ))}
+                      </div>
+                      <AssigneeAvatars assignees={task.assignees} />
+                    </CardContent>
+                    {task.subtasks.total > 0 && (
+                      <CardFooter className="flex items-center justify-between space-y-0">
+                        <SubtaskProgress
+                          total={task.subtasks.total}
+                          completed={task.subtasks.completed}
                         />
-                        <Button
-                          variant="ghost"
-                          type="button"
-                          asChild
-                          className="hover:text-primary px-2 hover:bg-transparent"
-                        >
-                          <Link to={`/${projectId}/board/${task.id}`} className="p-0">
-                            <PanelLeftOpen className="h-6 w-6" />
-                          </Link>
-                        </Button>
-                      </CardHeader>
-                      <CardContent className="flex items-end justify-between">
-                        <div className="flex flex-wrap gap-1">
-                          {task.labels.map((label) => (
-                            <Badge key={label.id} style={{ backgroundColor: label.color }}>
-                              {label.name}
-                            </Badge>
-                          ))}
-                        </div>
-                        <AssigneeAvatars assignees={task.assignees} />
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                ))}
+                      </CardFooter>
+                    )}
+                  </Card>
+                </motion.div>
+              ))}
             </SectionContent>
             <SectionFooter className="w-full">
               <Button
diff --git a/apps/client/src/features/project/board/components/SubtaskProgress.tsx b/apps/client/src/features/project/board/components/SubtaskProgress.tsx
new file mode 100644
index 0000000..c49f6b0
--- /dev/null
+++ b/apps/client/src/features/project/board/components/SubtaskProgress.tsx
@@ -0,0 +1,19 @@
+export function SubtaskProgress({ total, completed }: { total: number; completed: number }) {
+  if (total === 0) return null;
+
+  const percentage = Math.floor((completed / total) * 100);
+
+  return (
+    <div className="flex w-full items-center gap-2">
+      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
+        <div
+          className="bg-primary h-full rounded-full transition-all duration-300"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      <span className="whitespace-nowrap text-xs text-gray-500">
+        {completed}/{total}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/client/src/features/project/board/components/TaskTextarea.tsx b/apps/client/src/features/project/board/components/TaskTextarea.tsx
index 0d8c359..7fe4264 100644
--- a/apps/client/src/features/project/board/components/TaskTextarea.tsx
+++ b/apps/client/src/features/project/board/components/TaskTextarea.tsx
@@ -12,6 +12,7 @@ export function TaskTextarea({ taskId, initialTitle, onTitleChange }: TaskTextar
   const [localTitle, setLocalTitle] = useState(initialTitle);
   const [isComposing, setIsComposing] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const debouncedTitle = useDebounce(localTitle, 300);
   const prevDebouncedTitle = useRef(debouncedTitle);
 
@@ -26,6 +27,13 @@ export function TaskTextarea({ taskId, initialTitle, onTitleChange }: TaskTextar
     }
   }, [debouncedTitle, isComposing, taskId, onTitleChange]);
 
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.selectionStart = textareaRef.current.value.length;
+    }
+  }, [isEditing]);
+
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setLocalTitle(e.target.value);
   };
@@ -38,12 +46,20 @@ export function TaskTextarea({ taskId, initialTitle, onTitleChange }: TaskTextar
     }
   };
 
+  const handleStartEditing = () => {
+    setIsEditing(true);
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+  };
+
   if (!isEditing) {
     return (
       <div
-        onDoubleClick={() => setIsEditing(true)}
+        onDoubleClick={handleStartEditing}
         className={cn(
-          'line-clamp-2 min-h-[24px] flex-1 cursor-text',
+          'line-clamp-2 min-h-[24px] flex-1 cursor-text whitespace-pre-wrap p-[1px]',
           localTitle.length === 0 && 'text-gray-400'
         )}
       >
@@ -54,13 +70,14 @@ export function TaskTextarea({ taskId, initialTitle, onTitleChange }: TaskTextar
 
   return (
     <textarea
+      ref={textareaRef}
       value={localTitle}
       onChange={handleChange}
       onCompositionStart={handleCompositionStart}
       onCompositionEnd={handleCompositionEnd}
       onKeyDown={handleKeyDown}
-      onBlur={() => setIsEditing(false)}
-      className="flex flex-1 resize-none bg-transparent text-black focus:outline-none"
+      onBlur={handleBlur}
+      className="flex flex-1 resize-none whitespace-pre-wrap bg-transparent text-black focus:outline-none"
       placeholder="Enter task title..."
       rows={2}
     />
diff --git a/apps/client/src/features/project/board/types.ts b/apps/client/src/features/project/board/types.ts
index 4838353..88eb45e 100644
--- a/apps/client/src/features/project/board/types.ts
+++ b/apps/client/src/features/project/board/types.ts
@@ -19,12 +19,16 @@ export type Section = {
   tasks: Task[];
 };
 
-export type TasksResponse = BaseResponse<Section[]>;
+export type TasksResponse = BaseResponse<{
+  version: number;
+  project: Section[];
+}>;
 
 export enum TaskEventType {
   'TASK_CREATED' = 'TASK_CREATED',
   'TASK_DELETED' = 'TASK_DELETED',
-  'TITLE_UPDATED' = 'TITLE_UPDATED',
+  'TITLE_INSERTED' = 'TITLE_INSERTED',
+  'TITLE_DELETED' = 'TITLE_DELETED',
   'POSITION_UPDATED' = 'POSITION_UPDATED',
   'ASSIGNEES_CHANGED' = 'ASSIGNEES_CHANGED',
   'LABELS_CHANGED' = 'LABELS_CHANGED',
@@ -33,21 +37,26 @@ export enum TaskEventType {
 
 export type TaskEvent = {
   event: TaskEventType;
+  version: number;
   task: {
     id: number;
-    title?: string;
+    title?: {
+      position: number;
+      content: string;
+      length: number;
+    };
     sectionId?: number;
     position?: string;
     assignees?: Assignee[];
     labels?: Label[];
     subtasks?: {
-      total?: number;
-      completed?: number;
+      total: number;
+      completed: number;
     };
   };
 };
 
-export type EventResponse = BaseResponse<TaskEvent>;
+export type EventResponse = BaseResponse<TaskEvent[]>;
 
 export interface UpdateTitleDto {
   event: 'INSERT_TITLE' | 'DELETE_TITLE';
diff --git a/apps/client/src/features/project/board/useBoardStore.ts b/apps/client/src/features/project/board/useBoardStore.ts
new file mode 100644
index 0000000..f70e63a
--- /dev/null
+++ b/apps/client/src/features/project/board/useBoardStore.ts
@@ -0,0 +1,250 @@
+import { create } from 'zustand';
+import { Section as TSection, Task, TaskEvent, TaskEventType } from './types';
+import { findTask } from './utils';
+
+interface BoardState {
+  version: number;
+  setVersion: (version: number) => void;
+
+  sections: TSection[];
+  setSections: (sections: TSection[]) => void;
+
+  handleEvent: (event: TaskEvent) => void;
+  updateTaskPosition: (sectionId: number, taskId: number, position: string) => void;
+  updateTaskTitle: (taskId: number, newTitle: string) => void;
+  createTask: (sectionId: number, task: Task) => void;
+  restoreState: (sections: TSection[]) => void;
+  deleteTask: (taskId: number) => void;
+}
+
+export const useBoardStore = create<BoardState>((set) => ({
+  version: 0,
+
+  setVersion: (version) => set({ version }),
+
+  sections: [] as TSection[],
+
+  setSections: (sections) => set({ sections }),
+
+  handleEvent: (event) => {
+    set((state) => {
+      let updatedSections = state.sections;
+
+      switch (event.event) {
+        case TaskEventType.TASK_CREATED:
+          updatedSections = handleTaskCreated(state.sections, event);
+          break;
+
+        case TaskEventType.POSITION_UPDATED:
+          updatedSections = handlePositionUpdated(state.sections, event);
+          break;
+
+        case TaskEventType.TITLE_INSERTED:
+          updatedSections = handleTitleInserted(state.sections, event);
+          break;
+
+        case TaskEventType.TITLE_DELETED:
+          updatedSections = handleTitleDeleted(state.sections, event);
+          break;
+
+        case TaskEventType.TASK_DELETED:
+          updatedSections = handleTaskDeleted(state.sections, event);
+          break;
+
+        case TaskEventType.SUBTASKS_CHANGED:
+          updatedSections = handleSubtasksChanged(state.sections, event);
+          break;
+
+        case TaskEventType.ASSIGNEES_CHANGED:
+        case TaskEventType.LABELS_CHANGED:
+          updatedSections = handleTaskUpdated(state.sections, event);
+          break;
+
+        default:
+          break;
+      }
+
+      return {
+        sections: sortSectionTasks(updatedSections),
+      };
+    });
+  },
+
+  updateTaskPosition: (sectionId: number, taskId: number, position: string) =>
+    set((state) => {
+      const task = findTask(state.sections, taskId);
+      if (!task) return state;
+
+      return {
+        sections: state.sections.map((section) => {
+          const filteredTasks = section.tasks.filter((t) => t.id !== taskId);
+
+          if (section.id === sectionId) {
+            return {
+              ...section,
+              tasks: [...filteredTasks, { ...task, position, sectionId }].sort((a, b) =>
+                a.position.localeCompare(b.position)
+              ),
+            };
+          }
+
+          return {
+            ...section,
+            tasks: filteredTasks,
+          };
+        }),
+      };
+    }),
+
+  updateTaskTitle: (taskId: number, newTitle: string) =>
+    set((state) => ({
+      sections: state.sections.map((section) => ({
+        ...section,
+        tasks: section.tasks.map((t) => (t.id === taskId ? { ...t, title: newTitle } : t)),
+      })),
+    })),
+
+  createTask: (sectionId: number, task: Task) =>
+    set((state) => ({
+      sections: state.sections.map((section) =>
+        section.id === sectionId
+          ? {
+              ...section,
+              tasks: [...section.tasks, task].sort((a, b) => a.position.localeCompare(b.position)),
+            }
+          : section
+      ),
+    })),
+
+  deleteTask: (taskId: number) =>
+    set((state) => ({
+      sections: state.sections.map((section) => ({
+        ...section,
+        tasks: section.tasks.filter((t) => t.id !== taskId),
+      })),
+    })),
+
+  restoreState: (sections: TSection[]) => set({ sections }),
+}));
+
+const handleTaskCreated = (sections: TSection[], event: TaskEvent): TSection[] => {
+  return sections.map((section) =>
+    section.id === event.task.sectionId
+      ? {
+          ...section,
+          tasks: [
+            ...section.tasks,
+            {
+              id: event.task.id,
+              title: event.task.title ?? '',
+              sectionId: event.task.sectionId!,
+              position: event.task.position!,
+              assignees: event.task.assignees ?? [],
+              labels: event.task.labels ?? [],
+              subtasks: event.task.subtasks ?? { total: 0, completed: 0 },
+            } as Task,
+          ],
+        }
+      : section
+  );
+};
+
+const handlePositionUpdated = (sections: TSection[], event: TaskEvent): TSection[] => {
+  const task = findTask(sections, event.task.id);
+  if (!task) return sections;
+
+  return sections.map((section) => {
+    const filteredTasks = section.tasks.filter((t) => t.id !== task.id);
+
+    if (section.id === event.task.sectionId) {
+      return {
+        ...section,
+        tasks: [
+          ...filteredTasks,
+          {
+            ...task,
+            sectionId: event.task.sectionId!,
+            position: event.task.position!,
+          },
+        ].sort((a, b) => a.position.localeCompare(b.position)),
+      };
+    }
+
+    return {
+      ...section,
+      tasks: filteredTasks,
+    };
+  });
+};
+
+const handleTaskUpdated = (sections: TSection[], event: TaskEvent): TSection[] => {
+  return sections.map((section) => ({
+    ...section,
+    tasks: section.tasks.map((task) =>
+      task.id === event.task.id ? ({ ...task, ...event.task } as Task) : task
+    ),
+  }));
+};
+
+const handleTitleInserted = (sections: TSection[], event: TaskEvent): TSection[] => {
+  // 실제 task 내의 title 의 특정 부분에 event에 발생한 것을 추가해야 함
+  return sections.map((section) => {
+    const task = section.tasks.find((t) => t.id === event.task.id);
+
+    const title = task?.title ?? '';
+    const { position, content, length } = event.task.title!;
+    const newTitle = title.slice(0, position) + content + title.slice(position + length);
+
+    return {
+      ...section,
+      tasks: section.tasks.map((t) => (t.id === event.task.id ? { ...t, title: newTitle } : t)),
+    };
+  });
+};
+
+const handleTitleDeleted = (sections: TSection[], event: TaskEvent): TSection[] => {
+  // 실제 task 내의 title 의 특정 부분에 event에 발생한 것을 삭제해야 함
+  return sections.map((section) => {
+    const task = section.tasks.find((t) => t.id === event.task.id);
+
+    const title = task?.title ?? '';
+    const { position, length } = event.task.title!;
+    const newTitle = title.slice(0, position) + title.slice(position + length);
+
+    return {
+      ...section,
+      tasks: section.tasks.map((t) => (t.id === event.task.id ? { ...t, title: newTitle } : t)),
+    };
+  });
+};
+
+const handleSubtasksChanged = (sections: TSection[], event: TaskEvent): TSection[] => {
+  return sections.map((section) => ({
+    ...section,
+    tasks: section.tasks.map((task) =>
+      task.id === event.task.id
+        ? ({
+            ...task,
+            subtasks: {
+              total: event.task.subtasks!.total,
+              completed: event.task.subtasks!.completed,
+            },
+          } as Task)
+        : task
+    ),
+  }));
+};
+
+const handleTaskDeleted = (sections: TSection[], event: TaskEvent): TSection[] => {
+  return sections.map((section) => ({
+    ...section,
+    tasks: section.tasks.filter((task) => task.id !== event.task.id),
+  }));
+};
+
+const sortSectionTasks = (sections: TSection[]): TSection[] => {
+  return sections.map((section) => ({
+    ...section,
+    tasks: [...section.tasks].sort((a, b) => a.position.localeCompare(b.position)),
+  }));
+};
diff --git a/apps/client/src/features/project/board/useLongPollingEvents.ts b/apps/client/src/features/project/board/useLongPollingEvents.ts
new file mode 100644
index 0000000..338aa90
--- /dev/null
+++ b/apps/client/src/features/project/board/useLongPollingEvents.ts
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import { AxiosError } from 'axios';
+import { useToast } from '@/lib/useToast.tsx';
+import { TaskEvent } from '@/features/project/board/types.ts';
+import { boardAPI } from '@/features/project/board/api.ts';
+import { useBoardStore } from '@/features/project/board/useBoardStore.ts';
+
+const MAX_RETRY_COUNT = 5;
+const POLLING_INTERVAL = 500;
+
+export const useLongPollingEvents = (projectId: number, onEvent: (event: TaskEvent) => void) => {
+  const toast = useToast();
+
+  const { version, setVersion } = useBoardStore();
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    let timeoutId: number;
+    let isPolling = false;
+    let retryCount = 0;
+
+    const pollEvent = async () => {
+      if (isPolling) {
+        timeoutId = setTimeout(pollEvent, POLLING_INTERVAL);
+        return;
+      }
+
+      try {
+        isPolling = true;
+        const events = await boardAPI.getEvent(projectId, version === 0 ? Date.now() : version, {
+          signal: controller.signal,
+        });
+
+        if (events) {
+          const lastEventVersion = events[events.length - 1].version;
+          setVersion(lastEventVersion);
+
+          events.forEach((event) => {
+            onEvent(event);
+          });
+
+          retryCount = 0;
+        }
+      } catch (error) {
+        retryCount += 1;
+        if ((error as AxiosError).status === 404) {
+          retryCount = 0;
+        }
+        if (retryCount >= MAX_RETRY_COUNT) {
+          toast.error('Failed to poll event. Please refresh the page.', 5000);
+          return;
+        }
+      } finally {
+        isPolling = false;
+        if (!controller.signal.aborted) {
+          timeoutId = setTimeout(pollEvent, POLLING_INTERVAL);
+        }
+      }
+    };
+
+    pollEvent();
+
+    return () => {
+      controller.abort();
+      clearTimeout(timeoutId);
+    };
+  }, [projectId, onEvent, toast]);
+};
diff --git a/apps/client/src/features/task/useTaskMutations.ts b/apps/client/src/features/task/useTaskMutations.ts
index e270e55..f689a56 100644
--- a/apps/client/src/features/task/useTaskMutations.ts
+++ b/apps/client/src/features/task/useTaskMutations.ts
@@ -1,48 +1,32 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { taskAPI } from '@/features/task/api.ts';
 
 export const useTaskMutations = (taskId: number) => {
-  const queryClient = useQueryClient();
-
-  const invalidateTask = () => {
-    queryClient.invalidateQueries({
-      queryKey: ['task', taskId],
-    });
-  };
-
   return {
     updateDescription: useMutation({
       mutationFn: (description?: string) => taskAPI.update(taskId, { description }),
-      onSuccess: invalidateTask,
     }),
 
     updatePriority: useMutation({
       mutationFn: (priority?: number) => taskAPI.update(taskId, { priority: priority ?? null }),
-      onSuccess: invalidateTask,
     }),
 
     updateSprint: useMutation({
       mutationFn: (sprintId?: number) => taskAPI.update(taskId, { sprintId: sprintId ?? null }),
-      onSuccess: invalidateTask,
     }),
 
     updateEstimate: useMutation({
       mutationFn: (estimate?: number) => taskAPI.update(taskId, { estimate: estimate ?? null }),
-      onSuccess: invalidateTask,
     }),
 
     updateAssignees: useMutation({
       mutationFn: (assignees?: number[]) => taskAPI.updateAssignees(taskId, assignees),
-      onSuccess: () => {
-        invalidateTask();
-      },
+      onSuccess: () => {},
     }),
 
     updateLabels: useMutation({
       mutationFn: (labels?: number[]) => taskAPI.updateLabels(taskId, labels),
-      onSuccess: () => {
-        invalidateTask();
-      },
+      onSuccess: () => {},
     }),
 
     deleteTask: useMutation({
diff --git a/apps/client/src/pages/Board.tsx b/apps/client/src/pages/Board.tsx
index cf531f1..929728d 100644
--- a/apps/client/src/pages/Board.tsx
+++ b/apps/client/src/pages/Board.tsx
@@ -1,6 +1,10 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { useLoaderData } from '@tanstack/react-router';
+import { useEffect } from 'react';
 import { boardAPI } from '@/features/project/board/api.ts';
+
+import { useLongPollingEvents } from '@/features/project/board/useLongPollingEvents.ts';
+import { useBoardStore } from '@/features/project/board/useBoardStore.ts';
 import { KanbanBoard } from '@/features/project/board/components/KanbanBoard.tsx';
 
 export function Board() {
@@ -8,19 +12,29 @@ export function Board() {
     from: '/_auth/$project/board',
   });
 
-  const { data: sections } = useSuspenseQuery({
+  const {
+    data: { project: initialSections },
+  } = useSuspenseQuery({
     queryKey: ['tasks', projectId],
     queryFn: () => boardAPI.getTasks(projectId),
   });
 
-  const sortedSections = sections.map((section) => ({
-    ...section,
-    tasks: section.tasks.sort((a, b) => a.position.localeCompare(b.position)),
-  }));
+  const handleEvent = useBoardStore((state) => state.handleEvent);
+
+  useEffect(() => {
+    useBoardStore.getState().setSections(
+      initialSections.map((section) => ({
+        ...section,
+        tasks: [...section.tasks].sort((a, b) => a.position.localeCompare(b.position)),
+      }))
+    );
+  }, [initialSections]);
+
+  useLongPollingEvents(projectId, handleEvent);
 
   return (
     <div className="relative h-full overflow-hidden">
-      <KanbanBoard key={projectId} sections={sortedSections} />
+      <KanbanBoard projectId={projectId} />
     </div>
   );
 }
diff --git a/apps/client/src/pages/TaskDetail.tsx b/apps/client/src/pages/TaskDetail.tsx
index 4790302..94a62ce 100644
--- a/apps/client/src/pages/TaskDetail.tsx
+++ b/apps/client/src/pages/TaskDetail.tsx
@@ -16,6 +16,7 @@ import Priority from '@/features/task/components/Priority.tsx';
 import Sprint from '@/features/task/components/Sprint.tsx';
 import Estimate from '@/features/task/components/Estimate.tsx';
 import { useTaskMutations } from '@/features/task/useTaskMutations.ts';
+import { useBoardStore } from '@/features/project/board/useBoardStore.ts';
 
 export function TaskDetail() {
   const { taskId } = useLoaderData({ from: '/_auth/$project/board/$taskId' });
@@ -26,6 +27,8 @@ export function TaskDetail() {
 
   const { data: task } = useSuspenseTaskQuery(taskId);
 
+  const { deleteTask } = useBoardStore();
+
   useEffect(() => {
     document.body.style.overflow = 'hidden';
     return () => {
@@ -40,12 +43,13 @@ export function TaskDetail() {
     }, 300);
   }, [navigate]);
 
-  const { deleteTask } = useTaskMutations(taskId);
+  const { deleteTask: deleteTaskMutation } = useTaskMutations(taskId);
 
-  const handleDelete = useCallback(() => {
-    deleteTask.mutate();
-    navigate({ to: '/$project/board' });
-  }, [deleteTask, navigate]);
+  const handleDelete = () => {
+    deleteTaskMutation.mutate();
+    deleteTask(taskId);
+    handleClose();
+  };
 
   return (
     <AnimatePresence key={taskId} mode="wait" onExitComplete={() => setIsClosing(false)}>