diff --git a/front/bun.lock b/front/bun.lock
index 877d0c9a..f3e03e18 100644
--- a/front/bun.lock
+++ b/front/bun.lock
@@ -5,6 +5,7 @@
       "name": "kyoo",
       "dependencies": {
         "@expo/html-elements": "^0.12.5",
+        "@gorhom/portal": "^1.0.14",
         "@material-symbols/svg-400": "^0.31.6",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@react-navigation/bottom-tabs": "^7.3.10",
@@ -309,6 +310,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@gorhom/portal": ["@gorhom/portal@1.0.14", "", { "dependencies": { "nanoid": "^3.3.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A=="],
+
     "@hapi/hoek": ["@hapi/hoek@9.3.0", "", {}, "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="],
 
     "@hapi/topo": ["@hapi/topo@5.1.0", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg=="],
diff --git a/front/package.json b/front/package.json
index 0eec641e..ea4814f0 100644
--- a/front/package.json
+++ b/front/package.json
@@ -14,6 +14,7 @@
 	},
 	"dependencies": {
 		"@expo/html-elements": "^0.12.5",
+		"@gorhom/portal": "^1.0.14",
 		"@material-symbols/svg-400": "^0.31.6",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@react-navigation/bottom-tabs": "^7.3.10",
diff --git a/front/src/primitives/menu.tsx b/front/src/primitives/menu.tsx
index 73af939d..9f7e16cf 100644
--- a/front/src/primitives/menu.tsx
+++ b/front/src/primitives/menu.tsx
@@ -1,6 +1,7 @@
 import { Portal } from "@gorhom/portal";
 import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
 import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
+import { useRouter } from "expo-router";
 import {
 	type ComponentType,
 	type ReactElement,
@@ -18,8 +19,8 @@ import { percent, px, sm, useYoshiki, vh, xl } from "yoshiki/native";
 import { Icon, IconButton } from "./icons";
 import { PressableFeedback } from "./links";
 import { P } from "./text";
-import { ts } from "./utils";
 import { ContrastArea, SwitchVariant } from "./theme";
+import { ts } from "./utils";
 
 const MenuContext = createContext<((open: boolean) => void) | undefined>(undefined);
 
diff --git a/front/src/providers/index.tsx b/front/src/providers/index.tsx
index a84a2f28..117fb521 100644
--- a/front/src/providers/index.tsx
+++ b/front/src/providers/index.tsx
@@ -6,10 +6,10 @@ import { createQueryClient } from "~/query";
 import { AccountProvider } from "./account-provider";
 import { ErrorConsumer } from "./error-consumer";
 import { ErrorProvider } from "./error-provider";
+import { NativeProviders } from "./native-providers";
 import { TranslationsProvider } from "./translations.native";
 
-function getServerData(key: string) {
-}
+function getServerData(key: string) {}
 
 const QueryProvider = ({ children }: { children: ReactNode }) => {
 	const [queryClient] = useState(() => createQueryClient());
@@ -38,7 +38,9 @@ export const Providers = ({ children }: { children: ReactNode }) => {
 				<ErrorProvider>
 					<AccountProvider>
 						<TranslationsProvider>
-							<ErrorConsumer scope="root">{children}</ErrorConsumer>
+							<NativeProviders>
+								<ErrorConsumer scope="root">{children}</ErrorConsumer>
+							</NativeProviders>
 						</TranslationsProvider>
 					</AccountProvider>
 				</ErrorProvider>
diff --git a/front/src/providers/native-providers.tsx b/front/src/providers/native-providers.tsx
new file mode 100644
index 00000000..2d11ab45
--- /dev/null
+++ b/front/src/providers/native-providers.tsx
@@ -0,0 +1,6 @@
+import { PortalProvider } from "@gorhom/portal";
+import type { ReactNode } from "react";
+
+export const NativeProviders = ({ children }: { children: ReactNode }) => {
+	return <PortalProvider>{children}</PortalProvider>;
+};
diff --git a/front/src/providers/native-providers.web.tsx b/front/src/providers/native-providers.web.tsx
new file mode 100644
index 00000000..87d6bf6d
--- /dev/null
+++ b/front/src/providers/native-providers.web.tsx
@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export const NativeProviders = ({ children }: { children: ReactNode }) => {
+	return children;
+};