diff --git a/src/components/features/kanban/KanbanBoard.tsx b/src/components/features/kanban/KanbanBoard.tsx
index 845a7a8..fd272a2 100644
--- a/src/components/features/kanban/KanbanBoard.tsx
+++ b/src/components/features/kanban/KanbanBoard.tsx
@@ -27,6 +27,7 @@ import KanbanLegend from "./components/KanbanLegend";
 import KanbanFilterComponent, {
   KanbanFilterType,
 } from "./components/KanbanFilter";
+import SidePanel from "@/components/ui/SidePanel";
 import { useKanbanKeyboard } from "@/hooks/kanban/useKanbanKeyboard";
 
 interface KanbanBoardProps {
@@ -64,20 +65,13 @@ const KanbanBoard = ({
   const projectStartedAt = project?.started_at;
   const projectEndedAt = project?.ended_at;
 
-  console.log("KanbanBoard - Project Info:", {
-    project,
-    projectName,
-    projectStartedAt,
-    projectEndedAt,
-    boardId,
-    projectId,
-  });
-
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [showTaskAddModal, setShowTaskAddModal] = useState(false);
+  const [addTaskDefaultStatus, setAddTaskDefaultStatus] = useState<TaskStatus | undefined>(undefined);
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   const [showFilter, setShowFilter] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [filter, setFilter] = useState<KanbanFilterType>({
     priority: "all",
     assignee: "all",
@@ -120,21 +114,11 @@ const KanbanBoard = ({
       return [];
     }
 
-    if (filter.assignee === "me") {
-      console.log("내 작업 필터 활성화");
-      console.log("세션 상태:", status);
-      console.log("현재 사용자 ID:", session?.user?.user_id);
-      console.log(
-        "전체 태스크:",
-        tasks.map((t) => ({
-          id: t.id,
-          title: t.title,
-          assigned_user_id: t.assigned_user_id,
-        }))
-      );
-    }
-
     return tasks.filter((task) => {
+      if (searchQuery && !task.title.toLowerCase().includes(searchQuery.toLowerCase())) {
+        return false;
+      }
+
       if (filter.priority !== "all" && task.priority !== filter.priority) {
         return false;
       }
@@ -150,11 +134,6 @@ const KanbanBoard = ({
           const currentUserId = session?.user?.user_id;
           const taskUserId = task.assigned_user_id;
 
-          console.log(
-            `태스크 '${task.title}' 체크 - 할당된 사용자: ${taskUserId}, 현재 사용자: ${currentUserId}`
-          );
-          console.log("타입 체크:", typeof taskUserId, typeof currentUserId);
-
           const taskUserIdStr = taskUserId ? String(taskUserId) : null;
           const currentUserIdStr = currentUserId ? String(currentUserId) : null;
 
@@ -230,7 +209,7 @@ const KanbanBoard = ({
 
       return true;
     });
-  }, [tasks, filter, session, status]);
+  }, [tasks, filter, session, status, searchQuery]);
 
   const groupedTasks = KANBAN_COLUMNS.reduce((acc, column) => {
     const columnTasks = filteredTasks.filter(
@@ -302,19 +281,26 @@ const KanbanBoard = ({
   }, []);
 
   const handleFilterChange = (key: keyof KanbanFilterType, value: string) => {
-    setFilter((prev) => ({
-      ...prev,
-      [key]: value,
-    }));
+    setFilter((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleFilterReset = () => {
+    setFilter({ priority: "all", assignee: "all", date: "all" });
   };
 
+  const handleColumnAddClick = useCallback((status: TaskStatus) => {
+    setAddTaskDefaultStatus(status);
+    setShowTaskAddModal(true);
+  }, []);
+
   const handleTaskAddSuccess = useCallback(
     (taskData: Omit<Task, "id" | "created_at" | "updated_at">) => {
       onCreateTask?.(taskData);
       onTaskCreated?.();
       setShowTaskAddModal(false);
+      setAddTaskDefaultStatus(undefined);
     },
-    [onCreateTask, onTaskCreated, setShowTaskAddModal]
+    [onCreateTask, onTaskCreated]
   );
 
   const handleUpdateTask = (taskId: string, updates: Partial<Task>) => {
@@ -339,7 +325,7 @@ const KanbanBoard = ({
   return (
     <KanbanLayout projectId={projectId}>
       {/* 전체 컨테이너 - 캘린더와 동일한 구조 */}
-      <div className="h-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col">
+      <div className="h-full bg-card rounded-[12px] shadow-[0_1px_3px_rgba(0,0,0,0.1)] border border-border overflow-hidden flex flex-col">
         {/* 칸반 헤더 */}
         <KanbanHeader
           projectName={projectName}
@@ -347,6 +333,13 @@ const KanbanBoard = ({
           onToggleFilter={() => setShowFilter(!showFilter)}
           onToggleHelp={() => setShowHelp(!showHelp)}
           showHelp={showHelp}
+          hasActiveFilter={
+            filter.priority !== "all" ||
+            filter.assignee !== "all" ||
+            filter.date !== "all"
+          }
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
           tasksCount={tasks.length}
           project={project}
           onProjectInfoClick={onProjectInfoClick}
@@ -355,15 +348,19 @@ const KanbanBoard = ({
         {/* 도움말 */}
         {showHelp && <KanbanHelp />}
 
+        {/* 활성 필터 태그 칩 */}
+        <FilterChips filter={filter} onFilterChange={handleFilterChange} onReset={handleFilterReset} />
+
         {/* 필터 */}
         {showFilter && (
-          <div className="px-2 sm:px-4">
+          <div className="px-2 sm:px-4 animate-in slide-in-from-top-2 duration-150">
             <KanbanFilterComponent
               filter={filter}
               onFilterChange={handleFilterChange}
               showFilter={showFilter}
               taskCount={filteredTasks.length}
               totalCount={tasks.length}
+              onReset={handleFilterReset}
             />
           </div>
         )}
@@ -380,6 +377,8 @@ const KanbanBoard = ({
             groupedTasks={groupedTasks}
             projectId={projectId}
             onTaskClick={handleTaskClick}
+            onColumnAddClick={handleColumnAddClick}
+            onTitleUpdate={handleUpdateTask}
             isDragging={!!activeTask}
           />
 
@@ -406,8 +405,8 @@ const KanbanBoard = ({
         </div>
       </div>
 
-      {selectedTask && (
-        <Modal isOpen onClose={() => setSelectedTask(null)}>
+      <SidePanel isOpen={!!selectedTask} onClose={() => setSelectedTask(null)}>
+        {selectedTask && (
           <TaskDetail
             task={{
               ...selectedTask,
@@ -419,18 +418,19 @@ const KanbanBoard = ({
             onDelete={handleDeleteTask}
             onClose={() => setSelectedTask(null)}
           />
-        </Modal>
-      )}
+        )}
+      </SidePanel>
 
       {showTaskAddModal && (
-        <Modal isOpen onClose={() => setShowTaskAddModal(false)}>
+        <Modal isOpen onClose={() => { setShowTaskAddModal(false); setAddTaskDefaultStatus(undefined); }}>
           <TaskAdd
             boardId={boardId}
             projectId={projectId}
             projectStartedAt={projectStartedAt}
             projectEndedAt={projectEndedAt}
+            initialStatus={addTaskDefaultStatus}
             onSuccess={handleTaskAddSuccess}
-            onCancel={() => setShowTaskAddModal(false)}
+            onCancel={() => { setShowTaskAddModal(false); setAddTaskDefaultStatus(undefined); }}
           />
         </Modal>
       )}
@@ -442,18 +442,22 @@ function ColumnGrid({
   groupedTasks,
   projectId,
   onTaskClick,
+  onColumnAddClick,
+  onTitleUpdate,
   isDragging,
 }: {
   groupedTasks: Record<TaskStatus, Task[]>;
   projectId: string;
   onTaskClick: (task: Task) => void;
+  onColumnAddClick: (status: TaskStatus) => void;
+  onTitleUpdate: (taskId: string, updates: Partial<Task>) => void;
   isDragging: boolean;
 }) {
   return (
     <div className="flex-1 min-h-0 flex flex-col px-2 sm:px-4 py-2 sm:py-3">
-      <div className="h-full flex flex-col rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
+      <div className="h-full flex flex-col rounded-lg border border-border overflow-hidden bg-[#F0F4F5] dark:bg-muted/20">
         <div className="flex-1 min-h-0 overflow-x-auto overflow-y-auto">
-          <div className="flex gap-2 sm:gap-3 md:gap-4 h-full justify-start sm:justify-center min-w-fit p-2 sm:p-3 md:p-4">
+          <div className="flex gap-4 h-full justify-start sm:justify-center min-w-fit p-4">
             {KANBAN_COLUMNS.map((column) => (
               <KanbanColumn
                 key={column.id}
@@ -462,7 +466,10 @@ function ColumnGrid({
                 tasks={groupedTasks[column.id] || []}
                 projectId={projectId}
                 onTaskClick={onTaskClick}
+                onAddClick={() => onColumnAddClick(column.id as TaskStatus)}
+                onTitleUpdate={(taskId, title) => onTitleUpdate(taskId, { title })}
                 isDragging={isDragging}
+                collapsible={column.id === "done"}
               />
             ))}
           </div>
@@ -472,4 +479,57 @@ function ColumnGrid({
   );
 }
 
+const FILTER_LABELS: Record<string, Record<string, string>> = {
+  priority: { high: "높음", normal: "보통", low: "낮음" },
+  assignee: { me: "내 작업", assigned: "할당됨", unassigned: "미할당" },
+  date:     { today: "오늘", thisWeek: "이번주", overdue: "지연" },
+};
+const FILTER_NAMES: Record<string, string> = {
+  priority: "우선순위",
+  assignee: "담당자",
+  date: "기간",
+};
+
+function FilterChips({
+  filter,
+  onFilterChange,
+  onReset,
+}: {
+  filter: KanbanFilterType;
+  onFilterChange: (key: keyof KanbanFilterType, value: string) => void;
+  onReset: () => void;
+}) {
+  const chips = (Object.keys(filter) as (keyof KanbanFilterType)[]).filter(
+    (key) => filter[key] !== "all"
+  );
+
+  if (chips.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap px-4 py-1.5 border-b border-border animate-in slide-in-from-top-1 duration-150">
+      {chips.map((key) => (
+        <span
+          key={key}
+          className="flex items-center gap-1 px-2 py-0.5 bg-main-500/10 text-main-700 dark:text-main-300 text-xs rounded-full"
+        >
+          <span className="font-medium">{FILTER_NAMES[key]}:</span>
+          <span>{FILTER_LABELS[key]?.[filter[key]] ?? filter[key]}</span>
+          <button
+            onClick={() => onFilterChange(key, "all")}
+            className="ml-0.5 hover:text-main-900 dark:hover:text-main-100 transition-colors"
+          >
+            ×
+          </button>
+        </span>
+      ))}
+      <button
+        onClick={onReset}
+        className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors ml-1"
+      >
+        전체 초기화
+      </button>
+    </div>
+  );
+}
+
 export default KanbanBoard;
diff --git a/src/components/features/kanban/KanbanColumn.tsx b/src/components/features/kanban/KanbanColumn.tsx
index 96bc7b2..6e0135c 100644
--- a/src/components/features/kanban/KanbanColumn.tsx
+++ b/src/components/features/kanban/KanbanColumn.tsx
@@ -1,21 +1,30 @@
+import { useState, useMemo } from "react";
 import { useDroppable } from "@dnd-kit/core";
 import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+import { Plus, ArrowUpDown, CalendarDays, Flag, ChevronDown, ChevronRight } from "lucide-react";
 
 import { TaskCard } from "@/features/task";
 import { Task, TaskStatus } from "@/types";
 import { EmptyState } from "@/components/shared/EmptyState";
 import { getTaskStatusColor, isTaskOverdue } from "@/lib/utils/taskUtils";
 
+type SortOrder = "default" | "deadline" | "priority";
+
+const PRIORITY_RANK: Record<string, number> = { high: 0, normal: 1, low: 2 };
+
 interface KanbanColumnProps {
   id: string;
   title: string;
   tasks: Task[];
   projectId: string;
   onTaskClick: (task: Task) => void;
-  isDragging?: boolean; // 현재 드래그 중인지
+  onAddClick?: () => void;
+  onTitleUpdate?: (taskId: string, title: string) => void;
+  isDragging?: boolean;
+  collapsible?: boolean;
 }
 
 const KanbanColumn = ({
@@ -24,68 +33,97 @@ const KanbanColumn = ({
   tasks,
   projectId,
   onTaskClick,
+  onAddClick,
+  onTitleUpdate,
   isDragging = false,
+  collapsible = false,
 }: KanbanColumnProps) => {
-  const { setNodeRef, isOver } = useDroppable({
-    id: id,
-  });
+  const { setNodeRef, isOver } = useDroppable({ id });
+  const [sortOrder, setSortOrder] = useState<SortOrder>("default");
+  const [collapsed, setCollapsed] = useState(false);
 
-  // 다크 모드는 CSS 클래스로 처리하도록 변경
   const statusColors = getTaskStatusColor(id as TaskStatus);
 
-  // 지연된 태스크 개수 (완료 컬럼 제외)
   const overdueCount =
     id !== "done" ? tasks.filter((task) => isTaskOverdue(task)).length : 0;
 
-  // 드래그 오버 시 컬럼 스타일
+  const sortedTasks = useMemo(() => {
+    if (sortOrder === "deadline") {
+      return [...tasks].sort((a, b) => {
+        if (!a.ended_at && !b.ended_at) return 0;
+        if (!a.ended_at) return 1;
+        if (!b.ended_at) return -1;
+        return a.ended_at.localeCompare(b.ended_at);
+      });
+    }
+    if (sortOrder === "priority") {
+      return [...tasks].sort(
+        (a, b) =>
+          (PRIORITY_RANK[a.priority ?? "low"] ?? 2) -
+          (PRIORITY_RANK[b.priority ?? "low"] ?? 2)
+      );
+    }
+    return tasks;
+  }, [tasks, sortOrder]);
+
+  const cycleSortOrder = () => {
+    setSortOrder((prev) =>
+      prev === "default" ? "deadline" : prev === "deadline" ? "priority" : "default"
+    );
+  };
+
+  const SortIcon =
+    sortOrder === "deadline" ? CalendarDays : sortOrder === "priority" ? Flag : ArrowUpDown;
+  const sortTitle =
+    sortOrder === "deadline" ? "마감일순" : sortOrder === "priority" ? "우선순위순" : "기본순";
+
   const getColumnStyle = () => {
     if (isOver) {
-      // 드롭 대상 컬럼 하이라이트
       switch (id) {
-        case "todo":
-          return "ring-2 ring-gray-400 dark:ring-gray-500 bg-gray-100 dark:bg-gray-600";
-        case "inprogress":
-          return "ring-2 ring-blue-400 dark:ring-blue-500 bg-blue-50 dark:bg-blue-900/30";
-        case "done":
-          return "ring-2 ring-green-400 dark:ring-green-500 bg-green-50 dark:bg-green-900/30";
-        default:
-          return "";
+        case "todo":       return "ring-2 ring-border bg-muted/60";
+        case "inprogress": return "ring-2 ring-main-500 dark:ring-main-400 bg-main-500/5";
+        case "done":       return "ring-2 ring-emerald-500 dark:ring-emerald-400 bg-emerald-500/[0.063] dark:bg-emerald-900/20";
+        default:           return "";
       }
     }
-    if (isDragging) {
-      // 드래그 중일 때 모든 컬럼 약간 강조
-      return "border-dashed";
-    }
+    if (isDragging) return "border-dashed";
     return "";
   };
 
   return (
     <div
       className={`
-        flex flex-col shrink-0 h-full min-h-0
-        w-[calc(100vw-3rem)] min-w-[260px] 
-        sm:w-80 sm:min-w-[280px] 
+        flex flex-col shrink-0 min-h-0
+        w-[calc(100vw-3rem)] min-w-[260px]
+        sm:w-80 sm:min-w-[280px]
         md:w-[300px] md:min-w-[300px]
-        lg:w-80 lg:min-w-[320px] 
-        bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-500 shadow-sm
+        lg:w-80 lg:min-w-[320px]
+        bg-card rounded-lg border border-border shadow-sm
         transition-all duration-200
+        ${collapsed ? "h-auto" : "h-full"}
         ${getColumnStyle()}
       `}
     >
       {/* 컬럼 헤더 */}
-      <div className="flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b border-gray-200 dark:border-gray-500 rounded-t-lg bg-white dark:bg-gray-600">
+      <div className="flex items-center justify-between px-3 sm:px-4 py-2.5 border-b border-border rounded-t-lg bg-[#F0F4F5] dark:bg-muted/30">
         <div className="flex items-center gap-2">
-          <span
-            className={`w-2.5 sm:w-3 h-2.5 sm:h-3 rounded-full ${statusColors.bg}`}
-          />
-          <h3
-            className={`font-semibold text-sm sm:text-base ${statusColors.text}`}
-          >
-            {title}
-          </h3>
+          {collapsible && (
+            <button
+              onClick={() => setCollapsed((v) => !v)}
+              className="text-muted-foreground hover:text-foreground transition-colors"
+              title={collapsed ? "펼치기" : "접기"}
+            >
+              {collapsed ? (
+                <ChevronRight className="w-3.5 h-3.5" />
+              ) : (
+                <ChevronDown className="w-3.5 h-3.5" />
+              )}
+            </button>
+          )}
+          <span className={`w-1.5 h-1.5 rounded-full ${statusColors.bg}`} />
+          <h3 className={`font-semibold text-sm ${statusColors.text}`}>{title}</h3>
         </div>
-        <div className="flex items-center gap-2">
-          {/* 지연 태스크 뱃지 - 동그라미에 숫자만 표시 */}
+        <div className="flex items-center gap-1.5">
           {overdueCount > 0 && (
             <span
               className="flex items-center justify-center w-5 h-5 bg-red-500 text-white rounded-full text-xs font-bold"
@@ -94,70 +132,73 @@ const KanbanColumn = ({
               {overdueCount}
             </span>
           )}
-          {/* 전체 개수 */}
-          <span className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full text-xs font-medium text-gray-700 dark:text-gray-200">
+          <span className="bg-muted px-2 py-1 rounded-full text-xs font-medium text-muted-foreground">
             {tasks.length}
           </span>
+          {!collapsed && (
+            <button
+              onClick={cycleSortOrder}
+              title={sortTitle}
+              className={`p-1 rounded transition-colors ${
+                sortOrder !== "default"
+                  ? "text-main-500 dark:text-main-400"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <SortIcon className="w-3.5 h-3.5" />
+            </button>
+          )}
         </div>
       </div>
 
-      {/* 드래그 오버 시 안내 메시지 */}
-      {isOver && (
-        <div
-          className={`
-          mx-3 mt-3 px-3 py-2 rounded-lg text-center text-sm font-medium
-          ${
-            id === "todo"
-              ? "bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200"
-              : ""
-          }
-          ${
-            id === "inprogress"
-              ? "bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300"
-              : ""
-          }
-          ${
-            id === "done"
-              ? "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300"
-              : ""
-          }
-        `}
-        >
-          여기에 놓기
-        </div>
-      )}
-
       {/* Task Cards */}
-      <SortableContext
-        items={tasks.map((task) => task.id)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div
-          ref={setNodeRef}
-          className={`
-            p-2 sm:p-3 flex flex-col gap-2 sm:gap-3 overflow-y-auto flex-1 transition-all duration-200
-            ${isOver ? "min-h-[100px]" : ""}
-          `}
+      {!collapsed && (
+        <SortableContext
+          items={sortedTasks.map((task) => task.id)}
+          strategy={verticalListSortingStrategy}
         >
-          {tasks.length > 0
-            ? tasks.map((task) => (
-                <TaskCard
-                  key={task.id}
-                  task={task}
-                  projectId={projectId}
-                  onClick={() => onTaskClick(task)}
-                />
-              ))
-            : !isOver && (
-                <EmptyState
-                  icon="clipboard"
-                  title="작업이 없어요"
-                  variant="minimal"
-                  className="py-10"
-                />
-              )}
-        </div>
-      </SortableContext>
+          <div
+            ref={setNodeRef}
+            className={`
+              p-3 flex flex-col gap-2.5 overflow-y-auto flex-1 transition-all duration-200
+              ${isOver ? "min-h-[100px]" : ""}
+            `}
+          >
+            {sortedTasks.length > 0
+              ? sortedTasks.map((task) => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    projectId={projectId}
+                    onClick={() => onTaskClick(task)}
+                    onTitleUpdate={
+                      onTitleUpdate
+                        ? (t) => onTitleUpdate(task.id, t)
+                        : undefined
+                    }
+                  />
+                ))
+              : !isOver && (
+                  <EmptyState
+                    icon="clipboard"
+                    title="작업이 없어요"
+                    variant="minimal"
+                    className="py-6"
+                  />
+                )}
+
+            {onAddClick && (
+              <button
+                onClick={onAddClick}
+                className="w-full mt-1 py-1.5 flex items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-lg transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span>작업 추가</span>
+              </button>
+            )}
+          </div>
+        </SortableContext>
+      )}
     </div>
   );
 };
diff --git a/src/components/features/kanban/components/KanbanFilter.tsx b/src/components/features/kanban/components/KanbanFilter.tsx
index 78dc7f2..78822c9 100644
--- a/src/components/features/kanban/components/KanbanFilter.tsx
+++ b/src/components/features/kanban/components/KanbanFilter.tsx
@@ -15,6 +15,7 @@ interface KanbanFilterProps {
   showFilter: boolean;
   taskCount: number;
   totalCount: number;
+  onReset?: () => void;
 }
 
 export type { KanbanFilterType };
@@ -25,15 +26,18 @@ export default function KanbanFilter({
   showFilter,
   taskCount,
   totalCount,
+  onReset,
 }: KanbanFilterProps) {
+  const hasActiveFilter =
+    filter.priority !== "all" || filter.assignee !== "all" || filter.date !== "all";
   if (!showFilter) return null;
 
   return (
-    <div className="mt-4 mb-4 px-5 py-4 border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
+    <div className="mt-4 mb-4 px-5 py-4 border border-border bg-muted/40 rounded-lg">
       <div className="flex flex-col gap-3">
         {/* 우선순위 */}
         <div className="flex items-center gap-4">
-          <span className="text-sm text-gray-700 dark:text-gray-300 font-medium w-16">
+          <span className="text-sm text-foreground font-medium w-16">
             우선순위
           </span>
           <div className="flex gap-2">
@@ -42,7 +46,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.priority === "all"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               전체
@@ -52,7 +56,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.priority === "high"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               높음
@@ -62,7 +66,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.priority === "normal"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               보통
@@ -72,7 +76,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.priority === "low"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               낮음
@@ -82,7 +86,7 @@ export default function KanbanFilter({
 
         {/* 담당자 */}
         <div className="flex items-center gap-4">
-          <span className="text-sm text-gray-700 dark:text-gray-300 font-medium w-16">
+          <span className="text-sm text-foreground font-medium w-16">
             담당자
           </span>
           <div className="flex gap-2">
@@ -91,7 +95,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.assignee === "all"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               전체
@@ -101,7 +105,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.assignee === "me"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               내 작업
@@ -111,7 +115,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.assignee === "assigned"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               할당됨
@@ -121,7 +125,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.assignee === "unassigned"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               미할당
@@ -131,7 +135,7 @@ export default function KanbanFilter({
 
         {/* 기간 */}
         <div className="flex items-center gap-4">
-          <span className="text-sm text-gray-700 dark:text-gray-300 font-medium w-16">
+          <span className="text-sm text-foreground font-medium w-16">
             기간
           </span>
           <div className="flex gap-2">
@@ -140,7 +144,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.date === "all"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               전체
@@ -150,7 +154,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.date === "today"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               오늘
@@ -160,7 +164,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.date === "thisWeek"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               이번주
@@ -170,7 +174,7 @@ export default function KanbanFilter({
               className={`text-sm px-3 py-1.5 rounded transition-all ${
                 filter.date === "overdue"
                   ? "bg-main-500 text-white"
-                  : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  : "bg-card text-muted-foreground hover:bg-muted/60 hover:text-foreground"
               }`}
             >
               지연
@@ -179,10 +183,23 @@ export default function KanbanFilter({
         </div>
 
         {/* 구분선 + 결과 카운트 */}
-        <div className="pt-3 mt-1 border-t border-gray-200 dark:border-gray-600">
-          <span className="text-sm text-gray-600 dark:text-gray-400">
+        <div className="pt-3 mt-1 border-t border-border flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
             {taskCount}개 / 전체 {totalCount}개
+            {taskCount === 0 && hasActiveFilter && (
+              <span className="ml-2 text-main-600 dark:text-main-400">
+                — 조건에 맞는 작업이 없어요
+              </span>
+            )}
           </span>
+          {hasActiveFilter && onReset && (
+            <button
+              onClick={onReset}
+              className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+            >
+              초기화
+            </button>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/features/kanban/components/KanbanHeader.tsx b/src/components/features/kanban/components/KanbanHeader.tsx
index 83507ef..e94cd22 100644
--- a/src/components/features/kanban/components/KanbanHeader.tsx
+++ b/src/components/features/kanban/components/KanbanHeader.tsx
@@ -1,9 +1,10 @@
-// src/components/features/kanban/components/KanbanHeader.tsx
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { format } from "date-fns";
 import { ko } from "date-fns/locale";
 import { showToast } from "@/lib/utils/toast";
+import { Info, SlidersHorizontal, HelpCircle, Plus, Search, X } from "lucide-react";
 
 interface KanbanHeaderProps {
   projectName: string;
@@ -11,6 +12,9 @@ interface KanbanHeaderProps {
   onToggleFilter: () => void;
   onToggleHelp: () => void;
   showHelp: boolean;
+  hasActiveFilter?: boolean;
+  searchQuery?: string;
+  onSearchChange?: (q: string) => void;
   tasksCount: number;
   project?: {
     project_id?: string;
@@ -27,11 +31,25 @@ export default function KanbanHeader({
   onToggleFilter,
   onToggleHelp,
   showHelp,
+  hasActiveFilter = false,
+  searchQuery = "",
+  onSearchChange,
   tasksCount,
   project,
   onProjectInfoClick,
 }: KanbanHeaderProps) {
-  // 프로젝트 기간 정보 계산
+  const [searchOpen, setSearchOpen] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (searchOpen) searchRef.current?.focus();
+  }, [searchOpen]);
+
+  const closeSearch = () => {
+    setSearchOpen(false);
+    onSearchChange?.("");
+  };
+
   const getProjectPeriodInfo = () => {
     if (!project?.started_at || !project?.ended_at) return null;
 
@@ -40,217 +58,127 @@ export default function KanbanHeader({
     const today = new Date();
     today.setHours(0, 0, 0, 0);
 
-    const startStr = startDate.toLocaleDateString("ko-KR", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
-    const endStr = endDate.toLocaleDateString("ko-KR", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
+    const startStr = startDate.toLocaleDateString("ko-KR", { year: "numeric", month: "short", day: "numeric" });
+    const endStr   = endDate.toLocaleDateString("ko-KR",   { year: "numeric", month: "short", day: "numeric" });
 
-    // 남은 일수 계산
-    const timeDiff = endDate.getTime() - today.getTime();
+    const timeDiff    = endDate.getTime() - today.getTime();
     const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
+    const daysToStart   = Math.ceil((startDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
 
-    // 시작까지 남은 일수
-    const timeToStart = startDate.getTime() - today.getTime();
-    const daysToStart = Math.ceil(timeToStart / (1000 * 3600 * 24));
-
-    // 프로젝트 상태 판단
-    let status: "before" | "active" | "warning" | "ended";
     let badgeText: string;
-    let badgeColor: string;
+    let badgeClass: string;
+    let status: "before" | "active" | "warning" | "ended";
 
     if (today < startDate) {
-      // 시작 전
       status = "before";
       badgeText = `시작 D-${daysToStart}`;
-      badgeColor = "bg-blue-500 text-white";
+      badgeClass = "bg-main-500/10 text-main-600 dark:bg-main-400/10 dark:text-main-300";
     } else if (today > endDate) {
-      // 종료
       status = "ended";
       badgeText = "종료";
-      badgeColor = "bg-red-500 text-white";
+      badgeClass = "bg-red-500/10 text-red-600 dark:bg-red-400/10 dark:text-red-400";
     } else if (remainingDays <= 3) {
-      // 마감 임박 (3일 이하)
       status = "warning";
       badgeText = `D-${remainingDays} ⚠️`;
-      badgeColor = "bg-orange-500 text-white";
+      badgeClass = "bg-amber-500/10 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400";
     } else {
-      // 진행 중
       status = "active";
       badgeText = `D-${remainingDays}`;
-      badgeColor = "bg-white/20 text-white";
+      badgeClass = "bg-main-500/10 text-main-600 dark:bg-main-400/10 dark:text-main-300";
     }
 
-    return {
-      startStr,
-      endStr,
-      remainingDays,
-      status,
-      badgeText,
-      badgeColor,
-    };
+    return { startStr, endStr, remainingDays, status, badgeText, badgeClass };
   };
 
   const projectPeriod = getProjectPeriodInfo();
 
-  // 프로젝트 종료 체크
   const handleAddClick = () => {
     if (project?.ended_at) {
       const today = new Date().toISOString().split("T")[0];
-      const startDate = project.started_at;
-
-      if (today < startDate!) {
-        showToast("아직 프로젝트가 시작되지 않았습니다.", "warning");
-        return;
-      }
-
-      if (today > project.ended_at) {
-        showToast("종료된 프로젝트입니다.", "warning");
-        return;
-      }
+      if (today < project.started_at!) { showToast("아직 프로젝트가 시작되지 않았습니다.", "warning"); return; }
+      if (today > project.ended_at)    { showToast("종료된 프로젝트입니다.", "warning"); return; }
     }
     onAddClick();
   };
 
+  const iconBtn = "p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors";
+
   return (
-    <div className="px-3 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-500 bg-main-200 dark:bg-main-600 shadow-sm">
-      <div className="flex items-center justify-between">
-        {/* 왼쪽: 프로젝트명 + 정보 버튼 + 기간 정보 */}
-        <div className="flex flex-col gap-1">
+    <div className="px-4 sm:px-6 py-3 sm:py-4 min-h-[60px] border-b border-border bg-main-500/5 dark:bg-main-400/5">
+      <div className="flex items-center justify-between gap-4">
+        {/* 왼쪽: 프로젝트명 + 기간 */}
+        <div className="flex flex-col gap-1 min-w-0">
           <div className="flex items-center gap-2">
-            <h2 className="text-lg sm:text-xl font-bold text-white dark:text-gray-100">
-              {projectName}
-            </h2>
-            {/* 프로젝트 정보 버튼 */}
-            <button
-              onClick={onProjectInfoClick}
-              className="p-1 hover:bg-white/20 rounded-lg transition-colors"
-              title="프로젝트 정보"
-            >
-              <svg
-                className="w-5 h-5 text-white/80 hover:text-white"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
+            <h2 className="text-lg font-semibold text-foreground truncate">{projectName}</h2>
+            <button onClick={onProjectInfoClick} className={iconBtn} title="프로젝트 정보">
+              <Info className="w-4 h-4" />
             </button>
           </div>
           {projectPeriod && (
-            <div className="flex items-center gap-2 text-xs text-white/80 dark:text-gray-200">
-              <span>|</span>
-              <span>
-                {projectPeriod.startStr} ~ {projectPeriod.endStr}
-              </span>
-              <span
-                className={`px-2 py-0.5 rounded-full font-medium ${projectPeriod.badgeColor}`}
-              >
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span>{projectPeriod.startStr} ~ {projectPeriod.endStr}</span>
+              <span className={`px-2 py-0.5 rounded-full font-medium text-xs ${projectPeriod.badgeClass}`}>
                 {projectPeriod.badgeText}
               </span>
             </div>
           )}
-          {/* 종료된 프로젝트 안내 문구 */}
           {projectPeriod?.status === "ended" && (
-            <div className="flex items-center gap-1.5 text-xs bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-200 px-2.5 py-1 rounded-md border border-sky-300 dark:border-sky-700">
-              <svg
-                className="w-4 h-4 shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span className="font-medium">
-                이 프로젝트는 종료되었습니다. 일정 추가/수정이 제한됩니다.
-              </span>
-            </div>
+            <p className="text-xs text-amber-600 dark:text-amber-400">
+              종료된 프로젝트입니다. 일정 추가/수정이 제한됩니다.
+            </p>
           )}
         </div>
 
-        {/* 오른쪽: 칸반보드 표시 + 작업 개수 + 오늘 날짜 + 버튼들 */}
-        <div className="flex items-center gap-2 sm:gap-3">
-          {/* 칸반보드 뷰 표시 */}
-          <div className="hidden sm:flex items-center gap-2">
-            <div className="px-2 py-1 bg-white/20 rounded-full text-xs text-white font-medium">
-              칸반보드
-            </div>
-          </div>
-
-          {/* 작업 개수 및 오늘 날짜 */}
-          <div className="text-sm font-medium text-white/90 dark:text-gray-200 text-right">
-            <div>{tasksCount}개 작업</div>
-            <div className="text-xs text-white/70 dark:text-gray-300">
-              {format(new Date(), "M월 d일 (E)", { locale: ko })}
+        {/* 오른쪽 */}
+        <div className="flex items-center gap-2 shrink-0">
+          {/* 검색 인풋 (열렸을 때) */}
+          {searchOpen ? (
+            <div className="flex items-center gap-1 px-2 py-1 bg-card border border-border rounded-lg">
+              <Search className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+              <input
+                ref={searchRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => onSearchChange?.(e.target.value)}
+                onKeyDown={(e) => e.key === "Escape" && closeSearch()}
+                placeholder="작업 검색..."
+                className="w-32 sm:w-48 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
+              />
+              <button onClick={closeSearch} className="text-muted-foreground hover:text-foreground transition-colors">
+                <X className="w-3.5 h-3.5" />
+              </button>
             </div>
-          </div>
+          ) : (
+            <>
+              <div className="hidden sm:block text-right text-xs text-muted-foreground">
+                <div className="font-medium text-foreground">{tasksCount}개 작업</div>
+                <div>{format(new Date(), "M월 d일 (E)", { locale: ko })}</div>
+              </div>
+              {onSearchChange && (
+                <button onClick={() => setSearchOpen(true)} className={iconBtn} title="검색">
+                  <Search className="w-4 h-4" />
+                </button>
+              )}
+            </>
+          )}
 
-          {/* 새 작업 버튼 */}
           <button
             onClick={handleAddClick}
-            className="px-3 sm:px-4 py-2 bg-main-400 dark:bg-main-500 text-white rounded-lg hover:bg-main-500 dark:hover:bg-main-400 active:bg-main-600 dark:active:bg-main-600 transition-all text-xs sm:text-sm font-medium shadow-sm"
+            className="flex items-center gap-1 px-3 py-2 bg-main-500 dark:bg-main-400 text-white rounded-[10px] hover:bg-main-600 dark:hover:bg-main-500 transition-colors text-sm font-medium"
           >
-            <span className="hidden sm:inline">+ 새 작업</span>
-            <span className="sm:hidden">+</span>
+            <Plus className="w-4 h-4" />
+            <span className="hidden sm:inline">새 작업</span>
           </button>
 
-          {/* 필터 버튼 */}
-          <button
-            onClick={onToggleFilter}
-            className="p-1.5 sm:p-2 hover:bg-white/20 rounded-lg transition-colors"
-            title="필터"
-          >
-            <svg
-              className="w-4 h-4 sm:w-5 sm:h-5 text-white"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"
-              />
-            </svg>
+          <button onClick={onToggleFilter} className={`${iconBtn} relative`} title="필터">
+            <SlidersHorizontal className="w-4 h-4 sm:w-5 sm:h-5" />
+            {hasActiveFilter && (
+              <span className="absolute top-1 right-1 w-1.5 h-1.5 bg-main-500 rounded-full" />
+            )}
           </button>
 
-          {/* 도움말 버튼 */}
-          <button
-            onClick={onToggleHelp}
-            className="p-1.5 hover:bg-white/20 rounded-lg transition-colors"
-            title={showHelp ? "도움말 닫기" : "도움말 열기"}
-          >
-            <svg
-              className={`w-4 h-4 text-white transition-transform duration-300 ${
-                showHelp ? "scale-110" : ""
-              }`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
+          <button onClick={onToggleHelp} className={iconBtn} title={showHelp ? "도움말 닫기" : "도움말 열기"}>
+            <HelpCircle className={`w-4 h-4 transition-colors ${showHelp ? "text-main-500 dark:text-main-400" : ""}`} />
           </button>
         </div>
       </div>
diff --git a/src/components/features/kanban/components/KanbanLegend.tsx b/src/components/features/kanban/components/KanbanLegend.tsx
index 390287b..2bc5061 100644
--- a/src/components/features/kanban/components/KanbanLegend.tsx
+++ b/src/components/features/kanban/components/KanbanLegend.tsx
@@ -11,6 +11,7 @@ import { useMemo } from "react";
 import { Task } from "@/types/kanban";
 import { format, addDays } from "date-fns";
 import { AlertTriangle, Clock } from "lucide-react";
+import PriorityBadge from "@/features/task/ui/fields/PriorityBadge";
 
 interface KanbanLegendProps {
   tasks?: Task[];
@@ -74,26 +75,20 @@ export default function KanbanLegend({
   if (compact) {
     // 컴팩트 모드 (모바일용)
     return (
-      <div className="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700">
+      <div className="flex items-center gap-3 px-3 py-2 bg-muted/40 border-t border-border">
         <div className="flex items-center gap-2 text-xs">
           {/* 통계 */}
           <span className="flex items-center gap-1">
-            <span className="w-2 h-2 rounded-full bg-gray-400"></span>
-            <span className="text-gray-600 dark:text-gray-400">
-              {stats.todo}
-            </span>
+            <span className="w-2 h-2 rounded-full bg-gray-500"></span>
+            <span className="text-muted-foreground">{stats.todo}</span>
           </span>
           <span className="flex items-center gap-1">
-            <span className="w-2 h-2 rounded-full bg-blue-400"></span>
-            <span className="text-gray-600 dark:text-gray-400">
-              {stats.inprogress}
-            </span>
+            <span className="w-2 h-2 rounded-full bg-blue-500"></span>
+            <span className="text-muted-foreground">{stats.inprogress}</span>
           </span>
           <span className="flex items-center gap-1">
-            <span className="w-2 h-2 rounded-full bg-green-500"></span>
-            <span className="text-gray-600 dark:text-gray-400">
-              {stats.done}
-            </span>
+            <span className="w-2 h-2 rounded-full bg-emerald-500"></span>
+            <span className="text-muted-foreground">{stats.done}</span>
           </span>
           {stats.overdue > 0 && (
             <span className="flex items-center gap-1 text-red-500">
@@ -125,38 +120,32 @@ export default function KanbanLegend({
     );
   }
 
-  // 기본 모드 - CalendarStats와 동일한 스타일
+  // 기본 모드
   return (
-    <div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700">
+    <div className="flex items-center justify-between px-4 py-3 bg-muted/40 border-t border-border">
       {/* 왼쪽: 통계 + 범례 */}
       <div className="flex items-center gap-4 sm:gap-6 text-sm flex-wrap">
         {/* 상태별 통계 */}
         <div className="flex items-center gap-2">
-          <span className="w-3 h-3 rounded-full bg-gray-400"></span>
-          <span className="text-gray-600 dark:text-gray-400">할일</span>
-          <span className="font-semibold text-gray-800 dark:text-gray-200">
-            {stats.todo}
-          </span>
+          <span className="w-3 h-3 rounded-full bg-gray-500"></span>
+          <span className="text-muted-foreground">할일</span>
+          <span className="font-semibold text-foreground">{stats.todo}</span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="w-3 h-3 rounded-full bg-blue-400"></span>
-          <span className="text-gray-600 dark:text-gray-400">진행중</span>
-          <span className="font-semibold text-gray-800 dark:text-gray-200">
-            {stats.inprogress}
-          </span>
+          <span className="w-3 h-3 rounded-full bg-blue-500"></span>
+          <span className="text-muted-foreground">진행중</span>
+          <span className="font-semibold text-foreground">{stats.inprogress}</span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="w-3 h-3 rounded-full bg-green-500"></span>
-          <span className="text-gray-600 dark:text-gray-400">완료</span>
-          <span className="font-semibold text-gray-800 dark:text-gray-200">
-            {stats.done}
-          </span>
+          <span className="w-3 h-3 rounded-full bg-emerald-500"></span>
+          <span className="text-muted-foreground">완료</span>
+          <span className="font-semibold text-foreground">{stats.done}</span>
         </div>
 
         {/* 긴급/임박/지연 표시 */}
         {(stats.urgent > 0 || stats.upcoming > 0 || stats.overdue > 0) && (
           <>
-            <span className="text-gray-300 dark:text-gray-600">|</span>
+            <span className="text-border">|</span>
             {stats.urgent > 0 && (
               <div className="flex items-center gap-1 text-orange-500">
                 <AlertTriangle size={14} />
@@ -188,43 +177,34 @@ export default function KanbanLegend({
         <div className="flex items-center gap-3">
           <span className="flex items-center gap-1" title="지연된 태스크">
             <span className="w-1 h-4 bg-red-500 rounded-sm" />
-            <span className="text-gray-600 dark:text-gray-400">지연</span>
+            <span className="text-muted-foreground">지연</span>
           </span>
           <span className="flex items-center gap-1" title="완료된 태스크">
-            <span className="w-1 h-4 bg-green-500 rounded-sm" />
-            <span className="text-gray-600 dark:text-gray-400">완료</span>
+            <span className="w-1 h-4 bg-emerald-500 rounded-sm" />
+            <span className="text-muted-foreground">완료</span>
           </span>
         </div>
 
         {/* 구분선 */}
-        <span className="text-gray-300 dark:text-gray-600">|</span>
+        <span className="text-border">|</span>
 
         {/* 우선순위 범례 */}
-        <div className="flex items-center gap-3">
-          <span className="flex items-center gap-1">
-            <span className="text-red-500">▲</span>
-            <span className="text-gray-600 dark:text-gray-400">높음</span>
-          </span>
-          <span className="flex items-center gap-1">
-            <span className="text-yellow-500">▲</span>
-            <span className="text-gray-600 dark:text-gray-400">보통</span>
-          </span>
-          <span className="flex items-center gap-1">
-            <span className="text-green-500">▲</span>
-            <span className="text-gray-600 dark:text-gray-400">낮음</span>
-          </span>
+        <div className="flex items-center gap-2">
+          <PriorityBadge priority="high" />
+          <PriorityBadge priority="normal" />
+          <PriorityBadge priority="low" />
         </div>
       </div>
 
       {/* 오른쪽: 진행률 */}
       <div className="flex items-center gap-3">
-        <div className="hidden sm:block w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className="hidden sm:block w-24 h-2 bg-border rounded-full overflow-hidden">
           <div
             className="h-full bg-main-500 transition-all duration-300"
             style={{ width: `${completionRate}%` }}
           />
         </div>
-        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        <span className="text-sm font-medium text-foreground">
           {completionRate}% 완료
         </span>
       </div>
diff --git a/src/components/ui/SidePanel.tsx b/src/components/ui/SidePanel.tsx
new file mode 100644
index 0000000..7b6d885
--- /dev/null
+++ b/src/components/ui/SidePanel.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface SidePanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function SidePanel({ isOpen, onClose, children }: SidePanelProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 bg-black/30 z-40 transition-opacity duration-200 ${
+          isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div
+        className={`
+          fixed right-0 top-0 h-full z-50
+          w-full sm:w-[480px]
+          bg-card border-l border-border shadow-2xl
+          transition-transform duration-300 ease-in-out
+          overflow-y-auto
+          ${isOpen ? "translate-x-0" : "translate-x-full"}
+        `}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/features/task/ui/add/TaskAdd.tsx b/src/features/task/ui/add/TaskAdd.tsx
index bc3748e..66de70a 100644
--- a/src/features/task/ui/add/TaskAdd.tsx
+++ b/src/features/task/ui/add/TaskAdd.tsx
@@ -24,6 +24,7 @@ interface TaskAddProps {
   projectEndedAt?: string;
   onSuccess?: (task: Omit<Task, "id" | "created_at" | "updated_at">) => void;
   onCancel: () => void;
+  initialStatus?: TaskStatus;
   initialStartDate?: string;
   initialEndDate?: string;
   initialStartTime?: string;
@@ -80,6 +81,7 @@ export default function TaskAdd({
   projectEndedAt,
   onSuccess,
   onCancel,
+  initialStatus,
   initialStartDate,
   initialEndDate,
   initialStartTime,
@@ -88,6 +90,7 @@ export default function TaskAdd({
 }: TaskAddProps) {
   const [formData, setFormData] = useState<FormData>({
     ...INITIAL_FORM_DATA,
+    status: initialStatus || "todo",
     started_at: initialStartDate || "",
     ended_at: initialEndDate || "",
     start_time: initialStartTime || "",
diff --git a/src/features/task/ui/card/TaskCard.tsx b/src/features/task/ui/card/TaskCard.tsx
index 2217679..5f17b3b 100644
--- a/src/features/task/ui/card/TaskCard.tsx
+++ b/src/features/task/ui/card/TaskCard.tsx
@@ -1,73 +1,101 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { useMemo, useEffect, useState, useRef, useCallback } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { Task } from "@/types";
 import { CSS } from "@dnd-kit/utilities";
 import { Check } from "lucide-react";
 import PriorityBadge from "@/features/task/ui/fields/PriorityBadge";
-import AssigneeInfo from "@/features/task/ui/fields/AssigneeInfo";
-import SubtaskList from "@/features/task/ui/fields/SubtaskList";
 import DateInfo from "@/features/task/ui/fields/DateInfo";
 
 interface TaskCardProps {
   task: Task;
   projectId: string;
   onClick?: () => void;
-  isOverlay?: boolean; // ✨ DragOverlay 모드
+  isOverlay?: boolean;
+  onTitleUpdate?: (title: string) => void;
 }
 
 const TaskCard = ({
   task,
-  projectId,
+  projectId: _projectId,
   onClick,
   isOverlay = false,
+  onTitleUpdate,
 }: TaskCardProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [contentHeight, setContentHeight] = useState(0);
   const [isNew, setIsNew] = useState(true);
-  const contentRef = useRef<HTMLDivElement>(null);
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(task.title);
+  const titleInputRef = useRef<HTMLTextAreaElement>(null);
 
-  // 지연 여부 체크 (마감일+시간이 지났고 완료되지 않은 경우)
   const isOverdue = useMemo(() => {
     if (!task.ended_at || task.status === "done") return false;
-
     const now = new Date();
-
-    // 시간 정보가 있는 경우 (use_time && end_time)
     if (task.use_time && task.end_time) {
       const endDateStr = task.ended_at.includes("T")
         ? task.ended_at.split("T")[0]
         : task.ended_at;
-      const deadlineDateTime = new Date(`${endDateStr}T${task.end_time}`);
-      return now > deadlineDateTime;
+      return now > new Date(`${endDateStr}T${task.end_time}`);
     }
-
-    // 날짜만 있는 경우 - 오늘 자정 기준
     const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
     const endDateStr = task.ended_at.includes("T")
       ? task.ended_at.split("T")[0]
       : task.ended_at;
     const [year, month, day] = endDateStr.split("-").map(Number);
-    const endDate = new Date(year, month - 1, day);
-
-    return endDate < today;
+    return new Date(year, month - 1, day) < today;
   }, [task.ended_at, task.end_time, task.use_time, task.status]);
 
-  // 완료 여부
   const isCompleted = task.status === "done";
 
-  // 새 카드 애니메이션 (마운트 후 해제)
   useEffect(() => {
     const timer = setTimeout(() => setIsNew(false), 500);
     return () => clearTimeout(timer);
   }, []);
 
+  useEffect(() => {
+    if (isEditingTitle && titleInputRef.current) {
+      titleInputRef.current.focus();
+      titleInputRef.current.select();
+    }
+  }, [isEditingTitle]);
+
+  const handleTitleSave = useCallback(() => {
+    const trimmed = editedTitle.trim();
+    if (trimmed && trimmed !== task.title) {
+      onTitleUpdate?.(trimmed);
+    }
+    setIsEditingTitle(false);
+  }, [editedTitle, task.title, onTitleUpdate]);
+
+  const handleTitleDoubleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isOverlay || !onTitleUpdate) return;
+      e.stopPropagation();
+      setEditedTitle(task.title);
+      setIsEditingTitle(true);
+    },
+    [isOverlay, onTitleUpdate, task.title]
+  );
+
+  const handleTitleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleTitleSave();
+      }
+      if (e.key === "Escape") {
+        setIsEditingTitle(false);
+        setEditedTitle(task.title);
+      }
+    },
+    [handleTitleSave, task.title]
+  );
+
   const { attributes, listeners, setNodeRef, transform, isDragging } =
     useSortable({
       id: task.id,
       animateLayoutChanges: () => false,
+      disabled: isEditingTitle,
     });
 
-  // --- 스타일 처리 ---
   const dragStyle = useMemo(
     () => ({
       transform: transform ? CSS.Transform.toString(transform) : undefined,
@@ -78,32 +106,6 @@ const TaskCard = ({
     [transform, isDragging, isOverlay]
   );
 
-  const toggleExpanded = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded((prev) => !prev);
-  }, []);
-
-  const hasAdditionalInfo = useMemo(() => {
-    return Boolean(
-      task.description ||
-        task.assigned_user_id ||
-        task.started_at ||
-        task.ended_at ||
-        (task.subtasks && task.subtasks.length > 0) ||
-        task.memo
-    );
-  }, [task]);
-
-  // --- Height 계산 (아코디언) ---
-  useEffect(() => {
-    if (!contentRef.current) return;
-
-    const calc = () => setContentHeight(contentRef.current!.scrollHeight);
-    calc();
-    const timer = setTimeout(calc, 80);
-    return () => clearTimeout(timer);
-  }, [task, isExpanded]);
-
   return (
     <div
       ref={setNodeRef}
@@ -112,78 +114,62 @@ const TaskCard = ({
       {...(!isOverlay ? listeners : {})}
       onClick={onClick}
       className={`
-        bg-white dark:bg-gray-700
-        text-gray-700 dark:text-gray-300
-        p-4 rounded-lg shadow-md
+        bg-card text-foreground
+        p-4 rounded-[10px] border shadow-[0_1px_3px_rgba(0,0,0,0.08)]
         cursor-grab active:cursor-grabbing
         ${
           isCompleted
-            ? "border-l-4 border-l-green-500 border border-green-200 dark:border-green-800 opacity-75"
+            ? "border-l-[3px] border-l-emerald-500 border-border opacity-70"
             : isOverdue
-            ? "border-l-4 border-l-red-500 border border-red-200 dark:border-red-800"
-            : "border border-gray-200 dark:border-gray-500"
+            ? "border-l-[3px] border-l-red-500 border-border"
+            : "border-border"
         }
-        ${
-          isDragging
-            ? ""
-            : "hover:shadow-lg hover:border-main-300 dark:hover:border-main-400"
-        }
-        ${isOverlay ? "shadow-2xl scale-[1.02] opacity-90" : ""}
+        ${!isDragging ? "hover:shadow-md hover:border-main-300 dark:hover:border-main-500" : ""}
+        ${isOverlay ? "shadow-2xl scale-[1.02]" : ""}
         ${isNew && !isOverlay ? "animate-slide-in-down" : ""}
         transition-shadow duration-150
       `}
     >
-      {/* 헤더 */}
-      <div className="flex items-start justify-between gap-3 mb-3 pb-2 border-b border-gray-200 dark:border-gray-600">
-        <div className="flex items-start gap-2 flex-1">
-          {/* 완료 체크 아이콘 */}
-          {isCompleted && (
-            <div className="flex-shrink-0 w-5 h-5 rounded-full bg-green-500 flex items-center justify-center mt-0.5">
-              <Check className="w-3 h-3 text-white" strokeWidth={3} />
+      {/* 제목 행 */}
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex items-start gap-2 flex-1 min-w-0">
+          {isCompleted && !isEditingTitle && (
+            <div className="shrink-0 w-4 h-4 rounded-full bg-emerald-500 flex items-center justify-center mt-0.5">
+              <Check className="w-2.5 h-2.5 text-white" strokeWidth={3} />
             </div>
           )}
-          <h3
-            className={`font-bold text-lg flex-1 line-clamp-2 ${
-              isCompleted
-                ? "text-gray-500 dark:text-gray-400 line-through"
-                : "text-gray-800 dark:text-gray-100"
-            }`}
-          >
-            {task.title}
-          </h3>
-        </div>
-
-        {/* 우선순위 + 펼치기 버튼 */}
-        <div className="flex items-center gap-2">
-          {task.priority && <PriorityBadge priority={task.priority} />}
-          {hasAdditionalInfo && !isOverlay && (
-            <button
-              onClick={toggleExpanded}
-              className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
+          {isEditingTitle ? (
+            <textarea
+              ref={titleInputRef}
+              value={editedTitle}
+              onChange={(e) => setEditedTitle(e.target.value)}
+              onBlur={handleTitleSave}
+              onKeyDown={handleTitleKeyDown}
+              onClick={(e) => e.stopPropagation()}
+              rows={2}
+              className="w-full text-sm font-semibold text-foreground leading-snug bg-muted/50 border border-main-300 rounded px-1.5 py-0.5 resize-none focus:outline-none focus:ring-1 focus:ring-main-500"
+            />
+          ) : (
+            <h3
+              onDoubleClick={handleTitleDoubleClick}
+              className={`font-semibold text-sm flex-1 line-clamp-2 leading-snug ${
+                onTitleUpdate ? "cursor-text" : ""
+              } ${
+                isCompleted
+                  ? "text-muted-foreground line-through"
+                  : "text-foreground"
+              }`}
             >
-              <svg
-                className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${
-                  isExpanded ? "rotate-180" : ""
-                }`}
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </button>
+              {task.title}
+            </h3>
           )}
         </div>
+        {task.priority && <PriorityBadge priority={task.priority} />}
       </div>
 
-      {/* 접혔을 때 날짜 표시 */}
-      {!isExpanded && !isOverlay && (task.started_at || task.ended_at) && (
-        <div className="pt-1">
+      {/* 마감일 */}
+      {(task.started_at || task.ended_at) && !isOverlay && (
+        <div className="mt-2">
           <DateInfo
             startedAt={task.started_at ?? undefined}
             endedAt={task.ended_at ?? undefined}
@@ -195,56 +181,43 @@ const TaskCard = ({
         </div>
       )}
 
-      {/* 펼쳐진 내용 */}
-      {!isOverlay && (
-        <div
-          className="overflow-hidden transition-[max-height,opacity,transform] duration-400 ease-out"
-          style={{
-            maxHeight:
-              isExpanded || !hasAdditionalInfo ? `${contentHeight}px` : "0px",
-            opacity: isExpanded || !hasAdditionalInfo ? 1 : 0,
-            transform: isExpanded ? "scale(1)" : "scale(0.98)",
-          }}
-        >
-          <div ref={contentRef} className="space-y-3">
-            {task.description && (
-              <p className="text-sm leading-relaxed text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800/40 p-3 rounded-lg">
-                {task.description}
-              </p>
-            )}
-
-            {task.assigned_user_id && (
-              <div className="bg-gray-50 dark:bg-gray-800/40 p-3 rounded-lg">
-                <AssigneeInfo
-                  userId={task.assigned_user_id}
-                  projectId={projectId}
+      {/* 서브태스크 진행률 + 담당자 */}
+      {!isOverlay && (Array.isArray(task.subtasks) && task.subtasks.length > 0 || task.assignee) && (
+        <div className="mt-2 flex items-center gap-2">
+          {Array.isArray(task.subtasks) && task.subtasks.length > 0 && (
+            <>
+              <div className="flex-1 h-1 bg-border rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-main-500 dark:bg-main-400 rounded-full transition-all"
+                  style={{
+                    width: `${Math.round(
+                      (task.subtasks.filter((s) => s.completed).length /
+                        task.subtasks.length) *
+                        100
+                    )}%`,
+                  }}
                 />
               </div>
-            )}
-
-            {(task.started_at || task.ended_at) && (
-              <DateInfo
-                startedAt={task.started_at ?? undefined}
-                endedAt={task.ended_at ?? undefined}
-                startTime={task.start_time || undefined}
-                endTime={task.end_time || undefined}
-                useTime={task.use_time ?? false}
-                status={task.status}
-              />
-            )}
-
-            {Array.isArray(task.subtasks) && task.subtasks.length > 0 && (
-              <div className="bg-gray-50 dark:bg-gray-800/40 p-3 rounded-lg">
-                <SubtaskList subtasks={task.subtasks} />
-              </div>
-            )}
-
-            {task.memo && (
-              <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg text-xs text-gray-700 dark:text-yellow-200">
-                {task.memo}
-              </div>
-            )}
-          </div>
+              <span className="text-xs text-muted-foreground shrink-0">
+                {task.subtasks.filter((s) => s.completed).length}/{task.subtasks.length}
+              </span>
+            </>
+          )}
+          {task.assignee && (
+            <div className="ml-auto shrink-0" title={task.assignee.name}>
+              {task.assignee.avatar_url ? (
+                <img
+                  src={task.assignee.avatar_url}
+                  alt={task.assignee.name}
+                  className="w-5 h-5 rounded-full object-cover border border-border"
+                />
+              ) : (
+                <div className="w-5 h-5 rounded-full bg-main-500/20 flex items-center justify-center text-[10px] font-semibold text-main-700 dark:text-main-300 border border-border">
+                  {task.assignee.name.slice(0, 1).toUpperCase()}
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/src/lib/utils/taskUtils.ts b/src/lib/utils/taskUtils.ts
index 10da5bd..26e95d2 100644
--- a/src/lib/utils/taskUtils.ts
+++ b/src/lib/utils/taskUtils.ts
@@ -8,19 +8,19 @@ import { TaskStatus, TaskPriority } from "@/types";
 export const getTaskStatusColor = (status: TaskStatus) => {
   const colors = {
     todo: {
-      bg: "bg-gray-400 dark:bg-gray-600",
-      text: "text-gray-700 dark:text-gray-200",
+      bg: "bg-gray-500 dark:bg-gray-500",
+      text: "text-gray-600 dark:text-gray-300",
       border: "border-gray-300 dark:border-gray-500",
     },
     inprogress: {
-      bg: "bg-blue-400 dark:bg-blue-500",
-      text: "text-blue-700 dark:text-blue-200",
+      bg: "bg-blue-500 dark:bg-blue-400",
+      text: "text-blue-600 dark:text-blue-300",
       border: "border-blue-300 dark:border-blue-500",
     },
     done: {
-      bg: "bg-green-400 dark:bg-green-600",
-      text: "text-green-700 dark:text-green-300",
-      border: "border-green-300 dark:border-green-500",
+      bg: "bg-emerald-500 dark:bg-emerald-400",
+      text: "text-emerald-600 dark:text-emerald-300",
+      border: "border-emerald-300 dark:border-emerald-500",
     },
   };
   return colors[status];