diff --git a/src/components/Exercises/InteractiveSpeaking.tsx b/src/components/Exercises/InteractiveSpeaking.tsx
index f397dee1..7bad812c 100644
--- a/src/components/Exercises/InteractiveSpeaking.tsx
+++ b/src/components/Exercises/InteractiveSpeaking.tsx
@@ -60,7 +60,6 @@ export default function InteractiveSpeaking({
 		setIsLoading(true);
 
 		const answer = await saveAnswer(questionIndex);
-		console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
 		if (questionIndex + 1 < prompts.length) {
 			setQuestionIndex(questionIndex + 1);
 			setIsLoading(false);
diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx
index f6983584..4f17c2c3 100644
--- a/src/components/Exercises/MatchSentences.tsx
+++ b/src/components/Exercises/MatchSentences.tsx
@@ -87,10 +87,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 		return {total, correct, missing};
 	};
 
-	useEffect(() => {
-		console.log(answers);
-	}, [answers]);
-
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/PaymobPayment.tsx b/src/components/PaymobPayment.tsx
index 6ff8b578..47cec9d6 100644
--- a/src/components/PaymobPayment.tsx
+++ b/src/components/PaymobPayment.tsx
@@ -20,7 +20,6 @@ interface Props {
 
 export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
-	console.log(user.id);
 
 	const router = useRouter();
 
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index 0b70a961..8c6a4c87 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -46,8 +46,6 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 		readAs: "ArrayBuffer",
 	});
 
-	useEffect(() => console.log(expiryDate), [expiryDate]);
-
 	useEffect(() => {
 		if (!isExpiryDateEnabled) setExpiryDate(null);
 	}, [isExpiryDateEnabled]);
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index dd351f1c..23b941a5 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -1,942 +1,650 @@
 import Button from "@/components/Low/Button";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
-import { Popover, Transition } from "@headlessui/react";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
+import {Popover, Transition} from "@headlessui/react";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, reverse } from "lodash";
+import {capitalize, reverse} from "lodash";
 import moment from "moment";
-import { Fragment, useEffect, useState } from "react";
-import {
-  BsArrowDown,
-  BsArrowDownUp,
-  BsArrowUp,
-  BsCheck,
-  BsCheckCircle,
-  BsEye,
-  BsFillExclamationOctagonFill,
-  BsPerson,
-  BsTrash,
-} from "react-icons/bs";
-import { toast } from "react-toastify";
-import { countries, TCountries } from "countries-list";
+import {Fragment, useEffect, useState} from "react";
+import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {
-  getUserCompanyName,
-  isAgentUser,
-  USER_TYPE_LABELS,
-} from "@/resources/user";
+import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
-import { useRouter } from "next/router";
-import { isCorporateUser } from "@/resources/user";
-import { useListSearch } from "@/hooks/useListSearch";
-import { getUserCorporate } from "@/utils/groups";
-import { asyncSorter } from "@/utils";
-import { exportListToExcel, UserListRow } from "@/utils/users";
+import {useRouter} from "next/router";
+import {isCorporateUser} from "@/resources/user";
+import {useListSearch} from "@/hooks/useListSearch";
+import {getUserCorporate} from "@/utils/groups";
+import {asyncSorter} from "@/utils";
+import {exportListToExcel, UserListRow} from "@/utils/users";
 
 const columnHelper = createColumnHelper<User>();
-const searchFields = [
-  ["name"],
-  ["email"],
-  ["corporateInformation", "companyInformation", "name"],
-];
+const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
 
-const CompanyNameCell = ({
-  users,
-  user,
-  groups,
-}: {
-  user: User;
-  users: User[];
-  groups: Group[];
-}) => {
-  const [companyName, setCompanyName] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const name = getUserCompanyName(user, users, groups);
-    setCompanyName(name);
-  }, [user, users, groups]);
+	useEffect(() => {
+		const name = getUserCompanyName(user, users, groups);
+		setCompanyName(name);
+	}, [user, users, groups]);
 
-  return isLoading ? (
-    <span className="animate-pulse">Loading...</span>
-  ) : (
-    <>{companyName}</>
-  );
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
 };
 
 export default function UserList({
-  user,
-  filters = [],
-  renderHeader,
+	user,
+	filters = [],
+	renderHeader,
 }: {
-  user: User;
-  filters?: ((user: User) => boolean)[];
-  renderHeader?: (total: number) => JSX.Element;
+	user: User;
+	filters?: ((user: User) => boolean)[];
+	renderHeader?: (total: number) => JSX.Element;
 }) {
-  const [showDemographicInformation, setShowDemographicInformation] =
-    useState(false);
-  const [sorter, setSorter] = useState<string>();
-  const [displayUsers, setDisplayUsers] = useState<User[]>([]);
-  const [selectedUser, setSelectedUser] = useState<User>();
+	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
+	const [sorter, setSorter] = useState<string>();
+	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
+	const [selectedUser, setSelectedUser] = useState<User>();
 
-  const { users, reload } = useUsers();
-  const { groups } = useGroups(
-    user && (user?.type === "corporate" || user?.type === "teacher")
-      ? user.id
-      : undefined
-  );
+	const {users, reload} = useUsers();
+	const {groups} = useGroups(user && (user?.type === "corporate" || user?.type === "teacher") ? user.id : undefined);
 
-  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
-  const router = useRouter();
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
 
-  const expirationDateColor = (date: Date) => {
-    const momentDate = moment(date);
-    const today = moment(new Date());
+	const expirationDateColor = (date: Date) => {
+		const momentDate = moment(date);
+		const today = moment(new Date());
 
-    if (today.isAfter(momentDate))
-      return "!text-mti-red-light  font-bold line-through";
-    if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
-    if (today.add(2, "weeks").isAfter(momentDate))
-      return "!text-mti-rose-light";
-    if (today.add(1, "months").isAfter(momentDate))
-      return "!text-mti-orange-light";
-  };
+		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
+		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
+		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
+		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
+	};
 
-  useEffect(() => {
-    (async () => {
-      if (user && users) {
-        const filterUsers =
-          user.type === "corporate" || user.type === "teacher"
-            ? users.filter((u) =>
-                groups.flatMap((g) => g.participants).includes(u.id)
-              )
-            : users;
+	useEffect(() => {
+		(async () => {
+			if (user && users) {
+				const filterUsers =
+					user.type === "corporate" || user.type === "teacher"
+						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
+						: users;
 
-        const filteredUsers = filters.reduce(
-          (d, f) => d.filter(f),
-          filterUsers
-        );
-        const sortedUsers = await asyncSorter<User>(
-          filteredUsers,
-          sortFunction
-        );
-        console.log(sortedUsers);
+				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
 
-        setDisplayUsers([...sortedUsers]);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user, users, sorter, groups]);
+				setDisplayUsers([...sortedUsers]);
+			}
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [user, users, sorter, groups]);
 
-  const deleteAccount = (user: User) => {
-    if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
-      return;
+	const deleteAccount = (user: User) => {
+		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
 
-    axios
-      .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
-      .then(() => {
-        toast.success("User deleted successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "delete-error" });
-      })
-      .finally(reload);
-  };
+		axios
+			.delete<{ok: boolean}>(`/api/user?id=${user.id}`)
+			.then(() => {
+				toast.success("User deleted successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "delete-error"});
+			})
+			.finally(reload);
+	};
 
-  const updateAccountType = (user: User, type: Type) => {
-    if (
-      !confirm(
-        `Are you sure you want to update ${
-          user.name
-        }'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
-      )
-    )
-      return;
+	const updateAccountType = (user: User, type: Type) => {
+		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
 
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        type,
-      })
-      .then(() => {
-        toast.success("User type updated successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				type,
+			})
+			.then(() => {
+				toast.success("User type updated successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const verifyAccount = (user: User) => {
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        isVerified: true,
-      })
-      .then(() => {
-        toast.success("User verified successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+	const verifyAccount = (user: User) => {
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				isVerified: true,
+			})
+			.then(() => {
+				toast.success("User verified successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const toggleDisableAccount = (user: User) => {
-    if (
-      !confirm(
-        `Are you sure you want to ${
-          user.status === "disabled" ? "enable" : "disable"
-        } ${
-          user.name
-        }'s account? This change is usually related to their payment state.`
-      )
-    )
-      return;
+	const toggleDisableAccount = (user: User) => {
+		if (
+			!confirm(
+				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
+					user.name
+				}'s account? This change is usually related to their payment state.`,
+			)
+		)
+			return;
 
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        status: user.status === "disabled" ? "active" : "disabled",
-      })
-      .then(() => {
-        toast.success(
-          `User ${
-            user.status === "disabled" ? "enabled" : "disabled"
-          } successfully!`
-        );
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				status: user.status === "disabled" ? "active" : "disabled",
+			})
+			.then(() => {
+				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const SorterArrow = ({ name }: { name: string }) => {
-    if (sorter === name) return <BsArrowUp />;
-    if (sorter === reverseString(name)) return <BsArrowDown />;
+	const SorterArrow = ({name}: {name: string}) => {
+		if (sorter === name) return <BsArrowUp />;
+		if (sorter === reverseString(name)) return <BsArrowDown />;
 
-    return <BsArrowDownUp />;
-  };
+		return <BsArrowDownUp />;
+	};
 
-  const actionColumn = ({ row }: { row: { original: User } }) => {
-    return (
-      <div className="flex gap-4">
-        {PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
-          <Popover className="relative">
-            <Popover.Button>
-              <div data-tip="Change Type" className="cursor-pointer tooltip">
-                <BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-              </div>
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
-                <div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
-                  <Button
-                    onClick={() => updateAccountType(row.original, "student")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "student" ||
-                      !PERMISSIONS.generateCode["student"].includes(user.type)
-                    }
-                  >
-                    Student
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "teacher")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "teacher" ||
-                      !PERMISSIONS.generateCode["teacher"].includes(user.type)
-                    }
-                  >
-                    Teacher
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "corporate")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "corporate" ||
-                      !PERMISSIONS.generateCode["corporate"].includes(user.type)
-                    }
-                  >
-                    Corporate
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "admin")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "admin" ||
-                      !PERMISSIONS.generateCode["admin"].includes(user.type)
-                    }
-                  >
-                    Admin
-                  </Button>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </Popover>
-        )}
-        {!row.original.isVerified &&
-          PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
-            <div
-              data-tip="Verify User"
-              className="cursor-pointer tooltip"
-              onClick={() => verifyAccount(row.original)}
-            >
-              <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            </div>
-          )}
-        {PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
-          <div
-            data-tip={
-              row.original.status === "disabled"
-                ? "Enable User"
-                : "Disable User"
-            }
-            className="cursor-pointer tooltip"
-            onClick={() => toggleDisableAccount(row.original)}
-          >
-            {row.original.status === "disabled" ? (
-              <BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            ) : (
-              <BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            )}
-          </div>
-        )}
-        {PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
-          <div
-            data-tip="Delete"
-            className="cursor-pointer tooltip"
-            onClick={() => deleteAccount(row.original)}
-          >
-            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-          </div>
-        )}
-      </div>
-    );
-  };
+	const actionColumn = ({row}: {row: {original: User}}) => {
+		return (
+			<div className="flex gap-4">
+				{PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+					<Popover className="relative">
+						<Popover.Button>
+							<div data-tip="Change Type" className="cursor-pointer tooltip">
+								<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						</Popover.Button>
+						<Transition
+							as={Fragment}
+							enter="transition ease-out duration-200"
+							enterFrom="opacity-0 translate-y-1"
+							enterTo="opacity-100 translate-y-0"
+							leave="transition ease-in duration-150"
+							leaveFrom="opacity-100 translate-y-0"
+							leaveTo="opacity-0 translate-y-1">
+							<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
+								<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
+									<Button
+										onClick={() => updateAccountType(row.original, "student")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
+										Student
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "teacher")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
+										Teacher
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "corporate")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
+										Corporate
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "admin")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
+										Admin
+									</Button>
+								</div>
+							</Popover.Panel>
+						</Transition>
+					</Popover>
+				)}
+				{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
+						<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+					</div>
+				)}
+				{PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+					<div
+						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
+						className="cursor-pointer tooltip"
+						onClick={() => toggleDisableAccount(row.original)}>
+						{row.original.status === "disabled" ? (
+							<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						) : (
+							<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						)}
+					</div>
+				)}
+				{PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && (
+					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
+						<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+					</div>
+				)}
+			</div>
+		);
+	};
 
-  const demographicColumns = [
-    columnHelper.accessor("name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
-          <span>Name</span>
-          <SorterArrow name="name" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("demographicInformation.country", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
-        >
-          <span>Country</span>
-          <SorterArrow name="country" />
-        </button>
-      ) as any,
-      cell: (info) =>
-        info.getValue()
-          ? `${
-              countryCodes.findOne("countryCode" as any, info.getValue()).flag
-            } ${
-              countries[info.getValue() as unknown as keyof TCountries].name
-            } (+${
-              countryCodes.findOne("countryCode" as any, info.getValue())
-                .countryCallingCode
-            })`
-          : "Not available",
-    }),
-    columnHelper.accessor("demographicInformation.phone", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
-        >
-          <span>Phone</span>
-          <SorterArrow name="phone" />
-        </button>
-      ) as any,
-      cell: (info) => info.getValue() || "Not available",
-      enableSorting: true,
-    }),
-    columnHelper.accessor(
-      (x) =>
-        x.type === "corporate"
-          ? x.demographicInformation?.position
-          : x.demographicInformation?.employment,
-      {
-        id: "employment",
-        header: (
-          <button
-            className="flex gap-2 items-center"
-            onClick={() =>
-              setSorter((prev) => selectSorter(prev, "employment"))
-            }
-          >
-            <span>Employment/Position</span>
-            <SorterArrow name="employment" />
-          </button>
-        ) as any,
-        cell: (info) =>
-          (info.row.original.type === "corporate"
-            ? info.getValue()
-            : capitalize(info.getValue())) || "Not available",
-        enableSorting: true,
-      }
-    ),
-    columnHelper.accessor("demographicInformation.gender", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
-        >
-          <span>Gender</span>
-          <SorterArrow name="gender" />
-        </button>
-      ) as any,
-      cell: (info) => capitalize(info.getValue()) || "Not available",
-      enableSorting: true,
-    }),
-    {
-      header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
-          Switch
-        </span>
-      ),
-      id: "actions",
-      cell: actionColumn,
-    },
-  ];
+	const demographicColumns = [
+		columnHelper.accessor("name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+					<span>Name</span>
+					<SorterArrow name="name" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("demographicInformation.country", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
+					<span>Country</span>
+					<SorterArrow name="country" />
+				</button>
+			) as any,
+			cell: (info) =>
+				info.getValue()
+					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
+							countries[info.getValue() as unknown as keyof TCountries].name
+					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
+					: "Not available",
+		}),
+		columnHelper.accessor("demographicInformation.phone", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
+					<span>Phone</span>
+					<SorterArrow name="phone" />
+				</button>
+			) as any,
+			cell: (info) => info.getValue() || "Not available",
+			enableSorting: true,
+		}),
+		columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
+			id: "employment",
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
+					<span>Employment/Position</span>
+					<SorterArrow name="employment" />
+				</button>
+			) as any,
+			cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
+			enableSorting: true,
+		}),
+		columnHelper.accessor("demographicInformation.gender", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
+					<span>Gender</span>
+					<SorterArrow name="gender" />
+				</button>
+			) as any,
+			cell: (info) => capitalize(info.getValue()) || "Not available",
+			enableSorting: true,
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
+		},
+	];
 
-  const defaultColumns = [
-    columnHelper.accessor("name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
-          <span>Name</span>
-          <SorterArrow name="name" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {row.original.type === "corporate"
-            ? row.original.corporateInformation?.companyInformation?.name ||
-              getValue()
-            : getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("email", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
-        >
-          <span>E-mail</span>
-          <SorterArrow name="email" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("type", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
-        >
-          <span>Type</span>
-          <SorterArrow name="type" />
-        </button>
-      ) as any,
-      cell: (info) => USER_TYPE_LABELS[info.getValue()],
-    }),
-    columnHelper.accessor("corporateInformation.companyInformation.name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
-        >
-          <span>Company Name</span>
-          <SorterArrow name="companyName" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <CompanyNameCell
-          user={info.row.original}
-          users={users}
-          groups={groups}
-        />
-      ),
-    }),
-    columnHelper.accessor("subscriptionExpirationDate", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
-        >
-          <span>Expiry Date</span>
-          <SorterArrow name="expiryDate" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <span
-          className={clsx(
-            info.getValue()
-              ? expirationDateColor(moment(info.getValue()).toDate())
-              : ""
-          )}
-        >
-          {!info.getValue()
-            ? "No expiry date"
-            : moment(info.getValue()).format("DD/MM/YYYY")}
-        </span>
-      ),
-    }),
-    columnHelper.accessor("isVerified", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() =>
-            setSorter((prev) => selectSorter(prev, "verification"))
-          }
-        >
-          <span>Verification</span>
-          <SorterArrow name="verification" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
-          <div
-            className={clsx(
-              "w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
-              "transition duration-300 ease-in-out",
-              info.getValue() && "!bg-mti-purple-light "
-            )}
-          >
-            <BsCheck color="white" className="w-full h-full" />
-          </div>
-        </div>
-      ),
-    }),
-    {
-      header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
-          Switch
-        </span>
-      ),
-      id: "actions",
-      cell: actionColumn,
-    },
-  ];
+	const defaultColumns = [
+		columnHelper.accessor("name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+					<span>Name</span>
+					<SorterArrow name="name" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("email", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
+					<span>E-mail</span>
+					<SorterArrow name="email" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("type", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
+					<span>Type</span>
+					<SorterArrow name="type" />
+				</button>
+			) as any,
+			cell: (info) => USER_TYPE_LABELS[info.getValue()],
+		}),
+		columnHelper.accessor("corporateInformation.companyInformation.name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+					<span>Company Name</span>
+					<SorterArrow name="companyName" />
+				</button>
+			) as any,
+			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
+		}),
+		columnHelper.accessor("subscriptionExpirationDate", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
+					<span>Expiry Date</span>
+					<SorterArrow name="expiryDate" />
+				</button>
+			) as any,
+			cell: (info) => (
+				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
+					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
+				</span>
+			),
+		}),
+		columnHelper.accessor("isVerified", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
+					<span>Verification</span>
+					<SorterArrow name="verification" />
+				</button>
+			) as any,
+			cell: (info) => (
+				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
+					<div
+						className={clsx(
+							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+							"transition duration-300 ease-in-out",
+							info.getValue() && "!bg-mti-purple-light ",
+						)}>
+						<BsCheck color="white" className="w-full h-full" />
+					</div>
+				</div>
+			),
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
+		},
+	];
 
-  const reverseString = (str: string) => reverse(str.split("")).join("");
+	const reverseString = (str: string) => reverse(str.split("")).join("");
 
-  const selectSorter = (previous: string | undefined, name: string) => {
-    if (!previous) return name;
-    if (previous === name) return reverseString(name);
+	const selectSorter = (previous: string | undefined, name: string) => {
+		if (!previous) return name;
+		if (previous === name) return reverseString(name);
 
-    return undefined;
-  };
+		return undefined;
+	};
 
-  const sortFunction = async (a: User, b: User) => {
-    if (sorter === "name" || sorter === reverseString("name"))
-      return sorter === "name"
-        ? a.name.localeCompare(b.name)
-        : b.name.localeCompare(a.name);
+	const sortFunction = async (a: User, b: User) => {
+		if (sorter === "name" || sorter === reverseString("name"))
+			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
-    if (sorter === "email" || sorter === reverseString("email"))
-      return sorter === "email"
-        ? a.email.localeCompare(b.email)
-        : b.email.localeCompare(a.email);
+		if (sorter === "email" || sorter === reverseString("email"))
+			return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
 
-    if (sorter === "type" || sorter === reverseString("type"))
-      return sorter === "type"
-        ? userTypes.findIndex((t) => a.type === t) -
-            userTypes.findIndex((t) => b.type === t)
-        : userTypes.findIndex((t) => b.type === t) -
-            userTypes.findIndex((t) => a.type === t);
+		if (sorter === "type" || sorter === reverseString("type"))
+			return sorter === "type"
+				? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
+				: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
 
-    if (sorter === "verification" || sorter === reverseString("verification"))
-      return sorter === "verification"
-        ? a.isVerified.toString().localeCompare(b.isVerified.toString())
-        : b.isVerified.toString().localeCompare(a.isVerified.toString());
+		if (sorter === "verification" || sorter === reverseString("verification"))
+			return sorter === "verification"
+				? a.isVerified.toString().localeCompare(b.isVerified.toString())
+				: b.isVerified.toString().localeCompare(a.isVerified.toString());
 
-    if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
-      if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? -1 : 1;
-      if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? 1 : -1;
-      if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return 0;
-      if (
-        moment(a.subscriptionExpirationDate).isAfter(
-          b.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? -1 : 1;
-      if (
-        moment(b.subscriptionExpirationDate).isAfter(
-          a.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? 1 : -1;
-      return 0;
-    }
+		if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
+			if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
+			if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
+			if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
+			if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
+			if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
+			return 0;
+		}
 
-    if (sorter === "country" || sorter === reverseString("country")) {
-      if (
-        !a.demographicInformation?.country &&
-        b.demographicInformation?.country
-      )
-        return sorter === "country" ? -1 : 1;
-      if (
-        a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return sorter === "country" ? 1 : -1;
-      if (
-        !a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return 0;
+		if (sorter === "country" || sorter === reverseString("country")) {
+			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
+			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
+			if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
 
-      return sorter === "country"
-        ? a.demographicInformation!.country.localeCompare(
-            b.demographicInformation!.country
-          )
-        : b.demographicInformation!.country.localeCompare(
-            a.demographicInformation!.country
-          );
-    }
+			return sorter === "country"
+				? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
+				: b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
+		}
 
-    if (sorter === "phone" || sorter === reverseString("phone")) {
-      if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
-        return sorter === "phone" ? -1 : 1;
-      if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return sorter === "phone" ? 1 : -1;
-      if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return 0;
+		if (sorter === "phone" || sorter === reverseString("phone")) {
+			if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
+			if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
+			if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
 
-      return sorter === "phone"
-        ? a.demographicInformation!.phone.localeCompare(
-            b.demographicInformation!.phone
-          )
-        : b.demographicInformation!.phone.localeCompare(
-            a.demographicInformation!.phone
-          );
-    }
+			return sorter === "phone"
+				? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
+				: b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
+		}
 
-    if (sorter === "employment" || sorter === reverseString("employment")) {
-      const aSortingItem =
-        a.type === "corporate"
-          ? a.demographicInformation?.position
-          : a.demographicInformation?.employment;
-      const bSortingItem =
-        b.type === "corporate"
-          ? b.demographicInformation?.position
-          : b.demographicInformation?.employment;
+		if (sorter === "employment" || sorter === reverseString("employment")) {
+			const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
+			const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
 
-      if (!aSortingItem && bSortingItem)
-        return sorter === "employment" ? -1 : 1;
-      if (aSortingItem && !bSortingItem)
-        return sorter === "employment" ? 1 : -1;
-      if (!aSortingItem && !bSortingItem) return 0;
+			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
+			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
+			if (!aSortingItem && !bSortingItem) return 0;
 
-      return sorter === "employment"
-        ? aSortingItem!.localeCompare(bSortingItem!)
-        : bSortingItem!.localeCompare(aSortingItem!);
-    }
+			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
+		}
 
-    if (sorter === "gender" || sorter === reverseString("gender")) {
-      if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
-        return sorter === "employment" ? -1 : 1;
-      if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
-        return sorter === "employment" ? 1 : -1;
-      if (
-        !a.demographicInformation?.gender &&
-        !b.demographicInformation?.gender
-      )
-        return 0;
+		if (sorter === "gender" || sorter === reverseString("gender")) {
+			if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
+			if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
+			if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
 
-      return sorter === "gender"
-        ? a.demographicInformation!.gender.localeCompare(
-            b.demographicInformation!.gender
-          )
-        : b.demographicInformation!.gender.localeCompare(
-            a.demographicInformation!.gender
-          );
-    }
+			return sorter === "gender"
+				? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
+				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
+		}
 
-    if (sorter === "companyName" || sorter === reverseString("companyName")) {
-      const aCorporateName = getUserCompanyName(a, users, groups);
-      const bCorporateName = getUserCompanyName(b, users, groups);
-      if (!aCorporateName && bCorporateName)
-        return sorter === "companyName" ? -1 : 1;
-      if (aCorporateName && !bCorporateName)
-        return sorter === "companyName" ? 1 : -1;
-      if (!aCorporateName && !bCorporateName) return 0;
+		if (sorter === "companyName" || sorter === reverseString("companyName")) {
+			const aCorporateName = getUserCompanyName(a, users, groups);
+			const bCorporateName = getUserCompanyName(b, users, groups);
+			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
+			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
+			if (!aCorporateName && !bCorporateName) return 0;
 
-      return sorter === "companyName"
-        ? aCorporateName.localeCompare(bCorporateName)
-        : bCorporateName.localeCompare(aCorporateName);
-    }
+			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
+		}
 
-    return a.id.localeCompare(b.id);
-  };
+		return a.id.localeCompare(b.id);
+	};
 
-  const { rows: filteredRows, renderSearch } = useListSearch<User>(
-    searchFields,
-    displayUsers
-  );
+	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
 
-  const table = useReactTable({
-    data: filteredRows,
-    columns: (!showDemographicInformation
-      ? defaultColumns
-      : demographicColumns) as any,
-    getCoreRowModel: getCoreRowModel(),
-  });
+	const table = useReactTable({
+		data: filteredRows,
+		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-  const downloadExcel = () => {
-    const csv = exportListToExcel(filteredRows, users, groups);
+	const downloadExcel = () => {
+		const csv = exportListToExcel(filteredRows, users, groups);
 
-    const element = document.createElement("a");
-    const file = new Blob([csv], { type: "text/csv" });
-    element.href = URL.createObjectURL(file);
-    element.download = "users.csv";
-    document.body.appendChild(element);
-    element.click();
-    document.body.removeChild(element);
-  };
+		const element = document.createElement("a");
+		const file = new Blob([csv], {type: "text/csv"});
+		element.href = URL.createObjectURL(file);
+		element.download = "users.csv";
+		document.body.appendChild(element);
+		element.click();
+		document.body.removeChild(element);
+	};
 
-  const viewStudentFilter = (x: User) => x.type === "student";
-  const viewTeacherFilter = (x: User) => x.type === "teacher";
-  const belongsToAdminFilter = (x: User) => {
-    if (!selectedUser) return false;
-    return groups
-      .filter(
-        (g) =>
-          g.admin === selectedUser.id ||
-          g.participants.includes(selectedUser.id)
-      )
-      .flatMap((g) => g.participants)
-      .includes(x.id);
-  };
+	const viewStudentFilter = (x: User) => x.type === "student";
+	const viewTeacherFilter = (x: User) => x.type === "teacher";
+	const belongsToAdminFilter = (x: User) => {
+		if (!selectedUser) return false;
+		return groups
+			.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+			.flatMap((g) => g.participants)
+			.includes(x.id);
+	};
 
-  const viewStudentFilterBelongsToAdmin = (x: User) =>
-    x.type === "student" && belongsToAdminFilter(x);
-  const viewTeacherFilterBelongsToAdmin = (x: User) =>
-    x.type === "teacher" && belongsToAdminFilter(x);
+	const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
+	const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);
 
-  const renderUserCard = (selectedUser: User) => {
-    const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
-    const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
-    return (
-      <div className="w-full flex flex-col gap-8">
-        <UserCard
-          loggedInUser={user}
-          onViewStudents={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "teacher") &&
-            studentsFromAdmin.length > 0
-              ? () => {
-                  appendUserFilters({
-                    id: "view-students",
-                    filter: viewStudentFilter,
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: belongsToAdminFilter,
-                  });
+	const renderUserCard = (selectedUser: User) => {
+		const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
+		const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
+		return (
+			<div className="w-full flex flex-col gap-8">
+				<UserCard
+					loggedInUser={user}
+					onViewStudents={
+						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
+							? () => {
+									appendUserFilters({
+										id: "view-students",
+										filter: viewStudentFilter,
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: belongsToAdminFilter,
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onViewTeachers={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "student") &&
-            teachersFromAdmin.length > 0
-              ? () => {
-                  appendUserFilters({
-                    id: "view-teachers",
-                    filter: viewTeacherFilter,
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: belongsToAdminFilter,
-                  });
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onViewTeachers={
+						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
+							? () => {
+									appendUserFilters({
+										id: "view-teachers",
+										filter: viewTeacherFilter,
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: belongsToAdminFilter,
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onViewCorporate={
-            selectedUser.type === "teacher" || selectedUser.type === "student"
-              ? () => {
-                  appendUserFilters({
-                    id: "view-corporate",
-                    filter: (x: User) => x.type === "corporate",
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: (x: User) =>
-                      groups
-                        .filter((g) => g.participants.includes(selectedUser.id))
-                        .flatMap((g) => [g.admin, ...g.participants])
-                        .includes(x.id),
-                  });
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onViewCorporate={
+						selectedUser.type === "teacher" || selectedUser.type === "student"
+							? () => {
+									appendUserFilters({
+										id: "view-corporate",
+										filter: (x: User) => x.type === "corporate",
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: (x: User) =>
+											groups
+												.filter((g) => g.participants.includes(selectedUser.id))
+												.flatMap((g) => [g.admin, ...g.participants])
+												.includes(x.id),
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onClose={(shouldReload) => {
-            setSelectedUser(undefined);
-            if (shouldReload) reload();
-          }}
-          user={selectedUser}
-        />
-      </div>
-    );
-  };
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onClose={(shouldReload) => {
+						setSelectedUser(undefined);
+						if (shouldReload) reload();
+					}}
+					user={selectedUser}
+				/>
+			</div>
+		);
+	};
 
-  return (
-    <>
-      {renderHeader && renderHeader(displayUsers.length)}
-      <div className="w-full">
-        <Modal
-          isOpen={!!selectedUser}
-          onClose={() => setSelectedUser(undefined)}
-        >
-          {selectedUser && renderUserCard(selectedUser)}
-        </Modal>
-        <div className="w-full flex flex-col gap-2">
-          <div className="w-full flex gap-2 items-end">
-            {renderSearch()}
-            <Button
-              className="w-full max-w-[200px] mb-1"
-              variant="outline"
-              onClick={downloadExcel}
-            >
-              Download List
-            </Button>
-          </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="py-4 px-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 items-center w-fit" key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </>
-  );
+	return (
+		<>
+			{renderHeader && renderHeader(displayUsers.length)}
+			<div className="w-full">
+				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
+					{selectedUser && renderUserCard(selectedUser)}
+				</Modal>
+				<div className="w-full flex flex-col gap-2">
+					<div className="w-full flex gap-2 items-end">
+						{renderSearch()}
+						<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
+							Download List
+						</Button>
+					</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="py-4 px-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 items-center w-fit" key={cell.id}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</td>
+									))}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</>
+	);
 }
diff --git a/src/pages/(generation)/LevelGeneration.tsx b/src/pages/(generation)/LevelGeneration.tsx
index b6cb9013..fb692173 100644
--- a/src/pages/(generation)/LevelGeneration.tsx
+++ b/src/pages/(generation)/LevelGeneration.tsx
@@ -86,7 +86,6 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Dif
 		axios
 			.get(`/api/exam/level/generate/level?${url.toString()}`)
 			.then((result) => {
-				console.log({data: result.data});
 				playSound(typeof result.data === "string" ? "error" : "check");
 				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
 				setExam(result.data);