diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx
index ec4cc59f..178640e1 100644
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -37,7 +37,7 @@ import PaymentAssetManager from "@/components/PaymentAssetManager";
 import { toFixedNumber } from "@/utils/number";
 import { CSVLink } from "react-csv";
 import { Tab } from "@headlessui/react";
-
+import { useListSearch } from "@/hooks/useListSearch";
 export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
 
@@ -69,7 +69,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
 }, sessionOptions);
 
 const columnHelper = createColumnHelper<Payment>();
-const paypalColumnHelper = createColumnHelper<PaypalPayment>();
+const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
 
 const PaymentCreator = ({
   onClose,
@@ -348,7 +348,7 @@ const IS_FILE_SUBMITTED_OPTIONS = [
   },
 ];
 
-const CSV_WHITELISTED_KEYS = [
+const CSV_PAYMENTS_WHITELISTED_KEYS = [
   "corporateId",
   "corporate",
   "date",
@@ -359,12 +359,28 @@ const CSV_WHITELISTED_KEYS = [
   "isPaid",
 ];
 
+const CSV_PAYPAL_WHITELISTED_KEYS = [
+  "orderId",
+  "status",
+  "name",
+  "email",
+  "value",
+  "createdAt",
+  "subscriptionExpirationDate",
+];
+
 interface SimpleCSVColumn {
   key: string;
   label: string;
   index: number;
 }
 
+interface PaypalPaymentWithUserData extends PaypalPayment {
+  name: string;
+  email: string;
+}
+
+const paypalFilterRows = [["email"], ["name"]];
 export default function PaymentRecord() {
   const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
   const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
@@ -407,6 +423,8 @@ export default function PaymentRecord() {
     });
   }, [originalPayments, startDate, endDate]);
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   useEffect(() => {
     setDisplayPayments(
       filters
@@ -839,6 +857,15 @@ export default function PaymentRecord() {
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const updatedPaypalPayments = useMemo(
+    () =>
+      paypalPayments.map((p) => {
+        const user = users.find((x) => x.id === p.userId) as User;
+        return { ...p, name: user?.name, email: user?.email };
+      }),
+    [paypalPayments, users]
+  );
+
   const paypalColumns = [
     paypalColumnHelper.accessor("orderId", {
       header: "Order ID",
@@ -856,24 +883,20 @@ export default function PaymentRecord() {
         return <span>{value}</span>;
       },
     }),
-    paypalColumnHelper.accessor("userId", {
+    paypalColumnHelper.accessor("name", {
       header: "User Name",
       id: "name",
       cell: (info) => {
-        const { value } = columHelperValue("userId", info);
-
-        const user = users.find((x) => x.id === value) as User;
-        return <span>{user?.name}</span>;
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
       },
     }),
-    paypalColumnHelper.accessor("userId", {
+    paypalColumnHelper.accessor("email", {
       header: "Email",
       id: "email",
       cell: (info) => {
-        const { value } = columHelperValue("userId", info);
-
-        const user = users.find((x) => x.id === value) as User;
-        return <span>{user?.email}</span>;
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
       },
     }),
     paypalColumnHelper.accessor("value", {
@@ -906,8 +929,13 @@ export default function PaymentRecord() {
     }),
   ];
 
+  const { rows: filteredRows, renderSearch } = useListSearch(
+    paypalFilterRows,
+    updatedPaypalPayments
+  );
+
   const paypalTable = useReactTable({
-    data: paypalPayments,
+    data: filteredRows,
     columns: paypalColumns,
     getCoreRowModel: getCoreRowModel(),
   });
@@ -967,11 +995,18 @@ export default function PaymentRecord() {
   };
 
   const getCSVData = () => {
-    const columns = table
+    const tables = [table, paypalTable];
+    const whitelists = [
+      CSV_PAYMENTS_WHITELISTED_KEYS,
+      CSV_PAYPAL_WHITELISTED_KEYS,
+    ];
+    const currentTable = tables[selectedIndex];
+    const whitelist = whitelists[selectedIndex];
+    const columns = currentTable
       .getHeaderGroups()
       .reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
         const whitelistedColumns = group.headers.filter((header) =>
-          CSV_WHITELISTED_KEYS.includes(header.id)
+        whitelist.includes(header.id)
         );
 
         const data = whitelistedColumns.map((data) => ({
@@ -982,7 +1017,7 @@ export default function PaymentRecord() {
         return [...accm, ...data];
       }, []);
 
-    const { rows } = table.getRowModel();
+    const { rows } = currentTable.getRowModel();
 
     const finalColumns = [
       ...columns,
@@ -1045,6 +1080,7 @@ export default function PaymentRecord() {
       </tbody>
     </table>
   );
+
   return (
     <>
       <Head>
@@ -1099,283 +1135,7 @@ export default function PaymentRecord() {
               )}
             </div>
           </div>
-          <div
-            className={clsx(
-              "grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
-              user.type !== "corporate" && "lg:grid-cols-3"
-            )}
-          >
-            <div className="flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Corporate account *
-              </label>
-              <Select
-                isClearable={user.type !== "corporate"}
-                className={clsx(
-                  "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                  user.type === "corporate" &&
-                    "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
-                )}
-                options={(
-                  users.filter((u) => u.type === "corporate") as CorporateUser[]
-                ).map((user) => ({
-                  value: user.id,
-                  meta: user,
-                  label: `${
-                    user.corporateInformation?.companyInformation?.name ||
-                    user.name
-                  } - ${user.email}`,
-                }))}
-                defaultValue={
-                  user.type === "corporate"
-                    ? {
-                        value: user.id,
-                        meta: user,
-                        label: `${
-                          user.corporateInformation?.companyInformation?.name ||
-                          user.name
-                        } - ${user.email}`,
-                      }
-                    : undefined
-                }
-                isDisabled={user.type === "corporate"}
-                onChange={(value) =>
-                  setCorporate((value as any)?.meta ?? undefined)
-                }
-                menuPortalTarget={document?.body}
-                styles={{
-                  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                  control: (styles) => ({
-                    ...styles,
-                    paddingLeft: "4px",
-                    border: "none",
-                    outline: "none",
-                    ":focus": {
-                      outline: "none",
-                    },
-                  }),
-                  option: (styles, state) => ({
-                    ...styles,
-                    backgroundColor: state.isFocused
-                      ? "#D5D9F0"
-                      : state.isSelected
-                      ? "#7872BF"
-                      : "white",
-                    color: state.isFocused ? "black" : styles.color,
-                  }),
-                }}
-              />
-            </div>
-            {user.type !== "corporate" && (
-              <div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Country manager *
-                </label>
-                <Select
-                  isClearable
-                  isDisabled={user.type === "agent"}
-                  className={clsx(
-                    "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
-                    user.type === "agent"
-                      ? "bg-mti-gray-platinum/40"
-                      : "bg-white"
-                  )}
-                  options={(
-                    users.filter((u) => u.type === "agent") as AgentUser[]
-                  ).map((user) => ({
-                    value: user.id,
-                    meta: user,
-                    label: `${user.name} - ${user.email}`,
-                  }))}
-                  value={
-                    agent
-                      ? {
-                          value: agent?.id,
-                          label: `${agent.name} - ${agent.email}`,
-                        }
-                      : undefined
-                  }
-                  onChange={(value) =>
-                    setAgent(value !== null ? (value as any).meta : undefined)
-                  }
-                  menuPortalTarget={document?.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                />
-              </div>
-            )}
-            <div className="flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Paid
-              </label>
-              <Select
-                isClearable
-                className={clsx(
-                  "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
-                  user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white"
-                )}
-                options={IS_PAID_OPTIONS}
-                value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
-                onChange={(value) => {
-                  if (value) return setPaid(value.value);
-                  setPaid(null);
-                }}
-                menuPortalTarget={document?.body}
-                styles={{
-                  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                  control: (styles) => ({
-                    ...styles,
-                    paddingLeft: "4px",
-                    border: "none",
-                    outline: "none",
-                    ":focus": {
-                      outline: "none",
-                    },
-                  }),
-                  option: (styles, state) => ({
-                    ...styles,
-                    backgroundColor: state.isFocused
-                      ? "#D5D9F0"
-                      : state.isSelected
-                      ? "#7872BF"
-                      : "white",
-                    color: state.isFocused ? "black" : styles.color,
-                  }),
-                }}
-              />
-            </div>
-            <div className="flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Date
-              </label>
-              <ReactDatePicker
-                dateFormat="dd/MM/yyyy"
-                className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
-                selected={startDate}
-                startDate={startDate}
-                endDate={endDate}
-                selectsRange
-                showMonthDropdown
-                filterDate={(date: Date) =>
-                  moment(date).isSameOrBefore(moment(new Date()))
-                }
-                onChange={([initialDate, finalDate]: [Date, Date]) => {
-                  setStartDate(initialDate ?? moment("01/01/2023").toDate());
-                  if (finalDate) {
-                    // basicly selecting a final day works as if I'm selecting the first
-                    // minute of that day. this way it covers the whole day
-                    setEndDate(moment(finalDate).endOf("day").toDate());
-                    return;
-                  }
-                  setEndDate(null);
-                }}
-              />
-            </div>
-            {user.type !== "corporate" && (
-              <div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Commission transfer
-                </label>
-                <Select
-                  isClearable
-                  className={clsx(
-                    "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
-                  )}
-                  options={IS_FILE_SUBMITTED_OPTIONS}
-                  value={IS_FILE_SUBMITTED_OPTIONS.find(
-                    (e) => e.value === commissionTransfer
-                  )}
-                  onChange={(value) => {
-                    if (value) return setCommissionTransfer(value.value);
-                    setCommissionTransfer(null);
-                  }}
-                  menuPortalTarget={document?.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                />
-              </div>
-            )}
-            <div className="flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Corporate transfer
-              </label>
-              <Select
-                isClearable
-                className={clsx(
-                  "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
-                )}
-                options={IS_FILE_SUBMITTED_OPTIONS}
-                value={IS_FILE_SUBMITTED_OPTIONS.find(
-                  (e) => e.value === corporateTransfer
-                )}
-                onChange={(value) => {
-                  if (value) return setCorporateTransfer(value.value);
-                  setCorporateTransfer(null);
-                }}
-                menuPortalTarget={document?.body}
-                styles={{
-                  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                  control: (styles) => ({
-                    ...styles,
-                    paddingLeft: "4px",
-                    border: "none",
-                    outline: "none",
-                    ":focus": {
-                      outline: "none",
-                    },
-                  }),
-                  option: (styles, state) => ({
-                    ...styles,
-                    backgroundColor: state.isFocused
-                      ? "#D5D9F0"
-                      : state.isSelected
-                      ? "#7872BF"
-                      : "white",
-                    color: state.isFocused ? "black" : styles.color,
-                  }),
-                }}
-              />
-            </div>
-          </div>
-          <Tab.Group>
+          <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
             <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
               <Tab
                 className={({ selected }) =>
@@ -1406,12 +1166,297 @@ export default function PaymentRecord() {
                 Paypal
               </Tab>
             </Tab.List>
-            <Tab.Panels className="mt-2">
-              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+            <Tab.Panels>
+              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col gap-8">
+                <div
+                  className={clsx(
+                    "grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
+                    user.type !== "corporate" && "lg:grid-cols-3"
+                  )}
+                >
+                  <div className="flex flex-col gap-3 w-full">
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Corporate account *
+                    </label>
+                    <Select
+                      isClearable={user.type !== "corporate"}
+                      className={clsx(
+                        "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+                        user.type === "corporate" &&
+                          "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
+                      )}
+                      options={(
+                        users.filter(
+                          (u) => u.type === "corporate"
+                        ) as CorporateUser[]
+                      ).map((user) => ({
+                        value: user.id,
+                        meta: user,
+                        label: `${
+                          user.corporateInformation?.companyInformation?.name ||
+                          user.name
+                        } - ${user.email}`,
+                      }))}
+                      defaultValue={
+                        user.type === "corporate"
+                          ? {
+                              value: user.id,
+                              meta: user,
+                              label: `${
+                                user.corporateInformation?.companyInformation
+                                  ?.name || user.name
+                              } - ${user.email}`,
+                            }
+                          : undefined
+                      }
+                      isDisabled={user.type === "corporate"}
+                      onChange={(value) =>
+                        setCorporate((value as any)?.meta ?? undefined)
+                      }
+                      menuPortalTarget={document?.body}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                        control: (styles) => ({
+                          ...styles,
+                          paddingLeft: "4px",
+                          border: "none",
+                          outline: "none",
+                          ":focus": {
+                            outline: "none",
+                          },
+                        }),
+                        option: (styles, state) => ({
+                          ...styles,
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                            ? "#7872BF"
+                            : "white",
+                          color: state.isFocused ? "black" : styles.color,
+                        }),
+                      }}
+                    />
+                  </div>
+                  {user.type !== "corporate" && (
+                    <div className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Country manager *
+                      </label>
+                      <Select
+                        isClearable
+                        isDisabled={user.type === "agent"}
+                        className={clsx(
+                          "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
+                          user.type === "agent"
+                            ? "bg-mti-gray-platinum/40"
+                            : "bg-white"
+                        )}
+                        options={(
+                          users.filter((u) => u.type === "agent") as AgentUser[]
+                        ).map((user) => ({
+                          value: user.id,
+                          meta: user,
+                          label: `${user.name} - ${user.email}`,
+                        }))}
+                        value={
+                          agent
+                            ? {
+                                value: agent?.id,
+                                label: `${agent.name} - ${agent.email}`,
+                              }
+                            : undefined
+                        }
+                        onChange={(value) =>
+                          setAgent(
+                            value !== null ? (value as any).meta : undefined
+                          )
+                        }
+                        menuPortalTarget={document?.body}
+                        styles={{
+                          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                          control: (styles) => ({
+                            ...styles,
+                            paddingLeft: "4px",
+                            border: "none",
+                            outline: "none",
+                            ":focus": {
+                              outline: "none",
+                            },
+                          }),
+                          option: (styles, state) => ({
+                            ...styles,
+                            backgroundColor: state.isFocused
+                              ? "#D5D9F0"
+                              : state.isSelected
+                              ? "#7872BF"
+                              : "white",
+                            color: state.isFocused ? "black" : styles.color,
+                          }),
+                        }}
+                      />
+                    </div>
+                  )}
+                  <div className="flex flex-col gap-3 w-full">
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Paid
+                    </label>
+                    <Select
+                      isClearable
+                      className={clsx(
+                        "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
+                        user.type === "agent"
+                          ? "bg-mti-gray-platinum/40"
+                          : "bg-white"
+                      )}
+                      options={IS_PAID_OPTIONS}
+                      value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
+                      onChange={(value) => {
+                        if (value) return setPaid(value.value);
+                        setPaid(null);
+                      }}
+                      menuPortalTarget={document?.body}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                        control: (styles) => ({
+                          ...styles,
+                          paddingLeft: "4px",
+                          border: "none",
+                          outline: "none",
+                          ":focus": {
+                            outline: "none",
+                          },
+                        }),
+                        option: (styles, state) => ({
+                          ...styles,
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                            ? "#7872BF"
+                            : "white",
+                          color: state.isFocused ? "black" : styles.color,
+                        }),
+                      }}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-3 w-full">
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Date
+                    </label>
+                    <ReactDatePicker
+                      dateFormat="dd/MM/yyyy"
+                      className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+                      selected={startDate}
+                      startDate={startDate}
+                      endDate={endDate}
+                      selectsRange
+                      showMonthDropdown
+                      filterDate={(date: Date) =>
+                        moment(date).isSameOrBefore(moment(new Date()))
+                      }
+                      onChange={([initialDate, finalDate]: [Date, Date]) => {
+                        setStartDate(
+                          initialDate ?? moment("01/01/2023").toDate()
+                        );
+                        if (finalDate) {
+                          // basicly selecting a final day works as if I'm selecting the first
+                          // minute of that day. this way it covers the whole day
+                          setEndDate(moment(finalDate).endOf("day").toDate());
+                          return;
+                        }
+                        setEndDate(null);
+                      }}
+                    />
+                  </div>
+                  {user.type !== "corporate" && (
+                    <div className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Commission transfer
+                      </label>
+                      <Select
+                        isClearable
+                        className={clsx(
+                          "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+                        )}
+                        options={IS_FILE_SUBMITTED_OPTIONS}
+                        value={IS_FILE_SUBMITTED_OPTIONS.find(
+                          (e) => e.value === commissionTransfer
+                        )}
+                        onChange={(value) => {
+                          if (value) return setCommissionTransfer(value.value);
+                          setCommissionTransfer(null);
+                        }}
+                        menuPortalTarget={document?.body}
+                        styles={{
+                          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                          control: (styles) => ({
+                            ...styles,
+                            paddingLeft: "4px",
+                            border: "none",
+                            outline: "none",
+                            ":focus": {
+                              outline: "none",
+                            },
+                          }),
+                          option: (styles, state) => ({
+                            ...styles,
+                            backgroundColor: state.isFocused
+                              ? "#D5D9F0"
+                              : state.isSelected
+                              ? "#7872BF"
+                              : "white",
+                            color: state.isFocused ? "black" : styles.color,
+                          }),
+                        }}
+                      />
+                    </div>
+                  )}
+                  <div className="flex flex-col gap-3 w-full">
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Corporate transfer
+                    </label>
+                    <Select
+                      isClearable
+                      className={clsx(
+                        "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+                      )}
+                      options={IS_FILE_SUBMITTED_OPTIONS}
+                      value={IS_FILE_SUBMITTED_OPTIONS.find(
+                        (e) => e.value === corporateTransfer
+                      )}
+                      onChange={(value) => {
+                        if (value) return setCorporateTransfer(value.value);
+                        setCorporateTransfer(null);
+                      }}
+                      menuPortalTarget={document?.body}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                        control: (styles) => ({
+                          ...styles,
+                          paddingLeft: "4px",
+                          border: "none",
+                          outline: "none",
+                          ":focus": {
+                            outline: "none",
+                          },
+                        }),
+                        option: (styles, state) => ({
+                          ...styles,
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                            ? "#7872BF"
+                            : "white",
+                          color: state.isFocused ? "black" : styles.color,
+                        }),
+                      }}
+                    />
+                  </div>
+                </div>
                 {renderTable(table as Table<Payment>)}
               </Tab.Panel>
-              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-                {renderTable(paypalTable as Table<PaypalPayment>)}
+              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8">
+                {renderSearch()}
+                {renderTable(paypalTable as Table<PaypalPaymentWithUserData>)}
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>