diff --git a/src/modules/LoggedIn/Project/ProjectFilter.tsx b/src/modules/LoggedIn/Project/ProjectFilter.tsx
index 7b60667..e787c03 100644
--- a/src/modules/LoggedIn/Project/ProjectFilter.tsx
+++ b/src/modules/LoggedIn/Project/ProjectFilter.tsx
@@ -34,7 +34,17 @@ const projectSortOptions: ProjectSortOption[] = [
 
 const ProjectFilter = () => {
   const projectSyncContext = useProjectSyncContext();
-
+  const [searchQuery, setsearchQuery] = React.useState<string>(
+    projectSyncContext.searchQuery
+  );
+  React.useEffect(() => {
+    const timeOut = setTimeout(() => {
+      projectSyncContext.setsearchQuery(searchQuery);
+    }, 600);
+    return () => {
+      clearTimeout(timeOut);
+    };
+  }, [searchQuery]);
   const handleSortChange = React.useCallback(
     (sortName: string) => {
       const selectedProjectSortOption = projectSortOptions.find(
@@ -57,6 +67,13 @@ const ProjectFilter = () => {
     )?.name;
   }, [projectSyncContext.sortBy, projectSyncContext.sortDirection]);
 
+  const handleQueryChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setsearchQuery(event.target.value);
+    },
+    []
+  );
+
   return (
     <Form>
       <Row gutter={16}>
@@ -77,6 +94,8 @@ const ProjectFilter = () => {
         <Col>
           <Search
             placeholder="Search Project Name Card"
+            value={searchQuery}
+            onChange={handleQueryChange}
             style={{ width: 200 }}
           />
         </Col>
diff --git a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx
index 7db55fa..3881a76 100644
--- a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx
+++ b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx
@@ -25,6 +25,8 @@ type ProjectSyncValue = {
   setSortBy: (sortBy: string) => void;
   sortDirection: "asc" | "desc";
   setSortDirection: (sortDirection: "asc" | "desc") => void;
+  searchQuery: string;
+  setsearchQuery: (searchQuery: string) => void;
 };
 
 export const useProjectSync = (): ProjectSyncValue => {
@@ -32,9 +34,9 @@ export const useProjectSync = (): ProjectSyncValue => {
   const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">(
     "desc"
   );
+  const [searchQuery, setsearchQuery] = React.useState<string>("");
   const [page, setPage] = React.useState<number>(1);
   const [hasNextPage, setHasNextPage] = React.useState<boolean>(false);
-
   const {
     data,
     isValidating,
@@ -44,7 +46,7 @@ export const useProjectSync = (): ProjectSyncValue => {
     errorMutate,
     request,
   } = useRequest<Project[]>(
-    `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}`
+    `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}&name=${searchQuery}`
   );
 
   const projects = React.useMemo(() => {
@@ -171,6 +173,8 @@ export const useProjectSync = (): ProjectSyncValue => {
     setSortBy,
     sortDirection,
     setSortDirection,
+    searchQuery,
+    setsearchQuery,
   };
 };
 
@@ -187,6 +191,8 @@ const ProjectContext = React.createContext<ProjectSyncValue>({
   setSortBy: () => {},
   sortDirection: "asc",
   setSortDirection: () => {},
+  searchQuery: "",
+  setsearchQuery: () => {},
 });
 
 export const ProjectProvider = (props: { children: React.ReactNode }) => {