diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
new file mode 100644
index 00000000..d333d824
--- /dev/null
+++ b/apps/storefront/src/components/B3Dialog.tsx
@@ -0,0 +1,146 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+
+import {
+  useRef,
+  ReactElement,
+  ReactNode,
+} from 'react'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  B3Sping,
+} from './spin/B3Sping'
+
+interface B3DialogProps<T> {
+  customActions?: () => ReactElement
+  isOpen: boolean,
+  leftStyleBtn?: {[key: string]: string}
+  rightStyleBtn?: {[key: string]: string}
+  leftSizeBtn?: string
+  rightSizeBtn?: string
+  title?: string
+  handleLeftClick?: () => void
+  handRightClick?: (row?: T) => Promise<void> | void | undefined
+  children: ReactNode
+  loading?: boolean
+  row?: T
+}
+
+export const B3Dialog:<T> ({
+  customActions,
+  isOpen,
+  leftStyleBtn,
+  rightStyleBtn,
+  title,
+  handleLeftClick,
+  handRightClick,
+  children,
+  loading,
+  row,
+}: B3DialogProps<T>) => ReactElement = ({
+  customActions,
+  isOpen,
+  leftStyleBtn = {},
+  rightStyleBtn = {},
+  leftSizeBtn,
+  rightSizeBtn,
+  title,
+  handleLeftClick,
+  handRightClick,
+  children,
+  loading = false,
+  row,
+}) => {
+  const container = useRef<HTMLInputElement | null>(null)
+
+  const [isMobile] = useMobile()
+
+  const handleSaveClick = () => {
+    if (handRightClick) {
+      if (row) handRightClick(row)
+      if (!row) handRightClick()
+    }
+  }
+
+  const handleCloseClick = () => {
+    if (handleLeftClick) handleLeftClick()
+  }
+
+  return (
+    <Box
+      sx={{
+        ml: 3,
+        cursor: 'pointer',
+      }}
+    >
+      <Box
+        ref={container}
+      />
+
+      <Dialog
+        open={isOpen}
+        container={container.current}
+        onClose={handleCloseClick}
+        fullScreen={isMobile}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        {
+          title && (
+          <DialogTitle id="alert-dialog-title">
+            {title}
+          </DialogTitle>
+          )
+        }
+
+        <DialogContent>
+          {children}
+        </DialogContent>
+        <DialogActions>
+          {
+            customActions ? customActions() : (
+              <>
+                <Button
+                  sx={{
+                    ...leftStyleBtn,
+                  }}
+                  onClick={handleCloseClick}
+                >
+                  {leftSizeBtn || 'cancel'}
+
+                </Button>
+
+                <Button
+                  sx={{
+                    ...rightStyleBtn,
+                  }}
+                  onClick={handleSaveClick}
+                  autoFocus
+                >
+                  <B3Sping
+                    isSpinning={loading}
+                    tip=""
+                    size={16}
+                  >
+                    {rightSizeBtn || 'save'}
+                  </B3Sping>
+                </Button>
+              </>
+            )
+          }
+        </DialogActions>
+      </Dialog>
+    </Box>
+
+  )
+}
diff --git a/apps/storefront/src/components/B3Table.tsx b/apps/storefront/src/components/B3Table.tsx
index b4a97ead..0a80a0e6 100644
--- a/apps/storefront/src/components/B3Table.tsx
+++ b/apps/storefront/src/components/B3Table.tsx
@@ -23,7 +23,7 @@ import {
   B3NoData,
 } from './B3NoData'
 
-interface Pagination {
+export interface Pagination {
   offset: number,
   first: number,
   count: number,
diff --git a/apps/storefront/src/components/filter/B3Filter.tsx b/apps/storefront/src/components/filter/B3Filter.tsx
index 394154bc..2b693539 100644
--- a/apps/storefront/src/components/filter/B3Filter.tsx
+++ b/apps/storefront/src/components/filter/B3Filter.tsx
@@ -4,6 +4,7 @@ import {
 } from 'react'
 import {
   Box,
+  Button,
 } from '@mui/material'
 
 import {
@@ -35,7 +36,7 @@ interface PickerProps {
 
 interface sortByConfigProps {
   isEnabled: boolean;
-  sortByList: any[]
+  sortByList?: any[]
   sortByItemName?: sortByItemNameProps | undefined
   sortByLabel: string
   defaultValue?: string | undefined
@@ -52,39 +53,49 @@ type DeepPartial<T> = {
     : DeepPartial<T[P]>;
 }
 
-interface B3FilterProps<T> {
-  sortByConfig: sortByConfigProps
-  startPicker: PickerProps
-  endPicker: PickerProps
+interface customButtomProps {
+  isEnabled: boolean;
+  customLabel: string;
+  customButtomStyle?: {[key: string]: string}
+}
+
+interface B3FilterProps<T, Y> {
+  sortByConfig?: sortByConfigProps
+  customButtomConfig?: customButtomProps
+  startPicker?: PickerProps
+  endPicker?: PickerProps
   fiterMoreInfo: Array<DeepPartial<T>>
   handleChange: (key: string, value: string) => void
-  handleFilterChange: (value: {[key: string]: string | number | Date}) => void
+  handleFilterChange: (value: Y) => void
+  handleFilterCustomButtomClick?: () => void
 }
 
-const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
+const B3Filter:<T, Y> (props: B3FilterProps<T, Y>) => ReactElement = (props) => {
   const {
     sortByConfig,
     startPicker,
     endPicker,
     fiterMoreInfo,
+    customButtomConfig,
     handleChange,
     handleFilterChange,
+    handleFilterCustomButtomClick,
   } = props
 
-  const {
-    isEnabled: sortEnabled = false,
-    sortByList = [],
-    sortByItemName,
-    sortByLabel = '',
-    defaultValue: sortByDefaultValue = '',
-    isFirstSelect,
-    firstSelectText,
-    w: sortByWidth = 150,
-  } = sortByConfig
+  // const {
+  //   isEnabled: sortEnabled = false,
+  //   sortByList = [],
+  //   sortByItemName,
+  //   sortByLabel = '',
+  //   // defaultValue: sortByDefaultValue = '',
+  //   isFirstSelect,
+  //   firstSelectText,
+  //   w: sortByWidth = 150,
+  // } = sortByConfig
 
   const [isMobile] = useMobile()
 
-  const [sortByValue, setSortBy] = useState<string>(sortByDefaultValue)
+  const [sortByValue, setSortBy] = useState<string>(sortByConfig?.defaultValue || '')
 
   const handleSortByChange = (value: string) => {
     setSortBy(value)
@@ -95,8 +106,12 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
     handleChange('search', value)
   }
 
-  const handleFilterMoreChange = (filterItems: {[key: string]: string | number | Date}) => {
-    handleFilterChange(filterItems)
+  // const handleFilterMoreChange = (filterItems) => {
+  //   handleFilterChange(filterItems)
+  // }
+
+  const handleCustomBtnClick = () => {
+    if (handleFilterCustomButtomClick) handleFilterCustomButtomClick()
   }
 
   return (
@@ -125,7 +140,7 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
               startPicker={startPicker}
               endPicker={endPicker}
               fiterMoreInfo={fiterMoreInfo}
-              onChange={handleFilterMoreChange}
+              onChange={handleFilterChange}
             />
           </Box>
 
@@ -135,25 +150,40 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
             }}
           >
             {
-            sortEnabled && (
-              <Box
-                sx={{
-                  m: '0 5px',
-                }}
-              >
-                <B3Select
-                  list={sortByList}
-                  value={sortByValue}
-                  handleChange={handleSortByChange}
-                  label={sortByLabel}
-                  config={sortByItemName}
-                  isFirstSelect={isFirstSelect}
-                  firstSelectText={firstSelectText}
-                  w={sortByWidth}
-                />
-              </Box>
-            )
-          }
+              sortByConfig?.isEnabled && (
+                <Box
+                  sx={{
+                    m: '0 5px',
+                  }}
+                >
+                  <B3Select
+                    list={sortByConfig?.sortByList || []}
+                    value={sortByValue}
+                    handleChange={handleSortByChange}
+                    label={sortByConfig?.sortByLabel || ''}
+                    config={sortByConfig?.sortByItemName}
+                    isFirstSelect={sortByConfig?.isFirstSelect}
+                    firstSelectText={sortByConfig?.firstSelectText}
+                    w={sortByConfig?.w || 150}
+                  />
+                </Box>
+              )
+            }
+            {
+              customButtomConfig?.isEnabled && (
+                <Button
+                  size="small"
+                  variant="contained"
+                  sx={{
+                    maxWidth: 150,
+                    ...customButtomConfig?.customButtomStyle || {},
+                  }}
+                  onClick={handleCustomBtnClick}
+                >
+                  {customButtomConfig?.customLabel || ''}
+                </Button>
+              )
+            }
             {/* <B3FilterToggleTable /> */}
           </Box>
 
@@ -186,7 +216,7 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
               startPicker={startPicker}
               endPicker={endPicker}
               fiterMoreInfo={fiterMoreInfo}
-              onChange={handleFilterMoreChange}
+              onChange={handleFilterChange}
             />
           </Box>
 
diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
index ad19209f..a504508d 100644
--- a/apps/storefront/src/components/filter/B3FilterMore.tsx
+++ b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -46,11 +46,11 @@ type DeepPartial<T> = {
     : DeepPartial<T[P]>;
 }
 
-interface B3FilterMoreProps<T> {
-  startPicker: PickerProps
-  endPicker: PickerProps
+interface B3FilterMoreProps<T, Y> {
+  startPicker?: PickerProps
+  endPicker?: PickerProps
   fiterMoreInfo: Array<DeepPartial<T>>
-  onChange?: (val: {[key: string]: Date | string | number}) => void
+  onChange?: (val: Y) => void
 }
 
 interface PickerRefProps extends HTMLInputElement {
@@ -58,12 +58,12 @@ interface PickerRefProps extends HTMLInputElement {
   getPickerValue: () => {[key: string]: string}
 }
 
-const B3FilterMore:<T> ({
+const B3FilterMore:<T, Y> ({
   startPicker,
   endPicker,
   fiterMoreInfo,
   onChange,
-}: B3FilterMoreProps<T>) => ReactElement = ({
+}: B3FilterMoreProps<T, Y>) => ReactElement = ({
   startPicker,
   endPicker,
   fiterMoreInfo,
@@ -82,7 +82,6 @@ const B3FilterMore:<T> ({
       errors,
     },
     setValue,
-    reset,
   } = useForm({
     mode: 'onSubmit',
   })
@@ -101,17 +100,19 @@ const B3FilterMore:<T> ({
     handleSubmit((data) => {
       const getPickerValues = pickerRef.current?.getPickerValue()
       if (onChange) {
-        onChange({
+        const submitData: any = {
           ...getPickerValues, ...data,
-        })
+        }
+        onChange(submitData)
       }
       handleClose()
     })(event)
   }
 
   const handleClearFilters = () => {
-    reset()
-    setValue('orderStatus', '')
+    Object.keys(getValues()).forEach((item: string) => {
+      setValue(item, '')
+    })
     pickerRef.current?.setClearPickerValue()
   }
   return (
diff --git a/apps/storefront/src/components/filter/B3FilterPicker.tsx b/apps/storefront/src/components/filter/B3FilterPicker.tsx
index d12d96f3..41450cdd 100644
--- a/apps/storefront/src/components/filter/B3FilterPicker.tsx
+++ b/apps/storefront/src/components/filter/B3FilterPicker.tsx
@@ -9,10 +9,6 @@ import {
   Box,
 } from '@mui/material'
 
-// import {
-//   useMobile,
-// } from '@/hooks'
-
 import {
   distanceDay,
 } from '@/utils'
@@ -29,8 +25,8 @@ interface PickerProps {
 }
 
 interface B3FilterPickerProps {
-  startPicker: PickerProps
-  endPicker: PickerProps
+  startPicker?: PickerProps
+  endPicker?: PickerProps
   handleChange?: (key: string, value: Date | string | number) => void
 }
 
@@ -39,34 +35,22 @@ const B3FilterPickers = ({
   endPicker,
   handleChange,
 }: B3FilterPickerProps, ref: Ref<unknown> | undefined) => {
-  const {
-    isEnabled: startDateEnable = true,
-    label: startLabel = 'From',
-    defaultValue: startDateDefaultValue = new Date(),
-    pickerKey: startPickerKey = 'start',
-  } = startPicker
-
-  const {
-    isEnabled: endDateEnable = true,
-    label: endLabel = 'To',
-    defaultValue: endDateDefaultValue = new Date(),
-    pickerKey: endPickerKey = 'end',
-  } = endPicker
-
   // const [isMobile] = useMobile()
-
-  const [startValue, setStartValue] = useState<Date | number | string>(startDateDefaultValue)
-  const [endValue, setEndValue] = useState<Date | number | string>(endDateDefaultValue)
+  const [startValue, setStartValue] = useState<Date | number | string>(startPicker?.defaultValue || new Date())
+  const [endValue, setEndValue] = useState<Date | number | string>(endPicker?.defaultValue || new Date())
 
   const setClearPickerValue = () => {
     setStartValue(distanceDay(30))
     setEndValue(distanceDay())
   }
 
-  const getPickerValue = () => ({
-    startValue,
-    endValue,
-  })
+  const getPickerValue = () => {
+    const data = {
+      startValue,
+      endValue,
+    }
+    return startPicker?.isEnabled ? data : {}
+  }
   useImperativeHandle(ref, () => ({
     setClearPickerValue,
     getPickerValue,
@@ -75,14 +59,14 @@ const B3FilterPickers = ({
   const handleStartDatePickerChange = (value: Date | string | number) => {
     setStartValue(value)
     if (handleChange) {
-      handleChange(startPickerKey, value)
+      handleChange(startPicker?.pickerKey || 'start', value)
     }
   }
 
   const handleEndDatePickerChange = (value: Date | string | number) => {
     setEndValue(value)
     if (handleChange) {
-      handleChange(endPickerKey, value)
+      handleChange(endPicker?.pickerKey || 'end', value)
     }
   }
 
@@ -93,7 +77,7 @@ const B3FilterPickers = ({
       }}
     >
       {
-      startDateEnable && (
+      startPicker?.isEnabled && (
       <Box
         sx={{
           width: '49%',
@@ -108,7 +92,7 @@ const B3FilterPickers = ({
         <B3Picker
           onChange={handleStartDatePickerChange}
           value={startValue}
-          label={startLabel}
+          label={startPicker?.label}
           variant="filled"
         />
       </Box>
@@ -116,7 +100,7 @@ const B3FilterPickers = ({
     }
 
       {
-      endDateEnable && (
+      endPicker?.isEnabled && (
       <Box
         sx={{
           width: '49%',
@@ -131,7 +115,7 @@ const B3FilterPickers = ({
         <B3Picker
           onChange={handleEndDatePickerChange}
           value={endValue}
-          label={endLabel}
+          label={endPicker?.label}
           variant="filled"
         />
       </Box>
diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
index be9b3583..2594cf47 100644
--- a/apps/storefront/src/components/index.ts
+++ b/apps/storefront/src/components/index.ts
@@ -28,3 +28,7 @@ export {
 export {
   B3Table,
 } from './B3Table'
+
+export {
+  B3Dialog,
+} from './B3Dialog'
diff --git a/apps/storefront/src/pages/usermanagement/AddEditUser.tsx b/apps/storefront/src/pages/usermanagement/AddEditUser.tsx
new file mode 100644
index 00000000..156b1db6
--- /dev/null
+++ b/apps/storefront/src/pages/usermanagement/AddEditUser.tsx
@@ -0,0 +1,132 @@
+import {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+  useEffect,
+} from 'react'
+
+import {
+  useForm,
+} from 'react-hook-form'
+
+import {
+  addOrUpdateUsers,
+} from '@/shared/service/b2b'
+import {
+  B3CustomForm,
+  B3Dialog,
+} from '@/components'
+
+import {
+  getUsersFiles,
+  UsersList,
+  UsersFilesProps,
+  filterProps,
+} from './config'
+
+interface AddEditUserProps {
+  companyId: string | number
+  renderList: () => void
+}
+
+const AddEditUser = ({
+  companyId,
+  renderList,
+}: AddEditUserProps, ref: Ref<unknown> | undefined) => {
+  const [open, setOpen] = useState<boolean>(false)
+  const [type, setType] = useState<string>('')
+
+  const [editData, setEditData] = useState<UsersList | null>(null)
+
+  const [addUpdateLoading, setAddUpdateLoading] = useState<boolean>(false)
+
+  const [usersFiles, setUsersFiles] = useState<Array<UsersFilesProps>>([])
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    formState: {
+      errors,
+    },
+    setValue,
+  } = useForm({
+    mode: 'onSubmit',
+  })
+
+  useEffect(() => {
+    if (open && type === 'edit' && editData) {
+      usersFiles.forEach((item: UsersFilesProps) => {
+        setValue(item.name, editData[item.name])
+      })
+    }
+  }, [open, type])
+
+  const handleCancelClick = () => {
+    usersFiles.forEach((item: UsersFilesProps) => {
+      setValue(item.name, '')
+    })
+    setOpen(false)
+  }
+
+  const handleAddUserClick = () => {
+    handleSubmit(async (data) => {
+      setAddUpdateLoading(true)
+      try {
+        const params: Partial<filterProps> = {
+          companyId,
+          ...data,
+        }
+        if (type === 'edit') {
+          params.userId = editData?.id || ''
+          delete params.email
+        }
+        await addOrUpdateUsers(params)
+        setOpen(false)
+        renderList()
+      } finally {
+        setAddUpdateLoading(false)
+      }
+    })()
+  }
+
+  const handleOpenAddEditUserClick = (type: string, data: UsersList) => {
+    const usersFiles = getUsersFiles(type)
+    setUsersFiles(usersFiles)
+    setEditData(data)
+    setType(type)
+    setOpen(true)
+  }
+
+  useImperativeHandle(ref, () => ({
+    handleOpenAddEditUserClick,
+  }))
+
+  return (
+    <B3Dialog
+      isOpen={open}
+      title="Add new user"
+      leftSizeBtn="cancel"
+      rightSizeBtn="Save user"
+      handleLeftClick={handleCancelClick}
+      handRightClick={handleAddUserClick}
+      loading={addUpdateLoading}
+      rightStyleBtn={{
+        color: 'red',
+      }}
+    >
+      <B3CustomForm
+        formFields={usersFiles}
+        errors={errors}
+        control={control}
+        getValues={getValues}
+        setValue={setValue}
+      />
+    </B3Dialog>
+  )
+}
+
+const B3AddEditUser = forwardRef(AddEditUser)
+
+export default B3AddEditUser
diff --git a/apps/storefront/src/pages/usermanagement/UserItemCard.tsx b/apps/storefront/src/pages/usermanagement/UserItemCard.tsx
new file mode 100644
index 00000000..1fa6ba19
--- /dev/null
+++ b/apps/storefront/src/pages/usermanagement/UserItemCard.tsx
@@ -0,0 +1,143 @@
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+
+import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
+
+import styled from '@emotion/styled'
+
+import {
+  B3Tag,
+} from '@/components/B3Tag'
+
+import {
+  UsersList,
+  getUserRole,
+} from './config'
+
+interface RoleListProps {
+  label: string,
+  value: string | number,
+  color: string,
+  textColor: string,
+}
+
+export interface OrderItemCardProps {
+  item: UsersList,
+  onEdit: (data: UsersList) => void
+  onDelete: (data: UsersList) => void
+}
+
+const Flex = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}))
+
+export const UserItemCard = (props: OrderItemCardProps) => {
+  const {
+    item: userInfo,
+    onEdit,
+    onDelete,
+  } = props
+
+  const getNewRoleList = () => {
+    const userRole = getUserRole()
+    const newRoleList: Array<RoleListProps> = userRole.map((item) => {
+      if (+item.value === 0) {
+        return {
+          color: '#C4DD6C',
+          textColor: 'black',
+          ...item,
+        }
+      }
+      if (+item.value === 1) {
+        return {
+          color: 'rgba(237, 108, 2, 0.3)',
+          textColor: 'black',
+          ...item,
+        }
+      }
+      return {
+        color: '#D9DCE9',
+        textColor: 'black',
+        ...item,
+      }
+    })
+
+    return newRoleList
+  }
+
+  const statusRender = (role: number) => {
+    const newRoleList = getNewRoleList()
+    const roleItem = newRoleList.find((item: RoleListProps) => +item.value === +role)
+
+    if (!roleItem) return
+    return (
+      <B3Tag
+        color={roleItem.color}
+        textColor={roleItem.textColor}
+      >
+        {roleItem.label}
+      </B3Tag>
+    )
+  }
+
+  return (
+    <Card
+      key={userInfo.id}
+    >
+      <CardContent
+        sx={{
+          color: '#313440',
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{
+            color: 'rgba(0, 0, 0, 0.87)',
+          }}
+        >
+          {userInfo.firstName}
+          {' '}
+          {userInfo.lastName}
+        </Typography>
+
+        <Typography
+          sx={{
+            p: '15px 0',
+          }}
+          variant="body1"
+        >
+          {userInfo.email}
+
+        </Typography>
+        <Flex>
+          {statusRender(userInfo.role)}
+          <Box>
+            <IconButton
+              aria-label="edit"
+              size="small"
+              sx={{
+                marginRight: '8px',
+              }}
+              onClick={() => { onEdit(userInfo) }}
+            >
+              <EditIcon fontSize="inherit" />
+            </IconButton>
+            <IconButton
+              aria-label="delete"
+              size="small"
+              onClick={() => { onDelete(userInfo) }}
+            >
+              <DeleteIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+        </Flex>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/usermanagement/Usermanagement.tsx b/apps/storefront/src/pages/usermanagement/Usermanagement.tsx
new file mode 100644
index 00000000..ed9b5a84
--- /dev/null
+++ b/apps/storefront/src/pages/usermanagement/Usermanagement.tsx
@@ -0,0 +1,287 @@
+import {
+  useState,
+  useEffect,
+  useContext,
+  useRef,
+} from 'react'
+
+import {
+  Box,
+} from '@mui/material'
+import {
+  B3Sping,
+} from '@/components/spin/B3Sping'
+
+import {
+  getUsers,
+  deleteUsers,
+} from '@/shared/service/b2b'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  Pagination,
+  B3Table,
+} from '@/components/B3Table'
+
+import {
+  B3Dialog,
+} from '@/components'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  getFilterMoreList,
+  UsersList,
+  filterProps,
+} from './config'
+
+import B3AddEditUser from './AddEditUser'
+
+import B3Filter from '../../components/filter/B3Filter'
+
+import {
+  UserItemCard,
+} from './UserItemCard'
+
+interface RefCurrntProps extends HTMLInputElement {
+  handleOpenAddEditUserClick: (type: string, data?: UsersList) => void
+}
+
+interface RoleProps {
+  role: string
+}
+
+const customItem = {
+  isEnabled: true,
+  customLabel: 'add new users',
+}
+const Usermanagement = () => {
+  const [isRequestLoading, setIsRequestLoading] = useState<boolean>(false)
+
+  const [usersList, setUsersList] = useState<Array<UsersList>>([])
+
+  const [pagination, setPagination] = useState<Pagination>({
+    offset: 0,
+    count: 0,
+    first: 9,
+  })
+
+  const [deleteOpen, setDeleteOpen] = useState<boolean>(false)
+
+  const [userItem, setUserItem] = useState<UsersList>({
+    createdAt: 0,
+    email: '',
+    firstName: '',
+    id: '',
+    lastName: '',
+    phone: '',
+    role: 0,
+    updatedAt: 0,
+  })
+
+  const [isMobile] = useMobile()
+
+  const {
+    state: {
+      companyInfo,
+    },
+  } = useContext(GlobaledContext)
+
+  const addEditUserRef = useRef<RefCurrntProps | null>(null)
+
+  const initSearch = {
+    first: 9,
+    offset: 0,
+    search: '',
+    role: '',
+    companyId: companyInfo?.id || '',
+  }
+
+  const [filterSearch, setFilterSearch] = useState<Partial<filterProps>>(initSearch)
+
+  const fetchList = async () => {
+    try {
+      setIsRequestLoading(true)
+      const data = await getUsers(filterSearch)
+
+      const {
+        users: {
+          edges,
+          totalCount,
+        },
+      } = data
+
+      if (isMobile) {
+        const list = pagination.offset > 0 ? [...usersList, ...edges] : [...edges]
+        setUsersList(list)
+      } else {
+        setUsersList(edges)
+      }
+
+      const ListPagination = {
+        ...pagination,
+      }
+
+      ListPagination.count = totalCount
+
+      setPagination(ListPagination)
+    } finally {
+      setIsRequestLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchList()
+  }, [filterSearch])
+
+  const fiterMoreInfo = getFilterMoreList()
+
+  const handleChange = (key:string, value: string) => {
+    const search = {
+      ...filterSearch,
+      search: value,
+      offset: 0,
+    }
+    const listPagination = {
+      ...pagination,
+      offset: 0,
+    }
+
+    setPagination(listPagination)
+    setFilterSearch(search)
+  }
+
+  const handleFirterChange = (value: RoleProps) => {
+    const search = {
+      ...filterSearch,
+      role: value.role,
+      offset: 0,
+    }
+    const listPagination = {
+      ...pagination,
+      offset: 0,
+    }
+
+    setPagination(listPagination)
+    setFilterSearch(search)
+  }
+
+  const handleAddUserClick = () => {
+    addEditUserRef.current?.handleOpenAddEditUserClick('add')
+  }
+
+  const handleEdit = (userInfo: UsersList) => {
+    addEditUserRef.current?.handleOpenAddEditUserClick('edit', userInfo)
+  }
+
+  const handleDelete = (row: UsersList) => {
+    setUserItem(row)
+    setDeleteOpen(true)
+  }
+
+  const handlePaginationChange = (pagination: Pagination) => {
+    console.log(pagination, 'pagination')
+    const search = {
+      ...filterSearch,
+      first: pagination.first,
+      offset: pagination.offset,
+    }
+    setFilterSearch(search)
+    setPagination(pagination)
+  }
+
+  const handleCancelClick = () => {
+    setDeleteOpen(false)
+  }
+
+  const handleDeleteUserClick = async (row: UsersList | undefined) => {
+    if (!row) return
+    try {
+      setIsRequestLoading(true)
+      handleCancelClick()
+      await deleteUsers({
+        userId: row.id,
+        companyId: companyInfo?.id || '',
+      })
+      fetchList()
+    } finally {
+      setIsRequestLoading(false)
+    }
+  }
+
+  return (
+    <B3Sping
+      isSpinning={isRequestLoading}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        }}
+      >
+        <B3Filter
+          fiterMoreInfo={fiterMoreInfo}
+          handleChange={handleChange}
+          handleFilterChange={handleFirterChange}
+          customButtomConfig={customItem}
+          handleFilterCustomButtomClick={handleAddUserClick}
+        />
+        <B3Table
+          columnItems={[]}
+          listItems={usersList}
+          pagination={pagination}
+          rowsPerPageOptions={[9, 18, 27]}
+          onPaginationChange={handlePaginationChange}
+          isCustomRender
+          isInfiniteScroll={isMobile}
+          isLoading={isRequestLoading}
+          renderItem={(row: UsersList) => (
+            <UserItemCard
+              key={row.id}
+              item={row}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+            />
+          )}
+        />
+        <B3AddEditUser
+          companyId={companyInfo?.id || ''}
+          renderList={fetchList}
+          ref={addEditUserRef}
+        />
+        <B3Dialog
+          isOpen={deleteOpen}
+          title="Delete user? "
+          leftSizeBtn="cancel"
+          rightSizeBtn="delete"
+          handleLeftClick={handleCancelClick}
+          handRightClick={handleDeleteUserClick}
+          row={userItem}
+          rightStyleBtn={{
+            color: 'red',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: `${isMobile ? 'center%' : 'start'}`,
+              width: `${isMobile ? '100%' : '450px'}`,
+              height: '100%',
+            }}
+          >
+            Are you sure you want to delete this user?
+          </Box>
+        </B3Dialog>
+      </Box>
+    </B3Sping>
+  )
+}
+
+export default Usermanagement
diff --git a/apps/storefront/src/pages/usermanagement/config.ts b/apps/storefront/src/pages/usermanagement/config.ts
new file mode 100644
index 00000000..3f26f2b5
--- /dev/null
+++ b/apps/storefront/src/pages/usermanagement/config.ts
@@ -0,0 +1,133 @@
+interface UsersListItems {
+  createdAt: number
+  email: string
+  firstName: string
+  id : string
+  lastName: string
+  phone: string
+  role: number
+  updatedAt: number
+  [key: string]: string | null | number
+}
+
+interface filterProps {
+  first: number,
+  offset: number,
+  search: string,
+  role: number | string,
+  companyId: number | string,
+  [key: string]: string | null | number
+}
+
+type UsersList = UsersListItems
+
+interface UsersFilesProps {
+  [key: string]: string | boolean | number | Array<any> | boolean | undefined
+  name: string
+}
+
+interface UserRoleProps {
+  label: string
+  value: number
+}
+
+const getUserRole = () => {
+  const userRole: Array<UserRoleProps> = [
+    {
+      label: 'Admin',
+      value: 0,
+    },
+    {
+      label: 'Senior buyer',
+      value: 1,
+    },
+    {
+      label: 'Junior buyer',
+      value: 2,
+    },
+  ]
+
+  return userRole
+}
+
+const getFilterMoreList = () => {
+  const filterMoreList = [
+    {
+      name: 'role',
+      label: 'Role',
+      required: false,
+      default: '',
+      fieldType: 'dropdown',
+      options: getUserRole(),
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+  ]
+
+  return filterMoreList
+}
+
+const getUsersFiles = (type: string) => {
+  const roleArr = [...getFilterMoreList()]
+  roleArr[0].required = true
+  const usersFiles = [
+    ...roleArr,
+    {
+      name: 'email',
+      label: 'Email',
+      required: true,
+      fieldType: 'text',
+      xs: 12,
+      disabled: type === 'edit',
+      default: '',
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'firstName',
+      label: 'First Name',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'lastName',
+      label: 'Last Name',
+      required: true,
+      fieldType: 'text',
+      xs: 12,
+      default: '',
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'phone',
+      label: 'Phone Number',
+      required: false,
+      fieldType: 'text',
+      xs: 12,
+      default: '',
+      variant: 'filled',
+      size: 'small',
+    },
+  ]
+
+  return usersFiles
+}
+
+export {
+  getFilterMoreList,
+  getUsersFiles,
+  getUserRole,
+}
+
+export type {
+  UsersList,
+  UsersFilesProps,
+  filterProps,
+  UserRoleProps,
+}
diff --git a/apps/storefront/src/shared/routes/routes.ts b/apps/storefront/src/shared/routes/routes.ts
index 8b1f92ea..3d0f9316 100644
--- a/apps/storefront/src/shared/routes/routes.ts
+++ b/apps/storefront/src/shared/routes/routes.ts
@@ -12,6 +12,8 @@ const OrderDetail = lazy(() => import('../../pages/orderDetail/OrderDetail'))
 
 const InvoiceDetail = lazy(() => import('../../pages/invoiceDetail/InvoiceDetail'))
 
+const Usermanagement = lazy(() => import('../../pages/usermanagement/Usermanagement'))
+
 type OrderItem = typeof OrderList
 
 export interface RouteItem {
@@ -58,6 +60,13 @@ const routes: RouteItem[] = [
     isMenuItem: true,
     component: Dashboard,
   },
+  {
+    path: '/userManagement',
+    name: 'userManagement',
+    wsKey: 'router-userManagement',
+    isMenuItem: true,
+    component: Usermanagement,
+  },
   // {
   //   path: '/',
   //   name: 'seleRep',
diff --git a/apps/storefront/src/shared/service/b2b/graphql/users.ts b/apps/storefront/src/shared/service/b2b/graphql/users.ts
new file mode 100644
index 00000000..11ea455b
--- /dev/null
+++ b/apps/storefront/src/shared/service/b2b/graphql/users.ts
@@ -0,0 +1,73 @@
+import {
+  B3Request,
+} from '../../request/b3Fetch'
+
+// search: "${data.q || ''}"
+
+const getUsersQl = (data: CustomFieldItems) => `{
+  users (
+    first: ${data.first}
+    offset: ${data.offset}
+    companyId: ${data.companyId}
+    ${data.role === '' ? '' : `role: ${data.role}`}
+  ){
+    totalCount,
+    pageInfo{
+      hasNextPage,
+      hasPreviousPage,
+    },
+    edges{
+      node{
+        id,
+        createdAt,
+        updatedAt,
+        firstName,
+        lastName,
+        email,
+        phone,
+        bcId,
+        role,
+        uuid,
+      }
+    }
+  }
+}`
+
+const addOrUpdateUsersQl = (data: CustomFieldItems) => `mutation{
+  ${data?.userId ? 'userUpdate' : 'userCreate'} (
+    userData: {
+      companyId: ${data.companyId}
+      ${data?.email ? `email: "${data.email}"` : ''}
+      firstName: "${data.firstName || ''}"
+      lastName: "${data.lastName || ''}"
+      phone: "${data.phone || ''}"
+      role: ${data.role}
+      ${data?.userId ? `userId: ${data.userId}` : ''}
+    }
+  ){
+    user{
+      id,
+      bcId,
+    }
+  }
+}`
+
+const deleteUsersQl = (data: CustomFieldItems) => `mutation{
+  userDelete (
+    companyId: ${data.companyId}
+    userId: ${data.userId}
+  ){
+    message
+  }
+}`
+export const getUsers = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlB2B({
+  query: getUsersQl(data),
+})
+
+export const addOrUpdateUsers = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlB2B({
+  query: addOrUpdateUsersQl(data),
+})
+
+export const deleteUsers = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlB2B({
+  query: deleteUsersQl(data),
+})
diff --git a/apps/storefront/src/shared/service/b2b/index.ts b/apps/storefront/src/shared/service/b2b/index.ts
index 1611eb2f..67e0ccd3 100644
--- a/apps/storefront/src/shared/service/b2b/index.ts
+++ b/apps/storefront/src/shared/service/b2b/index.ts
@@ -55,6 +55,12 @@ import {
   getB2BVariantInfoBySkus,
 } from './graphql/product'
 
+import {
+  getUsers,
+  addOrUpdateUsers,
+  deleteUsers,
+} from './graphql/users'
+
 export {
   getB2BRegisterCustomFields,
   getB2BRegisterLogo,
@@ -86,4 +92,7 @@ export {
   getOrderStatusType,
   getB2BVariantInfoBySkus,
   getBcOrderStatusType,
+  getUsers,
+  addOrUpdateUsers,
+  deleteUsers,
 }