diff --git a/components/Task.tsx b/components/Task.tsx
index ee199e9..2bceaf2 100644
--- a/components/Task.tsx
+++ b/components/Task.tsx
@@ -5,9 +5,11 @@ import { TaskStatus, TaskType } from "../task.ts";
 import t from "../server/i18n.ts";
 import { tw } from "twind";
 import Progress from "./Progress.tsx";
+import { TaskStatusFlag } from "./TaskFilterBar.tsx";
 
 type Props = {
     task: TaskDetail;
+    flags: TaskStatusFlag;
 };
 
 type State = {
@@ -28,6 +30,14 @@ const Status: Record<TaskStatus, string> = {
     [TaskStatus.Failed]: "failed",
 };
 
+function map_taskstatus(s: TaskStatus) {
+    if (s === TaskStatus.Wait) return TaskStatusFlag.Waiting;
+    else if (s === TaskStatus.Running) return TaskStatusFlag.Running;
+    else if (s === TaskStatus.Finished) return TaskStatusFlag.Finished;
+    else if (s === TaskStatus.Failed) return TaskStatusFlag.Failed;
+    return TaskStatusFlag.None;
+}
+
 export default class Task extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
@@ -44,6 +54,9 @@ export default class Task extends Component<Props, State> {
     }
     render() {
         const task = this.props.task;
+        if (!(this.props.flags & map_taskstatus(task.status))) {
+            return <div data-id={task.base.id}></div>;
+        }
         console.log(task);
         let error_div = null;
         if (task.status === TaskStatus.Failed) {
diff --git a/islands/TaskManager.tsx b/islands/TaskManager.tsx
index c2e4fba..dad357f 100644
--- a/islands/TaskManager.tsx
+++ b/islands/TaskManager.tsx
@@ -22,14 +22,6 @@ export type TaskManagerProps = {
     show: boolean;
 };
 
-function map_taskstatus(s: TaskStatus) {
-    if (s === TaskStatus.Wait) return TaskStatusFlag.Waiting;
-    else if (s === TaskStatus.Running) return TaskStatusFlag.Running;
-    else if (s === TaskStatus.Finished) return TaskStatusFlag.Finished;
-    else if (s === TaskStatus.Failed) return TaskStatusFlag.Failed;
-    return TaskStatusFlag.None;
-}
-
 const tasks = signal(new Map<number, TaskDetail>());
 const task_list = signal(new Array<number>());
 export const task_ws = signal<WebSocket | undefined>(undefined);
@@ -208,10 +200,7 @@ export default class TaskManager extends Component<TaskManagerProps> {
                     {task_list.value.map((k) => {
                         const t = tasks.value.get(k);
                         if (t) {
-                            if (!(flags & map_taskstatus(t.status))) {
-                                return <div data-id={k}></div>;
-                            }
-                            return <Task task={t} />;
+                            return <Task task={t} flags={flags} />;
                         } else {
                             return <div data-id={k}></div>;
                         }