diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
index 16728f48..6522cba6 100644
--- a/apps/storefront/src/App.tsx
+++ b/apps/storefront/src/App.tsx
@@ -103,7 +103,6 @@ export default function App() {
     background: ${backgroundColor};
     font-family: Roboto;
   };`
-  // const [openApp, setOpenApp] = useState<boolean>(false)
 
   useDomHooks({ setOpenPage })
 
diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
index b98d7501..b0c78269 100644
--- a/apps/storefront/src/components/table/B3PaginationTable.tsx
+++ b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -60,7 +60,7 @@ interface B3PaginationTableProps {
   onClickRow?: (item: any, index?: number) => void
   showRowsPerPageOptions?: boolean
   sortDirection?: 'asc' | 'desc'
-  sortByFn?: (node: CustomFieldItems) => void
+  sortByFn?: (e: { key: string }) => void
   orderBy?: string
 }
 
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
index b529fd99..06fa53ec 100644
--- a/apps/storefront/src/components/table/B3Table.tsx
+++ b/apps/storefront/src/components/table/B3Table.tsx
@@ -90,7 +90,7 @@ interface TableProps<T> {
   isSelectOtherPageCheckbox?: boolean
   isAllSelect?: boolean
   sortDirection?: 'asc' | 'desc'
-  sortByFn?: (node: any) => void
+  sortByFn?: (e: { key: string }) => void
   orderBy?: string
 }
 
diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
index 249ae220..c0fecaed 100644
--- a/apps/storefront/src/hooks/index.ts
+++ b/apps/storefront/src/hooks/index.ts
@@ -10,4 +10,5 @@ export { default as useMobile } from './useMobile'
 export { default as useRole } from './useRole'
 export { default as useScrollBar } from './useScrollBar'
 export { default as useSetOpen } from './useSetOpen'
+export { default as useSort } from './useSort'
 export { default as useTableRef } from './useTableRef'
diff --git a/apps/storefront/src/hooks/useSort.ts b/apps/storefront/src/hooks/useSort.ts
new file mode 100644
index 00000000..9ec96241
--- /dev/null
+++ b/apps/storefront/src/hooks/useSort.ts
@@ -0,0 +1,25 @@
+import { useState } from 'react'
+
+const useSort = <T>(
+  sortKeys: { [key: string]: string },
+  initKey: string,
+  filterData: T,
+  setFilterData: React.Dispatch<React.SetStateAction<T>>
+): [(e: { key: string }) => void, 'asc' | 'desc', string] => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
+  const [orderBy, setOrderBy] = useState<string>(initKey)
+
+  const handleSetOrderBy = (e: { key: string }) => {
+    const sortDirection = order === 'asc' ? 'desc' : 'asc'
+    setOrder(sortDirection)
+    setOrderBy(e.key)
+    setFilterData({
+      ...filterData,
+      orderBy: order === 'asc' ? sortKeys[e.key] : `-${sortKeys[e.key]}`,
+    })
+  }
+
+  return [handleSetOrderBy, order, orderBy]
+}
+
+export default useSort
diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
index 3ce6edd2..6bbd9009 100644
--- a/apps/storefront/src/pages/dashboard/Dashboard.tsx
+++ b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -15,6 +15,7 @@ import { styled } from '@mui/material/styles'
 import { B3Sping, showPageMask } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
+import { useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import { superAdminCompanies } from '@/shared/service/b2b'
 import { endMasquerade, startMasquerade } from '@/utils'
@@ -38,6 +39,14 @@ interface DashboardProps {
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>
 }
 
+export const defaultSortKey = 'companyName'
+
+export const sortKeys = {
+  companyName: 'companyName',
+  companyAdminName: 'companyAdminName',
+  companyEmail: 'companyEmail',
+}
+
 const StyledMenu = styled(Menu)(() => ({
   '& .MuiPaper-elevation': {
     boxShadow:
@@ -124,8 +133,16 @@ function Dashboard(props: DashboardProps) {
 
   const [filterData, setFilterData] = useState<ListItem>({
     q: '',
+    orderBy: `-${sortKeys[defaultSortKey]}`,
   })
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   const location = useLocation()
 
   const getSuperAdminCompaniesList = async (params: ListItem) => {
@@ -222,14 +239,17 @@ function Dashboard(props: DashboardProps) {
           )}
         </Box>
       ),
+      isSortable: true,
     },
     {
       key: 'companyAdminName',
       title: 'Admin',
+      isSortable: true,
     },
     {
       key: 'companyEmail',
       title: 'Email',
+      isSortable: true,
     },
     {
       key: 'companyName',
@@ -276,6 +296,9 @@ function Dashboard(props: DashboardProps) {
           isCustomRender={false}
           requestLoading={setIsRequestLoading}
           tableKey="id"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           renderItem={(row: ListItem) => (
             <DashboardCard
               row={row}
diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
index 6ff28b3c..39ed049a 100644
--- a/apps/storefront/src/pages/invoice/Invoice.tsx
+++ b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -12,7 +12,7 @@ import { cloneDeep } from 'lodash'
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
-import { useMobile } from '@/hooks'
+import { useMobile, useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   exportInvoicesAsCSV,
@@ -37,7 +37,11 @@ import InvoiceStatus from './components/InvoiceStatus'
 import PaymentsHistory from './components/PaymentsHistory'
 import PaymentSuccess from './components/PaymentSuccess'
 import PrintTempalte from './components/PrintTempalte'
-import InvoiceListType, { filterFormConfig, sortIdArr } from './utils/config'
+import InvoiceListType, {
+  defaultSortKey,
+  filterFormConfig,
+  sortIdArr,
+} from './utils/config'
 import { handlePrintPDF } from './utils/pdf'
 import { InvoiceItemCard } from './InvoiceItemCard'
 
@@ -58,6 +62,7 @@ const initFilter = {
   q: '',
   first: 10,
   offset: 0,
+  orderBy: sortIdArr[defaultSortKey],
 }
 
 function Invoice() {
@@ -87,12 +92,17 @@ function Invoice() {
     CustomFieldItems | InvoiceListNode[]
   >([])
   const [list, setList] = useState<InvoiceListNode[]>([])
-  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
-  const [orderBy, setOrderBy] = useState<string>('id')
 
   const [filterData, setFilterData] =
     useState<Partial<FilterSearchProps> | null>()
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortIdArr,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   const location = useLocation()
 
   const handleGetCorrespondingCurrency = (code: string) => {
@@ -372,20 +382,6 @@ function Invoice() {
     }
   }
 
-  const handleSetOrderBy = (e: CustomFieldItems) => {
-    const sortDirection = order === 'asc' ? 'desc' : 'asc'
-    setOrder(sortDirection)
-    setOrderBy(e.key)
-
-    setFilterData({
-      ...filterData,
-      orderBy:
-        sortDirection === 'asc'
-          ? `${sortIdArr[e.key]}`
-          : `-${sortIdArr[e.key]}`,
-    })
-  }
-
   const handleSetSelectedInvoiceAccountNumber = (val: string, id: string) => {
     let result = val
     if (val.includes('.')) {
@@ -582,6 +578,7 @@ function Invoice() {
     {
       key: 'status',
       title: 'Status',
+      isSortable: true,
       render: (item: InvoiceList) => {
         const { status, dueDate } = item
         let code = item.status
diff --git a/apps/storefront/src/pages/invoice/utils/config.ts b/apps/storefront/src/pages/invoice/utils/config.ts
index 04a42f9c..b1224632 100644
--- a/apps/storefront/src/pages/invoice/utils/config.ts
+++ b/apps/storefront/src/pages/invoice/utils/config.ts
@@ -52,6 +52,8 @@ export const filterFormConfig = [
   },
 ]
 
+export const defaultSortKey = 'id'
+
 export const sortIdArr: { [key: string]: string } = {
   id: 'invoiceNumber',
   orderNumber: 'orderNumber',
@@ -59,5 +61,6 @@ export const sortIdArr: { [key: string]: string } = {
   updatedAt: 'dueDate',
   originalBalance: 'originalBalanceAmount',
   openBalance: 'openBalanceAmount',
+  status: 'status',
 }
 export default InvoiceListType
diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
index 9e67bd4f..26be1272 100644
--- a/apps/storefront/src/pages/order/Order.tsx
+++ b/apps/storefront/src/pages/order/Order.tsx
@@ -5,6 +5,7 @@ import { Box } from '@mui/material'
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
+import { useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   getB2BAllOrders,
@@ -19,10 +20,12 @@ import B3Filter from '../../components/filter/B3Filter'
 
 import OrderStatus from './components/OrderStatus'
 import {
+  defaultSortKey,
   FilterSearchProps,
   getFilterMoreData,
   getInitFilter,
   getOrderStatusText,
+  sortKeys,
 } from './config'
 import { OrderItemCard } from './OrderItemCard'
 
@@ -42,39 +45,6 @@ interface SearchChangeProps {
   orderStatus?: string | number
   company?: string
 }
-interface SortByListProps {
-  [key: string]: number | string
-}
-
-const sortByList: Array<SortByListProps> = [
-  {
-    name: 'Created on',
-    id: '-createdAt',
-  },
-  {
-    name: 'Lowest total',
-    id: 'totalIncTax',
-  },
-  {
-    name: 'Highest total',
-    id: '-totalIncTax',
-  },
-]
-
-const sortByItemName = {
-  labelName: 'name',
-  valueName: 'id',
-}
-
-const sortByConfigData = {
-  isEnabled: true,
-  sortByList,
-  sortByItemName,
-  sortByLabel: 'Sort by',
-  defaultValue: '-createdAt',
-  isFirstSelect: false,
-  w: 150,
-}
 
 interface OrderProps {
   isCompanyOrder?: boolean
@@ -102,6 +72,13 @@ function Order({ isCompanyOrder = false }: OrderProps) {
 
   const [getOrderStatuses, setOrderStatuses] = useState<Array<any>>([])
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   useEffect(() => {
     const search = getInitFilter(isCompanyOrder, isB2BUser)
     setFilterData(search)
@@ -167,6 +144,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
       key: 'orderId',
       title: 'Order',
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'poNumber',
@@ -175,6 +153,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         <Box>{item.poNumber ? item.poNumber : '–'}</Box>
       ),
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'totalIncTax',
@@ -184,6 +163,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
       style: {
         textAlign: 'right',
       },
+      isSortable: true,
     },
     {
       key: 'status',
@@ -195,18 +175,21 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         />
       ),
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'placedby',
       title: 'Placed by',
       render: (item: ListItem) => `${item.firstName} ${item.lastName}`,
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'createdAt',
       title: 'Created on',
       render: (item: ListItem) => `${displayFormat(+item.createdAt)}`,
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'companyId',
@@ -242,11 +225,6 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         ...filterData,
         q: value,
       })
-    } else if (key === 'sortBy') {
-      setFilterData({
-        ...filterData,
-        orderBy: value,
-      })
     }
   }
 
@@ -276,7 +254,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         }}
       >
         <B3Filter
-          sortByConfig={sortByConfigData}
+          // sortByConfig={sortByConfigData}
           startPicker={{
             isEnabled: true,
             label: 'From',
@@ -301,6 +279,9 @@ function Order({ isCompanyOrder = false }: OrderProps) {
           isCustomRender={false}
           requestLoading={setIsRequestLoading}
           tableKey="orderId"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           renderItem={(row: ListItem, index?: number) => (
             <OrderItemCard
               key={row.orderId}
diff --git a/apps/storefront/src/pages/order/config.ts b/apps/storefront/src/pages/order/config.ts
index 972ec149..62b92a2a 100644
--- a/apps/storefront/src/pages/order/config.ts
+++ b/apps/storefront/src/pages/order/config.ts
@@ -18,15 +18,25 @@ export interface FilterMoreProps {
   orderStatus?: string | number
 }
 
+export const defaultSortKey = 'orderId'
+
+export const sortKeys = {
+  orderId: 'bcOrderId',
+  poNumber: 'poNumber',
+  totalIncTax: 'totalIncTax',
+  status: 'status',
+  placedby: 'placedBy',
+  createdAt: 'createdAt',
+}
+
 const b2bFilterSearch: FilterSearchProps = {
-  // offset: 0,
-  // first: 10,
   q: '',
   companyId: '',
   beginDateAt: null,
   endDateAt: null,
   companyName: '',
-  orderBy: '-createdAt',
+  // orderBy: `-${sortKeys[defaultSortKey]}`,
+  orderBy: '',
   createdBy: '',
   orderNumber: '',
   poNumber: '',
@@ -34,11 +44,10 @@ const b2bFilterSearch: FilterSearchProps = {
 }
 
 const bcFilterSearch = {
-  // offset: 0,
-  // first: 10,
   beginDateAt: null,
   endDateAt: null,
-  orderBy: '-createdAt',
+  orderBy: '',
+  // orderBy: `-${sortKeys[defaultSortKey]}`,
   createdBy: '',
   q: '',
 }
diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
index 7c631479..db5e6033 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -1,16 +1,12 @@
 import { Fragment, ReactNode, useContext, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import styled from '@emotion/styled'
 import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
 import { throttle } from 'lodash'
 
 import { CustomButton } from '@/components'
 import { GlobaledContext } from '@/shared/global'
-import {
-  b2bPrintInvoice,
-  currencyFormat,
-  displayFormat,
-  snackbar,
-} from '@/utils'
+import { currencyFormat, displayFormat, snackbar } from '@/utils'
 
 import { Address, OrderCurrency, OrderProductItem } from '../../../types'
 import {
@@ -83,6 +79,7 @@ interface OrderCardProps {
   itemKey: string
   orderId: string
   role: number | string
+  invoiceId?: number | string | undefined | null
 }
 
 interface DialogData {
@@ -93,8 +90,17 @@ interface DialogData {
 }
 
 function OrderCard(props: OrderCardProps) {
-  const { header, subtitle, buttons, infos, products, itemKey, orderId, role } =
-    props
+  const {
+    header,
+    subtitle,
+    buttons,
+    infos,
+    products,
+    itemKey,
+    orderId,
+    role,
+    invoiceId,
+  } = props
 
   const {
     state: { isAgenting },
@@ -121,6 +127,8 @@ function OrderCard(props: OrderCardProps) {
     },
   ]
 
+  const navigate = useNavigate()
+
   const [open, setOpen] = useState<boolean>(false)
   const [type, setType] = useState<string>('')
   const [currentDialogData, setCurrentDialogData] = useState<DialogData>()
@@ -137,7 +145,7 @@ function OrderCard(props: OrderCardProps) {
 
   const handleOpenDialog = (name: string) => {
     if (name === 'viewInvoice') {
-      b2bPrintInvoice(orderId, 'b2b_print_invoice')
+      navigate(`/invoice?invoiceId=${invoiceId}`)
     } else if (name === 'printInvoice') {
       window.open(`/account.php?action=print_invoice&order_id=${orderId}`)
     } else {
@@ -251,11 +259,11 @@ interface OrderData {
 export default function OrderAction(props: OrderActionProps) {
   const { detailsData } = props
   const {
-    state: { isB2BUser, role, emailAddress },
+    state: { isB2BUser, role },
   } = useContext(GlobaledContext)
 
   const {
-    state: { addressLabelPermission, createdEmail },
+    state: { addressLabelPermission },
   } = useContext(OrderDetailsContext)
 
   const {
@@ -267,6 +275,7 @@ export default function OrderAction(props: OrderActionProps) {
     orderId,
     ipStatus = 0,
     canReturn = false,
+    invoiceId,
   } = detailsData
 
   if (!orderId) {
@@ -383,8 +392,7 @@ export default function OrderAction(props: OrderActionProps) {
           key: 'aboutInvoice',
           name: isB2BUser ? 'viewInvoice' : 'printInvoice',
           variant: 'outlined',
-          isCanShow:
-            (!isB2BUser || +ipStatus !== 0) && createdEmail === emailAddress,
+          isCanShow: !isB2BUser || +ipStatus === 1,
         },
       ],
       infos: {
@@ -412,6 +420,7 @@ export default function OrderAction(props: OrderActionProps) {
             {...item}
             itemKey={item.key}
             role={role}
+            invoiceId={invoiceId}
           />
         ))}
     </OrderActionContainer>
diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
index 5a6067fa..3b4501b6 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
@@ -12,7 +12,7 @@ import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
-import { useMobile } from '@/hooks'
+import { useMobile, useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   getBcOrderedProducts,
@@ -71,6 +71,7 @@ interface SearchProps {
   offset?: number
   beginDateAt?: Date | string | number
   endDateAt?: Date | string | number
+  orderBy: string
 }
 
 interface PaginationTableRefProps extends HTMLInputElement {
@@ -117,6 +118,13 @@ const StyledTextField = styled(TextField)(() => ({
   },
 }))
 
+export const defaultSortKey = 'lastOrderedAt'
+
+export const sortKeys = {
+  product: 'productName',
+  lastOrderedAt: 'lastOrderedAt',
+}
+
 function QuickorderTable({
   setIsRequestLoading,
   setCheckedArr,
@@ -136,8 +144,16 @@ function QuickorderTable({
     q: '',
     beginDateAt: distanceDay(90),
     endDateAt: distanceDay(0),
+    orderBy: sortKeys[defaultSortKey],
   })
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    search,
+    setSearch
+  )
+
   const [total, setTotalCount] = useState<number>(0)
 
   const [isMobile] = useMobile()
@@ -287,7 +303,7 @@ function QuickorderTable({
 
   const columnItems: TableColumnItem<ListItem>[] = [
     {
-      key: 'Product',
+      key: 'product',
       title: 'Product',
       render: (row: CustomFieldItems) => {
         const { optionList } = row
@@ -331,9 +347,10 @@ function QuickorderTable({
         )
       },
       width: '40%',
+      isSortable: true,
     },
     {
-      key: 'Price',
+      key: 'price',
       title: 'Price',
       render: (row: CustomFieldItems) => {
         const {
@@ -367,7 +384,7 @@ function QuickorderTable({
       },
     },
     {
-      key: 'Qty',
+      key: 'qty',
       title: 'Qty',
       render: (row) => (
         <StyledTextField
@@ -407,6 +424,7 @@ function QuickorderTable({
       style: {
         textAlign: 'right',
       },
+      isSortable: true,
     },
   ]
 
@@ -516,6 +534,9 @@ function QuickorderTable({
           itemIsMobileSpacing={0}
           isSelectOtherPageCheckbox
           noDataText="No products found"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           renderItem={(
             row: ProductInfoProps,
             index?: number,
diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
index 61307890..e813c918 100644
--- a/apps/storefront/src/pages/quote/QuotesList.tsx
+++ b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -5,7 +5,7 @@ import { Box } from '@mui/material'
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
-import { useMobile } from '@/hooks'
+import { useMobile, useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   getB2BQuotesList,
@@ -20,10 +20,6 @@ import { QuoteItemCard } from './components/QuoteItemCard'
 import QuoteStatus from './components/QuoteStatus'
 import { addPrice } from './shared/config'
 
-interface SortByListProps {
-  [key: string]: number | string
-}
-
 interface ListItem {
   [key: string]: string | Object
   status: string
@@ -44,40 +40,6 @@ interface FilterSearchProps {
   endValue: string
 }
 
-const sortByList: Array<SortByListProps> = [
-  {
-    name: 'Date created',
-    id: 'createdAt',
-  },
-  {
-    name: 'Status',
-    id: 'status',
-  },
-  {
-    name: 'Updated',
-    id: 'updatedAt',
-  },
-  {
-    name: 'Expiration',
-    id: 'expiredAt',
-  },
-]
-
-const sortByItemName = {
-  labelName: 'name',
-  valueName: 'id',
-}
-
-const sortByConfigData = {
-  isEnabled: true,
-  sortByList,
-  sortByItemName,
-  sortByLabel: 'Sort by',
-  defaultValue: 'createdAt',
-  isFirstSelect: false,
-  w: 150,
-}
-
 const quotesStatuses = [
   {
     customLabel: 'Open',
@@ -159,10 +121,23 @@ const getFilterMoreList = (isB2BUser: boolean, createdByUsers: any) => {
   return filterCurrentMoreList
 }
 
+const defaultSortKey = 'quoteNumber'
+
+const sortKeys = {
+  quoteNumber: 'quoteNumber',
+  quoteTitle: 'quoteTitle',
+  salesRep: 'salesRep',
+  createdBy: 'createdBy',
+  createdAt: 'createdAt',
+  updatedAt: 'updatedAt',
+  expiredAt: 'expiredAt',
+  status: 'status',
+}
+
 function QuotesList() {
   const initSearch = {
     q: '',
-    orderBy: '',
+    orderBy: `-${sortKeys[defaultSortKey]}`,
     createdBy: '',
     salesRep: '',
     status: '',
@@ -176,6 +151,13 @@ function QuotesList() {
 
   const [filterMoreInfo, setFilterMoreInfo] = useState<Array<any>>([])
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   const navigate = useNavigate()
 
   const [isMobile] = useMobile()
@@ -286,19 +268,23 @@ function QuotesList() {
     {
       key: 'quoteNumber',
       title: 'Quote #',
+      isSortable: true,
     },
     {
       key: 'quoteTitle',
       title: 'Title',
+      isSortable: true,
     },
     {
       key: 'salesRep',
       title: 'Sales rep',
       render: (item: ListItem) => `${item.salesRep || item.salesRepEmail}`,
+      isSortable: true,
     },
     {
       key: 'createdBy',
       title: 'Created by',
+      isSortable: true,
     },
     {
       key: 'createdAt',
@@ -307,6 +293,7 @@ function QuotesList() {
         `${
           +item.status !== 0 ? displayFormat(+item.createdAt) : item.createdAt
         }`,
+      isSortable: true,
     },
     {
       key: 'updatedAt',
@@ -315,6 +302,7 @@ function QuotesList() {
         `${
           +item.status !== 0 ? displayFormat(+item.updatedAt) : item.updatedAt
         }`,
+      isSortable: true,
     },
     {
       key: 'expiredAt',
@@ -323,6 +311,7 @@ function QuotesList() {
         `${
           +item.status !== 0 ? displayFormat(+item.expiredAt) : item.expiredAt
         }`,
+      isSortable: true,
     },
     {
       key: 'totalAmount',
@@ -340,6 +329,7 @@ function QuotesList() {
       key: 'status',
       title: 'Status',
       render: (item: ListItem) => <QuoteStatus code={item.status} />,
+      isSortable: true,
     },
   ]
 
@@ -349,11 +339,6 @@ function QuotesList() {
         ...filterData,
         q: value,
       })
-    } else if (key === 'sortBy') {
-      setFilterData({
-        ...filterData,
-        orderBy: value,
-      })
     }
   }
 
@@ -382,7 +367,7 @@ function QuotesList() {
         }}
       >
         <B3Filter
-          sortByConfig={sortByConfigData}
+          // sortByConfig={sortByConfigData}
           fiterMoreInfo={filterMoreInfo}
           startPicker={{
             isEnabled: true,
@@ -407,6 +392,9 @@ function QuotesList() {
           isCustomRender={false}
           requestLoading={setIsRequestLoading}
           tableKey="quoteNumber"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           labelRowsPerPage={`${
             isMobile ? 'Cards per page' : 'Quotes per page'
           }`}
diff --git a/apps/storefront/src/shared/service/b2b/graphql/global.ts b/apps/storefront/src/shared/service/b2b/graphql/global.ts
index 80389bcf..3af518f8 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/global.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/global.ts
@@ -32,6 +32,7 @@ const superAdminCompaniesQl = (id: number, params: CustomFieldItems) => `{
     first: ${params.first}
     offset: ${params.offset}
     search: "${params.q || ''}"
+    orderBy: "${params.orderBy}"
   ) {
     edges{
       node{
diff --git a/apps/storefront/src/shared/service/b2b/graphql/invoice.ts b/apps/storefront/src/shared/service/b2b/graphql/invoice.ts
index 944b1ef6..12a248f4 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/invoice.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/invoice.ts
@@ -13,7 +13,7 @@ const invoiceList = (data: CustomFieldItems) => `{
     }
     ${data?.beginDateAt ? `beginDateAt: "${data.beginDateAt}"` : ''}
     ${data?.endDateAt ? `endDateAt: "${data.endDateAt}"` : ''}
-    orderBy: "${data?.orderBy || '-invoiceNumber'}"
+    orderBy: "${data?.orderBy}"
     ${data?.beginDueDateAt ? `beginDueDateAt: "${data.beginDueDateAt}"` : ''}
     ${data?.endDueDateAt ? `endDueDateAt: "${data.endDueDateAt}"` : ''}
   ){
diff --git a/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts b/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts
index 2112656e..d7eb2742 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts
@@ -12,6 +12,7 @@ const orderedProducts = (data: CustomFieldItems) => `{
     offset: ${data.offset}
     beginDateAt: "${data.beginDateAt}"
     endDateAt: "${data.endDateAt}"
+    orderBy: "${data?.orderBy || ''}"
   ){
     totalCount,
     pageInfo{