diff --git a/packages/vkui/src/components/AppRoot/AppRoot.tsx b/packages/vkui/src/components/AppRoot/AppRoot.tsx
index b961c987c4d..b189ee1fd6d 100644
--- a/packages/vkui/src/components/AppRoot/AppRoot.tsx
+++ b/packages/vkui/src/components/AppRoot/AppRoot.tsx
@@ -82,6 +82,7 @@ export const AppRoot = ({
   ...props
 }: AppRootProps): React.ReactNode => {
   const appRootRef = React.useRef<HTMLDivElement | null>(null);
+  const popoutModalContainerRef = React.useRef<HTMLDivElement | null>(null);
   const portalRootRef = React.useRef<HTMLElement | null>(
     portalRootProp ? extractPortalRootByProp(portalRootProp) : null,
   );
@@ -121,6 +122,7 @@ export const AppRoot = ({
     () => ({
       appRoot: appRootRef,
       portalRoot: portalRootRef,
+      popoutModalRoot: popoutModalContainerRef,
       setPortalRoot: (element: HTMLElement) => (portalRootRef.current = element),
       safeAreaInsets,
       embedded: mode === 'embedded',
diff --git a/packages/vkui/src/components/AppRoot/AppRootContext.ts b/packages/vkui/src/components/AppRoot/AppRootContext.ts
index 0daa849439f..6ca44719139 100644
--- a/packages/vkui/src/components/AppRoot/AppRootContext.ts
+++ b/packages/vkui/src/components/AppRoot/AppRootContext.ts
@@ -5,6 +5,7 @@ import { type AppRootUserSelectMode, type SafeAreaInsets } from './types';
 export interface AppRootContextInterface {
   appRoot: React.RefObject<HTMLElement>;
   portalRoot: React.MutableRefObject<HTMLElement | null>;
+  popoutModalRoot: React.MutableRefObject<HTMLDivElement | null>;
   setPortalRoot: (element: HTMLElement) => void;
   safeAreaInsets?: SafeAreaInsets;
   embedded: boolean;
@@ -24,6 +25,7 @@ export const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {
   appRoot: React.createRef(),
   mode: 'full',
   portalRoot: React.createRef(),
+  popoutModalRoot: React.createRef(),
   setPortalRoot: noop,
   safeAreaInsets: undefined,
   embedded: false,
diff --git a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx
index fd56bf410dc..d6d0675b7e0 100644
--- a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx
+++ b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx
@@ -16,16 +16,20 @@ export interface AppRootPortalProps extends HasChildren {
    * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.
    * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'in-app-after-content';
+  className?: string;
 }
 
-export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps): React.ReactNode => {
-  const { portalRoot, setPortalRoot, appRoot, mode, disablePortal } =
-    React.useContext(AppRootContext);
+export const AppRootPortal = ({
+  children,
+  usePortal,
+  className,
+}: AppRootPortalProps): React.ReactNode => {
+  const { setPortalRoot, appRoot, mode, disablePortal } = React.useContext(AppRootContext);
   const appearance = useAppearance();
 
   const canUsePortal = shouldUsePortal(usePortal, mode, Boolean(disablePortal));
-  const portalContainer = resolvePortalContainer(usePortal, portalRoot.current);
+  const portalContainer = usePortalContainer(usePortal);
 
   useIsomorphicLayoutEffect(
     // Создаём контейнер для портала по запросу один раз
@@ -50,7 +54,7 @@ export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps): Reac
   if (canUsePortal && portalContainer) {
     return createPortal(
       <AppearanceProvider value={appearance}>
-        <AppRootStyleContainer>{children}</AppRootStyleContainer>
+        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>
       </AppearanceProvider>,
       portalContainer,
     );
@@ -75,12 +79,14 @@ function shouldUsePortal(
   return disablePortal === false && usePortal === true;
 }
 
-function resolvePortalContainer<PortalRootFromContext extends HTMLElement | null | undefined>(
-  usePortal: AppRootPortalProps['usePortal'],
-  portalRootFromContext: PortalRootFromContext,
-): HTMLElement | null {
+function usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {
+  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
   if (typeof usePortal === 'boolean' || usePortal === undefined) {
-    return portalRootFromContext ? portalRootFromContext : null;
+    return portalRoot.current;
+  }
+
+  if (usePortal === 'in-app-after-content') {
+    return popoutModalRoot.current;
   }
 
   return isRefObject(usePortal) ? usePortal.current : usePortal;
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css b/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
index d60c0dff1d3..85128644b2e 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
@@ -1,4 +1,13 @@
 .host {
+  position: fixed;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  z-index: var(--vkui--z_index_modal);
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.wrapper {
   inline-size: 100%;
   block-size: 100%;
 }
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
index 8eae410c35c..46bfbfbb753 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
@@ -545,12 +545,12 @@ class ModalRootTouchComponent extends React.Component<
     }
 
     return (
-      <AppRootPortal>
+      <AppRootPortal className={styles.host} usePortal="in-app-after-content">
         <TouchRootContext.Provider value={true}>
           <ModalRootContext.Provider value={this.modalRootContext}>
             <Touch
               className={classNames(
-                styles.host,
+                styles.wrapper,
                 this.props.configProvider?.hasCustomPanelHeaderAfter &&
                   styles.hasCustomPanelHeaderAfterSlot,
                 touchDown && classNames(styles.touched, 'vkuiInternalModalRoot--touched'),
diff --git a/packages/vkui/src/components/PopoutRoot/PopoutRoot.module.css b/packages/vkui/src/components/PopoutRoot/PopoutRoot.module.css
index 39a4bbbfda7..d84b42ea835 100644
--- a/packages/vkui/src/components/PopoutRoot/PopoutRoot.module.css
+++ b/packages/vkui/src/components/PopoutRoot/PopoutRoot.module.css
@@ -13,16 +13,6 @@
   block-size: 100%;
 }
 
-.modal {
-  position: fixed;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: var(--vkui--z_index_modal);
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.popout:empty,
-.modal:empty {
+.popout:empty {
   display: none;
 }
diff --git a/packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx b/packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx
index 9cfeaeee205..2a4db913470 100644
--- a/packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx
+++ b/packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx
@@ -1,6 +1,9 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';
+import { AppRootContext } from '../AppRoot/AppRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutRoot.module.css';
 
@@ -38,12 +41,14 @@ export const PopoutRoot = ({
   children,
   ...restProps
 }: PopoutRootProps): React.ReactNode => {
+  const { popoutModalRoot } = React.useContext(AppRootContext);
+
   return (
     <RootComponent {...restProps} baseClassName={styles.host}>
       {children}
-      <div>
+      <div ref={popoutModalRoot}>
         {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}
-        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}
+        {modal}
       </div>
     </RootComponent>
   );