diff --git a/src/components/app-portal/AppPortal.css.ts b/src/components/app-portal/AppPortal.css.ts
new file mode 100644
index 00000000..7e435dc9
--- /dev/null
+++ b/src/components/app-portal/AppPortal.css.ts
@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+import { sprinkles } from "@/styles/sprinkle.css";
+
+export const Wrapper = style([
+    sprinkles({ zIndex: 'appPortal' }),
+    {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+
+    width: '100%',
+}])
\ No newline at end of file
diff --git a/src/components/app-portal/AppPortal.tsx b/src/components/app-portal/AppPortal.tsx
new file mode 100644
index 00000000..8229b266
--- /dev/null
+++ b/src/components/app-portal/AppPortal.tsx
@@ -0,0 +1,45 @@
+import {
+    type PropsWithChildren,
+    createContext,
+    useContext,
+    useState,
+} from 'react';
+
+import { createPortal } from 'react-dom';
+
+import * as S from './AppPortal.css';
+
+interface PropsType extends PropsWithChildren {
+    portalName?: string | undefined;
+}
+
+const PortalContext = createContext<HTMLDivElement | null>(null);
+
+const PortalProvider = ({ children }: PropsType) => {
+    const [portalContainer, setPortalContainer] =
+        useState<HTMLDivElement | null>(null);
+
+    return (
+        <PortalContext.Provider value={portalContainer}>
+            <div
+                className={S.Wrapper}
+                id="app-portal"
+                ref={(element) => {
+                    if (element && !portalContainer)
+                        setPortalContainer(element);
+                }}
+            />
+            {children}
+        </PortalContext.Provider>
+    );
+};
+
+const PortalWrapper = ({ children }: PropsType) => {
+    const portalContainer = useContext(PortalContext);
+    return portalContainer ? createPortal(children, portalContainer) : null;
+};
+
+export const AppPortal = {
+    Provider: PortalProvider,
+    Wrapper: PortalWrapper,
+};
diff --git a/src/components/app-portal/index.ts b/src/components/app-portal/index.ts
new file mode 100644
index 00000000..05ceb5dd
--- /dev/null
+++ b/src/components/app-portal/index.ts
@@ -0,0 +1,3 @@
+import { AppPortal } from "./AppPortal";
+
+export default AppPortal;
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 63e65ea3..b65b4a62 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Outlet, createBrowserRouter } from 'react-router-dom';
 
+import AppPortal from '@/components/app-portal';
 import { CoursePage, coursePageLoader } from '@/pages/course';
 import LoginPage from '@/pages/login';
 import MainPage from '@/pages/main';
@@ -18,15 +19,17 @@ const queryClient = new QueryClient({
 
 const InitializedRouter = () => (
     <QueryClientProvider client={queryClient}>
-        <TmapProvider
-            width="100%"
-            height="calc(100vh - 64px)"
-            lat={37.5652045}
-            lng={126.98702028}
-        >
-            <ReactQueryDevtools />
-            <Outlet />
-        </TmapProvider>
+        <AppPortal.Provider>
+            <TmapProvider
+                width="100%"
+                height="calc(100vh - 64px)"
+                lat={37.5652045}
+                lng={126.98702028}
+            >
+                <ReactQueryDevtools />
+                <Outlet />
+            </TmapProvider>
+        </AppPortal.Provider>
     </QueryClientProvider>
 );
 
diff --git a/src/styles/foundation.ts b/src/styles/foundation.ts
index 0768551a..15d6d8c3 100644
--- a/src/styles/foundation.ts
+++ b/src/styles/foundation.ts
@@ -1,4 +1,5 @@
 export const Z_INDEX = {
+    appPortal: 9999,
     globalNavigation: 999,
     mapFloatMenu: 9,
     pathPopover: 10,