diff --git a/packages/be-gateway/src/routes/project/view.ts b/packages/be-gateway/src/routes/project/view.ts
index 9b9bcd30..974acdb4 100644
--- a/packages/be-gateway/src/routes/project/view.ts
+++ b/packages/be-gateway/src/routes/project/view.ts
@@ -32,6 +32,7 @@ export default class ProjectViewController extends BaseController {
         priority: string
         point: string
         groupBy: string
+        statusIds: string[]
       }
     }
 
@@ -49,7 +50,8 @@ export default class ProjectViewController extends BaseController {
         date: data.date,
         priority: data.priority,
         point: data.point,
-        groupBy: data.groupBy
+        groupBy: data.groupBy,
+        statusIds: data.statusIds
       } : {},
 
       type,
diff --git a/packages/shared-ui/src/components/Controls/ListControl/ListItem.tsx b/packages/shared-ui/src/components/Controls/ListControl/ListItem.tsx
index 8668498b..c655a97c 100644
--- a/packages/shared-ui/src/components/Controls/ListControl/ListItem.tsx
+++ b/packages/shared-ui/src/components/Controls/ListControl/ListItem.tsx
@@ -39,6 +39,8 @@ export default function ListItem({
     if (multiple && onMultiChange) {
       onMultiChange(prev => {
         // clear others selected, but itself
+        // when set `true` and in multiple mode, it will clear all value but itself
+        // Ex: user select an ALL item, then the others should be cleared
         if (keepMeOnly) {
           return [value]
         }
@@ -50,7 +52,7 @@ export default function ListItem({
           }
 
           // click on a unselected item, select it
-          return [...prev.filter(p => p.id !== 'ALL'), value]
+          return [...prev.filter(p => p.id !== 'ALL'), value].reverse()
         } else {
           return prev
         }
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx
index 417fddb6..d16b8821 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx
@@ -28,40 +28,49 @@ export default function CalMonthTask({
   taskStatusId
 }: ICalMonthTaskProps) {
   const { filter } = useTaskFilter()
-  const { status: filterStatus } = filter
+  const { status: filterStatus, statusIds: filterStatusIds } = filter
   const { color, type } = useStatusData(taskStatusId || '')
   const { calendarView } = useCalendarContext()
 
-  if (filterStatus !== 'ALL' && filterStatus !== type) {
-    return null
+  const view = () => <Link href={link}>
+    <Draggable draggableId={id} index={index}>
+      {provided => (
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+          className="calendar-task-item relative">
+          {calendarView === ICalendarView.WEEK ? (
+            <CalTaskInWeek
+              color={color}
+              title={title}
+              assigneeId={assigneeId}
+            />
+          ) : (
+            <CalTaskInMonth
+              time={time}
+              color={color}
+              title={title}
+              assigneeId={assigneeId}
+            />
+          )}
+        </div>
+      )}
+    </Draggable>
+  </Link>
+
+  // if statusIds contain ALL or nothing
+  // display view
+  if (filterStatusIds.includes('ALL') || !filterStatusIds.length) {
+    return view()
+  }
+
+
+  // if statusIds have some
+  // display tasks that have the same status id
+  if (filterStatusIds.includes(taskStatusId)) {
+    return view()
   }
 
-  return (
-    <Link href={link}>
-      <Draggable draggableId={id} index={index}>
-        {provided => (
-          <div
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            ref={provided.innerRef}
-            className="calendar-task-item relative">
-            {calendarView === ICalendarView.WEEK ? (
-              <CalTaskInWeek
-                color={color}
-                title={title}
-                assigneeId={assigneeId}
-              />
-            ) : (
-              <CalTaskInMonth
-                time={time}
-                color={color}
-                title={title}
-                assigneeId={assigneeId}
-              />
-            )}
-          </div>
-        )}
-      </Draggable>
-    </Link>
-  )
+  return null
 }
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTaskList.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTaskList.tsx
index d6b53b49..c57e3190 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTaskList.tsx
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTaskList.tsx
@@ -34,9 +34,8 @@ export default function CalMonthTaskList({ day }: { day: Date }) {
 
         const h = dueDate.getHours()
         const m = dueDate.getMinutes()
-        const time = `${h > 9 ? (h > 12 ? h - 12 : h) : '0' + h}:${
-          m > 9 ? m : '0' + m
-        } ${h >= 12 ? 'PM' : 'AM'}`
+        const time = `${h > 9 ? (h > 12 ? h - 12 : h) : '0' + h}:${m > 9 ? m : '0' + m
+          } ${h >= 12 ? 'PM' : 'AM'}`
 
         return (
           <CalMonthTask
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
index fd9667e7..651656cc 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
@@ -1,6 +1,7 @@
 .calendar-wrapper {
   @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
-  height: calc(100vh - 153px);
+  /* height: calc(100vh - 153px); */
+  height: 800px
 }
 
 .week-view.calendar-wrapper {
diff --git a/packages/ui-app/app/_components/StatusSelectMultiple.tsx b/packages/ui-app/app/_components/StatusSelectMultiple.tsx
index 261fcc73..3b94fe66 100644
--- a/packages/ui-app/app/_components/StatusSelectMultiple.tsx
+++ b/packages/ui-app/app/_components/StatusSelectMultiple.tsx
@@ -1,28 +1,27 @@
 import { Form, ListItemValue } from '@shared/ui'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useProjectStatusStore } from '../../store/status'
 
 const List = Form.List
 
 interface IStatusSelectProps {
   value?: string[]
+  noName?: boolean
   className?: string
   onChange?: (v: string[]) => void
   title?: string
   placeholder?: string
-}
-
-const defaultOption: ListItemValue = {
-  id: '0',
-  title: 'None'
+  maxDisplay?: number
 }
 
 export default function StatusSelectMultiple({
   title,
   className,
+  noName = false,
   value,
   onChange,
-  placeholder
+  placeholder,
+  maxDisplay = 3
 }: IStatusSelectProps) {
   // const selectOption = options.find(opt => opt.id === value);
   const { statuses } = useProjectStatusStore()
@@ -38,16 +37,33 @@ export default function StatusSelectMultiple({
   // update options list
   useEffect(() => {
     const statusList = statuses.map(stt => ({ id: stt.id, title: stt.name }))
+    statusList.push({
+      id: 'ALL',
+      title: 'All statuses'
+    })
     setOptions(statusList as ListItemValue[])
   }, [statuses])
 
   // fill selectetd value after statues list updated
   useEffect(() => {
-    if (options.length) {
-      const selectedOption = options.filter(
-        opt => value && value.some(v => v === opt.id)
-      )
-      setVal(selectedOption)
+    if (options.length && value?.length) {
+
+      const newVal: ListItemValue[] = []
+      const optionMap = new Map<string, ListItemValue>()
+
+      options.forEach(opt => {
+        optionMap.set(opt.id, opt)
+      })
+
+      value.forEach(item => {
+        const value = optionMap.get(item)
+        if (value) {
+          newVal.push(value)
+        }
+      })
+
+      setVal(newVal)
+
     }
   }, [options, value])
 
@@ -59,6 +75,10 @@ export default function StatusSelectMultiple({
   }, [updateCounter])
 
   const selectedList = val
+  const slicedList = val.slice(0, maxDisplay)
+  const rest = val.slice(maxDisplay).length
+
+  const bgOfAll = 'linear-gradient(45deg, rgba(226,40,130,1) 0%, rgba(226,40,142,1) 50%, rgba(30,235,107,1) 50%, rgba(30,235,213,1) 100%)'
 
   return (
     <div className={className}>
@@ -72,32 +92,37 @@ export default function StatusSelectMultiple({
           setUpdateCounter(updateCounter + 1)
         }}>
         <List.Button>
-          {!selectedList || !selectedList.length ? <span className='text-transparent'>Option</span>: null}
+          {!selectedList || !selectedList.length ? <span className='text-transparent'>Option</span> : null}
           <div className="flex flex-wrap items-center gap-2">
-            {selectedList.map(item => {
+            {slicedList.map(item => {
               const stt = statuses.find(stt => stt.id === item.id)
+              const isAllOption = item.id === 'ALL' ? bgOfAll : stt?.color
+
               return (
                 <div key={item.id} className="flex items-center gap-1">
                   <div
                     className="w-4 h-4 rounded cursor-pointer"
                     style={{
-                      backgroundColor: stt ? stt.color : '#e5e5e5'
+                      backgroundColor: stt ? stt.color : isAllOption,
+                      background: isAllOption
                     }}></div>
-                  <span className="status-title">{item.title}</span>
+                  {noName ? null : <span className="status-title">{item.title}</span>}
                 </div>
               )
             })}
+            {rest ? <div>+{rest}</div> : null}
           </div>
         </List.Button>
-        <List.Options>
+        <List.Options width={200}>
           {options.map(option => {
             const stt = statuses.find(st => st.id === option.id)
+            const isAllOption = option.id === 'ALL' ? bgOfAll : stt?.color
             return (
-              <List.Item key={option.id} value={option}>
+              <List.Item key={option.id} value={option} keepMeOnly={option.id === 'ALL'} >
                 <div className="flex items-center gap-2">
                   <div
                     className="w-4 h-4 rounded cursor-pointer"
-                    style={{ backgroundColor: stt?.color }}></div>
+                    style={{ backgroundColor: stt?.color, background: isAllOption }}></div>
                   <span>{option.title}</span>
                 </div>
               </List.Item>
diff --git a/packages/ui-app/app/_features/ProjectContainer/useGetTask.ts b/packages/ui-app/app/_features/ProjectContainer/useGetTask.ts
index 3251c879..435a1c71 100644
--- a/packages/ui-app/app/_features/ProjectContainer/useGetTask.ts
+++ b/packages/ui-app/app/_features/ProjectContainer/useGetTask.ts
@@ -60,6 +60,7 @@ export default function useGetTask() {
     })
 
     setTaskLoading(true)
+    console.log('before getting task =======================', point)
     taskGetByCond(
       {
         title: term || undefined,
@@ -74,6 +75,7 @@ export default function useGetTask() {
     )
       .then(res => {
         const { data, status, error } = res.data
+        console.log('fetch task data', data)
         if (status !== 200) {
           addAllTasks([])
           localforage.removeItem(key)
@@ -83,6 +85,7 @@ export default function useGetTask() {
 
         localforage.setItem(key, data)
         setTimeout(() => {
+          console.log('update all task', data)
           addAllTasks(data)
         }, 300)
       })
diff --git a/packages/ui-app/app/_features/ProjectView/ProjectViewCreate.tsx b/packages/ui-app/app/_features/ProjectView/ProjectViewCreate.tsx
index e67dbc6c..1080c0bc 100644
--- a/packages/ui-app/app/_features/ProjectView/ProjectViewCreate.tsx
+++ b/packages/ui-app/app/_features/ProjectView/ProjectViewCreate.tsx
@@ -1,5 +1,5 @@
 import { Modal } from '@shared/ui'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { AiOutlinePlus } from 'react-icons/ai'
 import ProjectViewModal from './ProjectViewModal'
 import { IBoardFilter, ProjectViewProvider } from './context'
@@ -13,10 +13,18 @@ export default function ProjectViewCreate() {
   const [filter, setFilter] = useState<IBoardFilter>({
     date: 'this-month',
     priority: 'ALL',
-    point: "INFINITE",
+    point: "-1",
+    statusIds: ['ALL'],
     groupBy: ETaskFilterGroupByType.STATUS
   })
 
+  useEffect(() => {
+    if (visible === false) {
+      setCustomView(false)
+    }
+
+  }, [visible])
+
   return (
     <ProjectViewProvider
       value={{
diff --git a/packages/ui-app/app/_features/ProjectView/ProjectViewModal.tsx b/packages/ui-app/app/_features/ProjectView/ProjectViewModal.tsx
index 67fa0ee7..a27ec6c7 100644
--- a/packages/ui-app/app/_features/ProjectView/ProjectViewModal.tsx
+++ b/packages/ui-app/app/_features/ProjectView/ProjectViewModal.tsx
@@ -1,19 +1,5 @@
 import { ProjectViewType } from '@prisma/client'
 import { useState } from 'react'
-import { HiOutlineMenuAlt1 } from 'react-icons/hi'
-import {
-  HiMiniBars4,
-  HiOutlineBars2,
-  HiOutlineBars3,
-  HiOutlineBars3BottomLeft,
-  HiOutlineBars3BottomRight,
-  HiOutlineCalendar,
-  HiOutlineListBullet,
-  HiOutlineRectangleGroup,
-  HiOutlineRocketLaunch,
-  HiOutlineUserGroup,
-  HiOutlineViewColumns
-} from 'react-icons/hi2'
 
 import ProjectViewModalForm from './ProjectViewModalForm'
 import { useProjectViewContext } from './context'
diff --git a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
index 7d8c0725..2412e76e 100644
--- a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
+++ b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
@@ -21,7 +21,7 @@ export default function ProjectViewModalForm({
   desc: string
 }) {
   const { projectId } = useParams()
-  const { setVisible, name: viewName, icon, setName, filter, customView } = useProjectViewContext()
+  const { setVisible, name: viewName, icon, setName, filter, customView, setCustomView } = useProjectViewContext()
   const [loading, setLoading] = useState(false)
   const { addProjectView } = useProjectViewAdd()
 
@@ -29,6 +29,7 @@ export default function ProjectViewModalForm({
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
+      setCustomView(false)
       setName('')
     }, 500)
   }
diff --git a/packages/ui-app/app/_features/ProjectView/context.ts b/packages/ui-app/app/_features/ProjectView/context.ts
index 560817f1..16f00bd9 100644
--- a/packages/ui-app/app/_features/ProjectView/context.ts
+++ b/packages/ui-app/app/_features/ProjectView/context.ts
@@ -7,6 +7,7 @@ export interface IBoardFilter {
   priority: TaskPriority | 'ALL',
   point: string
   groupBy: ETaskFilterGroupByType
+  statusIds: string[]
 }
 
 interface IProjectViewContextProps {
@@ -39,7 +40,8 @@ const ProjectViewContext = createContext<IProjectViewContextProps>({
   filter: {
     date: "this-month",
     priority: 'ALL',
-    point: "INFINITE",
+    point: "-1",
+    statusIds: ['ALL'],
     groupBy: ETaskFilterGroupByType.STATUS
   },
   setFilter: () => { console.log(1) }
@@ -55,7 +57,7 @@ export const useProjectViewContext = () => {
 
   const setFilterValue = (
     name: keyof IBoardFilter,
-    val: string | ETaskFilterGroupByType
+    val: string | string[] | ETaskFilterGroupByType
   ) => {
     setFilter(filter => ({ ...filter, [name]: val }))
   }
diff --git a/packages/ui-app/app/_features/ProjectView/index.tsx b/packages/ui-app/app/_features/ProjectView/index.tsx
index 8b2b26e2..3834ff87 100644
--- a/packages/ui-app/app/_features/ProjectView/index.tsx
+++ b/packages/ui-app/app/_features/ProjectView/index.tsx
@@ -7,54 +7,46 @@ import { useProjectViewList } from './useProjectViewList'
 import ProjectViewIcon from './ProjectViewIcon'
 import { Loading } from '@shared/ui'
 import ProjectViewItemDropdown from './ProjectViewItemDropdown'
-import { useTaskFilter } from '../TaskFilter/context'
-import { IBoardFilter } from './context'
-import { useDebounce } from '@/hooks/useDebounce'
 import DynamicIcon from '@/components/DynamicIcon'
 import HasRole from '../UserPermission/HasRole'
+import useSetViewFilter from './useSetViewFilter'
+
+// function ProjectViewItem({view}: {view: }) {
+//   const clickOnView = (name: string) => {
+//     push(`${params.orgID}/project/${params.projectId}?mode=${name}`)
+//   }
+//   return <div
+//     onClick={() => clickOnView(view.id)}
+//     className={`project-view-item group relative ${active ? 'active' : ''
+//       }`}
+//     key={index}>
+//     {icon ? (
+//       <DynamicIcon name={icon} />
+//     ) : (
+//       <ProjectViewIcon type={view.type} />
+//     )}
+//     <span>{view.name}</span>
+//     <ProjectViewItemDropdown
+//       id={view.id}
+//       name={view.name || ''}
+//       type={view.type}
+//     />
+//   </div>
+// }
 
 export default function ProjectView() {
   const searchParams = useSearchParams()
   const { push } = useRouter()
   const params = useParams()
   const mode = searchParams.get('mode')
-  const { views, loading } = useProjectViewList()
-  const { setFilter, setDefaultFilter } = useTaskFilter()
+  const { views } = useProjectViewList()
+
+  useSetViewFilter()
 
   const clickOnView = (name: string) => {
     push(`${params.orgID}/project/${params.projectId}?mode=${name}`)
   }
 
-  useDebounce(() => {
-    const viewId = mode
-    const view = views.find(v => v.id === viewId)
-
-    if (
-      view &&
-      view.data &&
-      !Object.keys(view.data as { [key: string]: unknown }).length
-    ) {
-      setDefaultFilter()
-    }
-
-    if (
-      view &&
-      view.data &&
-      Object.keys(view.data as { [key: string]: unknown }).length
-    ) {
-      const data = view.data as unknown as IBoardFilter
-      setFilter(filter => ({
-        ...filter,
-        ...{
-          date: data.date,
-          groupBy: data.groupBy,
-          priority: data.priority,
-          point: data.point
-        }
-      }))
-    }
-  }, [mode, views.toString()])
-
 
   return (
     <div className="project-view pl-1 relative">
diff --git a/packages/ui-app/app/_features/ProjectView/useProjectViewAdd.ts b/packages/ui-app/app/_features/ProjectView/useProjectViewAdd.ts
index 04802178..480612f2 100644
--- a/packages/ui-app/app/_features/ProjectView/useProjectViewAdd.ts
+++ b/packages/ui-app/app/_features/ProjectView/useProjectViewAdd.ts
@@ -24,6 +24,7 @@ export const useProjectViewAdd = () => {
       date: data.date,
       priority: data.priority,
       point: data.point,
+      statusIds: data.statusIds,
       groupBy: data.groupBy
     } : null
 
diff --git a/packages/ui-app/app/_features/ProjectView/useProjectViewList.ts b/packages/ui-app/app/_features/ProjectView/useProjectViewList.ts
index b3a6fc90..0926c10b 100644
--- a/packages/ui-app/app/_features/ProjectView/useProjectViewList.ts
+++ b/packages/ui-app/app/_features/ProjectView/useProjectViewList.ts
@@ -52,7 +52,6 @@ export const useProjectViewList = () => {
       if (val) {
         const views = val as ProjectView[]
 
-
         views.forEach(v => projectViewMap.set(v.id, v.type))
         addAllView(views)
       }
diff --git a/packages/ui-app/app/_features/ProjectView/useSetViewFilter.ts b/packages/ui-app/app/_features/ProjectView/useSetViewFilter.ts
new file mode 100644
index 00000000..4b1b4f6f
--- /dev/null
+++ b/packages/ui-app/app/_features/ProjectView/useSetViewFilter.ts
@@ -0,0 +1,46 @@
+import { useDebounce } from "@/hooks/useDebounce"
+import { useSearchParams } from "next/navigation"
+import { useProjectViewList } from "./useProjectViewList"
+import { useTaskFilter } from "../TaskFilter/context"
+import { IBoardFilter } from "./context"
+
+export default function useSetViewFilter() {
+  const searchParams = useSearchParams()
+  const { views } = useProjectViewList()
+  const { setFilter, setDefaultFilter } = useTaskFilter()
+  const mode = searchParams.get('mode')
+
+  // update task filter once user change to another view
+  useDebounce(() => {
+    const viewId = mode
+    const view = views.find(v => v.id === viewId)
+
+    if (
+      view &&
+      view.data &&
+      !Object.keys(view.data as { [key: string]: unknown }).length
+    ) {
+      setDefaultFilter()
+    }
+
+    if (
+      view &&
+      view.data &&
+      Object.keys(view.data as { [key: string]: unknown }).length
+    ) {
+      const data = view.data as unknown as IBoardFilter
+      console.log('set view data fileter', data)
+
+      setFilter(filter => ({
+        ...filter,
+        ...{
+          date: data.date,
+          groupBy: data.groupBy,
+          priority: data.priority,
+          statusIds: data.statusIds,
+          point: data.point
+        }
+      }))
+    }
+  }, [mode, views.toString()])
+}
diff --git a/packages/ui-app/app/_features/ProjectViewFilter/CalendarFilter.tsx b/packages/ui-app/app/_features/ProjectViewFilter/CalendarFilter.tsx
index 37f1aa78..5c792c95 100644
--- a/packages/ui-app/app/_features/ProjectViewFilter/CalendarFilter.tsx
+++ b/packages/ui-app/app/_features/ProjectViewFilter/CalendarFilter.tsx
@@ -15,7 +15,7 @@ export default function ProjectViewFilterByCalendar({ type, desc, onAdd }: {
     <div className="">
       <h2 className="text-xl mb-3">Calendar</h2>
       <p className="text-sm text-gray-500 mb-6">{desc}</p>
-      <FilterForm />
+      <FilterForm type={type} />
       <div className="text-right">
         <Button
           onClick={onAdd}
diff --git a/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx b/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
index 68bf49d8..a3714278 100644
--- a/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
+++ b/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
@@ -4,12 +4,14 @@ import PrioritySelect from "@/components/PrioritySelect";
 import { Form } from "@shared/ui";
 import { ETaskFilterGroupByType } from "../TaskFilter/context";
 import { useProjectViewContext } from "../ProjectView/context";
+import StatusSelectMultiple from "@/components/StatusSelectMultiple";
+import { ProjectViewType } from "@prisma/client";
 
-export default function FilterForm() {
+export default function FilterForm({ type }: { type?: ProjectViewType }) {
 
   const { customView, setCustomView, filter, setFilterValue } = useProjectViewContext()
   const hidden = customView ? '' : 'hidden'
-  const { date, point, priority, groupBy } = filter
+  const { date, point, priority, groupBy, statusIds } = filter
 
   return <>
     <div className="flex items-center gap-2 mb-3">
@@ -59,6 +61,12 @@ export default function FilterForm() {
           setFilterValue('priority', val)
         }}
       />
+      {type === ProjectViewType.CALENDAR ?
+        <StatusSelectMultiple value={statusIds} onChange={val => {
+          setFilterValue('statusIds', val)
+
+        }} />
+        : null}
     </div>
 
     <div className={`mb-6 ${hidden}`}>
diff --git a/packages/ui-app/app/_features/TaskFilter/CalendarModeFilter.tsx b/packages/ui-app/app/_features/TaskFilter/CalendarModeFilter.tsx
index 5967852c..17a87d3f 100644
--- a/packages/ui-app/app/_features/TaskFilter/CalendarModeFilter.tsx
+++ b/packages/ui-app/app/_features/TaskFilter/CalendarModeFilter.tsx
@@ -51,19 +51,19 @@ const CalendarFilter = () => {
             { id: ICalendarView.MONTH, title: 'Month view' },
           ]} />
         <div className='w-[1px] h-[20px] bg-gray-200 dark:bg-gray-700 mx-3'></div>
-        <ListPreset
-          className='no-clear-icon'
-          value={status}
-          onChange={val => {
-            setFilterValue('status', val)
-          }}
-          width={150}
-          options={[
-            { id: 'TODO', title: 'Not Implemented' },
-            { id: 'INPROCESS', title: 'In Process' },
-            { id: 'DONE', title: 'Completed Tasks' },
-            { id: 'ALL', title: 'All Task' },
-          ]} />
+        {/* <ListPreset */}
+        {/*   className='no-clear-icon' */}
+        {/*   value={status} */}
+        {/*   onChange={val => { */}
+        {/*     setFilterValue('status', val) */}
+        {/*   }} */}
+        {/*   width={150} */}
+        {/*   options={[ */}
+        {/*     { id: 'TODO', title: 'Not Implemented' }, */}
+        {/*     { id: 'INPROCESS', title: 'In Process' }, */}
+        {/*     { id: 'DONE', title: 'Completed Tasks' }, */}
+        {/*     { id: 'ALL', title: 'All Task' }, */}
+        {/*   ]} /> */}
       </div>
       <div className='w-[1px] h-[20px] bg-gray-200 dark:bg-gray-700 mx-3'></div>
       <div className="calendar-filter flex justify-center items-center gap-2">
diff --git a/packages/ui-app/app/_features/TaskFilter/context.tsx b/packages/ui-app/app/_features/TaskFilter/context.tsx
index 82e7d8ed..9f9dd26f 100644
--- a/packages/ui-app/app/_features/TaskFilter/context.tsx
+++ b/packages/ui-app/app/_features/TaskFilter/context.tsx
@@ -35,6 +35,7 @@ interface ITaskFilterFields {
   point: string
   priority: TaskPriority | 'ALL'
   assigneeIds: string[]
+  statusIds: string[]
   status: 'TODO' | 'INPROCESS' | 'DONE' | 'ALL'
 }
 
@@ -74,6 +75,7 @@ const TaskFilterContext = createContext<ITaskFilterContextProps>({
     point: 'INFINITE',
     priority: 'ALL',
     assigneeIds: [],
+    statusIds: ['ALL'],
     status: 'ALL'
   },
   setFilter: () => {
@@ -94,6 +96,7 @@ const defaultFilter: ITaskFilterFields = {
   point: '-1',
   priority: 'ALL',
   assigneeIds: ['ALL'],
+  statusIds: ['ALL'],
   status: 'ALL'
 }
 
diff --git a/packages/ui-app/app/_features/TaskFilter/index.tsx b/packages/ui-app/app/_features/TaskFilter/index.tsx
index 99a69638..755d312b 100644
--- a/packages/ui-app/app/_features/TaskFilter/index.tsx
+++ b/packages/ui-app/app/_features/TaskFilter/index.tsx
@@ -12,6 +12,8 @@ import { ETaskFilterGroupByType, useTaskFilter } from './context'
 import './style.css'
 import { useProjectViewList } from '../ProjectView/useProjectViewList'
 import { ProjectViewType } from '@prisma/client'
+import StatusSelect from '@/components/StatusSelect'
+import StatusSelectMultiple from '@/components/StatusSelectMultiple'
 
 let timeout = 0
 interface ITaskFilterProps {
@@ -37,7 +39,8 @@ export default function TaskFilter({
     endDate,
     point,
     priority,
-    assigneeIds
+    assigneeIds,
+    statusIds
   } = filter
 
   const isDateRange = date === 'date-range'
@@ -143,6 +146,10 @@ export default function TaskFilter({
           />
         ) : null}
 
+        {isCalendarMode ? <StatusSelectMultiple maxDisplay={2} value={statusIds} onChange={val => {
+          setFilterValue('statusIds', val)
+        }} /> : null}
+
         <PrioritySelect
           all={true}
           width={130}
diff --git a/packages/ui-app/services/task.ts b/packages/ui-app/services/task.ts
index eb9c3690..c1fe1aab 100644
--- a/packages/ui-app/services/task.ts
+++ b/packages/ui-app/services/task.ts
@@ -28,6 +28,7 @@ export interface ITaskQuery {
 }
 
 export const taskGetByCond = (query: ITaskQuery, signal?: AbortSignal) => {
+  console.log('task get by cond', query)
   return httpGet(`/api/project/task/query`, {
     params: query,
     signal: signal