diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index c3cd9bce..7bd34dac 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -243,7 +243,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 									options={CURRENCIES_OPTIONS}
 									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
 									onChange={(value) => setPaymentCurrency(value?.value)}
+									menuPortalTarget={document?.body}
 									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -282,8 +284,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 										value: referralAgent,
 										label: referralAgentLabel,
 									}}
+									menuPortalTarget={document?.body}
 									onChange={(value) => setReferralAgent(value?.value)}
 									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -520,6 +524,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<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={USER_STATUS_OPTIONS}
+									menuPortalTarget={document?.body}
 									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
 									onChange={(value) => setStatus(value?.value as typeof user.status)}
 									styles={{
@@ -532,6 +537,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 												outline: "none",
 											},
 										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -546,6 +552,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<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={USER_TYPE_OPTIONS}
+									menuPortalTarget={document?.body}
 									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
 									onChange={(value) => setType(value?.value as typeof user.type)}
 									styles={{
@@ -558,6 +565,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 												outline: "none",
 											},
 										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx
index 1bde57c8..a0c017ca 100644
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -125,7 +125,9 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 							onChange={(value) => setParticipants(value.map((x) => x.value))}
 							isMulti
 							isSearchable
+							menuPortalTarget={document?.body}
 							styles={{
+								menuPortal: (base) => ({...base, zIndex: 9999}),
 								control: (styles) => ({
 									...styles,
 									backgroundColor: "white",
diff --git a/src/pages/(admin)/Lists/PackageList.tsx b/src/pages/(admin)/Lists/PackageList.tsx
index 5513215b..9c60a28b 100644
--- a/src/pages/(admin)/Lists/PackageList.tsx
+++ b/src/pages/(admin)/Lists/PackageList.tsx
@@ -71,7 +71,9 @@ function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void})
 						defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
 						onChange={(value) => setCurrency(value?.value || "EUR")}
 						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",
@@ -105,7 +107,9 @@ function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void})
 						defaultValue={{value: "months", label: "Months"}}
 						onChange={(value) => setUnit((value?.value as DurationUnit) || "months")}
 						value={{value: unit, label: capitalize(unit)}}
+						menuPortalTarget={document?.body}
 						styles={{
+							menuPortal: (base) => ({...base, zIndex: 9999}),
 							control: (styles) => ({
 								...styles,
 								paddingLeft: "4px",
diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx
index f352d781..51ea0962 100644
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -115,7 +115,9 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 						}))}
 						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",
@@ -144,7 +146,9 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 							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",
@@ -824,7 +828,9 @@ export default function PaymentRecord() {
 								}
 								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",
@@ -859,7 +865,9 @@ export default function PaymentRecord() {
 									}))}
 									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",
@@ -892,7 +900,9 @@ export default function PaymentRecord() {
 									if (value) return setPaid(value.value);
 									setPaid(null);
 								}}
+								menuPortalTarget={document?.body}
 								styles={{
+									menuPortal: (base) => ({...base, zIndex: 9999}),
 									control: (styles) => ({
 										...styles,
 										paddingLeft: "4px",
@@ -947,7 +957,9 @@ export default function PaymentRecord() {
 										if (value) return setCommissionTransfer(value.value);
 										setCommissionTransfer(null);
 									}}
+									menuPortalTarget={document?.body}
 									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -979,7 +991,9 @@ export default function PaymentRecord() {
 									if (value) return setCorporateTransfer(value.value);
 									setCorporateTransfer(null);
 								}}
+								menuPortalTarget={document?.body}
 								styles={{
+									menuPortal: (base) => ({...base, zIndex: 9999}),
 									control: (styles) => ({
 										...styles,
 										paddingLeft: "4px",
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index 827c85de..31966d57 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -306,7 +306,9 @@ export default function History({user}: {user: User}) {
 									options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 									defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 									onChange={(value) => setStatsUserId(value?.value)}
+									menuPortalTarget={document?.body}
 									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -322,7 +324,9 @@ export default function History({user}: {user: User}) {
 										.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 									defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 									onChange={(value) => setStatsUserId(value?.value)}
+									menuPortalTarget={document?.body}
 									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 3d3f09a4..36206207 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -193,7 +193,9 @@ export default function Stats() {
 										options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 										defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 										onChange={(value) => setStatsUserId(value?.value)}
+										menuPortalTarget={document?.body}
 										styles={{
+											menuPortal: (base) => ({...base, zIndex: 9999}),
 											option: (styles, state) => ({
 												...styles,
 												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -210,7 +212,9 @@ export default function Stats() {
 											.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 										defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 										onChange={(value) => setStatsUserId(value?.value)}
+										menuPortalTarget={document?.body}
 										styles={{
+											menuPortal: (base) => ({...base, zIndex: 9999}),
 											option: (styles, state) => ({
 												...styles,
 												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",