diff --git a/dailyjs/active-speaker/.babelrc b/custom/active-speaker/.babelrc
similarity index 100%
rename from dailyjs/active-speaker/.babelrc
rename to custom/active-speaker/.babelrc
diff --git a/dailyjs/active-speaker/README.md b/custom/active-speaker/README.md
similarity index 87%
rename from dailyjs/active-speaker/README.md
rename to custom/active-speaker/README.md
index 4656997..043789d 100644
--- a/dailyjs/active-speaker/README.md
+++ b/custom/active-speaker/README.md
@@ -1,10 +1,8 @@
 # Active Speaker
 
-![Active speaker](./image.png)
-
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-active-speaker.vercel.app)**
+**[See it in action here ➡️](https://custom-active-speaker.vercel.app)**
 
 ---
 
@@ -23,7 +21,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/active-speaker dev
+yarn workspace @custom/active-speaker dev
 ```
 
 ## Deploy your own on Vercel
diff --git a/dailyjs/active-speaker/components/App/App.js b/custom/active-speaker/components/App/App.js
similarity index 76%
rename from dailyjs/active-speaker/components/App/App.js
rename to custom/active-speaker/components/App/App.js
index 6ad9e2b..2c4bc1a 100644
--- a/dailyjs/active-speaker/components/App/App.js
+++ b/custom/active-speaker/components/App/App.js
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/components/App';
+import App from '@custom/basic-call/components/App';
 import { Room } from '../Room';
 
 // Extend our basic call app component with our custom Room componenet
 export const AppWithSpeakerViewRoom = () => (
   <App
     customComponentForState={{
-      room: () => <Room />,
+      room: <Room />,
     }}
   />
 );
diff --git a/dailyjs/active-speaker/components/App/index.js b/custom/active-speaker/components/App/index.js
similarity index 100%
rename from dailyjs/active-speaker/components/App/index.js
rename to custom/active-speaker/components/App/index.js
diff --git a/dailyjs/active-speaker/components/Room/Room.js b/custom/active-speaker/components/Room/Room.js
similarity index 100%
rename from dailyjs/active-speaker/components/Room/Room.js
rename to custom/active-speaker/components/Room/Room.js
diff --git a/dailyjs/active-speaker/components/Room/index.js b/custom/active-speaker/components/Room/index.js
similarity index 100%
rename from dailyjs/active-speaker/components/Room/index.js
rename to custom/active-speaker/components/Room/index.js
diff --git a/dailyjs/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js b/custom/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js
similarity index 91%
rename from dailyjs/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js
rename to custom/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js
index f75163e..b651402 100644
--- a/dailyjs/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js
+++ b/custom/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Tile } from '@dailyjs/shared/components/Tile';
-import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
-import { useResize } from '@dailyjs/shared/hooks/useResize';
+import Tile from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useResize } from '@custom/shared/hooks/useResize';
 import PropTypes from 'prop-types';
 
 const MAX_RATIO = DEFAULT_ASPECT_RATIO;
diff --git a/dailyjs/active-speaker/components/SpeakerView/SpeakerTile/index.js b/custom/active-speaker/components/SpeakerView/SpeakerTile/index.js
similarity index 100%
rename from dailyjs/active-speaker/components/SpeakerView/SpeakerTile/index.js
rename to custom/active-speaker/components/SpeakerView/SpeakerTile/index.js
diff --git a/dailyjs/active-speaker/components/SpeakerView/SpeakerView.js b/custom/active-speaker/components/SpeakerView/SpeakerView.js
similarity index 80%
rename from dailyjs/active-speaker/components/SpeakerView/SpeakerView.js
rename to custom/active-speaker/components/SpeakerView/SpeakerView.js
index e357840..29bfbaf 100644
--- a/dailyjs/active-speaker/components/SpeakerView/SpeakerView.js
+++ b/custom/active-speaker/components/SpeakerView/SpeakerView.js
@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import RoomContainer from '@dailyjs/basic-call/components/Room/RoomContainer';
-import ParticipantBar from '@dailyjs/shared/components/ParticipantBar/ParticipantBar';
-import VideoContainer from '@dailyjs/shared/components/VideoContainer/VideoContainer';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { isScreenId } from '@dailyjs/shared/contexts/participantsState';
+import { Container } from '@custom/basic-call/components/Call/Container';
+import Header from '@custom/basic-call/components/Call/Header';
+import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
+import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useTracks } from '@custom/shared/contexts/TracksProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { isScreenId } from '@custom/shared/contexts/participantsState';
 import { SpeakerTile } from './SpeakerTile';
 
 const SIDEBAR_WIDTH = 186;
@@ -78,13 +79,14 @@ export const SpeakerView = () => {
 
   return (
     <div className="speaker-view">
-      <RoomContainer>
+      <Container>
+        <Header />
         <VideoContainer>
           <div ref={activeRef} className="active">
             <SpeakerTile participant={currentSpeaker} screenRef={activeRef} />
           </div>
         </VideoContainer>
-      </RoomContainer>
+      </Container>
       {showSidebar && (
         <ParticipantBar
           fixed={fixedItems}
diff --git a/dailyjs/active-speaker/components/SpeakerView/index.js b/custom/active-speaker/components/SpeakerView/index.js
similarity index 100%
rename from dailyjs/active-speaker/components/SpeakerView/index.js
rename to custom/active-speaker/components/SpeakerView/index.js
diff --git a/dailyjs/active-speaker/env.example b/custom/active-speaker/env.example
similarity index 100%
rename from dailyjs/active-speaker/env.example
rename to custom/active-speaker/env.example
diff --git a/dailyjs/active-speaker/image.png b/custom/active-speaker/image.png
similarity index 100%
rename from dailyjs/active-speaker/image.png
rename to custom/active-speaker/image.png
diff --git a/dailyjs/active-speaker/index.js b/custom/active-speaker/index.js
similarity index 100%
rename from dailyjs/active-speaker/index.js
rename to custom/active-speaker/index.js
diff --git a/dailyjs/active-speaker/next.config.js b/custom/active-speaker/next.config.js
similarity index 84%
rename from dailyjs/active-speaker/next.config.js
rename to custom/active-speaker/next.config.js
index 9a0a6ee..9140e28 100644
--- a/dailyjs/active-speaker/next.config.js
+++ b/custom/active-speaker/next.config.js
@@ -1,7 +1,7 @@
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
+  '@custom/shared',
+  '@custom/basic-call',
 ]);
 
 const packageJson = require('./package.json');
diff --git a/dailyjs/active-speaker/package.json b/custom/active-speaker/package.json
similarity index 83%
rename from dailyjs/active-speaker/package.json
rename to custom/active-speaker/package.json
index 959883e..a7ca2c2 100644
--- a/dailyjs/active-speaker/package.json
+++ b/custom/active-speaker/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/active-speaker",
+  "name": "@custom/active-speaker",
   "description": "Basic Call + Active Speaker",
   "version": "0.1.0",
   "private": true,
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/basic-call": "*",
-    "@dailyjs/shared": "*",
+    "@custom/basic-call": "*",
+    "@custom/shared": "*",
     "next": "^11.0.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
diff --git a/dailyjs/active-speaker/pages/_app.js b/custom/active-speaker/pages/_app.js
similarity index 75%
rename from dailyjs/active-speaker/pages/_app.js
rename to custom/active-speaker/pages/_app.js
index 4fcae14..9e427d2 100644
--- a/dailyjs/active-speaker/pages/_app.js
+++ b/custom/active-speaker/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import App from '@dailyjs/basic-call/pages/_app';
+import App from '@custom/basic-call/pages/_app';
 import AppWithSpeakerViewRoom from '../components/App';
 
 App.customAppComponent = <AppWithSpeakerViewRoom />;
diff --git a/dailyjs/active-speaker/pages/api b/custom/active-speaker/pages/api
similarity index 100%
rename from dailyjs/active-speaker/pages/api
rename to custom/active-speaker/pages/api
diff --git a/dailyjs/active-speaker/pages/index.js b/custom/active-speaker/pages/index.js
similarity index 63%
rename from dailyjs/active-speaker/pages/index.js
rename to custom/active-speaker/pages/index.js
index d25e77e..84a3f53 100644
--- a/dailyjs/active-speaker/pages/index.js
+++ b/custom/active-speaker/pages/index.js
@@ -1,5 +1,5 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import Index from '@custom/basic-call/pages';
+import getDemoProps from '@custom/shared/lib/demoProps';
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/dailyjs/active-speaker/public/assets/daily-logo-dark.svg b/custom/active-speaker/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/active-speaker/public/assets/daily-logo-dark.svg
rename to custom/active-speaker/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/active-speaker/public/assets/daily-logo.svg b/custom/active-speaker/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/active-speaker/public/assets/daily-logo.svg
rename to custom/active-speaker/public/assets/daily-logo.svg
diff --git a/dailyjs/active-speaker/public/assets/join.mp3 b/custom/active-speaker/public/assets/join.mp3
similarity index 100%
rename from dailyjs/active-speaker/public/assets/join.mp3
rename to custom/active-speaker/public/assets/join.mp3
diff --git a/dailyjs/active-speaker/public/assets/message.mp3 b/custom/active-speaker/public/assets/message.mp3
similarity index 100%
rename from dailyjs/active-speaker/public/assets/message.mp3
rename to custom/active-speaker/public/assets/message.mp3
diff --git a/dailyjs/active-speaker/public/assets/pattern-bg.png b/custom/active-speaker/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/active-speaker/public/assets/pattern-bg.png
rename to custom/active-speaker/public/assets/pattern-bg.png
diff --git a/custom/shared/components/ParticipantBar/ParticipantBar.js b/custom/shared/components/ParticipantBar/ParticipantBar.js
index 781b76a..6b2e27e 100644
--- a/custom/shared/components/ParticipantBar/ParticipantBar.js
+++ b/custom/shared/components/ParticipantBar/ParticipantBar.js
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Tile } from '@custom/shared/components/Tile';
+import Tile from '@custom/shared/components/Tile';
 import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';