diff --git a/src/components/nearle_components/LocationAutocomplete.js b/src/components/nearle_components/LocationAutocomplete.js
index cce408f..65f5766 100644
--- a/src/components/nearle_components/LocationAutocomplete.js
+++ b/src/components/nearle_components/LocationAutocomplete.js
@@ -76,7 +76,7 @@ const LocationAutocomplete = forwardRef(({ locaName, setAppId, setLocoName, setP
   };
 
   return (
-    <div ref={wrapRef} style={{ width }}>
+    <div ref={wrapRef} style={{ width, maxWidth: '100%' }}>
       <Selector
         label="Zone"
         isLabelHidden
diff --git a/src/pages/nearle/appUsers/appUsers.js b/src/pages/nearle/appUsers/appUsers.js
index 6c72245..ce0face 100644
--- a/src/pages/nearle/appUsers/appUsers.js
+++ b/src/pages/nearle/appUsers/appUsers.js
@@ -158,7 +158,7 @@ const AppUsers = () => {
                 </Text>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -174,7 +174,7 @@ const AppUsers = () => {
             <Table density="balanced" dividers="rows" hasHover>
               <TableHeader>
                 <TableRow>
-                  <TableHeaderCell>#</TableHeaderCell>
+                  <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                   <TableHeaderCell>Name</TableHeaderCell>
                   <TableHeaderCell>Email</TableHeaderCell>
                   <TableHeaderCell>Phone</TableHeaderCell>
diff --git a/src/pages/nearle/clientPricing/clientPricing.js b/src/pages/nearle/clientPricing/clientPricing.js
index 4417d96..5925508 100644
--- a/src/pages/nearle/clientPricing/clientPricing.js
+++ b/src/pages/nearle/clientPricing/clientPricing.js
@@ -323,7 +323,7 @@ const ClientsPricing = () => {
                 </VStack>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -414,20 +414,20 @@ const ClientsPricing = () => {
               </MobileCardList>
             )
           ) : (
-            <TableScroll minWidth={1180}>
+            <TableScroll minWidth={1260}>
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
-                    <TableHeaderCell>Tenant</TableHeaderCell>
-                    <TableHeaderCell>Zone</TableHeaderCell>
-                    <TableHeaderCell>Vehicle</TableHeaderCell>
-                    <TableHeaderCell>Base Price</TableHeaderCell>
-                    <TableHeaderCell>Price / KM</TableHeaderCell>
-                    <TableHeaderCell>Price / KG</TableHeaderCell>
-                    <TableHeaderCell>Handling</TableHeaderCell>
-                    <TableHeaderCell>Status</TableHeaderCell>
-                    <TableHeaderCell>Actions</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 240 }}>Tenant</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 160 }}>Zone</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 100 }}>Vehicle</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 120 }}>Base Price</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 120 }}>Price / KM</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 120 }}>Price / KG</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 100 }}>Handling</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 100 }}>Status</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 100 }}>Actions</TableHeaderCell>
                   </TableRow>
                 </TableHeader>
 
@@ -448,7 +448,7 @@ const ClientsPricing = () => {
                       <TableRow key={row.pricingid || `${row.tenantid}-${index}`}>
                         <TableCell>
                           <Text type="supporting" weight="bold" color="secondary">
-                            {String(index + 1).padStart(2, '0')}
+                            {index + 1}
                           </Text>
                         </TableCell>
 
diff --git a/src/pages/nearle/clients/Tenants.js b/src/pages/nearle/clients/Tenants.js
index e8b315d..8a19674 100644
--- a/src/pages/nearle/clients/Tenants.js
+++ b/src/pages/nearle/clients/Tenants.js
@@ -487,7 +487,7 @@ const PricingTable = ({ list }) => (
     <Table density="balanced" dividers="rows">
       <TableHeader>
         <TableRow>
-          <TableHeaderCell>#</TableHeaderCell>
+          <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
           <TableHeaderCell>Vehicle</TableHeaderCell>
           <TableHeaderCell>Base Price</TableHeaderCell>
           <TableHeaderCell>Price/Km</TableHeaderCell>
@@ -1133,7 +1133,7 @@ const Clients1 = () => {
                 })}
               </TabList>
 
-              <VStack width={280} padding={0} gap={0}>
+              <VStack maxWidth={280} width="100%" padding={0} gap={0}>
                 <DebounceSearchBar value={searchword} onChange={setSearchword} onDebouncedChange={setDebouncedSearch} />
               </VStack>
             </HStack>
@@ -1144,7 +1144,7 @@ const Clients1 = () => {
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     <TableHeaderCell>Status</TableHeaderCell>
                     <TableHeaderCell>Client</TableHeaderCell>
                     <TableHeaderCell>Contact</TableHeaderCell>
diff --git a/src/pages/nearle/competitiveIntel/competitiveIntel.js b/src/pages/nearle/competitiveIntel/competitiveIntel.js
index a39215a..be96e8e 100644
--- a/src/pages/nearle/competitiveIntel/competitiveIntel.js
+++ b/src/pages/nearle/competitiveIntel/competitiveIntel.js
@@ -264,7 +264,7 @@ const CompetitiveIntel = () => {
               <TableHeader>
                 {tab === 'branches' ? (
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     <TableHeaderCell>Company</TableHeaderCell>
                     <TableHeaderCell>Area</TableHeaderCell>
                     <TableHeaderCell>Phone</TableHeaderCell>
@@ -274,7 +274,7 @@ const CompetitiveIntel = () => {
                   </TableRow>
                 ) : (
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     <TableHeaderCell>Company</TableHeaderCell>
                     <TableHeaderCell>Weight Slab</TableHeaderCell>
                     <TableHeaderCell>Zone</TableHeaderCell>
diff --git a/src/pages/nearle/customers/customers.js b/src/pages/nearle/customers/customers.js
index f7210fa..d0bc7ff 100644
--- a/src/pages/nearle/customers/customers.js
+++ b/src/pages/nearle/customers/customers.js
@@ -203,7 +203,7 @@ const Customers = () => {
                 </VStack>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -268,7 +268,7 @@ const Customers = () => {
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     <TableHeaderCell>Customer</TableHeaderCell>
                     <TableHeaderCell>Contact</TableHeaderCell>
                     <TableHeaderCell>Bookings</TableHeaderCell>
diff --git a/src/pages/nearle/deliveries/deliveries.js b/src/pages/nearle/deliveries/deliveries.js
index 38cd29f..28c817e 100644
--- a/src/pages/nearle/deliveries/deliveries.js
+++ b/src/pages/nearle/deliveries/deliveries.js
@@ -1345,7 +1345,7 @@ const Deliveries = () => {
         <Table density="compact" dividers="rows">
           <TableHeader>
             <TableRow>
-              <TableHeaderCell>#</TableHeaderCell>
+              <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
               <TableHeaderCell>Item</TableHeaderCell>
               <TableHeaderCell>Category</TableHeaderCell>
               <TableHeaderCell style={{ textAlign: 'right' }}>Weight</TableHeaderCell>
@@ -1545,7 +1545,7 @@ const Deliveries = () => {
                 hasDivider={false}
               />
               <HStack gap={2} vAlign="center">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar value={searchword} onChange={setSearchword} onDebouncedChange={setDebouncedSearch} />
                 </VStack>
 
@@ -1781,7 +1781,7 @@ const Deliveries = () => {
                                 key={header.id}
                                 scope="col"
                                 aria-sort={sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : canSort ? 'none' : undefined}
-                                style={{ width: header.getSize(), textAlign: align, position: 'relative' }}
+                                style={{ width: header.getSize(), minWidth: header.column.columnDef.minSize, maxWidth: header.column.columnDef.maxSize || header.getSize(), textAlign: align, position: 'relative' }}
                               >
                                 <HStack
                                   gap={1}
diff --git a/src/pages/nearle/exceptions/exceptions.js b/src/pages/nearle/exceptions/exceptions.js
index 4f7104b..eb89904 100644
--- a/src/pages/nearle/exceptions/exceptions.js
+++ b/src/pages/nearle/exceptions/exceptions.js
@@ -151,7 +151,7 @@ const Exceptions = () => {
                 </Text>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -167,7 +167,7 @@ const Exceptions = () => {
             <Table density="balanced" dividers="rows" hasHover>
               <TableHeader>
                 <TableRow>
-                  <TableHeaderCell>#</TableHeaderCell>
+                  <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                   <TableHeaderCell>Consignment</TableHeaderCell>
                   <TableHeaderCell>Hub</TableHeaderCell>
                   <TableHeaderCell>Type</TableHeaderCell>
diff --git a/src/pages/nearle/hubs/hubs.js b/src/pages/nearle/hubs/hubs.js
index 5026f79..11eb430 100644
--- a/src/pages/nearle/hubs/hubs.js
+++ b/src/pages/nearle/hubs/hubs.js
@@ -184,7 +184,7 @@ const Hubs = () => {
                 </Text>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -200,7 +200,7 @@ const Hubs = () => {
             <Table density="balanced" dividers="rows" hasHover>
               <TableHeader>
                 <TableRow>
-                  <TableHeaderCell>#</TableHeaderCell>
+                  <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                   <TableHeaderCell>Hub Name</TableHeaderCell>
                   <TableHeaderCell>Type</TableHeaderCell>
                   <TableHeaderCell>City</TableHeaderCell>
diff --git a/src/pages/nearle/orders/OrdersPreview.js b/src/pages/nearle/orders/OrdersPreview.js
index 2044b9b..5ebfb52 100644
--- a/src/pages/nearle/orders/OrdersPreview.js
+++ b/src/pages/nearle/orders/OrdersPreview.js
@@ -411,7 +411,7 @@ const OrdersPreview = () => {
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     {aiMode == 1 && <TableHeaderCell>Zone</TableHeaderCell>}
                     <TableHeaderCell>Tenant</TableHeaderCell>
                     <TableHeaderCell>Order Location</TableHeaderCell>
diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js
index 0963d36..b32521c 100644
--- a/src/pages/nearle/orders/multipleOrders.js
+++ b/src/pages/nearle/orders/multipleOrders.js
@@ -1047,7 +1047,7 @@ const MultipleOrders = () => {
                   <Table density="compact" dividers="rows" hasHover>
                     <TableHeader>
                       <TableRow>
-                        <TableHeaderCell>#</TableHeaderCell>
+                        <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                         <TableHeaderCell>Customer</TableHeaderCell>
                         <TableHeaderCell>Address</TableHeaderCell>
                         <TableHeaderCell style={{ textAlign: 'center' }}>Qty</TableHeaderCell>
@@ -1159,7 +1159,7 @@ const MultipleOrders = () => {
                   <Table density="compact" dividers="rows" hasHover>
                     <TableHeader>
                       <TableRow>
-                        <TableHeaderCell>#</TableHeaderCell>
+                        <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                         <TableHeaderCell>Name</TableHeaderCell>
                         <TableHeaderCell>Contact</TableHeaderCell>
                         <TableHeaderCell>Address</TableHeaderCell>
diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js
index 4b2d86b..0578650 100644
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -533,8 +533,8 @@ const Orders = () => {
       },
       {
         id: 'serial',
-        size: 50,
-        minSize: 44,
+        size: 30,
+        minSize: 20,
         enableSorting: false,
         meta: { label: '#' },
         header: () => <SectionLabel>#</SectionLabel>,
@@ -590,8 +590,8 @@ const Orders = () => {
       {
         id: 'pickup',
         accessorKey: 'pickupaddress',
-        size: 280,
-        minSize: 220,
+        size: 320,
+        minSize: 260,
         meta: { label: 'Pickup' },
         header: () => <SectionLabel>Pickup</SectionLabel>,
         cell: ({ getValue, row }) => (
@@ -605,8 +605,8 @@ const Orders = () => {
           const customer = customerMap?.get(row.appcustomerid);
           return customer?.firstname || customer?.name || `Customer #${row.appcustomerid ?? '—'}`;
         },
-        size: 320,
-        minSize: 240,
+        size: 360,
+        minSize: 280,
         meta: { label: 'Drop' },
         header: () => <SectionLabel>Drop</SectionLabel>,
         cell: ({ getValue, row }) => {
@@ -957,7 +957,7 @@ const Orders = () => {
                   whole toolbar — filter tabs, search, column visibility —
                   reads as one control strip instead of two stacked rows. */}
               <HStack gap={2} vAlign="center">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -1032,7 +1032,7 @@ const Orders = () => {
                             // readers announce the column's sort state from
                             // here, not from the clickable content inside.
                             aria-sort={sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : canSort ? 'none' : undefined}
-                            style={{ width: header.getSize(), textAlign: align, position: 'relative' }}
+                            style={{ width: header.getSize(), minWidth: header.column.columnDef.minSize, maxWidth: header.column.columnDef.maxSize || header.getSize(), textAlign: align, position: 'relative' }}
                           >
                             <HStack
                               gap={1}
@@ -1160,7 +1160,7 @@ const Orders = () => {
                       {row.getVisibleCells().map((cell) => (
                         <TableCell
                           key={cell.id}
-                          style={{ textAlign: cell.column.columnDef.meta?.align }}
+                          style={{ textAlign: cell.column.columnDef.meta?.align, maxWidth: cell.column.columnDef.maxSize || cell.column.getSize() }}
                           onClick={cell.column.id === 'select' ? (e) => e.stopPropagation() : undefined}
                         >
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index 0f06c72..117af52 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -513,7 +513,7 @@ export default function OrdersDetails() {
         {/* Toolbar: Zone · Tenant · Location · Rider · Date · Search. */}
         <DataCard
           toolbar={
-            <FilterToolbar>
+            <FilterToolbar max={5} minWidth={200}>
               <LocationAutocomplete
                 locaName={locaName}
                 setAppId={setAppId}
@@ -611,7 +611,7 @@ export default function OrdersDetails() {
                 size="sm"
                 hasDivider={false}
               />
-              <VStack width={260} padding={0} gap={0}>
+              <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                 <DebounceSearchBar
                   value={searchword}
                   onChange={setSearchword}
@@ -806,7 +806,7 @@ export default function OrdersDetails() {
                 <Table density="balanced" dividers="rows" hasHover>
                   <TableHeader>
                     <TableRow>
-                      <TableHeaderCell>#</TableHeaderCell>
+                      <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                       <TableHeaderCell>Map</TableHeaderCell>
                       <TableHeaderCell>Client</TableHeaderCell>
                       <TableHeaderCell>Pickup</TableHeaderCell>
diff --git a/src/pages/nearle/reports/ordersSummary.js b/src/pages/nearle/reports/ordersSummary.js
index 3ee5191..c5ff9b5 100644
--- a/src/pages/nearle/reports/ordersSummary.js
+++ b/src/pages/nearle/reports/ordersSummary.js
@@ -405,7 +405,7 @@ export default function OrdersReport() {
             larger, riskier change than this pass's chrome scope. */}
         <DataCard
           toolbar={
-            <FilterToolbar>
+            <FilterToolbar max={4} minWidth={200}>
               <Button
                 label={`${datestatus} · ${dayjs(startdate).format('DD/MM/YY')}–${dayjs(enddate).format('DD/MM/YY')}`}
                 variant="secondary"
@@ -456,7 +456,7 @@ export default function OrdersReport() {
               />
 
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
diff --git a/src/pages/nearle/reports/ridersSummary.js b/src/pages/nearle/reports/ridersSummary.js
index 2f14ae9..904bb05 100644
--- a/src/pages/nearle/reports/ridersSummary.js
+++ b/src/pages/nearle/reports/ridersSummary.js
@@ -320,29 +320,16 @@ export default function RidersSummary() {
             pair search with. */}
         <DataCard
           toolbar={
-            <FilterToolbar max={2}>
-              <HStack gap={2} vAlign="center">
-                <AccentAvatar color={BRAND} size={32}>
-                  <MdDirectionsBike size={18} />
-                </AccentAvatar>
-                <VStack gap={0} padding={0}>
-                  <Text type="label" weight="bold" color="secondary" style={{ letterSpacing: 0.6, textTransform: 'uppercase' }}>
-                    Orders · {datestatus}
-                  </Text>
-                  <Text weight="bold">
-                    {filteredRows.length} riders · {stats.orders} orders
-                  </Text>
-                </VStack>
+            <FilterToolbar max={1}>
+              <HStack gap={2} vAlign="center" justify="end">
                 <Button
-                  label={`${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`}
+                  label={`${datestatus} · ${dayjs(startdate).format('DD/MM/YY')}–${dayjs(enddate).format('DD/MM/YY')}`}
                   variant="secondary"
                   size="sm"
                   icon={<MdCalendarMonth size={14} />}
                   onClick={() => setOpen(true)}
                 />
-              </HStack>
-              <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -451,7 +438,7 @@ export default function RidersSummary() {
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     <TableHeaderCell>Rider</TableHeaderCell>
                     <TableHeaderCell>Orders</TableHeaderCell>
                     <TableHeaderCell>Accepted</TableHeaderCell>
diff --git a/src/pages/nearle/riders/RiderSubstitution.js b/src/pages/nearle/riders/RiderSubstitution.js
index 236197f..e2ad8bd 100644
--- a/src/pages/nearle/riders/RiderSubstitution.js
+++ b/src/pages/nearle/riders/RiderSubstitution.js
@@ -269,7 +269,7 @@ export default function RiderSubstitution({
           <Table density="balanced" dividers="rows" hasHover>
             <TableHeader>
               <TableRow>
-                <TableHeaderCell>#</TableHeaderCell>
+                <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                 <TableHeaderCell>ID</TableHeaderCell>
                 <TableHeaderCell>Rider</TableHeaderCell>
                 <TableHeaderCell style={{ textAlign: 'center' }}></TableHeaderCell>
diff --git a/src/pages/nearle/riders/riders.js b/src/pages/nearle/riders/riders.js
index d369590..4e76d2f 100644
--- a/src/pages/nearle/riders/riders.js
+++ b/src/pages/nearle/riders/riders.js
@@ -535,7 +535,7 @@ const Riders = () => {
           toolbar={
             <FilterToolbar max={tabvalue === 3 ? 3 : 1}>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -804,19 +804,14 @@ const Riders = () => {
                                 </HStack>
                                 {roleid == 1 && <RowActions row={row} expanded={expanded} />}
                               </HStack>
-                              <HStack gap={1.5} vAlign="center">
-                                <AccentAvatar color={BRAND} selected size={36}>
-                                  <Text weight="bold">{(row.displayname || row.authname || '?').charAt(0).toUpperCase()}</Text>
-                                </AccentAvatar>
-                                <VStack gap={0} padding={0} minWidth={0}>
-                                  <Text weight="bold" maxLines={1}>
-                                    {row.displayname || row.authname || '—'}
-                                  </Text>
-                                  <Text type="supporting" color="secondary" maxLines={1}>
-                                    {row.phone || '—'}
-                                  </Text>
-                                </VStack>
-                              </HStack>
+                              <VStack gap={0} padding={0} minWidth={0}>
+                                <Text weight="bold" maxLines={1}>
+                                  {row.displayname || row.authname || '—'}
+                                </Text>
+                                <Text type="supporting" color="secondary" maxLines={1}>
+                                  {row.phone || '—'}
+                                </Text>
+                              </VStack>
                             </VStack>
                           }
                         >
@@ -882,7 +877,7 @@ const Riders = () => {
                   <Table density="balanced" dividers="rows" hasHover>
                     <TableHeader>
                       <TableRow>
-                        <TableHeaderCell>#</TableHeaderCell>
+                        <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                         <TableHeaderCell>ID</TableHeaderCell>
                         <TableHeaderCell>Rider</TableHeaderCell>
                         <TableHeaderCell>Address</TableHeaderCell>
@@ -944,19 +939,14 @@ const Riders = () => {
                                   </div>
                                 </TableCell>
                                 <TableCell>
-                                  <HStack gap={1.5} vAlign="center">
-                                    <AccentAvatar color={BRAND} selected size={36}>
-                                      <Text weight="bold">{(row.displayname || row.authname || '?').charAt(0).toUpperCase()}</Text>
-                                    </AccentAvatar>
-                                    <VStack gap={0} padding={0} minWidth={0}>
-                                      <Text weight="semibold" style={{ whiteSpace: 'nowrap' }}>
-                                        {row.displayname || row.authname || '—'}
-                                      </Text>
-                                      <Text type="supporting" color="secondary">
-                                        {row.phone || '—'}
-                                      </Text>
-                                    </VStack>
-                                  </HStack>
+                                  <VStack gap={0} padding={0} minWidth={0}>
+                                    <Text weight="semibold" style={{ whiteSpace: 'nowrap' }}>
+                                      {row.displayname || row.authname || '—'}
+                                    </Text>
+                                    <Text type="supporting" color="secondary">
+                                      {row.phone || '—'}
+                                    </Text>
+                                  </VStack>
                                 </TableCell>
                                 <TableCell style={{ maxWidth: 220 }}>
                                   <Tooltip content={row.address || ''}>
diff --git a/src/pages/nearle/tripsheets/tripsheets.js b/src/pages/nearle/tripsheets/tripsheets.js
index a1340af..0df7865 100644
--- a/src/pages/nearle/tripsheets/tripsheets.js
+++ b/src/pages/nearle/tripsheets/tripsheets.js
@@ -154,7 +154,7 @@ const Tripsheets = () => {
             <Table density="balanced" dividers="rows" hasHover>
               <TableHeader>
                 <TableRow>
-                  <TableHeaderCell>#</TableHeaderCell>
+                  <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                   <TableHeaderCell>Source Hub</TableHeaderCell>
                   <TableHeaderCell>Destination Hub</TableHeaderCell>
                   <TableHeaderCell>Status</TableHeaderCell>
diff --git a/src/pages/nearle/vehicles/vehicles.js b/src/pages/nearle/vehicles/vehicles.js
index ee79026..cdbee25 100644
--- a/src/pages/nearle/vehicles/vehicles.js
+++ b/src/pages/nearle/vehicles/vehicles.js
@@ -176,7 +176,7 @@ const Vehicles = () => {
                 </Text>
               </HStack>
               <HStack justify="end">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -192,7 +192,7 @@ const Vehicles = () => {
             <Table density="balanced" dividers="rows" hasHover>
               <TableHeader>
                 <TableRow>
-                  <TableHeaderCell>#</TableHeaderCell>
+                  <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                   <TableHeaderCell>Vehicle No</TableHeaderCell>
                   <TableHeaderCell>Type</TableHeaderCell>
                   <TableHeaderCell>Partner</TableHeaderCell>