diff --git a/src/app/api/reports/actions.ts b/src/app/api/reports/actions.ts
index 3d49a16..ddcab13 100644
--- a/src/app/api/reports/actions.ts
+++ b/src/app/api/reports/actions.ts
@@ -1,7 +1,7 @@
 "use server";
 
 import { serverFetchBlob, serverFetchJson } from "@/app/utils/fetchUtil";
-import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest,LateStartReportRequest } from ".";
+import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest,LateStartReportRequest, ProjectPandLReportRequest } from ".";
 import { BASE_API_URL } from "@/config/api";
 
 export interface FileResponse {
@@ -63,3 +63,16 @@ export const fetchLateStartReport = async (data: LateStartReportRequest) => {
     return response
 };
 
+export const fetchProjectPandLReport = async (data: ProjectPandLReportRequest) => {
+    const reportBlob = await serverFetchBlob<FileResponse>(
+        `${BASE_API_URL}/reports/projectpandlreport`,
+        {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: { "Content-Type": "application/json" },
+        },
+    );
+
+    return reportBlob
+};
+
diff --git a/src/app/api/reports/index.ts b/src/app/api/reports/index.ts
index dd1afb8..e633084 100644
--- a/src/app/api/reports/index.ts
+++ b/src/app/api/reports/index.ts
@@ -4,6 +4,18 @@ export interface FinancialStatusReportFilter {
     project: string[];
 }
 
+//  - Project P&L Report
+export interface ProjectPandLReportFilter {
+    project: string[];
+    startMonth: string;
+    startMonthTo: string;
+}
+
+export interface ProjectPandLReportRequest {
+    projectId: number;
+    dateType: string;
+}
+
 //  - Project Cash Flow Report
 export interface ProjectCashFlowReportFilter {
     project: string[];
@@ -12,9 +24,11 @@ export interface ProjectCashFlowReportFilter {
 
 export interface ProjectCashFlowReportRequest {
     projectId: number;
-    dateType: string;
+    startMonth: string;
+    endMonth: string;
 }
 
+
 //  - Monthly Work Hours Report
 export interface MonthlyWorkHoursReportFilter {
     staff: string[];
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 686eb8d..cd28040 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -21,7 +21,7 @@ import "dayjs/locale/zh-hk";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { Box } from "@mui/material";
+import { Box, FormHelperText } from "@mui/material";
 import { DateCalendar } from "@mui/x-date-pickers";
 
 interface BaseCriterion<T extends string> {
@@ -43,6 +43,7 @@ interface SelectCriterion<T extends string> extends BaseCriterion<T> {
 
 interface DateRangeCriterion<T extends string> extends BaseCriterion<T> {
   type: "dateRange";
+  needMonth?: boolean;
 }
 
 interface MonthYearCriterion<T extends string> extends BaseCriterion<T> {
@@ -102,9 +103,14 @@ function SearchBox<T extends string>({
     };
   }, []);
 
-  const makeDateChangeHandler = useCallback((paramName: T) => {
+  const makeDateChangeHandler = useCallback((paramName: T, needMonth?: boolean) => {
     return (e: any) => {
-      setInputs((i) => ({ ...i, [paramName]: dayjs(e).format("YYYY-MM-DD") }));
+      if(needMonth){
+        setInputs((i) => ({ ...i, [paramName]: dayjs(e).format("YYYY-MM") }));
+      }else{
+        setInputs((i) => ({ ...i, [paramName]: dayjs(e).format("YYYY-MM-DD") }));
+      }
+      
     };
   }, []);
 
@@ -115,12 +121,19 @@ function SearchBox<T extends string>({
     };
   }, []);
 
-  const makeDateToChangeHandler = useCallback((paramName: T) => {
+  const makeDateToChangeHandler = useCallback((paramName: T, needMonth?: boolean) => {
     return (e: any) => {
+      if(needMonth){
+      setInputs((i) => ({
+        ...i,
+        [paramName + "To"]: dayjs(e).format("YYYY-MM"),
+      }));
+    }else{
       setInputs((i) => ({
         ...i,
         [paramName + "To"]: dayjs(e).format("YYYY-MM-DD"),
       }));
+    }
     };
   }, []);
 
@@ -175,6 +188,9 @@ function SearchBox<T extends string>({
                     adapterLocale="zh-hk"
                   >
                     <Box display="flex">
+                      <InputLabel>
+                        {c.label}
+                      </InputLabel>
                       <DateCalendar
                         views={["month", "year"]}
                         openTo="month"
@@ -198,12 +214,13 @@ function SearchBox<T extends string>({
                       <FormControl fullWidth>
                         <DatePicker
                           label={c.label}
-                          onChange={makeDateChangeHandler(c.paramName)}
+                          onChange={makeDateChangeHandler(c.paramName, c.needMonth)}
                           value={
                             inputs[c.paramName]
                               ? dayjs(inputs[c.paramName])
                               : null
                           }
+                          views={c.needMonth ? ["month", "year"] : ["day", "month", "year"]}
                         />
                       </FormControl>
                       <Box
@@ -217,12 +234,13 @@ function SearchBox<T extends string>({
                       <FormControl fullWidth>
                         <DatePicker
                           label={c.label2}
-                          onChange={makeDateToChangeHandler(c.paramName)}
+                          onChange={makeDateToChangeHandler(c.paramName, c.needMonth)}
                           value={
                             inputs[c.paramName.concat("To") as T]
                               ? dayjs(inputs[c.paramName.concat("To") as T])
                               : null
                           }
+                          views={c.needMonth ? ["month", "year"] : ["day", "month", "year"]}
                         />
                       </FormControl>
                     </Box>