diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index f590e86..589dab3 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -293,7 +293,11 @@ const AddDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                      <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
                           {customers.find((customer) => customer.id === formField.agent)
                             ?.username || 'Select Agent'}
                         </button>
@@ -301,13 +305,19 @@ const AddDialog = () => {
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
                           <CommandInput placeholder="Search Agent..." />
-                          <CommandList>
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
                             <CommandEmpty>No Agent found.</CommandEmpty>
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
                                   key={customer.id}
-                                  value={customer.id}
+                                  value={customer.username}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx
index d60d4c2..90b11ed 100644
--- a/src/pages/master/provider/blocks/EditDialog.tsx
+++ b/src/pages/master/provider/blocks/EditDialog.tsx
@@ -308,7 +308,11 @@ const EditDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                      <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
                           {customers.find((customer) => customer.id === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
@@ -316,13 +320,19 @@ const EditDialog = () => {
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
                           <CommandInput placeholder="Search Agent..." />
-                          <CommandList>
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
                             <CommandEmpty>No Agent found.</CommandEmpty>
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
                                   key={customer.id}
-                                  value={customer.id}
+                                  value={customer.username}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,