diff --git a/frontend/core-ui/src/modules/contacts/companies/components/CompaniesRecordTable.tsx b/frontend/core-ui/src/modules/contacts/companies/components/CompaniesRecordTable.tsx
index 06df034695..39bab09efd 100644
--- a/frontend/core-ui/src/modules/contacts/companies/components/CompaniesRecordTable.tsx
+++ b/frontend/core-ui/src/modules/contacts/companies/components/CompaniesRecordTable.tsx
@@ -10,7 +10,7 @@ export const CompaniesRecordTable = () => {
   return (
     <RecordTable.Provider
       columns={companyColumns}
-      data={companies || []}
+      data={companies || [{}]}
       stickyColumns={['more', 'checkbox', 'avatar', 'primaryName']}
       className="m-3"
     >
diff --git a/frontend/core-ui/src/modules/contacts/companies/graphql/queries/getCompanies.ts b/frontend/core-ui/src/modules/contacts/companies/graphql/queries/getCompanies.ts
index be631d51f0..4603c0da5d 100644
--- a/frontend/core-ui/src/modules/contacts/companies/graphql/queries/getCompanies.ts
+++ b/frontend/core-ui/src/modules/contacts/companies/graphql/queries/getCompanies.ts
@@ -64,6 +64,7 @@ export const GET_COMPANIES = gql`
         ownerId
         tagIds
         score
+        cursor
       }
       ${GQL_PAGE_INFO}
     }
diff --git a/frontend/core-ui/src/modules/contacts/customers/hooks/useCustomers.tsx b/frontend/core-ui/src/modules/contacts/customers/hooks/useCustomers.tsx
index 135c4ebfa2..8fb549811e 100644
--- a/frontend/core-ui/src/modules/contacts/customers/hooks/useCustomers.tsx
+++ b/frontend/core-ui/src/modules/contacts/customers/hooks/useCustomers.tsx
@@ -17,70 +17,83 @@ import { useIsCustomerLeadSessionKey } from './useCustomerLeadSessionKey';
 
 const CUSTOMERS_PER_PAGE = 30;
 
-
-export const useCustomersVariables = (variables?: QueryHookOptions<ICursorListResponse<ICustomer>>['variables']) => {
+export const useCustomersVariables = (
+  variables?: QueryHookOptions<ICursorListResponse<ICustomer>>['variables'],
+) => {
   const { isLead } = useIsCustomerLeadSessionKey();
   const [{ searchValue, tags, created, updated, lastSeen, brand, birthday }] =
-  useMultiQueryState<{
-    searchValue: string;
-    tags: string[];
-    created: string;
-    updated: string;
-    lastSeen: string;
-    brand: string;
-    birthday: string;
-  }>(['searchValue', 'tags', 'created', 'updated', 'lastSeen', 'brand', 'birthday']);
-const { sessionKey } = useIsCustomerLeadSessionKey();
+    useMultiQueryState<{
+      searchValue: string;
+      tags: string[];
+      created: string;
+      updated: string;
+      lastSeen: string;
+      brand: string;
+      birthday: string;
+    }>([
+      'searchValue',
+      'tags',
+      'created',
+      'updated',
+      'lastSeen',
+      'brand',
+      'birthday',
+    ]);
+  const { sessionKey } = useIsCustomerLeadSessionKey();
 
-const { cursor } = useRecordTableCursor({
-  sessionKey,
-});
+  const { cursor } = useRecordTableCursor({
+    sessionKey,
+  });
 
-const customersQueryVariables = {
-  limit: CUSTOMERS_PER_PAGE,
-  orderBy: {
-    createdAt: -1,
-  },
-  cursor,
-  searchValue: searchValue || undefined,
-  tagIds: tags || undefined,
-  brandIds: brand ? [brand] : undefined,
-  dateFilters: JSON.stringify({
-    createdAt: {
-      gte: parseDateRangeFromString(created)?.from,
-      lte: parseDateRangeFromString(created)?.to,
-    },
-    updatedAt: {
-      gte: parseDateRangeFromString(updated)?.from,
-      lte: parseDateRangeFromString(updated)?.to,
+  const customersQueryVariables = {
+    limit: CUSTOMERS_PER_PAGE,
+    orderBy: {
+      createdAt: -1,
     },
-    lastSeenAt: {
-      gte: parseDateRangeFromString(lastSeen)?.from,
-      lte: parseDateRangeFromString(lastSeen)?.to,
-    },
-    birthDate: {
-      gte: parseDateRangeFromString(birthday)?.from,
-      lte: parseDateRangeFromString(birthday)?.to,
-    }
-  }),
-  type: isLead ? 'lead' : 'customer',
-  ...variables,
+    cursor,
+    searchValue: searchValue || undefined,
+    tagIds: tags || undefined,
+    brandIds: brand ? [brand] : undefined,
+    dateFilters: JSON.stringify({
+      createdAt: {
+        gte: parseDateRangeFromString(created)?.from,
+        lte: parseDateRangeFromString(created)?.to,
+      },
+      updatedAt: {
+        gte: parseDateRangeFromString(updated)?.from,
+        lte: parseDateRangeFromString(updated)?.to,
+      },
+      lastSeenAt: {
+        gte: parseDateRangeFromString(lastSeen)?.from,
+        lte: parseDateRangeFromString(lastSeen)?.to,
+      },
+      birthDate: {
+        gte: parseDateRangeFromString(birthday)?.from,
+        lte: parseDateRangeFromString(birthday)?.to,
+      },
+    }),
+    type: isLead ? 'lead' : 'customer',
+    ...variables,
+  };
+  return { customersQueryVariables };
 };
-return {customersQueryVariables};
-}
-
 
 export const useCustomers = (
   options?: QueryHookOptions<ICursorListResponse<ICustomer>>,
 ) => {
-
+  const { sessionKey } = useIsCustomerLeadSessionKey();
+  const { cursor } = useRecordTableCursor({
+    sessionKey,
+  });
   const setCustomerTotalCount = useSetAtom(customerTotalCountAtom);
   // Customer Filter implementation
   const { data, loading, fetchMore } = useQuery<ICursorListResponse<ICustomer>>(
     GET_CUSTOMERS,
     {
       ...options,
-      variables: useCustomersVariables(options?.variables)?.customersQueryVariables,
+      variables: useCustomersVariables(options?.variables)
+        ?.customersQueryVariables,
+      skip: cursor === undefined,
     },
   );
 
diff --git a/frontend/core-ui/src/modules/products/components/ProductColumns.tsx b/frontend/core-ui/src/modules/products/components/ProductColumns.tsx
index ea9b240142..343f10d97e 100644
--- a/frontend/core-ui/src/modules/products/components/ProductColumns.tsx
+++ b/frontend/core-ui/src/modules/products/components/ProductColumns.tsx
@@ -1,3 +1,6 @@
+import { useProductsEdit } from '@/products/hooks/useProductsEdit';
+import { renderingProductDetailAtom } from '@/products/states/productDetailStates';
+import { ProductHotKeyScope } from '@/products/types/ProductsHotKeyScope';
 import {
   IconCategory,
   IconCurrencyDollar,
@@ -12,21 +15,64 @@ import {
   RecordTableCellDisplay,
   CurrencyFormatedDisplay,
   CurrencyCode,
+  useQueryState,
+  RecordTablePopover,
+  RecordTableCellTrigger,
+  Badge,
+  RecordTableCellContent,
+  Input,
 } from 'erxes-ui';
-import { IProduct } from 'ui-modules';
-import { productMoreColumn } from './ProductMoreColumn';
+import { useSetAtom } from 'jotai';
+import { useState } from 'react';
+import { IProduct, SelectCategory } from 'ui-modules';
 export const productColumns: ColumnDef<IProduct>[] = [
-  productMoreColumn,
   RecordTable.checkboxColumn as ColumnDef<IProduct>,
   {
     id: 'name',
     accessorKey: 'name',
     header: () => <RecordTable.InlineHead icon={IconLabel} label="Name" />,
     cell: ({ cell }) => {
+      const name = cell.getValue() as string;
+      const [value, setValue] = useState(name);
+      const [, setProductId] = useQueryState('productId');
+      const setRenderingProductDetail = useSetAtom(renderingProductDetailAtom);
+      const { productsEdit } = useProductsEdit();
       return (
-        <RecordTableCellDisplay>
-          <TextOverflowTooltip value={cell.getValue() as string} />
-        </RecordTableCellDisplay>
+        <RecordTablePopover
+          scope={`${ProductHotKeyScope.ProductsPage}-name-${cell.row.original._id}`}
+          onOpenChange={(open) => {
+            if (!open) {
+              productsEdit({
+                variables: {
+                  _id: cell.row.original._id,
+                  name: value,
+                },
+              });
+            }
+          }}
+          closeOnEnter
+        >
+          <RecordTableCellTrigger>
+            <Badge
+              variant="secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                setRenderingProductDetail(true);
+                setProductId(cell.row.original._id);
+              }}
+            >
+              {name}
+            </Badge>
+          </RecordTableCellTrigger>
+          <RecordTableCellContent className="min-w-72">
+            <Input
+              value={value || ''}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+            />
+          </RecordTableCellContent>
+        </RecordTablePopover>
       );
     },
   },
@@ -53,7 +99,7 @@ export const productColumns: ColumnDef<IProduct>[] = [
         <RecordTableCellDisplay>
           <CurrencyFormatedDisplay
             currencyValue={{
-              amountMicros: (cell.getValue() as number),
+              amountMicros: cell.getValue() as number,
               currencyCode: CurrencyCode.MNT,
             }}
           />
@@ -80,12 +126,23 @@ export const productColumns: ColumnDef<IProduct>[] = [
       <RecordTable.InlineHead icon={IconCategory} label="Category" />
     ),
     cell: ({ cell }) => {
+      const { productsEdit } = useProductsEdit();
       return (
-        <RecordTableCellDisplay>
-          <TextOverflowTooltip
-            value={cell.row.original?.category?.name || ''}
-          />
-        </RecordTableCellDisplay>
+        <SelectCategory.InlineCell
+          mode="single"
+          value={cell.getValue() as string}
+          onValueChange={(value) => {
+            productsEdit({
+              variables: {
+                _id: cell.row.original._id,
+                categoryId: value,
+              },
+            });
+          }}
+          categories={
+            cell.row.original.category ? [cell.row.original.category] : []
+          }
+        />
       );
     },
   },
diff --git a/frontend/core-ui/src/modules/products/components/ProductMoreColumn.tsx b/frontend/core-ui/src/modules/products/components/ProductMoreColumn.tsx
deleted file mode 100644
index 549f8ccb17..0000000000
--- a/frontend/core-ui/src/modules/products/components/ProductMoreColumn.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Cell } from '@tanstack/react-table';
-import { renderingProductDetailAtom } from '../states/productDetailStates';
-import { IProduct } from '@/products/types/productTypes';
-import { useSetAtom } from 'jotai';
-import { useSearchParams } from 'react-router-dom';
-import { RecordTable } from 'erxes-ui';
-
-export const ProductMoreColumnCell = ({
-  cell,
-}: {
-  cell: Cell<IProduct, unknown>;
-}) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const setRenderingProductDetail = useSetAtom(renderingProductDetailAtom);
-  const { _id } = cell.row.original;
-
-  const setOpen = (productId: string) => {
-    const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.set('product_id', productId);
-    setSearchParams(newSearchParams);
-  };
-
-  return (
-    <RecordTable.MoreButton
-      className="w-full h-full"
-      onClick={() => {
-        setOpen(_id);
-        setRenderingProductDetail(false);
-      }}
-    />
-  );
-};
-
-export const productMoreColumn = {
-  id: 'more',
-  cell: ProductMoreColumnCell,
-  size: 33,
-};
diff --git a/frontend/core-ui/src/modules/products/components/ProductsFilter.tsx b/frontend/core-ui/src/modules/products/components/ProductsFilter.tsx
index 389e5a4d9b..9abc429f67 100644
--- a/frontend/core-ui/src/modules/products/components/ProductsFilter.tsx
+++ b/frontend/core-ui/src/modules/products/components/ProductsFilter.tsx
@@ -1,38 +1,84 @@
 import { ProductHotKeyScope } from '@/products/types/ProductsHotKeyScope';
 import { IconSearch } from '@tabler/icons-react';
-import { Combobox, Command, Filter } from 'erxes-ui';
-import { TagsFilter } from 'ui-modules';
+import { Combobox, Command, Filter, useMultiQueryState } from 'erxes-ui';
+import { TagsFilter, SelectBrand, SelectCategory } from 'ui-modules';
 import { PRODUCTS_CURSOR_SESSION_KEY } from '../constants/productsCursorSessionKey';
 
 export const ProductsFilter = () => {
+  const [queries] = useMultiQueryState<{
+    searchValue: string;
+    created: string;
+    updated: string;
+    lastSeen: string;
+    brandId: string;
+    categoryId: string;
+  }>(['searchValue', 'created', 'updated', 'lastSeen', 'brandId', 'categoryId']);
+  const { searchValue } = queries || {};
+
   return (
     <Filter id="products-filter" sessionKey={PRODUCTS_CURSOR_SESSION_KEY}>
       <Filter.Bar>
+        {searchValue && (
+          <Filter.BarItem>
+            <Filter.BarName>
+              <IconSearch />
+              Search
+            </Filter.BarName>
+            <Filter.BarButton filterKey="searchValue" inDialog>
+              {searchValue}
+            </Filter.BarButton>
+            <Filter.BarClose filterKey="searchValue" />
+          </Filter.BarItem>
+        )}
+        <TagsFilter.Bar tagType="core:product" />
+        <SelectBrand.FilterBar />
+        <SelectCategory.FilterBar />
         <ProductsFilterPopover />
       </Filter.Bar>
     </Filter>
   );
 };
 
-export const ProductsFilterPopover = () => {
+const ProductsFilterPopover = () => {
+  const [queries] = useMultiQueryState<{
+    searchValue: string;
+    created: string;
+    updated: string;
+    lastSeen: string;
+    brandId: string;
+    categoryId: string;
+  }>(['searchValue', 'created', 'updated', 'lastSeen', 'brandId', 'categoryId']);
+
+  const hasFilters = Object.values(queries || {}).some(
+    (value) => value !== null,
+  );
+
   return (
     <>
       <Filter.Popover scope={ProductHotKeyScope.ProductsPage}>
-        <Filter.Trigger />
+        <Filter.Trigger isFiltered={hasFilters} />
         <Combobox.Content>
           <Filter.View>
             <Command>
-              <Filter.CommandInput placeholder="Filter" variant="secondary" />
-
+              <Filter.CommandInput
+                placeholder="Filter"
+                variant="secondary"
+                className="bg-background"
+              />
               <Command.List className="p-1">
                 <Filter.Item value="searchValue" inDialog>
                   <IconSearch />
                   Search
                 </Filter.Item>
                 <TagsFilter />
+                <SelectBrand.FilterItem />
+                <SelectCategory.FilterItem />
               </Command.List>
             </Command>
           </Filter.View>
+          <TagsFilter.View tagType="core:product" />
+          <SelectBrand.FilterView />
+          <SelectCategory.FilterView />
         </Combobox.Content>
       </Filter.Popover>
       <Filter.Dialog>
diff --git a/frontend/core-ui/src/modules/products/detail/components/ProductBasicField.tsx b/frontend/core-ui/src/modules/products/detail/components/ProductBasicField.tsx
index f38d81cf92..78a3c0318d 100644
--- a/frontend/core-ui/src/modules/products/detail/components/ProductBasicField.tsx
+++ b/frontend/core-ui/src/modules/products/detail/components/ProductBasicField.tsx
@@ -109,7 +109,7 @@ export const ProductBasicFields: React.FC<ProductBasicFieldsProps> = ({
               <SelectCategory
                 selected={field.value}
                 onSelect={field.onChange}
-                className="w-full border border-gray-300"
+                className="w-full"
                 size="lg"
               />
             </Form.Control>
@@ -253,7 +253,7 @@ export const ProductBasicFields: React.FC<ProductBasicFieldsProps> = ({
         <Label className={formLabelClassName}>PDF</Label>
         <Button
           variant="outline"
-          className="w-full justify-between h-8"
+          className="w-full justify-between h-8 shadow-xs"
           type="button"
         >
           Upload a PDF
diff --git a/frontend/core-ui/src/modules/products/detail/components/ProductDetailSheet.tsx b/frontend/core-ui/src/modules/products/detail/components/ProductDetailSheet.tsx
index 7725ab2473..a9ac8018ae 100644
--- a/frontend/core-ui/src/modules/products/detail/components/ProductDetailSheet.tsx
+++ b/frontend/core-ui/src/modules/products/detail/components/ProductDetailSheet.tsx
@@ -3,8 +3,8 @@ import { Button, cn, Sheet, useSetHotkeyScope } from 'erxes-ui';
 import { renderingProductDetailAtom } from '../../states/productDetailStates';
 import { useEffect } from 'react';
 import { useAtom } from 'jotai';
-import { useSearchParams } from 'react-router-dom';
 import { ProductHotKeyScope } from '@/products/types/ProductsHotKeyScope';
+import { useQueryState } from 'erxes-ui';
 
 export const ProductDetailSheet = ({
   children,
@@ -13,9 +13,7 @@ export const ProductDetailSheet = ({
 }) => {
   const [activeTab] = useAtom(renderingProductDetailAtom);
   const setHotkeyScope = useSetHotkeyScope();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const productId = searchParams.get('product_id');
+  const [productId, setProductId] = useQueryState('productId');
 
   useEffect(() => {
     if (productId) {
@@ -24,13 +22,11 @@ export const ProductDetailSheet = ({
   }, [productId, setHotkeyScope]);
 
   const setOpen = (newProductId: string | null) => {
-    const newSearchParams = new URLSearchParams(searchParams);
     if (newProductId) {
-      newSearchParams.set('product_id', newProductId);
+      setProductId(newProductId);
     } else {
-      newSearchParams.delete('product_id');
+      setProductId(null);
     }
-    setSearchParams(newSearchParams);
 
     if (!newProductId) {
       setHotkeyScope(ProductHotKeyScope.ProductsPage);
diff --git a/frontend/core-ui/src/modules/products/detail/components/ProductGeneral.tsx b/frontend/core-ui/src/modules/products/detail/components/ProductGeneral.tsx
index 990b8cf583..0bfb34ab35 100644
--- a/frontend/core-ui/src/modules/products/detail/components/ProductGeneral.tsx
+++ b/frontend/core-ui/src/modules/products/detail/components/ProductGeneral.tsx
@@ -7,7 +7,6 @@ import { useUom } from '@/products/hooks/useUom';
 import { ProductHotKeyScope } from '@/products/types/ProductsHotKeyScope';
 import { FileUploadSection } from './FileUploadSection';
 import { ProductEditorField } from './ProductEditor';
-import { Spinner } from 'erxes-ui';
 import { ProductBasicFields } from './ProductBasicField';
 import { ProductFormValues } from '@/products/constants/ProductFormSchema';
 import { useProductFormData } from '../hooks/useProductFormData';
@@ -19,18 +18,18 @@ interface ProductDetailFormProps {
 export const ProductDetailForm: React.FC<ProductDetailFormProps> = ({
   form,
 }) => {
-  const { productDetail, loading, error } = useProductDetail();
-  const { uoms } = useUom({});
+  const { productDetail, error } = useProductDetail();
+  const { uoms } = useUom();
 
   useProductFormData(productDetail, form);
 
-  if (loading) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full space-y-4">
-        <Spinner />
-      </div>
-    );
-  }
+  // if (loading) {
+  //   return (
+  //     <div className="flex flex-col items-center justify-center h-full space-y-4">
+  //       <Spinner />
+  //     </div>
+  //   );
+  // }
 
   if (error) {
     return (
diff --git a/frontend/core-ui/src/modules/products/detail/hooks/useProductDetail.tsx b/frontend/core-ui/src/modules/products/detail/hooks/useProductDetail.tsx
index 06cc4b434b..7ae302fbdf 100644
--- a/frontend/core-ui/src/modules/products/detail/hooks/useProductDetail.tsx
+++ b/frontend/core-ui/src/modules/products/detail/hooks/useProductDetail.tsx
@@ -1,12 +1,11 @@
 import { OperationVariables, useQuery } from '@apollo/client';
-import { useSearchParams } from 'react-router-dom';
 import { productCategoryDetail } from '../graphql/queries/productDetailQueries';
 import { useSetAtom } from 'jotai';
 import { renderingProductDetailAtom } from '../../states/productDetailStates';
+import { useQueryState } from 'erxes-ui';
 
 export const useProductDetail = (operationVariables?: OperationVariables) => {
-  const [searchParams] = useSearchParams();
-  const _id = searchParams.get('product_id');
+  const [_id] = useQueryState('productId');
   const setRendering = useSetAtom(renderingProductDetailAtom);
   const { data, loading, error, refetch } = useQuery(productCategoryDetail, {
     variables: {
@@ -23,5 +22,10 @@ export const useProductDetail = (operationVariables?: OperationVariables) => {
       operationVariables?.onError?.(error);
     },
   });
-  return { productDetail: data?.productDetail ?? null, loading, error, refetch };
+  return {
+    productDetail: data?.productDetail ?? null,
+    loading,
+    error,
+    refetch,
+  };
 };
diff --git a/frontend/core-ui/src/modules/products/detail/types/detailTypes.ts b/frontend/core-ui/src/modules/products/detail/types/detailTypes.ts
index 59f677c6a2..6fb36f9752 100644
--- a/frontend/core-ui/src/modules/products/detail/types/detailTypes.ts
+++ b/frontend/core-ui/src/modules/products/detail/types/detailTypes.ts
@@ -16,8 +16,8 @@ export interface UomType {
 }
 
 export interface ProductDetail {
-  _id?: string;
-  name?: string;
+  _id: string;
+  name: string;
   barcodeDescription?: string;
   description?: string;
   categoryId?: string;
@@ -34,7 +34,7 @@ export interface ProductDetail {
 }
 
 export interface ProductFormValues {
-  _id?: string;
+  _id: string;
   name?: string;
   barcodeDescription?: string;
   description?: string;
diff --git a/frontend/core-ui/src/modules/products/graphql/ProductsQueries.tsx b/frontend/core-ui/src/modules/products/graphql/ProductsQueries.tsx
index 7e358b336a..9553c28980 100644
--- a/frontend/core-ui/src/modules/products/graphql/ProductsQueries.tsx
+++ b/frontend/core-ui/src/modules/products/graphql/ProductsQueries.tsx
@@ -12,6 +12,7 @@ const productsMain = gql`
     $searchValue: String
     $vendorId: String
     $brandIds: [String]
+    $orderBy: JSON
     $tagIds: [String]
     $segment: String
     $segmentData: String
@@ -25,6 +26,7 @@ const productsMain = gql`
       searchValue: $searchValue
       vendorId: $vendorId
       brandIds: $brandIds
+      orderBy: $orderBy
       tagIds: $tagIds
       segment: $segment
       segmentData: $segmentData
@@ -46,6 +48,7 @@ const productsMain = gql`
         category {
           _id
           name
+          code
         }
         name
         shortName
@@ -63,7 +66,7 @@ const productsMain = gql`
 `;
 
 const productCategories = gql`
-  query ProductCategories {
+  query ProductCategoryDetail {
     productCategories {
       _id
       parentId
diff --git a/frontend/core-ui/src/modules/products/hooks/useProducts.tsx b/frontend/core-ui/src/modules/products/hooks/useProducts.tsx
index 3b922df57b..e3da308dd9 100644
--- a/frontend/core-ui/src/modules/products/hooks/useProducts.tsx
+++ b/frontend/core-ui/src/modules/products/hooks/useProducts.tsx
@@ -1,10 +1,11 @@
 import { QueryHookOptions, useQuery } from '@apollo/client';
-
 import { productsQueries } from '@/products/graphql';
 import {
   EnumCursorDirection,
   IRecordTableCursorPageInfo,
   mergeCursorData,
+  parseDateRangeFromString,
+  useMultiQueryState,
   useRecordTableCursor,
   validateFetchMore,
 } from 'erxes-ui';
@@ -16,6 +17,42 @@ export const useProducts = (options?: QueryHookOptions) => {
   const { cursor } = useRecordTableCursor({
     sessionKey: PRODUCTS_CURSOR_SESSION_KEY,
   });
+  const [{ searchValue, tags, created, updated, lastSeen, brand }] =
+    useMultiQueryState<{
+      searchValue: string;
+      tags: string[];
+      created: string;
+      updated: string;
+      lastSeen: string;
+      brand: string;
+    }>(['searchValue', 'tags', 'created', 'updated', 'lastSeen', 'brand']);
+
+  const productsQueryVariables = {
+    limit: PRODUCTS_PER_PAGE,
+    orderBy: {
+      createdAt: -1,
+    },
+    cursor,
+    searchValue,
+    tagIds: tags?.length ? tags : undefined,
+    brandIds: brand || undefined,
+    dateFilters: JSON.stringify({
+      createdAt: {
+        gte: parseDateRangeFromString(created)?.from,
+        lte: parseDateRangeFromString(created)?.to,
+      },
+      updatedAt: {
+        gte: parseDateRangeFromString(updated)?.from,
+        lte: parseDateRangeFromString(updated)?.to,
+      },
+      lastSeenAt: {
+        gte: parseDateRangeFromString(lastSeen)?.from,
+        lte: parseDateRangeFromString(lastSeen)?.to,
+      },
+    }),
+    ...options?.variables,
+  };
+
   const { data, loading, fetchMore } = useQuery<{
     productsMain: {
       list: IProduct[];
@@ -23,12 +60,9 @@ export const useProducts = (options?: QueryHookOptions) => {
       pageInfo: IRecordTableCursorPageInfo;
     };
   }>(productsQueries.productsMain, {
+    variables: productsQueryVariables,
+    skip: cursor === undefined,
     ...options,
-    variables: {
-      limit: PRODUCTS_PER_PAGE,
-      cursor,
-      ...options?.variables,
-    },
   });
 
   const { list: productsMain, totalCount, pageInfo } = data?.productsMain || {};
@@ -75,5 +109,6 @@ export const useProducts = (options?: QueryHookOptions) => {
     totalCount,
     handleFetchMore,
     pageInfo,
+    productsQueryVariables,
   };
 };
diff --git a/frontend/core-ui/src/modules/products/hooks/useProductsEdit.tsx b/frontend/core-ui/src/modules/products/hooks/useProductsEdit.tsx
index 985c7408f1..b680b6f9c5 100644
--- a/frontend/core-ui/src/modules/products/hooks/useProductsEdit.tsx
+++ b/frontend/core-ui/src/modules/products/hooks/useProductsEdit.tsx
@@ -1,8 +1,9 @@
 import { MutationHookOptions, useMutation } from '@apollo/client';
-
+import { useToast } from 'erxes-ui';
 import { productsMutations } from '@/products/graphql';
 
 export const useProductsEdit = () => {
+  const { toast } = useToast();
   const [productsEdit, { loading }] = useMutation(
     productsMutations.productsEdit,
   );
@@ -11,6 +12,13 @@ export const useProductsEdit = () => {
     productsEdit({
       ...options,
       variables,
+      onError: () => {
+        toast({
+          title: 'Error',
+          description: 'Product update failed',
+          variant: 'destructive',
+        });
+      },
       update: (cache, { data: { productsEdit } }) => {
         cache.modify({
           id: cache.identify(productsEdit),
diff --git a/frontend/core-ui/src/modules/products/hooks/useUom.tsx b/frontend/core-ui/src/modules/products/hooks/useUom.tsx
index feb124fcae..6f4c9b68ea 100644
--- a/frontend/core-ui/src/modules/products/hooks/useUom.tsx
+++ b/frontend/core-ui/src/modules/products/hooks/useUom.tsx
@@ -3,7 +3,7 @@ import { QueryHookOptions } from '@apollo/client';
 
 import { uomQuery } from '@/products/graphql/UomQuery';
 import { IUom } from 'ui-modules';
-export const useUom = (options: QueryHookOptions) => {
+export const useUom = (options?: QueryHookOptions) => {
   const { data, loading } = useQuery<{ uoms: IUom[] }>(uomQuery, options);
   return {
     uoms: data?.uoms || [],
diff --git a/frontend/core-ui/src/modules/products/types/ProductsHotKeyScope.ts b/frontend/core-ui/src/modules/products/types/ProductsHotKeyScope.ts
index 7a9c27781f..4249c3e1b6 100644
--- a/frontend/core-ui/src/modules/products/types/ProductsHotKeyScope.ts
+++ b/frontend/core-ui/src/modules/products/types/ProductsHotKeyScope.ts
@@ -4,4 +4,5 @@ export enum ProductHotKeyScope {
   ProductEditSheet = 'product-edit-sheet',
   ProductAddSheetDescriptionField = 'product-add-sheet-description-field',
   ProductAddSheetBarcodeDescriptionField = 'product-add-sheet-barcode-description-field',
+  CategoriesPage = 'categories-page',
 }
diff --git a/frontend/core-ui/src/modules/types/paths/ProductsPath.ts b/frontend/core-ui/src/modules/types/paths/ProductsPath.ts
index 3542e9ccc4..7d5bfcf9ad 100644
--- a/frontend/core-ui/src/modules/types/paths/ProductsPath.ts
+++ b/frontend/core-ui/src/modules/types/paths/ProductsPath.ts
@@ -1,4 +1,4 @@
 export enum ProductsPath {
-  Index = '/',
+  Index = '',
   Categories = '/categories',
 }
diff --git a/frontend/libs/erxes-ui/src/modules/record-table/hooks/useRecordTableCursor.tsx b/frontend/libs/erxes-ui/src/modules/record-table/hooks/useRecordTableCursor.tsx
index bcb777c4fc..81eb71da52 100644
--- a/frontend/libs/erxes-ui/src/modules/record-table/hooks/useRecordTableCursor.tsx
+++ b/frontend/libs/erxes-ui/src/modules/record-table/hooks/useRecordTableCursor.tsx
@@ -9,10 +9,13 @@ export const useRecordTableCursor = ({
   const [cursor, setCursor] = useAtom(
     recordTableCursorAtomFamily(sessionKey || ''),
   );
-
   useEffect(() => {
     if (!sessionKey) return;
-    setCursor(sessionStorage.getItem(sessionKey));
+    setCursor(
+      sessionStorage.getItem(sessionKey) !== ''
+        ? sessionStorage.getItem(sessionKey)
+        : null,
+    );
   }, [sessionKey, setCursor]);
 
   return {
diff --git a/frontend/libs/erxes-ui/src/modules/record-table/states/RecordTableCursorState.ts b/frontend/libs/erxes-ui/src/modules/record-table/states/RecordTableCursorState.ts
index 0d0dbc36e1..07a50c60cd 100644
--- a/frontend/libs/erxes-ui/src/modules/record-table/states/RecordTableCursorState.ts
+++ b/frontend/libs/erxes-ui/src/modules/record-table/states/RecordTableCursorState.ts
@@ -2,5 +2,5 @@ import { atom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
 
 export const recordTableCursorAtomFamily = atomFamily((key: string) =>
-  atom<string | null>(null),
+  atom<string | null | undefined>(undefined),
 );
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/components/CategoriesInline.tsx b/frontend/libs/ui-modules/src/modules/products/categories/components/CategoriesInline.tsx
new file mode 100644
index 0000000000..66f7720a62
--- /dev/null
+++ b/frontend/libs/ui-modules/src/modules/products/categories/components/CategoriesInline.tsx
@@ -0,0 +1,149 @@
+import { IProductCategory, CategoriesInlineProps } from '../types/category';
+import {
+  CategoriesInlineContext,
+  useCategoriesInlineContext,
+} from '../contexts/CategoriesInlineContext';
+import {
+  isUndefinedOrNull,
+  Skeleton,
+  TextOverflowTooltip,
+  Tooltip,
+  Avatar,
+} from 'erxes-ui';
+import { useCategoryInline } from '../hooks/useCategoryInline';
+import { useEffect, useState } from 'react';
+
+const CategoryBadge = ({ category }: { category: IProductCategory }) => {
+  const { attachment, avatar, code, name } = category;
+  const firstLetter = name.charAt(0);
+  const imageUrl = attachment?.url || avatar?.url;
+
+  return (
+    <div className="flex items-center gap-2 flex-auto overflow-hidden justify-start">
+      <Avatar>
+        <Avatar.Image src={imageUrl} />
+        <Avatar.Fallback>{firstLetter}</Avatar.Fallback>
+      </Avatar>
+      <div className="text-muted-foreground">{code}</div>
+      <TextOverflowTooltip value={name} className="flex-auto" />
+    </div>
+  );
+};
+
+const CategoriesInlineRoot = (props: CategoriesInlineProps) => {
+  return (
+    <CategoriesInlineProvider {...props}>
+      <CategoriesInlineTitle />
+    </CategoriesInlineProvider>
+  );
+};
+
+const CategoriesInlineProvider = ({
+  children,
+  categoryIds,
+  categories,
+  placeholder,
+  updateCategories,
+}: CategoriesInlineProps & {
+  children?: React.ReactNode;
+}) => {
+  const [_categories, _setCategories] = useState<IProductCategory[]>(
+    categories || [],
+  );
+
+  return (
+    <CategoriesInlineContext.Provider
+      value={{
+        categories: categories || _categories,
+        loading: false,
+        categoryIds: categoryIds || [],
+        placeholder: isUndefinedOrNull(placeholder)
+          ? 'Select categories'
+          : placeholder,
+        updateCategories: updateCategories || _setCategories,
+      }}
+    >
+      {children}
+      {categoryIds?.map((categoryId) => (
+        <CategoriesInlineEffectComponent
+          key={categoryId}
+          categoryId={categoryId}
+        />
+      ))}
+    </CategoriesInlineContext.Provider>
+  );
+};
+
+const CategoriesInlineEffectComponent = ({
+  categoryId,
+}: {
+  categoryId: string;
+}) => {
+  const { categories, updateCategories } = useCategoriesInlineContext();
+  const { category } = useCategoryInline({
+    variables: {
+      _id: categoryId,
+    },
+    skip: !categoryId || categories.some((c) => c._id === categoryId),
+  });
+
+  useEffect(() => {
+    const newCategories = [...categories].filter((c) => c._id !== categoryId);
+
+    if (category) {
+      const transformedCategory: IProductCategory = {
+        ...category,
+        attachment: category.attachment
+          ? {
+              url: category.attachment.url,
+              name: '',
+            }
+          : undefined,
+        avatar: undefined,
+      };
+      updateCategories?.([...newCategories, transformedCategory]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [category]);
+
+  return null;
+};
+
+const CategoriesInlineTitle = () => {
+  const { categories, loading, placeholder } = useCategoriesInlineContext();
+  if (loading) {
+    return <Skeleton className="w-full flex-1 h-4" />;
+  }
+
+  if (categories.length === 0) {
+    return <span className="text-accent-foreground/70">{placeholder}</span>;
+  }
+
+  if (categories.length === 1) {
+    return <CategoryBadge category={categories[0]} />;
+  }
+
+  if (categories.length < 3) {
+    return (
+      <TextOverflowTooltip value={categories.map((c) => c.name).join(', ')} />
+    );
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <span>{`${categories.length} categories`}</span>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          {categories.map((category) => category.name).join(', ')}
+        </Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};
+
+export const CategoriesInline = Object.assign(CategoriesInlineRoot, {
+  Provider: CategoriesInlineProvider,
+  Title: CategoriesInlineTitle,
+});
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/components/selectCategory.tsx b/frontend/libs/ui-modules/src/modules/products/categories/components/selectCategory.tsx
index 10d7224523..f9786979c0 100644
--- a/frontend/libs/ui-modules/src/modules/products/categories/components/selectCategory.tsx
+++ b/frontend/libs/ui-modules/src/modules/products/categories/components/selectCategory.tsx
@@ -1,109 +1,28 @@
-import React, { useState } from 'react';
-
 import {
-  Avatar,
+  cn,
   Combobox,
   Command,
-  Skeleton,
+  Filter,
+  Form,
+  Popover,
+  RecordTableCellContent,
+  RecordTableCellTrigger,
+  RecordTablePopover,
+  useFilterContext,
+  useQueryState,
+  Avatar,
   TextOverflowTooltip,
-  SelectTree,
 } from 'erxes-ui';
+import { useCategoriesWithSearch } from '../hooks/useCategoriesWithSearch';
 import { IProductCategory } from '../types/category';
-import { useProductCategories } from '../hooks/useCategories';
-
-export const SelectCategory = React.forwardRef<
-  React.ElementRef<typeof Combobox.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Combobox.Trigger> & {
-    selected?: string;
-    onSelect: (categoryId: string) => void;
-    open?: boolean;
-    setOpen?: (open: boolean) => void;
-    id?: string;
-  }
->(({ onSelect, selected, id, ...props }, ref) => {
-  const [selectedCategory, setSelectedCategory] = useState<IProductCategory>();
-  const { productCategories, error, loading } = useProductCategories({
-    onCompleted: ({
-      productCategories,
-    }: {
-      productCategories: IProductCategory[];
-    }) => {
-      setSelectedCategory(
-        productCategories?.find(
-          (category: IProductCategory) => category._id === selected,
-        ),
-      );
-    },
-  });
-
-  const handleSelect = (categoryId: string) => {
-    const category = productCategories?.find(
-      (category: IProductCategory) => category._id === categoryId,
-    );
-    setSelectedCategory(category);
-    onSelect(categoryId);
-  };
-
-  return (
-    <SelectTree id={id || 'select-category'}>
-      <SelectCategoryTrigger
-        ref={ref}
-        {...props}
-        selectedCategory={selectedCategory}
-        loading={loading}
-      />
-      <Combobox.Content>
-        <Command className="outline-none">
-          <Command.Input />
-          <Command.List>
-            <Combobox.Empty error={error} loading={loading} />
-            {productCategories?.map((category: IProductCategory) => (
-              <SelectCategoryItem
-                key={category._id}
-                category={category}
-                selected={selectedCategory?._id === category._id}
-                onSelect={handleSelect}
-                hasChildren={
-                  productCategories.find(
-                    (c: IProductCategory) => c.parentId === category._id,
-                  ) !== undefined
-                }
-              />
-            ))}
-          </Command.List>
-        </Command>
-      </Combobox.Content>
-    </SelectTree>
-  );
-});
-
-export const SelectCategoryItem = ({
-  category,
-  selected,
-  onSelect,
-  hasChildren,
-}: {
-  category: IProductCategory;
-  selected: boolean;
-  onSelect: (categoryId: string) => void;
-  hasChildren: boolean;
-}) => {
-  const { _id, code, name, order } = category;
-
-  return (
-    <SelectTree.Item
-      _id={_id}
-      order={order}
-      hasChildren={hasChildren}
-      name={name}
-      value={code + name}
-      onSelect={() => onSelect(_id)}
-      selected={selected}
-    >
-      <SelectCategoryBadge category={category} selected={selected} />
-    </SelectTree.Item>
-  );
-};
+import { useDebounce } from 'use-debounce';
+import React, { useState } from 'react';
+import {
+  SelectProductCategoryContext,
+  useSelectProductCategoryContext,
+} from '../../contexts/SelectProductCategoryContext';
+import { CategoriesInline } from './CategoriesInline';
+import { IconCategory } from '@tabler/icons-react';
 
 export const SelectCategoryBadge = ({
   category,
@@ -113,13 +32,15 @@ export const SelectCategoryBadge = ({
   selected?: boolean;
 }) => {
   if (!category) return null;
-  const { avatar, code, name, productCount } = category;
+  const { attachment, avatar, code, name, productCount } = category;
   const firstLetter = name.charAt(0);
+  const imageUrl = attachment?.url || avatar?.url;
+
   return (
     <>
       <div className="flex items-center gap-2 flex-auto overflow-hidden justify-start">
         <Avatar>
-          <Avatar.Image src={avatar?.url} />
+          <Avatar.Image src={imageUrl} />
           <Avatar.Fallback>{firstLetter}</Avatar.Fallback>
         </Avatar>
         <div className="text-muted-foreground">{code}</div>
@@ -136,24 +57,350 @@ export const SelectCategoryBadge = ({
   );
 };
 
-export const SelectCategoryTrigger = React.forwardRef<
-  React.ElementRef<typeof Combobox.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Combobox.Trigger> & {
-    selectedCategory: IProductCategory | undefined;
-    loading: boolean;
+export const SelectCategoryProvider = ({
+  children,
+  mode = 'single',
+  value,
+  onValueChange,
+  categories,
+}: {
+  children: React.ReactNode;
+  mode?: 'single' | 'multiple';
+  value?: string[] | string;
+  onValueChange: (value: string[] | string) => void;
+  categories?: IProductCategory[];
+}) => {
+  const [_categories, setCategories] = useState<IProductCategory[]>(
+    categories || [],
+  );
+  const isSingleMode = mode === 'single';
+
+  const onSelect = (category: IProductCategory) => {
+    if (!category) return;
+    if (isSingleMode) {
+      setCategories([category]);
+      return onValueChange?.(category._id);
+    }
+
+    const arrayValue = Array.isArray(value) ? value : [];
+
+    const isCategorySelected = arrayValue.includes(category._id);
+    const newSelectedCategoryIds = isCategorySelected
+      ? arrayValue.filter((id) => id !== category._id)
+      : [...arrayValue, category._id];
+
+    setCategories((prev) =>
+      [...prev, category].filter((c) => newSelectedCategoryIds.includes(c._id)),
+    );
+    onValueChange?.(newSelectedCategoryIds);
+  };
+
+  return (
+    <SelectProductCategoryContext.Provider
+      value={{
+        categories: _categories,
+        categoryIds: !value ? [] : Array.isArray(value) ? value : [value],
+        onSelect,
+        setCategories,
+        loading: false,
+        error: null,
+      }}
+    >
+      {children}
+    </SelectProductCategoryContext.Provider>
+  );
+};
+
+const SelectCategoryValue = ({ placeholder }: { placeholder?: string }) => {
+  const { categoryIds, categories, setCategories } =
+    useSelectProductCategoryContext();
+  return (
+    <CategoriesInline
+      categoryIds={categoryIds}
+      categories={categories}
+      updateCategories={setCategories}
+      placeholder={placeholder}
+    />
+  );
+};
+
+const SelectCategoryCommandItem = ({
+  category,
+}: {
+  category: IProductCategory;
+}) => {
+  const { onSelect, categoryIds } = useSelectProductCategoryContext();
+
+  return (
+    <Command.Item
+      value={category._id}
+      onSelect={() => {
+        onSelect(category);
+      }}
+    >
+      <SelectCategoryBadge category={category} />
+      <Combobox.Check checked={categoryIds.includes(category._id)} />
+    </Command.Item>
+  );
+};
+
+const SelectCategoryContent = () => {
+  const [search, setSearch] = React.useState('');
+  const [debouncedSearch] = useDebounce(search, 500);
+  const { categories: selectedCategories } = useSelectProductCategoryContext();
+
+  const {
+    categories = [],
+    loading,
+    handleFetchMore,
+    totalCount = 0,
+  } = useCategoriesWithSearch({
+    variables: {
+      searchValue: debouncedSearch,
+    },
+  });
+  return (
+    <Command shouldFilter={false} id="category-command-menu">
+      <Command.Input
+        value={search}
+        onValueChange={setSearch}
+        variant="secondary"
+        wrapperClassName="flex-auto"
+        placeholder="Search category..."
+        className="h-9"
+      />
+      <Command.List>
+        <Combobox.Empty loading={loading} />
+        {selectedCategories.length > 0 && (
+          <>
+            {selectedCategories?.map((category) => (
+              <SelectCategoryCommandItem
+                key={category._id}
+                category={category}
+              />
+            ))}
+            <Command.Separator className="my-1" />
+          </>
+        )}
+        {categories
+          .filter(
+            (category) =>
+              !selectedCategories.some((c) => c._id === category._id),
+          )
+          .map((category) => (
+            <SelectCategoryCommandItem key={category._id} category={category} />
+          ))}
+        <Combobox.FetchMore
+          fetchMore={handleFetchMore}
+          totalCount={totalCount}
+          currentLength={categories.length}
+        />
+      </Command.List>
+    </Command>
+  );
+};
+
+export const SelectCategoryFilterItem = () => {
+  return (
+    <Filter.Item value="category">
+      <IconCategory />
+      Category
+    </Filter.Item>
+  );
+};
+
+export const SelectCategoryFilterView = ({
+  onValueChange,
+  queryKey,
+  mode = 'single',
+}: {
+  onValueChange?: (value: string[] | string) => void;
+  queryKey?: string;
+  mode?: 'single' | 'multiple';
+}) => {
+  const [category, setCategory] = useQueryState<string[] | string>(
+    queryKey || 'category',
+  );
+  const { resetFilterState } = useFilterContext();
+
+  return (
+    <Filter.View filterKey={queryKey || 'category'}>
+      <SelectCategoryProvider
+        mode={mode}
+        value={category || (mode === 'single' ? '' : [])}
+        onValueChange={(value) => {
+          setCategory(value as string[] | string);
+          resetFilterState();
+          onValueChange?.(value);
+        }}
+      >
+        <SelectCategoryContent />
+      </SelectCategoryProvider>
+    </Filter.View>
+  );
+};
+
+export const SelectCategoryFilterBar = ({
+  iconOnly,
+  onValueChange,
+  queryKey,
+  mode = 'single',
+}: {
+  iconOnly?: boolean;
+  onValueChange?: (value: string[] | string) => void;
+  queryKey?: string;
+  mode?: 'single' | 'multiple';
+}) => {
+  const [category, setCategory] = useQueryState<string[] | string>(
+    queryKey || 'category',
+  );
+  const [open, setOpen] = useState(false);
+
+  if (!category) {
+    return null;
   }
->(({ selectedCategory, loading, className, ...props }, ref) => {
   return (
-    <Combobox.Trigger ref={ref} className={className} {...props}>
-      <SelectCategoryBadge category={selectedCategory} />
-      {!selectedCategory && <Combobox.Value placeholder="Select category" />}
-      {loading && (
-        <>
-          <Skeleton className="w-4 h-4" />
-          <Skeleton className="w-8 h-4" />
-          <Skeleton className="w-16 h-4" />
-        </>
-      )}
-    </Combobox.Trigger>
+    <Filter.BarItem>
+      <Filter.BarName>
+        <IconCategory />
+        {!iconOnly && 'Category'}
+      </Filter.BarName>
+      <SelectCategoryProvider
+        mode={mode}
+        value={category || (mode === 'single' ? '' : [])}
+        onValueChange={(value) => {
+          if (value.length > 0) {
+            setCategory(value as string[] | string);
+          } else {
+            setCategory(null);
+          }
+          setOpen(false);
+          onValueChange?.(value);
+        }}
+      >
+        <Popover open={open} onOpenChange={setOpen}>
+          <Popover.Trigger asChild>
+            <Filter.BarButton filterKey={queryKey || 'category'}>
+              <SelectCategoryValue />
+            </Filter.BarButton>
+          </Popover.Trigger>
+          <Combobox.Content>
+            <SelectCategoryContent />
+          </Combobox.Content>
+        </Popover>
+      </SelectCategoryProvider>
+      <Filter.BarClose filterKey={queryKey || 'category'} />
+    </Filter.BarItem>
   );
+};
+
+export const SelectCategoryInlineCell = ({
+  onValueChange,
+  scope,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectCategoryProvider>, 'children'> & {
+  scope?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <SelectCategoryProvider
+      onValueChange={(value) => {
+        onValueChange?.(value);
+        setOpen(false);
+      }}
+      {...props}
+    >
+      <RecordTablePopover open={open} onOpenChange={setOpen} scope={scope}>
+        <RecordTableCellTrigger>
+          <SelectCategoryValue placeholder={''} />
+        </RecordTableCellTrigger>
+        <RecordTableCellContent>
+          <SelectCategoryContent />
+        </RecordTableCellContent>
+      </RecordTablePopover>
+    </SelectCategoryProvider>
+  );
+};
+
+export const SelectCategoryFormItem = ({
+  onValueChange,
+  className,
+  placeholder,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectCategoryProvider>, 'children'> & {
+  className?: string;
+  placeholder?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <SelectCategoryProvider
+      onValueChange={(value) => {
+        onValueChange?.(value);
+        setOpen(false);
+      }}
+      {...props}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <Form.Control>
+          <Combobox.Trigger className={cn('w-full shadow-xs', className)}>
+            <SelectCategoryValue placeholder={placeholder} />
+          </Combobox.Trigger>
+        </Form.Control>
+
+        <Combobox.Content>
+          <SelectCategoryContent />
+        </Combobox.Content>
+      </Popover>
+    </SelectCategoryProvider>
+  );
+};
+
+SelectCategoryFormItem.displayName = 'SelectCategoryFormItem';
+
+const SelectCategoryRoot = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  Omit<React.ComponentProps<typeof SelectCategoryProvider>, 'children'> &
+    React.ComponentProps<typeof Combobox.Trigger> & {
+      placeholder?: string;
+    }
+>(({ onValueChange, className, mode, value, placeholder, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <SelectCategoryProvider
+      onValueChange={(value) => {
+        onValueChange?.(value);
+        setOpen(false);
+      }}
+      mode={mode}
+      value={value}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <Combobox.Trigger
+          ref={ref}
+          className={cn('w-full inline-flex', className)}
+          variant="outline"
+          {...props}
+        >
+          <SelectCategoryValue placeholder={placeholder} />
+        </Combobox.Trigger>
+        <Combobox.Content>
+          <SelectCategoryContent />
+        </Combobox.Content>
+      </Popover>
+    </SelectCategoryProvider>
+  );
+});
+
+SelectCategoryRoot.displayName = 'SelectCategoryRoot';
+
+export const SelectCategory = Object.assign(SelectCategoryRoot, {
+  Provider: SelectCategoryProvider,
+  Value: SelectCategoryValue,
+  Content: SelectCategoryContent,
+  Badge: SelectCategoryBadge,
+  FilterItem: SelectCategoryFilterItem,
+  FilterView: SelectCategoryFilterView,
+  FilterBar: SelectCategoryFilterBar,
+  InlineCell: SelectCategoryInlineCell,
+  FormItem: SelectCategoryFormItem,
 });
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/contexts/CategoriesInlineContext.tsx b/frontend/libs/ui-modules/src/modules/products/categories/contexts/CategoriesInlineContext.tsx
new file mode 100644
index 0000000000..680a4e0068
--- /dev/null
+++ b/frontend/libs/ui-modules/src/modules/products/categories/contexts/CategoriesInlineContext.tsx
@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import { IProductCategory } from '../types/category';
+
+export interface ICategoriesInlineContext {
+  categories: IProductCategory[];
+  loading: boolean;
+  categoryIds?: string[];
+  placeholder: string;
+  updateCategories?: (categories: IProductCategory[]) => void;
+}
+
+export const CategoriesInlineContext =
+  createContext<ICategoriesInlineContext | null>(null);
+
+export const useCategoriesInlineContext = () => {
+  const context = useContext(CategoriesInlineContext);
+  if (!context) {
+    throw new Error(
+      'useCategoriesInlineContext must be used within a CategoriesInlineProvider',
+    );
+  }
+  return context;
+};
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/graphql/queries.ts b/frontend/libs/ui-modules/src/modules/products/categories/graphql/queries.ts
index 68a2a5715b..522d74739f 100644
--- a/frontend/libs/ui-modules/src/modules/products/categories/graphql/queries.ts
+++ b/frontend/libs/ui-modules/src/modules/products/categories/graphql/queries.ts
@@ -1,8 +1,16 @@
 import { gql } from '@apollo/client';
 
 const productCategories = gql`
-  query ProductCategories {
-    productCategories {
+  query ProductCategories(
+    $searchValue: String
+    $parentId: String
+    $withChild: Boolean
+  ) {
+    productCategories(
+      searchValue: $searchValue
+      parentId: $parentId
+      withChild: $withChild
+    ) {
       _id
       parentId
       attachment {
@@ -16,7 +24,17 @@ const productCategories = gql`
   }
 `;
 
+const productCategoryDetail = gql`
+  query ProductCategories($ids: [String]) {
+  productCategories(ids: $ids) {
+    _id
+    code
+    name
+  }
+}
+`;
 
 export const categories = {
-    productCategories,
-  };
\ No newline at end of file
+  productCategories,
+  productCategoryDetail,
+};
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoriesWithSearch.tsx b/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoriesWithSearch.tsx
new file mode 100644
index 0000000000..d4b67d8ee0
--- /dev/null
+++ b/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoriesWithSearch.tsx
@@ -0,0 +1,34 @@
+import { useQuery, QueryHookOptions } from '@apollo/client';
+import { categories } from '../graphql/queries';
+import { IProductCategory } from '../types/category';
+
+export interface CategoriesQueryResponse {
+  productCategories: IProductCategory[];
+}
+
+export const useCategoriesWithSearch = (
+  options?: QueryHookOptions<CategoriesQueryResponse>,
+) => {
+  const { data, loading, error } = useQuery<CategoriesQueryResponse>(
+    categories.productCategories,
+    {
+      ...options,
+    },
+  );
+
+  const productCategories = data?.productCategories || [];
+
+  // Simple fetch more simulation since categories don't have cursor pagination
+  const handleFetchMore = () => {
+    // Categories typically don't need pagination as they're usually a smaller dataset
+    // This is here for API compatibility with brands
+  };
+
+  return {
+    categories: productCategories,
+    loading,
+    error,
+    handleFetchMore,
+    totalCount: productCategories.length,
+  };
+};
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoryInline.tsx b/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoryInline.tsx
new file mode 100644
index 0000000000..f8dbf6aaff
--- /dev/null
+++ b/frontend/libs/ui-modules/src/modules/products/categories/hooks/useCategoryInline.tsx
@@ -0,0 +1,37 @@
+import { QueryHookOptions } from '@apollo/client';
+import { useQuery } from '@apollo/client';
+import { IProductCategory } from '../types/category';
+import { categories } from '../graphql/queries';
+
+export interface ICategoryInline {
+  _id: string;
+  name: string;
+  code: string;
+  order: string;
+  productCount: number;
+  parentId?: string;
+  attachment?: {
+    url: string;
+  };
+}
+
+export interface ICategoryInlineQuery {
+  productCategoryDetail: ICategoryInline;
+}
+
+export const useCategoryInline = (
+  options?: QueryHookOptions<ICategoryInlineQuery>,
+) => {
+  const { data, loading, error } = useQuery<ICategoryInlineQuery>(
+    categories.productCategoryDetail,
+    {
+      ...options,
+    },
+  );
+
+  return {
+    category: data?.productCategoryDetail,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/libs/ui-modules/src/modules/products/categories/types/category.ts b/frontend/libs/ui-modules/src/modules/products/categories/types/category.ts
index 3c28e0cf91..4af126bb83 100644
--- a/frontend/libs/ui-modules/src/modules/products/categories/types/category.ts
+++ b/frontend/libs/ui-modules/src/modules/products/categories/types/category.ts
@@ -5,6 +5,7 @@ export interface IProductCategory {
   _id: string;
   name: string;
   avatar?: IAttachment;
+  attachment?: IAttachment;
   code: string;
   order: string;
   productCount: number;
@@ -20,3 +21,10 @@ export interface UseProductCategoriesResult {
   loading: boolean;
   error: ApolloError | undefined;
 }
+
+export interface CategoriesInlineProps {
+  categoryIds?: string[];
+  categories?: IProductCategory[];
+  placeholder?: string;
+  updateCategories?: (categories: IProductCategory[]) => void;
+}
diff --git a/frontend/libs/ui-modules/src/modules/products/contexts/SelectProductCategoryContext.tsx b/frontend/libs/ui-modules/src/modules/products/contexts/SelectProductCategoryContext.tsx
new file mode 100644
index 0000000000..4c56fc5f28
--- /dev/null
+++ b/frontend/libs/ui-modules/src/modules/products/contexts/SelectProductCategoryContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import { IProductCategory } from '../categories/types/category';
+
+export type ISelectProductCategoryContext = {
+  categoryIds: string[];
+  categories: IProductCategory[];
+  setCategories: (categories: IProductCategory[]) => void;
+  onSelect: (category: IProductCategory) => void;
+  loading: boolean;
+  error: string | null;
+};
+
+export const SelectProductCategoryContext =
+  createContext<ISelectProductCategoryContext | null>(null);
+
+export const useSelectProductCategoryContext = () => {
+  const context = useContext(SelectProductCategoryContext);
+  if (!context) {
+    throw new Error(
+      'useSelectProductCategoryContext must be used within a SelectProductCategoryProvider',
+    );
+  }
+  return context;
+};
diff --git a/frontend/libs/ui-modules/src/modules/team-members/types/TeamMembers.ts b/frontend/libs/ui-modules/src/modules/team-members/types/TeamMembers.ts
index e93a1303eb..efa6812122 100644
--- a/frontend/libs/ui-modules/src/modules/team-members/types/TeamMembers.ts
+++ b/frontend/libs/ui-modules/src/modules/team-members/types/TeamMembers.ts
@@ -1,6 +1,4 @@
 import { SlashMenuProps } from 'erxes-ui';
-import { USERS_GROUP_FORM_SCHEAMA } from 'frontend/core-ui/src/modules/settings/permission/schema/usersGroup';
-import { z } from 'zod';
 
 export interface IUser {
   _id: string;