diff --git a/src/components/Exercises/InteractiveSpeaking.tsx b/src/components/Exercises/InteractiveSpeaking.tsx
index a4c7ea22..ec457592 100644
--- a/src/components/Exercises/InteractiveSpeaking.tsx
+++ b/src/components/Exercises/InteractiveSpeaking.tsx
@@ -76,7 +76,7 @@ export default function InteractiveSpeaking({
 		onBack({
 			exercise: id,
 			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -96,7 +96,7 @@ export default function InteractiveSpeaking({
 		onNext({
 			exercise: id,
 			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -131,7 +131,7 @@ export default function InteractiveSpeaking({
 			onNext({
 				exercise: id,
 				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-				score: {correct: 1, total: 1, missing: 0},
+				score: {correct: 100, total: 100, missing: 0},
 				type,
 			});
 		}
@@ -176,7 +176,7 @@ export default function InteractiveSpeaking({
 			{
 				exercise: id,
 				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-				score: {correct: 1, total: 1, missing: 0},
+				score: {correct: 100, total: 100, missing: 0},
 				module: "speaking",
 				exam: examID,
 				type,
diff --git a/src/components/Exercises/Speaking.tsx b/src/components/Exercises/Speaking.tsx
index 40cb55a9..2adea802 100644
--- a/src/components/Exercises/Speaking.tsx
+++ b/src/components/Exercises/Speaking.tsx
@@ -81,7 +81,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onNext({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -94,7 +94,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onBack({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
diff --git a/src/components/Exercises/Writing.tsx b/src/components/Exercises/Writing.tsx
index c8189421..2371ed23 100644
--- a/src/components/Exercises/Writing.tsx
+++ b/src/components/Exercises/Writing.tsx
@@ -41,7 +41,7 @@ export default function Writing({
 		if (inputText.length > 0 && saveTimer % 10 === 0) {
 			setUserSolutions([
 				...storeUserSolutions.filter((x) => x.exercise !== id),
-				{exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type, module: "writing"},
+				{exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"},
 			]);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +65,7 @@ export default function Writing({
 
 	useEffect(() => {
 		if (hasExamEnded)
-			onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type, module: "writing"});
+			onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -148,7 +148,9 @@ export default function Writing({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
+					onClick={() =>
+						onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type})
+					}
 					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
@@ -159,7 +161,7 @@ export default function Writing({
 						onNext({
 							exercise: id,
 							solutions: [{id, solution: inputText.replaceAll(/\s{2,}/g, " ")}],
-							score: {correct: 1, total: 1, missing: 0},
+							score: {correct: 100, total: 100, missing: 0},
 							type,
 							module: "writing",
 						})
diff --git a/src/hooks/usePaypalPayments.tsx b/src/hooks/usePaypalPayments.tsx
new file mode 100644
index 00000000..8d94eda5
--- /dev/null
+++ b/src/hooks/usePaypalPayments.tsx
@@ -0,0 +1,23 @@
+import {PaypalPayment} from "@/interfaces/paypal";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePaypalPayments() {
+	const [payments, setPayments] = useState<PaypalPayment[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<PaypalPayment[]>("/api/payments/paypal")
+			.then((response) => {
+				return setPayments(response.data);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {payments, isLoading, isError, reload: getData};
+}
diff --git a/src/hooks/useTickets.tsx b/src/hooks/useTickets.tsx
index 9a5ba240..8b518c08 100644
--- a/src/hooks/useTickets.tsx
+++ b/src/hooks/useTickets.tsx
@@ -1,17 +1,17 @@
-import { Ticket } from "@/interfaces/ticket";
+import { TicketWithCorporate } from "@/interfaces/ticket";
 import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
 import { useEffect, useState, useCallback } from "react";
 
 export default function useTickets() {
-  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [tickets, setTickets] = useState<TicketWithCorporate[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
   const getData = useCallback(() => {
     setIsLoading(true);
     axios
-      .get<Ticket[]>(`/api/tickets`)
+      .get<TicketWithCorporate[]>(`/api/tickets`)
       .then((response) => setTickets(response.data))
       .finally(() => setIsLoading(false));
   }, []);
diff --git a/src/interfaces/paypal.ts b/src/interfaces/paypal.ts
index 3c1770b9..0606761d 100644
--- a/src/interfaces/paypal.ts
+++ b/src/interfaces/paypal.ts
@@ -35,3 +35,16 @@ export interface Payment {
 	corporateTransfer?: string;
 	commissionTransfer?: string;
 }
+
+
+export interface PaypalPayment {
+	orderId: string;
+	userId: string;
+	status: string;
+	createdAt: Date;
+	value: number;
+	currency: string;
+	subscriptionDuration: number;
+	subscriptionDurationUnit: DurationUnit;
+	subscriptionExpirationDate: Date;
+}
\ No newline at end of file
diff --git a/src/interfaces/ticket.ts b/src/interfaces/ticket.ts
index 1ffa7d50..ba633061 100644
--- a/src/interfaces/ticket.ts
+++ b/src/interfaces/ticket.ts
@@ -32,3 +32,7 @@ export const TicketStatusLabel: { [key in TicketStatus]: string } = {
   "in-progress": "In Progress",
   completed: "Completed",
 };
+
+export interface TicketWithCorporate extends Ticket {
+  corporate?: string;
+}
\ No newline at end of file
diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index a8bc3435..fa5505dd 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -424,7 +424,7 @@ export default function ExamPage({page}: Props) {
 							<AbandonPopup
 								isOpen={showAbandonPopup}
 								abandonPopupTitle="Leave Exercise"
-								abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
+								abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
 								abandonConfirmButtonText="Confirm"
 								onAbandon={() => {
 									reset();
diff --git a/src/pages/api/payments/paypal.ts b/src/pages/api/payments/paypal.ts
new file mode 100644
index 00000000..7c7976e5
--- /dev/null
+++ b/src/pages/api/payments/paypal.ts
@@ -0,0 +1,30 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDocs,
+  collection,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const payments = await getDocs(collection(db, "paypalpayments"));
+
+  const data = payments.docs.map((doc) => doc.data());
+  res.status(200).json(data);
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+}
diff --git a/src/pages/api/paypal/approve.ts b/src/pages/api/paypal/approve.ts
index 9a575d5e..2a176a3b 100644
--- a/src/pages/api/paypal/approve.ts
+++ b/src/pages/api/paypal/approve.ts
@@ -73,6 +73,25 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       },
       { merge: true }
     );
+  
+		try {
+			await setDoc(
+				doc(db, 'paypalpayments', v4()),
+				{
+					orderId: id,
+					userId: req.session.user.id,
+					status: request.data.status,
+					createdAt: new Date().toISOString(),
+					value: request.data.purchase_units[0].payments.captures[0].amount.value,
+					currency: request.data.purchase_units[0].payments.captures[0].amount.currency_code,
+					subscriptionDuration: duration,
+					subscriptionDurationUnit: duration_unit,
+					subscriptionExpirationDate: updatedExpirationDate.toISOString(),
+				}
+			);
+		} catch(err) {
+			console.error('Failed to insert paypal payment!', err);
+		}
 
     if (user.type === "corporate") {
       const snapshot = await getDocs(collection(db, "groups"));
diff --git a/src/pages/api/storage/insert.ts b/src/pages/api/storage/insert.ts
index bd664ff8..f74d84e5 100644
--- a/src/pages/api/storage/insert.ts
+++ b/src/pages/api/storage/insert.ts
@@ -28,7 +28,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		}
 
 		const audioFile = files.audio;
-		const audioFileRef = ref(storage, `${fields.root}/${(audioFile as any).path.split("/").pop()!.replace("upload_", "")}`);
+		const audioFileRef = ref(storage, `${fields.root}/${(audioFile as any).path.replace("upload_", "")}`);
 
 		const binary = fs.readFileSync((audioFile as any).path).buffer;
 		const snapshot = await uploadBytes(audioFileRef, binary);
diff --git a/src/pages/api/tickets/index.ts b/src/pages/api/tickets/index.ts
index 04f0b6b7..d7daa365 100644
--- a/src/pages/api/tickets/index.ts
+++ b/src/pages/api/tickets/index.ts
@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import { sendEmail } from "@/email";
 import { app } from "@/firebase";
-import { Ticket, TicketTypeLabel } from "@/interfaces/ticket";
+import { Ticket, TicketTypeLabel, TicketWithCorporate } from "@/interfaces/ticket";
 import { sessionOptions } from "@/lib/session";
 import {
   collection,
@@ -9,11 +9,14 @@ import {
   getDocs,
   getFirestore,
   setDoc,
+  where,
+  query,
 } from "firebase/firestore";
 import { withIronSessionApiRoute } from "iron-session/next";
 import moment from "moment";
 import type { NextApiRequest, NextApiResponse } from "next";
 import ShortUniqueId from "short-unique-id";
+import { Group, CorporateUser } from "@/interfaces/user";
 
 const db = getFirestore(app);
 
@@ -44,12 +47,38 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 async function get(req: NextApiRequest, res: NextApiResponse) {
   const snapshot = await getDocs(collection(db, "tickets"));
 
-  res.status(200).json(
-    snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    }))
-  );
+  const docs = snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as Ticket[];
+
+  // fetch all groups for these users
+
+  const reporters = [...new Set(docs.map((d) => d.reporter.id).filter((id) => id))];
+
+  const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("participants", "array-contains-any", reporters)));
+  const groups = groupsSnapshot.docs.map((doc) => doc.data()) as Group[];
+
+  // based on the admin of each group, verify if it exists and it's of type corporate
+  const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
+  const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
+  const admins = adminsSnapshot.docs.map((doc) => doc.data());
+
+  const docsWithAdmins = docs.map((d) => {
+    const group = groups.find((g) => g.participants.includes(d.reporter.id));
+    const admin = admins.find((a) => a.id === group?.admin) as CorporateUser;
+
+    if(admin) {
+      return {
+        ...d,
+        corporate: admin.corporateInformation?.companyInformation?.name,
+      };
+    }
+
+    return d;
+  }) as TicketWithCorporate[];
+
+  res.status(200).json(docsWithAdmins);
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
diff --git a/src/pages/api/users/agents/[code].ts b/src/pages/api/users/agents/[code].ts
index 56e9a0fd..9ede7b77 100644
--- a/src/pages/api/users/agents/[code].ts
+++ b/src/pages/api/users/agents/[code].ts
@@ -23,7 +23,7 @@ interface Contact {
   number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const { code } = req.query as { code: string };
+  const { code, language = 'en' } = req.query as { code: string, language: string};
 
   const usersQuery = query(
     collection(db, "users"),
@@ -43,9 +43,11 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     return newUser;
   }) as Contact[];
 
-  const country = countryCodes.findOne("countryCode" as any, code);
+  const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+  const key = language === 'ar' ? 'countryNameLocal' : 'countryNameEn';
+
   res.json({
-    label: country.countryNameEn,
+    label: country[key],
     entries,
   });
 }
diff --git a/src/pages/api/users/agents/index.ts b/src/pages/api/users/agents/index.ts
index 8eb3da81..f229f5ae 100644
--- a/src/pages/api/users/agents/index.ts
+++ b/src/pages/api/users/agents/index.ts
@@ -23,6 +23,8 @@ interface Contact {
   number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
+  const { language = 'en' } = req.query as { language: string };
+
   const usersQuery = query(
     collection(db, "users"),
     where("type", "==", "agent")
@@ -49,9 +51,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
   ) as Record<string, Contact[]>;
 
   const result = Object.keys(data).map((code) => {
-    const country = countryCodes.findOne("countryCode" as any, code);
+    const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+    const key = language === 'ar' ? 'countryNameLocal' : 'countryNameEn';
     return {
-      label: country.countryNameEn,
+      label: country[key],
       key: code,
       entries: data[code],
     };
diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx
index 51ea0962..941f9fab 100644
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -1,19 +1,28 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
 import useUser from "@/hooks/useUser";
-import {toast, ToastContainer} from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import Layout from "@/components/High/Layout";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
-import {Payment} from "@/interfaces/paypal";
-import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, useReactTable} from "@tanstack/react-table";
-import {CURRENCIES} from "@/resources/paypal";
-import {BsTrash} from "react-icons/bs";
+import usePaypalPayments from "@/hooks/usePaypalPayments";
+import { Payment, PaypalPayment } from "@/interfaces/paypal";
+import {
+  CellContext,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  HeaderGroup,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import { CURRENCIES } from "@/resources/paypal";
+import { BsTrash } from "react-icons/bs";
 import axios from "axios";
-import {useEffect, useState, useMemo} from "react";
-import {AgentUser, CorporateUser, User} from "@/interfaces/user";
+import { useEffect, useState, useMemo } from "react";
+import { AgentUser, CorporateUser, User } from "@/interfaces/user";
 import UserCard from "@/components/UserCard";
 import Modal from "@/components/Modal";
 import clsx from "clsx";
@@ -25,1019 +34,1435 @@ import Input from "@/components/Low/Input";
 import ReactDatePicker from "react-datepicker";
 import moment from "moment";
 import PaymentAssetManager from "@/components/PaymentAssetManager";
-import {toFixedNumber} from "@/utils/number";
-import {CSVLink} from "react-csv";
+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;
 
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
+  if (!user || !user.isVerified) {
+    res.setHeader("location", "/login");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
 
-	if (!user || !user.isVerified) {
-		res.setHeader("location", "/login");
-		res.statusCode = 302;
-		res.end();
-		return {
-			props: {
-				user: null,
-			},
-		};
-	}
+  if (shouldRedirectHome(user) || !["admin", "developer"].includes(user.type)) {
+    res.setHeader("location", "/");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
 
-	if (shouldRedirectHome(user) || !["admin", "developer"].includes(user.type)) {
-		res.setHeader("location", "/");
-		res.statusCode = 302;
-		res.end();
-		return {
-			props: {
-				user: null,
-			},
-		};
-	}
-
-	return {
-		props: {user: req.session.user},
-	};
+  return {
+    props: { user: req.session.user },
+  };
 }, sessionOptions);
 
 const columnHelper = createColumnHelper<Payment>();
+const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
 
-const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
-	const [corporate, setCorporate] = useState<CorporateUser>();
-	const [date, setDate] = useState<Date>(new Date());
+const PaymentCreator = ({
+  onClose,
+  reload,
+  showComission = false,
+}: {
+  onClose: () => void;
+  reload: () => void;
+  showComission: boolean;
+}) => {
+  const [corporate, setCorporate] = useState<CorporateUser>();
+  const [date, setDate] = useState<Date>(new Date());
 
-	const {users} = useUsers();
+  const { users } = useUsers();
 
-	const price = corporate?.corporateInformation?.payment?.value || 0;
-	const commission = corporate?.corporateInformation?.payment?.commission || 0;
-	const currency = corporate?.corporateInformation?.payment?.currency || "EUR";
+  const price = corporate?.corporateInformation?.payment?.value || 0;
+  const commission = corporate?.corporateInformation?.payment?.commission || 0;
+  const currency = corporate?.corporateInformation?.payment?.currency || "EUR";
 
-	const referralAgent = useMemo(() => {
-		if (corporate?.corporateInformation?.referralAgent) {
-			return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
-		}
+  const referralAgent = useMemo(() => {
+    if (corporate?.corporateInformation?.referralAgent) {
+      return users.find(
+        (u) => u.id === corporate.corporateInformation.referralAgent
+      );
+    }
 
-		return undefined;
-	}, [corporate?.corporateInformation?.referralAgent, users]);
+    return undefined;
+  }, [corporate?.corporateInformation?.referralAgent, users]);
 
-	const submit = () => {
-		axios
-			.post(`/api/payments`, {
-				corporate: corporate?.id,
-				agent: referralAgent?.id,
-				agentCommission: commission,
-				agentValue: toFixedNumber((commission! / 100) * price!, 2),
-				currency,
-				value: price,
-				isPaid: false,
-				date: date.toISOString(),
-			})
-			.then(() => {
-				toast.success("New payment has been created successfully!");
-				reload();
-				onClose();
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-			});
-	};
+  const submit = () => {
+    axios
+      .post(`/api/payments`, {
+        corporate: corporate?.id,
+        agent: referralAgent?.id,
+        agentCommission: commission,
+        agentValue: toFixedNumber((commission! / 100) * price!, 2),
+        currency,
+        value: price,
+        isPaid: false,
+        date: date.toISOString(),
+      })
+      .then(() => {
+        toast.success("New payment has been created successfully!");
+        reload();
+        onClose();
+      })
+      .catch(() => {
+        toast.error("Something went wrong, please try again later!");
+      });
+  };
 
-	return (
-		<div className="flex flex-col gap-8">
-			<h1 className="text-2xl font-semibold">New Payment</h1>
-			<div className="flex flex-col gap-4">
-				<div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
-					<Select
-						className="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 bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-						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={{value: "undefined", label: "Select an account"}}
-						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>
+  return (
+    <div className="flex flex-col gap-8">
+      <h1 className="text-2xl font-semibold">New Payment</h1>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3">
+          <label className="font-normal text-base text-mti-gray-dim">
+            Corporate account *
+          </label>
+          <Select
+            className="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 bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+            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={{ value: "undefined", label: "Select an account" }}
+            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>
 
-				<div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Price *</label>
-					<div className="w-full grid grid-cols-5 gap-2">
-						<Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
-						<Select
-							className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
-							options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
-							defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
-							onChange={() => {}}
-							value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
-							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,
-								}),
-							}}
-							isDisabled
-						/>
-					</div>
-				</div>
-				{showComission && (
-					<div className="flex gap-4 w-full">
-						<div className="flex flex-col w-full gap-3">
-							<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
-							<Input name="commission" onChange={() => {}} type="number" defaultValue={0} value={commission} disabled />
-						</div>
-						<div className="flex flex-col w-full gap-3">
-							<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
-							<Input
-								name="commissionValue"
-								value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
-								onChange={() => null}
-								type="text"
-								defaultValue={0}
-								disabled
-							/>
-						</div>
-					</div>
-				)}
+        <div className="flex flex-col gap-3 w-full">
+          <label className="font-normal text-base text-mti-gray-dim">
+            Price *
+          </label>
+          <div className="w-full grid grid-cols-5 gap-2">
+            <Input
+              name="paymentValue"
+              onChange={() => {}}
+              type="number"
+              value={price}
+              defaultValue={0}
+              className="col-span-3"
+              disabled
+            />
+            <Select
+              className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+              options={CURRENCIES.map(({ label, currency }) => ({
+                value: currency,
+                label,
+              }))}
+              defaultValue={{
+                value: currency || "EUR",
+                label:
+                  CURRENCIES.find((c) => c.currency === currency)?.label ||
+                  "Euro",
+              }}
+              onChange={() => {}}
+              value={{
+                value: currency || "EUR",
+                label:
+                  CURRENCIES.find((c) => c.currency === currency)?.label ||
+                  "Euro",
+              }}
+              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,
+                }),
+              }}
+              isDisabled
+            />
+          </div>
+        </div>
+        {showComission && (
+          <div className="flex gap-4 w-full">
+            <div className="flex flex-col w-full gap-3">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Commission *
+              </label>
+              <Input
+                name="commission"
+                onChange={() => {}}
+                type="number"
+                defaultValue={0}
+                value={commission}
+                disabled
+              />
+            </div>
+            <div className="flex flex-col w-full gap-3">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Commission Value*
+              </label>
+              <Input
+                name="commissionValue"
+                value={`${(commission! / 100) * price!} ${
+                  CURRENCIES.find((c) => c.currency === currency)?.label
+                }`}
+                onChange={() => null}
+                type="text"
+                defaultValue={0}
+                disabled
+              />
+            </div>
+          </div>
+        )}
 
-				<div className="flex gap-4">
-					<div className="flex flex-col w-full gap-3">
-						<label className="font-normal text-base text-mti-gray-dim">Date *</label>
-						<ReactDatePicker
-							className={clsx(
-								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								"hover:border-mti-purple tooltip",
-								"transition duration-300 ease-in-out",
-							)}
-							dateFormat="dd/MM/yyyy"
-							selected={moment(date).toDate()}
-							onChange={(date) => setDate(date ?? new Date())}
-						/>
-					</div>
+        <div className="flex gap-4">
+          <div className="flex flex-col w-full gap-3">
+            <label className="font-normal text-base text-mti-gray-dim">
+              Date *
+            </label>
+            <ReactDatePicker
+              className={clsx(
+                "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "hover:border-mti-purple tooltip",
+                "transition duration-300 ease-in-out"
+              )}
+              dateFormat="dd/MM/yyyy"
+              selected={moment(date).toDate()}
+              onChange={(date) => setDate(date ?? new Date())}
+            />
+          </div>
 
-					<div className="flex flex-col w-full gap-3">
-						<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
-						<Input
-							name="referralAgent"
-							value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
-							onChange={() => null}
-							type="text"
-							defaultValue={"No country manager"}
-							disabled
-						/>
-					</div>
-				</div>
-				<div className="flex w-full justify-end items-center gap-8 mt-4">
-					<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
-						Cancel
-					</Button>
-					<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
-						Submit
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
+          <div className="flex flex-col w-full gap-3">
+            <label className="font-normal text-base text-mti-gray-dim">
+              Country Manager *
+            </label>
+            <Input
+              name="referralAgent"
+              value={
+                referralAgent
+                  ? `${referralAgent.name} - ${referralAgent.email}`
+                  : "No country manager"
+              }
+              onChange={() => null}
+              type="text"
+              defaultValue={"No country manager"}
+              disabled
+            />
+          </div>
+        </div>
+        <div className="flex w-full justify-end items-center gap-8 mt-4">
+          <Button
+            variant="outline"
+            color="red"
+            className="w-full max-w-[200px]"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="w-full max-w-[200px]"
+            onClick={submit}
+            disabled={!corporate || !price}
+          >
+            Submit
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 const IS_PAID_OPTIONS = [
-	{
-		value: null,
-		label: "All",
-	},
-	{
-		value: false,
-		label: "Unpaid",
-	},
-	{
-		value: true,
-		label: "Paid",
-	},
+  {
+    value: null,
+    label: "All",
+  },
+  {
+    value: false,
+    label: "Unpaid",
+  },
+  {
+    value: true,
+    label: "Paid",
+  },
 ];
 
 const IS_FILE_SUBMITTED_OPTIONS = [
-	{
-		value: null,
-		label: "All",
-	},
-	{
-		value: false,
-		label: "Submitted",
-	},
-	{
-		value: true,
-		label: "Not Submitted",
-	},
+  {
+    value: null,
+    label: "All",
+  },
+  {
+    value: false,
+    label: "Submitted",
+  },
+  {
+    value: true,
+    label: "Not Submitted",
+  },
 ];
 
-const CSV_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
+const CSV_PAYMENTS_WHITELISTED_KEYS = [
+  "corporateId",
+  "corporate",
+  "date",
+  "amount",
+  "agent",
+  "agentCommission",
+  "agentValue",
+  "isPaid",
+];
+
+const CSV_PAYPAL_WHITELISTED_KEYS = [
+  "orderId",
+  "status",
+  "name",
+  "email",
+  "value",
+  "createdAt",
+  "subscriptionExpirationDate",
+];
 
 interface SimpleCSVColumn {
-	key: string;
-	label: string;
-	index: number;
+  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>();
-	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
-	const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
-	const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
+  const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
+  const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
+  const [isCreatingPayment, setIsCreatingPayment] = useState(false);
+  const [filters, setFilters] = useState<
+    { filter: (p: Payment) => boolean; id: string }[]
+  >([]);
+  const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
 
-	const [corporate, setCorporate] = useState<User>();
-	const [agent, setAgent] = useState<User>();
+  const [corporate, setCorporate] = useState<User>();
+  const [agent, setAgent] = useState<User>();
 
-	const {user} = useUser({redirectTo: "/login"});
-	const {users, reload: reloadUsers} = useUsers();
-	const {payments: originalPayments, reload: reloadPayment} = usePayments();
-	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
-	const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
-	const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
-	const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
-	const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
-	const reload = () => {
-		reloadUsers();
-		reloadPayment();
-	};
+  const { user } = useUser({ redirectTo: "/login" });
+  const { users, reload: reloadUsers } = useUsers();
+  const { payments: originalPayments, reload: reloadPayment } = usePayments();
+  const { payments: paypalPayments, reload: reloadPaypalPayment } =
+    usePaypalPayments();
+  const [startDate, setStartDate] = useState<Date | null>(
+    moment("01/01/2023").toDate()
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    moment().endOf("day").toDate()
+  );
+  const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
+  const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(
+    IS_FILE_SUBMITTED_OPTIONS[0].value
+  );
+  const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(
+    IS_FILE_SUBMITTED_OPTIONS[0].value
+  );
+  const reload = () => {
+    reloadUsers();
+    reloadPayment();
+  };
 
-	const payments = useMemo(() => {
-		return originalPayments.filter((p: Payment) => {
-			const date = moment(p.date);
-			return date.isAfter(startDate) && date.isBefore(endDate);
-		});
-	}, [originalPayments, startDate, endDate]);
+  const payments = useMemo(() => {
+    return originalPayments.filter((p: Payment) => {
+      const date = moment(p.date);
+      return date.isAfter(startDate) && date.isBefore(endDate);
+    });
+  }, [originalPayments, startDate, endDate]);
 
-	useEffect(() => {
-		setDisplayPayments(
-			filters
-				.map((f) => f.filter)
-				.reduce((d, f) => d.filter(f), payments)
-				.sort((a, b) => moment(b.date).diff(moment(a.date))),
-		);
-	}, [payments, filters]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
 
-	useEffect(() => {
-		if (user && user.type === "agent") {
-			setAgent(user);
-		}
-	}, [user]);
+  useEffect(() => {
+    setDisplayPayments(
+      filters
+        .map((f) => f.filter)
+        .reduce((d, f) => d.filter(f), payments)
+        .sort((a, b) => moment(b.date).diff(moment(a.date)))
+    );
+  }, [payments, filters]);
 
-	useEffect(() => {
-		setFilters((prev) => [
-			...prev.filter((x) => x.id !== "agent-filter"),
-			...(!agent ? [] : [{id: "agent-filter", filter: (p: Payment) => p.agent === agent.id}]),
-		]);
-	}, [agent]);
+  useEffect(() => {
+    if (user && user.type === "agent") {
+      setAgent(user);
+    }
+  }, [user]);
 
-	useEffect(() => {
-		setFilters((prev) => [
-			...prev.filter((x) => x.id !== "corporate-filter"),
-			...(!corporate ? [] : [{id: "corporate-filter", filter: (p: Payment) => p.corporate === corporate.id}]),
-		]);
-	}, [corporate]);
+  useEffect(() => {
+    setFilters((prev) => [
+      ...prev.filter((x) => x.id !== "agent-filter"),
+      ...(!agent
+        ? []
+        : [
+            {
+              id: "agent-filter",
+              filter: (p: Payment) => p.agent === agent.id,
+            },
+          ]),
+    ]);
+  }, [agent]);
 
-	useEffect(() => {
-		setFilters((prev) => [
-			...prev.filter((x) => x.id !== "paid"),
-			...(typeof paid !== "boolean" ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
-		]);
-	}, [paid]);
+  useEffect(() => {
+    setFilters((prev) => [
+      ...prev.filter((x) => x.id !== "corporate-filter"),
+      ...(!corporate
+        ? []
+        : [
+            {
+              id: "corporate-filter",
+              filter: (p: Payment) => p.corporate === corporate.id,
+            },
+          ]),
+    ]);
+  }, [corporate]);
 
-	useEffect(() => {
-		setFilters((prev) => [
-			...prev.filter((x) => x.id !== "commissionTransfer"),
-			...(typeof commissionTransfer !== "boolean"
-				? []
-				: [{id: "commissionTransfer", filter: (p: Payment) => !p.commissionTransfer === commissionTransfer}]),
-		]);
-	}, [commissionTransfer]);
+  useEffect(() => {
+    setFilters((prev) => [
+      ...prev.filter((x) => x.id !== "paid"),
+      ...(typeof paid !== "boolean"
+        ? []
+        : [{ id: "paid", filter: (p: Payment) => p.isPaid === paid }]),
+    ]);
+  }, [paid]);
 
-	useEffect(() => {
-		setFilters((prev) => [
-			...prev.filter((x) => x.id !== "corporateTransfer"),
-			...(typeof corporateTransfer !== "boolean"
-				? []
-				: [{id: "corporateTransfer", filter: (p: Payment) => !p.corporateTransfer === corporateTransfer}]),
-		]);
-	}, [corporateTransfer]);
+  useEffect(() => {
+    setFilters((prev) => [
+      ...prev.filter((x) => x.id !== "commissionTransfer"),
+      ...(typeof commissionTransfer !== "boolean"
+        ? []
+        : [
+            {
+              id: "commissionTransfer",
+              filter: (p: Payment) =>
+                !p.commissionTransfer === commissionTransfer,
+            },
+          ]),
+    ]);
+  }, [commissionTransfer]);
 
-	useEffect(() => {
-		if (user && user.type === "corporate") return setCorporate(user);
-		if (user && user.type === "agent") return setAgent(user);
-	}, [user]);
+  useEffect(() => {
+    setFilters((prev) => [
+      ...prev.filter((x) => x.id !== "corporateTransfer"),
+      ...(typeof corporateTransfer !== "boolean"
+        ? []
+        : [
+            {
+              id: "corporateTransfer",
+              filter: (p: Payment) =>
+                !p.corporateTransfer === corporateTransfer,
+            },
+          ]),
+    ]);
+  }, [corporateTransfer]);
 
-	const updatePayment = (payment: Payment, key: string, value: any) => {
-		axios
-			.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
-			.then(() => toast.success("Updated the payment"))
-			.finally(reload);
-	};
+  useEffect(() => {
+    if (user && user.type === "corporate") return setCorporate(user);
+    if (user && user.type === "agent") return setAgent(user);
+  }, [user]);
 
-	const deletePayment = (id: string) => {
-		if (!confirm(`Are you sure you want to delete this payment?`)) return;
+  const updatePayment = (payment: Payment, key: string, value: any) => {
+    axios
+      .patch(`api/payments/${payment.id}`, { ...payment, [key]: value })
+      .then(() => toast.success("Updated the payment"))
+      .finally(reload);
+  };
 
-		axios
-			.delete(`/api/payments/${id}`)
-			.then(() => toast.success(`Deleted the "${id}" payment`))
-			.catch((reason) => {
-				if (reason.response.status === 404) {
-					toast.error("Exam not found!");
-					return;
-				}
+  const deletePayment = (id: string) => {
+    if (!confirm(`Are you sure you want to delete this payment?`)) return;
 
-				if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete an approved payment record!");
-					return;
-				}
+    axios
+      .delete(`/api/payments/${id}`)
+      .then(() => toast.success(`Deleted the "${id}" payment`))
+      .catch((reason) => {
+        if (reason.response.status === 404) {
+          toast.error("Exam not found!");
+          return;
+        }
 
-				toast.error("Something went wrong, please try again later.");
-			})
-			.finally(reload);
-	};
+        if (reason.response.status === 403) {
+          toast.error(
+            "You do not have permission to delete an approved payment record!"
+          );
+          return;
+        }
 
-	const getFileAssetsColumns = () => {
-		if (user) {
-			const containerClassName = "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
-			switch (user.type) {
-				case "corporate":
-					return [
-						columnHelper.accessor("corporateTransfer", {
-							header: "Corporate transfer",
-							id: "corporateTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions={info.row.original.isPaid ? "read" : "write"}
-										asset={info.row.original.corporateTransfer}
-										paymentId={info.row.original.id}
-										type="corporate"
-									/>
-								</div>
-							),
-						}),
-					];
-				case "agent":
-					return [
-						columnHelper.accessor("commissionTransfer", {
-							header: "Commission transfer",
-							id: "commissionTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions="read"
-										asset={info.row.original.commissionTransfer}
-										paymentId={info.row.original.id}
-										type="commission"
-									/>
-								</div>
-							),
-						}),
-					];
-				case "admin":
-					return [
-						columnHelper.accessor("corporateTransfer", {
-							header: "Corporate transfer",
-							id: "corporateTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions="read"
-										asset={info.row.original.corporateTransfer}
-										paymentId={info.row.original.id}
-										type="corporate"
-									/>
-								</div>
-							),
-						}),
-						columnHelper.accessor("commissionTransfer", {
-							header: "Commission transfer",
-							id: "commissionTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions={info.row.original.isPaid ? "read" : "write"}
-										asset={info.row.original.commissionTransfer}
-										paymentId={info.row.original.id}
-										type="commission"
-									/>
-								</div>
-							),
-						}),
-					];
-				case "developer":
-					return [
-						columnHelper.accessor("corporateTransfer", {
-							header: "Corporate transfer",
-							id: "corporateTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions="write"
-										asset={info.row.original.corporateTransfer}
-										paymentId={info.row.original.id}
-										type="corporate"
-									/>
-								</div>
-							),
-						}),
-						columnHelper.accessor("commissionTransfer", {
-							header: "Commission transfer",
-							id: "commissionTransfer",
-							cell: (info) => (
-								<div className={containerClassName}>
-									<PaymentAssetManager
-										reload={reload}
-										permissions="write"
-										asset={info.row.original.commissionTransfer}
-										paymentId={info.row.original.id}
-										type="commission"
-									/>
-								</div>
-							),
-						}),
-					];
-				default:
-					return [];
-			}
-		}
+        toast.error("Something went wrong, please try again later.");
+      })
+      .finally(reload);
+  };
 
-		return [];
-	};
+  const getFileAssetsColumns = () => {
+    if (user) {
+      const containerClassName =
+        "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
+      switch (user.type) {
+        case "corporate":
+          return [
+            columnHelper.accessor("corporateTransfer", {
+              header: "Corporate transfer",
+              id: "corporateTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions={info.row.original.isPaid ? "read" : "write"}
+                    asset={info.row.original.corporateTransfer}
+                    paymentId={info.row.original.id}
+                    type="corporate"
+                  />
+                </div>
+              ),
+            }),
+          ];
+        case "agent":
+          return [
+            columnHelper.accessor("commissionTransfer", {
+              header: "Commission transfer",
+              id: "commissionTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions="read"
+                    asset={info.row.original.commissionTransfer}
+                    paymentId={info.row.original.id}
+                    type="commission"
+                  />
+                </div>
+              ),
+            }),
+          ];
+        case "admin":
+          return [
+            columnHelper.accessor("corporateTransfer", {
+              header: "Corporate transfer",
+              id: "corporateTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions="read"
+                    asset={info.row.original.corporateTransfer}
+                    paymentId={info.row.original.id}
+                    type="corporate"
+                  />
+                </div>
+              ),
+            }),
+            columnHelper.accessor("commissionTransfer", {
+              header: "Commission transfer",
+              id: "commissionTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions={info.row.original.isPaid ? "read" : "write"}
+                    asset={info.row.original.commissionTransfer}
+                    paymentId={info.row.original.id}
+                    type="commission"
+                  />
+                </div>
+              ),
+            }),
+          ];
+        case "developer":
+          return [
+            columnHelper.accessor("corporateTransfer", {
+              header: "Corporate transfer",
+              id: "corporateTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions="write"
+                    asset={info.row.original.corporateTransfer}
+                    paymentId={info.row.original.id}
+                    type="corporate"
+                  />
+                </div>
+              ),
+            }),
+            columnHelper.accessor("commissionTransfer", {
+              header: "Commission transfer",
+              id: "commissionTransfer",
+              cell: (info) => (
+                <div className={containerClassName}>
+                  <PaymentAssetManager
+                    reload={reload}
+                    permissions="write"
+                    asset={info.row.original.commissionTransfer}
+                    paymentId={info.row.original.id}
+                    type="commission"
+                  />
+                </div>
+              ),
+            }),
+          ];
+        default:
+          return [];
+      }
+    }
 
-	const columHelperValue = (key: string, info: any) => {
-		switch (key) {
-			case "agentCommission": {
-				const value = info.getValue();
-				return {value: `${value}%`};
-			}
-			case "agent": {
-				const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
-				return {
-					value: user?.name,
-					user,
-				};
-			}
-			case "agentValue":
-			case "amount": {
-				const value = info.getValue();
-				const numberValue = toFixedNumber(value, 2);
-				return {value: numberValue};
-			}
-			case "date": {
-				const value = info.getValue();
-				return {value: moment(value).format("DD/MM/YYYY")};
-			}
-			case "corporate": {
-				const specificValue = info.row.original.corporate;
-				const user = users.find((x) => x.id === specificValue) as CorporateUser;
-				return {
-					user,
-					value: user?.corporateInformation.companyInformation.name || user?.name,
-				};
-			}
-			case "currency": {
-				return {
-					value: info.row.original.currency,
-				};
-			}
-			case "isPaid":
-			case "corporateId":
-			default: {
-				const value = info.getValue();
-				return {value};
-			}
-		}
-	};
+    return [];
+  };
 
-	const hiddenToCorporateColumns = () => {
-		if (user && user.type !== "corporate")
-			return [
-				columnHelper.accessor("agent", {
-					header: "Country Manager",
-					id: "agent",
-					cell: (info) => {
-						const {user, value} = columHelperValue(info.column.id, info);
-						return (
-							<div
-								className={clsx(
-									"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
-								)}
-								onClick={() => setSelectedAgentUser(user)}>
-								{value}
-							</div>
-						);
-					},
-				}),
-				columnHelper.accessor("agentCommission", {
-					header: "Commission",
-					id: "agentCommission",
-					cell: (info) => {
-						const {value} = columHelperValue(info.column.id, info);
-						return <>{value}</>;
-					},
-				}),
-				columnHelper.accessor("agentValue", {
-					header: "Commission Value",
-					id: "agentValue",
-					cell: (info) => {
-						const {value} = columHelperValue(info.column.id, info);
-						const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
-						const finalValue = `${value} ${currency}`;
-						return <span>{finalValue}</span>;
-					},
-				}),
-			];
-		return [];
-	};
+  const columHelperValue = (key: string, info: any) => {
+    switch (key) {
+      case "agentCommission": {
+        const value = info.getValue();
+        return { value: `${value}%` };
+      }
+      case "agent": {
+        const user = users.find(
+          (x) => x.id === info.row.original.agent
+        ) as AgentUser;
+        return {
+          value: user?.name,
+          user,
+        };
+      }
+      case "agentValue":
+      case "amount": {
+        const value = info.getValue();
+        const numberValue = toFixedNumber(value, 2);
+        return { value: numberValue };
+      }
+      case "date": {
+        const value = info.getValue();
+        return { value: moment(value).format("DD/MM/YYYY") };
+      }
+      case "corporate": {
+        const specificValue = info.row.original.corporate;
+        const user = users.find((x) => x.id === specificValue) as CorporateUser;
+        return {
+          user,
+          value:
+            user?.corporateInformation.companyInformation.name || user?.name,
+        };
+      }
+      case "currency": {
+        return {
+          value: info.row.original.currency,
+        };
+      }
+      case "isPaid":
+      case "corporateId":
+      default: {
+        const value = info.getValue();
+        return { value };
+      }
+    }
+  };
 
-	const defaultColumns = [
-		columnHelper.accessor("corporate", {
-			header: "Corporate ID",
-			id: "corporateId",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
-				return value;
-			},
-		}),
-		columnHelper.accessor("corporate", {
-			header: "Corporate",
-			id: "corporate",
-			cell: (info) => {
-				const {user, value} = columHelperValue(info.column.id, info);
-				return (
-					<div
-						className={clsx(
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
-						)}
-						onClick={() => setSelectedCorporateUser(user)}>
-						{value}
-					</div>
-				);
-			},
-		}),
-		columnHelper.accessor("date", {
-			header: "Date",
-			id: "date",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
-				return <span>{value}</span>;
-			},
-		}),
-		columnHelper.accessor("value", {
-			header: "Amount",
-			id: "amount",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
-				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
-				const finalValue = `${value} ${currency}`;
-				return <span>{finalValue}</span>;
-			},
-		}),
-		...hiddenToCorporateColumns(),
-		columnHelper.accessor("isPaid", {
-			header: "Paid",
-			id: "isPaid",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
+  const hiddenToCorporateColumns = () => {
+    if (user && user.type !== "corporate")
+      return [
+        columnHelper.accessor("agent", {
+          header: "Country Manager",
+          id: "agent",
+          cell: (info) => {
+            const { user, value } = columHelperValue(info.column.id, info);
+            return (
+              <div
+                className={clsx(
+                  "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+                )}
+                onClick={() => setSelectedAgentUser(user)}
+              >
+                {value}
+              </div>
+            );
+          },
+        }),
+        columnHelper.accessor("agentCommission", {
+          header: "Commission",
+          id: "agentCommission",
+          cell: (info) => {
+            const { value } = columHelperValue(info.column.id, info);
+            return <>{value}</>;
+          },
+        }),
+        columnHelper.accessor("agentValue", {
+          header: "Commission Value",
+          id: "agentValue",
+          cell: (info) => {
+            const { value } = columHelperValue(info.column.id, info);
+            const currency = CURRENCIES.find(
+              (x) => x.currency === info.row.original.currency
+            )?.label;
+            const finalValue = `${value} ${currency}`;
+            return <span>{finalValue}</span>;
+          },
+        }),
+      ];
+    return [];
+  };
 
-				return (
-					<Checkbox
-						isChecked={value}
-						onChange={(e) => {
-							if (user?.type === agent || user?.type === "corporate" || value) return null;
-							if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
-								return alert("All files need to be uploaded to consider it paid!");
-							if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
+  const defaultColumns = [
+    columnHelper.accessor("corporate", {
+      header: "Corporate ID",
+      id: "corporateId",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return value;
+      },
+    }),
+    columnHelper.accessor("corporate", {
+      header: "Corporate",
+      id: "corporate",
+      cell: (info) => {
+        const { user, value } = columHelperValue(info.column.id, info);
+        return (
+          <div
+            className={clsx(
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+            )}
+            onClick={() => setSelectedCorporateUser(user)}
+          >
+            {value}
+          </div>
+        );
+      },
+    }),
+    columnHelper.accessor("date", {
+      header: "Date",
+      id: "date",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
+      },
+    }),
+    columnHelper.accessor("value", {
+      header: "Amount",
+      id: "amount",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        const currency = CURRENCIES.find(
+          (x) => x.currency === info.row.original.currency
+        )?.label;
+        const finalValue = `${value} ${currency}`;
+        return <span>{finalValue}</span>;
+      },
+    }),
+    ...hiddenToCorporateColumns(),
+    columnHelper.accessor("isPaid", {
+      header: "Paid",
+      id: "isPaid",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
 
-							return updatePayment(info.row.original, "isPaid", e);
-						}}>
-						<span></span>
-					</Checkbox>
-				);
-			},
-		}),
-		...getFileAssetsColumns(),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: Payment}}) => {
-				return (
-					<div className="flex gap-4">
-						{user?.type !== "agent" && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
-						)}
-					</div>
-				);
-			},
-		},
-	];
+        return (
+          <Checkbox
+            isChecked={value}
+            onChange={(e) => {
+              if (user?.type === agent || user?.type === "corporate" || value)
+                return null;
+              if (
+                !info.row.original.commissionTransfer ||
+                !info.row.original.corporateTransfer
+              )
+                return alert(
+                  "All files need to be uploaded to consider it paid!"
+                );
+              if (
+                !confirm(`Are you sure you want to consider this payment paid?`)
+              )
+                return null;
 
-	const table = useReactTable({
-		data: displayPayments,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
+              return updatePayment(info.row.original, "isPaid", e);
+            }}
+          >
+            <span></span>
+          </Checkbox>
+        );
+      },
+    }),
+    ...getFileAssetsColumns(),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Payment } }) => {
+        return (
+          <div className="flex gap-4">
+            {user?.type !== "agent" && (
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deletePayment(row.original.id)}
+              >
+                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
 
-	const getUserModal = () => {
-		if (user) {
-			if (selectedCorporateUser) {
-				return (
-					<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
-						<>
-							{selectedCorporateUser && (
-								<div className="w-full flex flex-col gap-8">
-									<UserCard
-										loggedInUser={user}
-										onClose={(shouldReload) => {
-											setSelectedCorporateUser(undefined);
-											if (shouldReload) reload();
-										}}
-										user={selectedCorporateUser}
-										disabled
-									/>
-								</div>
-							)}
-						</>
-					</Modal>
-				);
-			}
+  const table = useReactTable({
+    data: displayPayments,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
-			if (selectedAgentUser) {
-				return (
-					<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
-						<>
-							{selectedAgentUser && (
-								<div className="w-full flex flex-col gap-8">
-									<UserCard
-										loggedInUser={user}
-										onClose={(shouldReload) => {
-											setSelectedAgentUser(undefined);
-											if (shouldReload) reload();
-										}}
-										user={selectedAgentUser}
-									/>
-								</div>
-							)}
-						</>
-					</Modal>
-				);
-			}
-		}
+  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]
+  );
 
-		return null;
-	};
+  const paypalColumns = [
+    paypalColumnHelper.accessor("orderId", {
+      header: "Order ID",
+      id: "orderId",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("status", {
+      header: "Status",
+      id: "status",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("name", {
+      header: "User Name",
+      id: "name",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("email", {
+      header: "Email",
+      id: "email",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{value}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("value", {
+      header: "Amount",
+      id: "value",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        const currency = CURRENCIES.find(
+          (x) => x.currency === info.row.original.currency
+        )?.label;
+        const finalValue = `${value} ${currency}`;
+        return <span>{finalValue}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("createdAt", {
+      header: "Date",
+      id: "createdAt",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{moment(value).format("DD/MM/YYYY")}</span>;
+      },
+    }),
+    paypalColumnHelper.accessor("subscriptionExpirationDate", {
+      header: "Expiration Date",
+      id: "subscriptionExpirationDate",
+      cell: (info) => {
+        const { value } = columHelperValue(info.column.id, info);
+        return <span>{moment(value).format("DD/MM/YYYY")}</span>;
+      },
+    }),
+  ];
 
-	const getCSVData = () => {
-		const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
-			const whitelistedColumns = group.headers.filter((header) => CSV_WHITELISTED_KEYS.includes(header.id));
+  const { rows: filteredRows, renderSearch } = useListSearch(
+    paypalFilterRows,
+    updatedPaypalPayments
+  );
 
-			const data = whitelistedColumns.map((data) => ({
-				key: data.column.columnDef.id,
-				label: data.column.columnDef.header,
-			})) as SimpleCSVColumn[];
+  const paypalTable = useReactTable({
+    data: filteredRows,
+    columns: paypalColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  const getUserModal = () => {
+    if (user) {
+      if (selectedCorporateUser) {
+        return (
+          <Modal
+            isOpen={!!selectedCorporateUser}
+            onClose={() => setSelectedCorporateUser(undefined)}
+          >
+            <>
+              {selectedCorporateUser && (
+                <div className="w-full flex flex-col gap-8">
+                  <UserCard
+                    loggedInUser={user}
+                    onClose={(shouldReload) => {
+                      setSelectedCorporateUser(undefined);
+                      if (shouldReload) reload();
+                    }}
+                    user={selectedCorporateUser}
+                    disabled
+                  />
+                </div>
+              )}
+            </>
+          </Modal>
+        );
+      }
 
-			return [...accm, ...data];
-		}, []);
+      if (selectedAgentUser) {
+        return (
+          <Modal
+            isOpen={!!selectedAgentUser}
+            onClose={() => setSelectedAgentUser(undefined)}
+          >
+            <>
+              {selectedAgentUser && (
+                <div className="w-full flex flex-col gap-8">
+                  <UserCard
+                    loggedInUser={user}
+                    onClose={(shouldReload) => {
+                      setSelectedAgentUser(undefined);
+                      if (shouldReload) reload();
+                    }}
+                    user={selectedAgentUser}
+                  />
+                </div>
+              )}
+            </>
+          </Modal>
+        );
+      }
+    }
 
-		const {rows} = table.getRowModel();
+    return null;
+  };
 
-		const finalColumns = [
-			...columns,
-			{
-				key: "currency",
-				label: "Currency",
-			},
-		];
+  const getCSVData = () => {
+    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() as any[])
+      .reduce((accm: any[], group: any) => {
+        const whitelistedColumns = group.headers.filter((header: any) =>
+        whitelist.includes(header.id)
+        );
 
-		return {
-			columns: finalColumns,
-			rows: rows.map((row) => {
-				return finalColumns.reduce((accm, {key}) => {
-					const {value} = columHelperValue(key, {
-						row,
-						getValue: () => row.getValue(key),
-					});
-					return {
-						...accm,
-						[key]: value,
-					};
-				}, {});
-			}),
-		};
-	};
+        const data = whitelistedColumns.map((data: any) => ({
+          key: data.column.columnDef.id,
+          label: data.column.columnDef.header,
+        })) as SimpleCSVColumn[];
 
-	const {rows: csvRows, columns: csvColumns} = getCSVData();
-	return (
-		<>
-			<Head>
-				<title>Payment Record | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			{user && (
-				<Layout user={user} className="gap-6">
-					{getUserModal()}
-					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
-						<PaymentCreator
-							onClose={() => setIsCreatingPayment(false)}
-							reload={reload}
-							showComission={user.type === "developer" || user.type === "admin"}
-						/>
-					</Modal>
+        return [...accm, ...data];
+      }, []);
 
-					<div className="w-full flex flex-end justify-between p-2">
-						<h1 className="text-2xl font-semibold">Payment Record</h1>
-						<div className="flex justify-end gap-2">
-							{(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
-								<Button className="max-w-[200px]" variant="outline">
-									<CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
-										Download CSV
-									</CSVLink>
-								</Button>
-							)}
-							{(user.type === "developer" || user.type === "admin") && (
-								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
-									New Payment
-								</Button>
-							)}
-						</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>
-					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-						<thead>
-							{table.getHeaderGroups().map((headerGroup) => (
-								<tr key={headerGroup.id}>
-									{headerGroup.headers.map((header) => (
-										<th className="p-4 text-left" key={header.id}>
-											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-										</th>
-									))}
-								</tr>
-							))}
-						</thead>
-						<tbody className="px-2">
-							{table.getRowModel().rows.map((row) => (
-								<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-									{row.getVisibleCells().map((cell) => (
-										<td className="px-4 py-2" key={cell.id}>
-											{flexRender(cell.column.columnDef.cell, cell.getContext())}
-										</td>
-									))}
-								</tr>
-							))}
-						</tbody>
-					</table>
-				</Layout>
-			)}
-		</>
-	);
+    const { rows } = currentTable.getRowModel();
+
+    const finalColumns = [
+      ...columns,
+      {
+        key: "currency",
+        label: "Currency",
+      },
+    ];
+
+    return {
+      columns: finalColumns,
+      rows: rows.map((row) => {
+        return finalColumns.reduce((accm, { key }) => {
+          const { value } = columHelperValue(key, {
+            row,
+            getValue: () => row.getValue(key),
+          });
+          return {
+            ...accm,
+            [key]: value,
+          };
+        }, {});
+      }),
+    };
+  };
+
+  const { rows: csvRows, columns: csvColumns } = getCSVData();
+
+  const renderTable = (table: Table<any>) => (
+    <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th className="p-4 text-left" key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody className="px-2">
+        {table.getRowModel().rows.map((row) => (
+          <tr
+            className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+            key={row.id}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td className="px-4 py-2" key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+
+  return (
+    <>
+      <Head>
+        <title>Payment Record | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      {user && (
+        <Layout user={user} className="gap-6">
+          {getUserModal()}
+          <Modal
+            isOpen={isCreatingPayment}
+            onClose={() => setIsCreatingPayment(false)}
+          >
+            <PaymentCreator
+              onClose={() => setIsCreatingPayment(false)}
+              reload={reload}
+              showComission={user.type === "developer" || user.type === "admin"}
+            />
+          </Modal>
+
+          <div className="w-full flex flex-end justify-between p-2">
+            <h1 className="text-2xl font-semibold">Payment Record</h1>
+            <div className="flex justify-end gap-2">
+              {(user.type === "developer" ||
+                user.type === "admin" ||
+                user.type === "agent" ||
+                user.type === "corporate") && (
+                <Button className="max-w-[200px]" variant="outline">
+                  <CSVLink
+                    data={csvRows}
+                    headers={csvColumns}
+                    filename="payment-records.csv"
+                  >
+                    Download CSV
+                  </CSVLink>
+                </Button>
+              )}
+              {(user.type === "developer" || user.type === "admin") && (
+                <Button
+                  className="max-w-[200px]"
+                  variant="outline"
+                  onClick={() => setIsCreatingPayment(true)}
+                >
+                  New Payment
+                </Button>
+              )}
+            </div>
+          </div>
+          <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 }) =>
+                  clsx(
+                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                    "transition duration-300 ease-in-out",
+                    selected
+                      ? "bg-white shadow"
+                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+                  )
+                }
+              >
+                Payments
+              </Tab>
+              {['admin','developer'].includes(user.type) && (<Tab
+                className={({ selected }) =>
+                  clsx(
+                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                    "transition duration-300 ease-in-out",
+                    selected
+                      ? "bg-white shadow"
+                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+                  )
+                }
+              >
+                Paypal
+              </Tab>
+              )}
+            </Tab.List>
+            <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 flex flex-col gap-8">
+                {renderSearch()}
+                {renderTable(paypalTable as Table<PaypalPaymentWithUserData>)}
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </Layout>
+      )}
+    </>
+  );
 }
diff --git a/src/pages/tickets.tsx b/src/pages/tickets.tsx
index 4d30fb3c..21c6fd92 100644
--- a/src/pages/tickets.tsx
+++ b/src/pages/tickets.tsx
@@ -11,6 +11,7 @@ import {
   TicketStatusLabel,
   TicketType,
   TicketTypeLabel,
+  TicketWithCorporate,
 } from "@/interfaces/ticket";
 import { sessionOptions } from "@/lib/session";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -28,7 +29,7 @@ import { useEffect, useState } from "react";
 import { BsArrowDown, BsArrowUp } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
-const columnHelper = createColumnHelper<Ticket>();
+const columnHelper = createColumnHelper<TicketWithCorporate>();
 
 export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
@@ -75,10 +76,26 @@ const TypesClassNames: { [key in TicketType]: string } = {
   help: "bg-mti-blue-light",
 };
 
+const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || ''.replace(
+  /[.*+?^${}()|[\]\\]/g,
+  "\\$&"
+);
+const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
+
+type Source = "webpage" | "platform" | "";
+
+const SOURCE_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "webpage", label: "Webpage" },
+  { value: "platform", label: "Platform" },
+]
+
 export default function Tickets() {
   const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
   const [selectedTicket, setSelectedTicket] = useState<Ticket>();
   const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [sourceFilter, setSourceFilter] = useState<Source>("");
+
   const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
 
   const [typeFilter, setTypeFilter] = useState<TicketType>();
@@ -90,7 +107,7 @@ export default function Tickets() {
 
   const sortByDate = (a: Ticket, b: Ticket) => {
     return moment((dateSorting === "desc" ? b : a).date).diff(
-      moment((dateSorting === "desc" ? a : b).date),
+      moment((dateSorting === "desc" ? a : b).date)
     );
   };
 
@@ -102,11 +119,16 @@ export default function Tickets() {
     if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
     if (assigneeFilter)
       filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
-
+    if (sourceFilter) {
+      if (sourceFilter === "webpage")
+        filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
+      if (sourceFilter === "platform")
+        filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom)));
+    }
     setFilteredTickets(
-      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
+      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate)
     );
-  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]);
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]);
 
   const columns = [
     columnHelper.accessor("id", {
@@ -119,7 +141,7 @@ export default function Tickets() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            TypesClassNames[info.getValue()],
+            TypesClassNames[info.getValue()]
           )}
         >
           {TicketTypeLabel[info.getValue()]}
@@ -164,7 +186,7 @@ export default function Tickets() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            StatusClassNames[info.getValue()],
+            StatusClassNames[info.getValue()]
           )}
         >
           {TicketStatusLabel[info.getValue()]}
@@ -175,6 +197,10 @@ export default function Tickets() {
       header: "Assignee",
       cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
     }),
+    columnHelper.accessor("corporate", {
+      header: "Corporate",
+      cell: (info) => info.getValue(),
+    }),
   ];
 
   const getAssigneeValue = () => {
@@ -290,7 +316,7 @@ export default function Tickets() {
                   { value: "me", label: "Assigned to me" },
                   ...users
                     .filter((x) =>
-                      ["admin", "developer", "agent"].includes(x.type),
+                      ["admin", "developer", "agent"].includes(x.type)
                     )
                     .map((u) => ({
                       value: u.id,
@@ -302,7 +328,7 @@ export default function Tickets() {
                 onChange={(value) =>
                   value
                     ? setAssigneeFilter(
-                        value.value === "me" ? user.id : value.value,
+                        value.value === "me" ? user.id : value.value
                       )
                     : setAssigneeFilter(undefined)
                 }
@@ -310,6 +336,18 @@ export default function Tickets() {
                 isClearable
               />
             </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Source
+              </label>
+              <Select
+                options={SOURCE_OPTIONS}
+                disabled={user.type === "agent"}
+                value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
+                onChange={(value) => setSourceFilter(value?.value as Source)
+                }
+              />
+            </div>
           </div>
 
           <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
@@ -322,7 +360,7 @@ export default function Tickets() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </th>
                   ))}
@@ -334,7 +372,7 @@ export default function Tickets() {
                 <tr
                   className={clsx(
                     "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
-                    "transition duration-300 ease-in-out",
+                    "transition duration-300 ease-in-out"
                   )}
                   onClick={() => setSelectedTicket(row.original)}
                   key={row.id}
@@ -343,7 +381,7 @@ export default function Tickets() {
                     <td className="w-fit items-center px-4 py-2" key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </td>
                   ))}