diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 73c65d7..c638295 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -31,7 +31,7 @@
   const { conversationId, conversation } = useContext(ConversationContext);
 
   return (
-    <Stack height="100%">
+    <Stack flexGrow={1} height="100%">
       <ConversationHeader
         account={account}
         members={conversation.getMembers()}
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index d49a367..c5c0922 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -50,16 +50,17 @@
 export default () => {
   const { callRole, callStatus } = useContext(CallContext);
 
-  if (callStatus === CallStatus.InCall) {
-    return <CallInterface />;
+  if (callStatus !== CallStatus.InCall) {
+    return (
+      <CallPending
+        pending={callRole}
+        caller={callStatus === CallStatus.Ringing ? 'calling' : 'connecting'}
+        medium="audio"
+      />
+    );
   }
-  return (
-    <CallPending
-      pending={callRole}
-      caller={callStatus === CallStatus.Ringing ? 'calling' : 'connecting'}
-      medium="audio"
-    />
-  );
+
+  return <CallInterface />;
 };
 
 interface Props {
@@ -86,25 +87,15 @@
 
   return (
     <>
-      {/* Guest video, takes the whole screen */}
       <video
         ref={remoteVideoRef}
         autoPlay
-        style={{ zIndex: -1, backgroundColor: 'black', width: '100%', height: '100%', position: 'absolute' }}
+        style={{ zIndex: -1, backgroundColor: 'black', position: 'absolute', height: '100%', width: '100%' }}
       />
-      <Stack
-        position="absolute"
-        direction="column"
-        spacing={1}
-        margin={2}
-        sx={{ left: 0, right: 0, top: 0, bottom: 0 }}
-      >
-        {/* Top panel with guest information */}
-        <Box>
-          <CallInterfaceInformation />
-        </Box>
-        {/* Local video, with empty space to be moved around and stickied to walls */}
-        <Box height="100%">
+      <Box flexGrow={1} margin={2} display="flex" flexDirection="column">
+        {/* Guest video, takes the whole screen */}
+        <CallInterfaceInformation />
+        <Box flexGrow={1} marginY={2} position="relative">
           <Draggable bounds="parent" nodeRef={localVideoRef ?? undefined}>
             <video
               ref={localVideoRef}
@@ -112,18 +103,14 @@
               style={{
                 position: 'absolute',
                 right: 0,
-                zIndex: 2,
                 borderRadius: '12px',
-                minWidth: '25%',
-                minHeight: '25%',
-                maxWidth: '50%',
                 maxHeight: '50%',
+                maxWidth: '50%',
                 visibility: isVideoOn ? 'visible' : 'hidden',
               }}
             />
           </Draggable>
         </Box>
-        {/* Bottom panel with calling buttons */}
         <Grid container>
           <Grid item xs />
           <Grid item sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -135,7 +122,7 @@
             <CallInterfaceSecondaryButtons gridItemRef={gridItemRef} />
           </Grid>
         </Grid>
-      </Stack>
+      </Box>
     </>
   );
 };
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 6c0fc06..a9e2807 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -45,6 +45,7 @@
       alignItems="center"
       height="100%"
       spacing={4}
+      flexGrow={1}
       sx={{
         backgroundColor: 'black',
       }}
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index e711608..9b28a28 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -15,7 +15,7 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { Contact, Conversation, WebSocketMessageType } from 'jami-web-common';
 import { useContext, useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
@@ -91,7 +91,7 @@
   }, [accountId, searchQuery, axiosInstance]);
 
   return (
-    <Stack direction="row" height="100vh" width="100vw">
+    <Box display="flex" height="100%">
       <Stack flexGrow={0} flexShrink={0} overflow="auto">
         <Header />
         <NewContactForm onChange={setSearchQuery} />
@@ -104,10 +104,10 @@
           </div>
         )}
       </Stack>
-      <Stack flexGrow={1}>
+      <Box flexGrow={1} display="flex" position="relative">
         <Outlet />
-      </Stack>
-    </Stack>
+      </Box>
+    </Box>
   );
 };