diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 9dcd730a..8f2d0fdb 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -79,6 +79,7 @@ import {
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useCallState } from '../CallProvider';
+import { CallNavBottom } from '../../call/CallNavBottom';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@@ -357,67 +358,6 @@ function SpaceHeader() {
   );
 }
 
-function FixedBottomNavArea() {
-  const {
-    sendWidgetAction,
-    activeCallRoomId,
-    isAudioEnabled,
-    isVideoEnabled,
-    toggleAudio,
-    toggleVideo,
-    hangUp,
-  } = useCallState();
-  const mx = useMatrixClient();
-  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
-
-  const handleSendMessageClick = () => {
-    const action = 'my.custom.action';
-    const data = { message: `Hello from ${userName}!` };
-    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
-    sendWidgetAction(action, data)
-      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
-      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
-  };
-
-  if (!activeCallRoomId) {
-    return (
-      <Box
-        direction="Column"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
-        <Text size="T200" color="Muted" align="Center">
-          No active call
-        </Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box direction="Column">
-      <Box
-        direction="Row"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
-        {/* Going to need better icons for this */}
-        <button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
-        <button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
-      </Box>
-      <Box>
-        <button onClick={hangUp}> Hangup </button>
-      </Box>
-      <Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
-    </Box>
-  );
-}
-
 export function Space() {
   const mx = useMatrixClient();
   const space = useSpace();
@@ -607,7 +547,7 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-      <FixedBottomNavArea />
+      <CallNavBottom />
     </PageNav>
   );
 }