diff --git a/custom/basic-call/components/App/App.js b/custom/basic-call/components/App/App.js
index ecf4378..81b43d9 100644
--- a/custom/basic-call/components/App/App.js
+++ b/custom/basic-call/components/App/App.js
@@ -13,7 +13,7 @@ export const App = ({ customComponentForState }) => {
 
   const componentForState = useCallUI({
     state,
-    room: () => <Room />,
+    room: <Room />,
     ...customComponentForState,
   });
 
diff --git a/custom/basic-call/components/Call/Header.js b/custom/basic-call/components/Call/Header.js
index bde04c5..b158054 100644
--- a/custom/basic-call/components/Call/Header.js
+++ b/custom/basic-call/components/Call/Header.js
@@ -37,7 +37,8 @@ export const Header = () => {
             flex: 0 0 auto;
             column-gap: var(--spacing-xxs);
             box-sizing: border-box;
-            padding: var(--spacing-sm);
+            padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xxs)
+              var(--spacing-sm);
             align-items: center;
             width: 100%;
           }
diff --git a/custom/basic-call/components/Prejoin/CreatingRoom.js b/custom/basic-call/components/Prejoin/CreatingRoom.js
index aeb8100..29b779d 100644
--- a/custom/basic-call/components/Prejoin/CreatingRoom.js
+++ b/custom/basic-call/components/Prejoin/CreatingRoom.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
 import Loader from '@custom/shared/components/Loader';
-import { Well } from '@custom/shared/components/Well';
+import Well from '@custom/shared/components/Well';
 import PropTypes from 'prop-types';
 
 export const CreatingRoom = ({ onCreated }) => {
diff --git a/custom/basic-call/pages/api/createRoom.js b/custom/basic-call/pages/api/createRoom.js
index 1a67932..969d16e 100644
--- a/custom/basic-call/pages/api/createRoom.js
+++ b/custom/basic-call/pages/api/createRoom.js
@@ -1,5 +1,5 @@
 export default async function handler(req, res) {
-  const { privacy, expiryMinutes } = req.body;
+  const { privacy, expiryMinutes, ...rest } = req.body;
 
   if (req.method === 'POST') {
     console.log(`Creating room on domain ${process.env.DAILY_DOMAIN}`);
@@ -16,7 +16,7 @@ export default async function handler(req, res) {
           exp: Math.round(Date.now() / 1000) + (expiryMinutes || 5) * 60, // expire in x minutes
           eject_at_room_exp: true,
           enable_knocking: privacy !== 'public',
-          enable_recording: 'local',
+          ...rest,
         },
       }),
     };
diff --git a/custom/flying-emojis/components/App/App.js b/custom/flying-emojis/components/App.js
similarity index 74%
rename from custom/flying-emojis/components/App/App.js
rename to custom/flying-emojis/components/App.js
index 88c0bec..fcee52a 100644
--- a/custom/flying-emojis/components/App/App.js
+++ b/custom/flying-emojis/components/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import App from '@custom/basic-call/components/App';
-import FlyingEmojiOverlay from '../FlyingEmojis/FlyingEmojisOverlay';
+import FlyingEmojiOverlay from './FlyingEmojisOverlay';
 
 export const AppWithEmojis = () => (
   <>
diff --git a/custom/flying-emojis/components/App/index.js b/custom/flying-emojis/components/App/index.js
deleted file mode 100644
index 8887a4b..0000000
--- a/custom/flying-emojis/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithEmojis as default } from './App';
diff --git a/custom/flying-emojis/components/FlyingEmojis/index.js b/custom/flying-emojis/components/FlyingEmojis/index.js
deleted file mode 100644
index 6e98cc3..0000000
--- a/custom/flying-emojis/components/FlyingEmojis/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { FlyingEmojisOverlay } from './FlyingEmojisOverlay';
-export { FlyingEmojisOverlay as default } from './FlyingEmojisOverlay';
diff --git a/custom/flying-emojis/components/FlyingEmojis/FlyingEmojisOverlay.js b/custom/flying-emojis/components/FlyingEmojisOverlay.js
similarity index 100%
rename from custom/flying-emojis/components/FlyingEmojis/FlyingEmojisOverlay.js
rename to custom/flying-emojis/components/FlyingEmojisOverlay.js
diff --git a/custom/flying-emojis/components/Tray/Tray.js b/custom/flying-emojis/components/Tray.js
similarity index 100%
rename from custom/flying-emojis/components/Tray/Tray.js
rename to custom/flying-emojis/components/Tray.js
diff --git a/custom/flying-emojis/components/Tray/index.js b/custom/flying-emojis/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/custom/flying-emojis/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/custom/flying-emojis/pages/_document.js b/custom/flying-emojis/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/flying-emojis/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/custom/pagination/components/App/App.js b/custom/pagination/App.js
similarity index 100%
rename from custom/pagination/components/App/App.js
rename to custom/pagination/App.js
diff --git a/custom/pagination/components/App.js b/custom/pagination/components/App.js
new file mode 100644
index 0000000..5c68179
--- /dev/null
+++ b/custom/pagination/components/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import App from '@custom/basic-call/components/App';
+import Room from '@custom/basic-call/components/Call/Room';
+import PaginatedVideoGrid from './PaginatedVideoGrid';
+
+export const AppWithPagination = () => (
+  <App
+    customComponentForState={{
+      room: <Room MainComponent={PaginatedVideoGrid} />,
+    }}
+  />
+);
+
+export default AppWithPagination;
diff --git a/custom/pagination/components/App/index.js b/custom/pagination/components/App/index.js
deleted file mode 100644
index 2851771..0000000
--- a/custom/pagination/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithPagination as default } from './App';
diff --git a/custom/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js b/custom/pagination/components/PaginatedVideoGrid.js
similarity index 100%
rename from custom/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js
rename to custom/pagination/components/PaginatedVideoGrid.js
diff --git a/custom/pagination/components/PaginatedVideoGrid/index.js b/custom/pagination/components/PaginatedVideoGrid/index.js
deleted file mode 100644
index ea21f7a..0000000
--- a/custom/pagination/components/PaginatedVideoGrid/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { PaginatedVideoGrid as default } from './PaginatedVideoGrid';
diff --git a/custom/pagination/components/Tray/Tray.js b/custom/pagination/components/Tray.js
similarity index 100%
rename from custom/pagination/components/Tray/Tray.js
rename to custom/pagination/components/Tray.js
diff --git a/custom/pagination/components/Tray/index.js b/custom/pagination/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/custom/pagination/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/custom/pagination/pages/_document.js b/custom/pagination/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/pagination/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/custom/recording/components/App/App.js b/custom/recording/components/App.js
similarity index 80%
rename from custom/recording/components/App/App.js
rename to custom/recording/components/App.js
index 2d44366..f79f4b5 100644
--- a/custom/recording/components/App/App.js
+++ b/custom/recording/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import App from '@custom/basic-call/components/App';
-import { RecordingProvider } from '../../contexts/RecordingProvider';
+import { RecordingProvider } from '../contexts/RecordingProvider';
 
 // Extend our basic call app component with the recording context
 export const AppWithRecording = () => (
diff --git a/custom/recording/components/App/index.js b/custom/recording/components/App/index.js
deleted file mode 100644
index 82a89dc..0000000
--- a/custom/recording/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithRecording as default } from './App';
diff --git a/custom/recording/components/RecordingModal/RecordingModal.js b/custom/recording/components/RecordingModal.js
similarity index 96%
rename from custom/recording/components/RecordingModal/RecordingModal.js
rename to custom/recording/components/RecordingModal.js
index acface2..e89efa4 100644
--- a/custom/recording/components/RecordingModal/RecordingModal.js
+++ b/custom/recording/components/RecordingModal.js
@@ -15,7 +15,7 @@ import {
   RECORDING_TYPE_CLOUD,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
+} from '../contexts/RecordingProvider';
 
 export const RECORDING_MODAL = 'recording';
 
@@ -75,12 +75,13 @@ export const RecordingModal = () => {
       isOpen={currentModals[RECORDING_MODAL]}
       onClose={() => closeModal(RECORDING_MODAL)}
       actions={[
-        <Button fullWidth variant="outline">
+        <Button key="close" fullWidth variant="outline">
           Close
         </Button>,
         <Button
           fullWidth
           disabled={!disabled}
+          key="record"
           onClick={() => handleRecordingClick()}
         >
           {renderButtonLabel()}
diff --git a/custom/recording/components/RecordingModal/index.js b/custom/recording/components/RecordingModal/index.js
deleted file mode 100644
index 0a0deca..0000000
--- a/custom/recording/components/RecordingModal/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { RecordingModal as default } from './RecordingModal';
-export { RecordingModal } from './RecordingModal';
-export { RECORDING_MODAL } from './RecordingModal';
diff --git a/custom/recording/components/Tray/Tray.js b/custom/recording/components/Tray.js
similarity index 91%
rename from custom/recording/components/Tray/Tray.js
rename to custom/recording/components/Tray.js
index 9eb14b9..025444f 100644
--- a/custom/recording/components/Tray/Tray.js
+++ b/custom/recording/components/Tray.js
@@ -10,8 +10,8 @@ import {
   RECORDING_SAVED,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
-import { RECORDING_MODAL } from '../RecordingModal';
+} from '../contexts/RecordingProvider';
+import { RECORDING_MODAL } from './RecordingModal';
 
 export const Tray = () => {
   const { openModal } = useUIState();
diff --git a/custom/recording/components/Tray/index.js b/custom/recording/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/custom/recording/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/custom/recording/pages/_document.js b/custom/recording/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/recording/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/custom/shared/hooks/useCallUI.js b/custom/shared/hooks/useCallUI.js
index 846db8f..9e07a27 100644
--- a/custom/shared/hooks/useCallUI.js
+++ b/custom/shared/hooks/useCallUI.js
@@ -66,7 +66,7 @@ export const useCallUI = ({
         return haircheck ? haircheck() : <HairCheck />;
       case CALL_STATE_JOINED:
         return room ? (
-          room()
+          room
         ) : (
           <MessageCard error header="No room component declared" />
         );
diff --git a/custom/text-chat/components/App/App.js b/custom/text-chat/components/App.js
similarity index 81%
rename from custom/text-chat/components/App/App.js
rename to custom/text-chat/components/App.js
index 2cd8161..39292cf 100644
--- a/custom/text-chat/components/App/App.js
+++ b/custom/text-chat/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import App from '@custom/basic-call/components/App';
-import { ChatProvider } from '../../contexts/ChatProvider';
+import { ChatProvider } from '../contexts/ChatProvider';
 
 // Extend our basic call app component with the chat context
 export const AppWithChat = () => (
diff --git a/custom/text-chat/components/App/index.js b/custom/text-chat/components/App/index.js
deleted file mode 100644
index 770f031..0000000
--- a/custom/text-chat/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithChat as default } from './App';
diff --git a/custom/text-chat/components/ChatAside/ChatAside.js b/custom/text-chat/components/ChatAside.js
similarity index 96%
rename from custom/text-chat/components/ChatAside/ChatAside.js
rename to custom/text-chat/components/ChatAside.js
index cc9d8ae..16ae754 100644
--- a/custom/text-chat/components/ChatAside/ChatAside.js
+++ b/custom/text-chat/components/ChatAside.js
@@ -3,8 +3,8 @@ import { Aside } from '@custom/shared/components/Aside';
 import Button from '@custom/shared/components/Button';
 import { TextInput } from '@custom/shared/components/Input';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
-import { useChat } from '../../contexts/ChatProvider';
-import { useMessageSound } from '../../hooks/useMessageSound';
+import { useChat } from '../contexts/ChatProvider';
+import { useMessageSound } from '../hooks/useMessageSound';
 
 export const CHAT_ASIDE = 'chat';
 
diff --git a/custom/text-chat/components/ChatAside/index.js b/custom/text-chat/components/ChatAside/index.js
deleted file mode 100644
index 8e15e50..0000000
--- a/custom/text-chat/components/ChatAside/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ChatAside as default } from './ChatAside';
diff --git a/custom/text-chat/components/Tray/Tray.js b/custom/text-chat/components/Tray.js
similarity index 83%
rename from custom/text-chat/components/Tray/Tray.js
rename to custom/text-chat/components/Tray.js
index e7115e0..e6904ac 100644
--- a/custom/text-chat/components/Tray/Tray.js
+++ b/custom/text-chat/components/Tray.js
@@ -3,8 +3,8 @@ import React from 'react';
 import { TrayButton } from '@custom/shared/components/Tray';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconChat } from '@custom/shared/icons/chat-md.svg';
-import { useChat } from '../../contexts/ChatProvider';
-import { CHAT_ASIDE } from '../ChatAside/ChatAside';
+import { useChat } from '../contexts/ChatProvider';
+import { CHAT_ASIDE } from './ChatAside';
 
 export const Tray = () => {
   const { toggleAside } = useUIState();
diff --git a/custom/text-chat/components/Tray/index.js b/custom/text-chat/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/custom/text-chat/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/custom/text-chat/pages/_document.js b/custom/text-chat/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/text-chat/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;