diff --git a/src/frontend/public/assets/pip.svg b/src/frontend/public/assets/pip.svg
new file mode 100644
index 00000000..fb2b64c4
--- /dev/null
+++ b/src/frontend/public/assets/pip.svg
@@ -0,0 +1,121 @@
+
diff --git a/src/frontend/src/features/pip/components/PipPlaceholder.tsx b/src/frontend/src/features/pip/components/PipPlaceholder.tsx
new file mode 100644
index 00000000..15fe42b6
--- /dev/null
+++ b/src/frontend/src/features/pip/components/PipPlaceholder.tsx
@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+import { styled } from '@/styled-system/jsx'
+import { useRoomPiP } from '../hooks/useRoomPiP'
+import pipIllustration from '/assets/pip.svg'
+
+export const PipPlaceholder = () => {
+ const { t } = useTranslation('rooms', {
+ keyPrefix: 'options.items.pictureInPicture.placeholder',
+ })
+ const { close } = useRoomPiP()
+
+ return (
+
+
+ {t('title')}
+ {t('description')}
+ {t('bringBack')}
+
+ )
+}
+
+const Container = styled('div', {
+ base: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100%',
+ height: '100%',
+ gap: '0.5rem',
+ padding: '1.5rem',
+ textAlign: 'center',
+ },
+})
+
+const Illustration = styled('img', {
+ base: {
+ marginBottom: '0.25rem',
+ },
+})
+
+const Title = styled('p', {
+ base: {
+ color: 'white',
+ fontSize: '0.875rem',
+ fontWeight: 600,
+ lineHeight: 1.3,
+ margin: 0,
+ },
+})
+
+const Description = styled('p', {
+ base: {
+ color: '#DFE2EA',
+ fontSize: '0.75rem',
+ fontWeight: 400,
+ lineHeight: 1.4,
+ margin: 0,
+ maxWidth: '312px',
+ },
+})
+
+const BringBackLink = styled('button', {
+ base: {
+ color: '#A2B6FF',
+ fontSize: '0.75rem',
+ fontWeight: 500,
+ lineHeight: 1.4,
+ cursor: 'pointer',
+ marginTop: '0.25rem',
+ borderRadius: '2px',
+ _hover: {
+ textDecoration: 'underline',
+ },
+ _focusVisible: {
+ outline: '2px solid #A2B6FF',
+ outlineOffset: '2px',
+ },
+ },
+})
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 63636dd1..002833b3 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -35,6 +35,7 @@ import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubsc
import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
import { RoomPiP } from '@/features/pip/components/RoomPiP'
+import { PipPlaceholder } from '@/features/pip/components/PipPlaceholder'
import { useRoomPiP } from '@/features/pip/hooks/useRoomPiP'
import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
@@ -230,7 +231,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
/* eslint-enable react-hooks/exhaustive-deps */
const { isOpen: isPiPOpen } = useRoomPiP()
- const shouldRenderMainLayout = !isPiPOpen
const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
@@ -253,7 +253,9 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
/>
- {shouldRenderMainLayout && (
+ {isPiPOpen ? (
+
+ ) : (
<>
{!focusTrack ? (