diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts
index 1e0cebd7345..61c79f6373d 100755
--- a/packages/app/src/app/overmind/effects/live/index.ts
+++ b/packages/app/src/app/overmind/effects/live/index.ts
@@ -269,7 +269,7 @@ export default new (class Live {
     });
   }
 
-  sendLiveMode(mode: string) {
+  sendLiveMode(mode: RoomInfo['mode']) {
     return this.send('live:mode', {
       mode,
     });
diff --git a/packages/app/src/app/overmind/namespaces/live/actions.ts b/packages/app/src/app/overmind/namespaces/live/actions.ts
index e590b4b157f..c3249de340d 100755
--- a/packages/app/src/app/overmind/namespaces/live/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/live/actions.ts
@@ -1,4 +1,8 @@
-import { LiveMessage, LiveMessageEvent } from '@codesandbox/common/lib/types';
+import {
+  LiveMessage,
+  LiveMessageEvent,
+  RoomInfo,
+} from '@codesandbox/common/lib/types';
 import { Action, AsyncAction, Operator } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
 import getItems from 'app/overmind/utils/items';
@@ -176,9 +180,9 @@ export const onSelectionChanged: Action<any> = (
   }
 };
 
-export const onModeChanged: Action<{ mode: string }> = (
-  { state, effects },
-  { mode }
+export const onModeChanged: Action<RoomInfo['mode']> = (
+  { effects, state },
+  mode
 ) => {
   if (state.live.isOwner && state.live.roomInfo) {
     state.live.roomInfo.mode = mode;
@@ -186,31 +190,29 @@ export const onModeChanged: Action<{ mode: string }> = (
   }
 };
 
-export const onAddEditorClicked: Action<{
-  liveUserId: string;
-}> = ({ state, effects }, { liveUserId }) => {
+export const onAddEditorClicked: Action<string> = (
+  { effects, state },
+  liveUserId
+) => {
   if (!state.live.roomInfo) {
     return;
   }
+
   state.live.roomInfo.editorIds.push(liveUserId);
 
   effects.live.sendEditorAdded(liveUserId);
 };
 
-export const onRemoveEditorClicked: Action<any> = (
-  { state, effects },
-  { liveUserId, data }
+export const onRemoveEditorClicked: Action<string> = (
+  { effects, state },
+  liveUserId
 ) => {
-  const userId = liveUserId || data.editor_user_id;
-
   if (!state.live.roomInfo) {
     return;
   }
 
   const editors = state.live.roomInfo.editorIds;
-  const newEditors = editors.filter(id => id !== userId);
-
-  state.live.roomInfo.editorIds = newEditors;
+  state.live.roomInfo.editorIds = editors.filter(id => id !== liveUserId);
 
   effects.live.sendEditorRemoved(liveUserId);
 };
@@ -249,9 +251,10 @@ export const onChatEnabledChange: Action<boolean> = (
   }
 };
 
-export const onFollow: Action<{
-  liveUserId: string;
-}> = ({ state, effects, actions }, { liveUserId }) => {
+export const onFollow: Action<string> = (
+  { actions, effects, state },
+  liveUserId
+) => {
   if (!state.live.roomInfo) {
     return;
   }
@@ -259,11 +262,13 @@ export const onFollow: Action<{
   effects.analytics.track('Follow Along in Live');
   state.live.followingUserId = liveUserId;
 
-  const user = state.live.roomInfo.users.find(u => u.id === liveUserId);
+  const user = state.live.roomInfo.users.find(({ id }) => id === liveUserId);
 
   if (user && user.currentModuleShortid && state.editor.currentSandbox) {
     const { modules } = state.editor.currentSandbox;
-    const module = modules.find(m => m.shortid === user.currentModuleShortid);
+    const module = modules.find(
+      ({ shortid }) => shortid === user.currentModuleShortid
+    );
 
     actions.editor.moduleSelected({
       id: module ? module.id : undefined,
diff --git a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts b/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts
index 4a28a5fdfac..a040fd1a591 100644
--- a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts
+++ b/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts
@@ -5,13 +5,15 @@ import {
   LiveMessage,
   LiveUser,
   Module,
+  RoomInfo,
   UserSelection,
 } from '@codesandbox/common/lib/types';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
-import { Operator } from 'app/overmind';
 import { camelizeKeys } from 'humps';
 import { json, mutate } from 'overmind';
 
+import { Operator } from 'app/overmind';
+
 export const onJoin: Operator<LiveMessage<{
   status: 'connected';
   live_user_id: string;
@@ -419,8 +421,8 @@ export const onUserCurrentModule: Operator<LiveMessage<{
 });
 
 export const onLiveMode: Operator<LiveMessage<{
-  mode: string;
-}>> = mutate(({ state, actions }, { _isOwnMessage, data }) => {
+  mode: RoomInfo['mode'];
+}>> = mutate(({ actions, state }, { _isOwnMessage, data }) => {
   if (!state.live.roomInfo) {
     return;
   }
@@ -428,6 +430,7 @@ export const onLiveMode: Operator<LiveMessage<{
   if (!_isOwnMessage) {
     state.live.roomInfo.mode = data.mode;
   }
+
   actions.live.internal.clearUserSelections(null);
 });
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx
deleted file mode 100644
index c228a5c74b3..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import Switch from '@codesandbox/common/lib/components/Switch';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { RoomInfo } from '@codesandbox/common/lib/types';
-import { sortBy } from 'lodash-es';
-import React from 'react';
-import FollowIcon from 'react-icons/lib/io/eye';
-import UnFollowIcon from 'react-icons/lib/io/eye-disabled';
-import AddIcon from 'react-icons/lib/md/add';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
-import RemoveIcon from 'react-icons/lib/md/remove';
-
-import { Description, WorkspaceInputContainer } from '../../elements';
-import Countdown from './Countdown';
-import {
-  Container,
-  IconContainer,
-  Mode,
-  ModeDetails,
-  ModeSelect,
-  ModeSelector,
-  Preference,
-  PreferencesContainer,
-  StyledInput,
-  SubTitle,
-  Title,
-  Users,
-} from './elements';
-import LiveButton from './LiveButton';
-import { User } from './User';
-
-interface ILiveInfoProps {
-  roomInfo: RoomInfo;
-  isOwner: boolean;
-  isTeam: boolean;
-  ownerIds: Array<any>;
-  setMode: ({ mode: string }) => void;
-  addEditor: ({ liveUserId: string }) => void;
-  removeEditor: ({ liveUserId: string }) => void;
-  currentUserId: string;
-  reconnecting: boolean;
-  onSessionCloseClicked: () => void;
-  notificationsHidden: boolean;
-  toggleNotificationsHidden: () => void;
-  chatEnabled: boolean;
-  toggleChatEnabled: () => void;
-  setFollowing: ({ liveUserId: string }) => void;
-  followingUserId: string;
-}
-
-const LiveInfo: React.FunctionComponent<ILiveInfoProps> = ({
-  roomInfo,
-  roomInfo: { users, editorIds, startTime, roomId, mode } = {},
-  isOwner,
-  isTeam,
-  ownerIds,
-  setMode,
-  addEditor,
-  removeEditor,
-  currentUserId,
-  reconnecting,
-  onSessionCloseClicked,
-  notificationsHidden,
-  toggleNotificationsHidden,
-  chatEnabled,
-  toggleChatEnabled,
-  setFollowing,
-  followingUserId,
-}) => {
-  const select: React.ChangeEventHandler<HTMLInputElement> = e => {
-    e.target.select();
-  };
-
-  const owners = users.filter(u => ownerIds.includes(u.id));
-
-  const editors = sortBy(
-    users.filter(u => editorIds.includes(u.id) && !ownerIds.includes(u.id)),
-    'username'
-  );
-
-  const otherUsers = sortBy(
-    users.filter(u => !ownerIds.includes(u.id) && !editorIds.includes(u.id)),
-    'username'
-  );
-
-  const liveMessage = (() => {
-    if (isTeam) {
-      return 'Your team is live!';
-    }
-
-    if (isOwner) {
-      return "You've gone live!";
-    }
-
-    return 'You are live!';
-  })();
-
-  return (
-    <Container>
-      <Title>
-        <div
-          style={{
-            fontSize: '1rem',
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          {reconnecting ? (
-            'Reconnecting...'
-          ) : (
-            <>
-              <RecordIcon /> {liveMessage}
-            </>
-          )}
-        </div>
-        <div>{startTime != null && <Countdown time={startTime} />}</div>
-      </Title>
-      <Description>
-        Share this link with others to invite them to the session:
-      </Description>
-      <StyledInput
-        onFocus={select}
-        value={`https://codesandbox.io/live/${roomId}`}
-      />
-
-      {isOwner && !isTeam && (
-        <WorkspaceInputContainer>
-          <LiveButton
-            message="Stop Session"
-            onClick={onSessionCloseClicked}
-            showIcon={false}
-          />
-        </WorkspaceInputContainer>
-      )}
-
-      <Margin top={1}>
-        <SubTitle>Preferences</SubTitle>
-
-        {isOwner && (
-          <PreferencesContainer>
-            <Preference>Chat enabled</Preference>
-            <Switch
-              right={chatEnabled}
-              onClick={toggleChatEnabled}
-              small
-              offMode
-              secondary
-            />
-          </PreferencesContainer>
-        )}
-        <PreferencesContainer>
-          <Preference>Hide notifications</Preference>
-          <Switch
-            right={notificationsHidden}
-            onClick={toggleNotificationsHidden}
-            small
-            offMode
-            secondary
-          />
-        </PreferencesContainer>
-      </Margin>
-
-      <Margin top={1}>
-        <SubTitle>Live Mode</SubTitle>
-        <ModeSelect>
-          <ModeSelector i={mode === 'open' ? 0 : 1} />
-          <Mode
-            onClick={isOwner ? () => setMode({ mode: 'open' }) : undefined}
-            selected={mode === 'open'}
-          >
-            <div>Open</div>
-            <ModeDetails>Everyone can edit</ModeDetails>
-          </Mode>
-          <Mode
-            onClick={isOwner ? () => setMode({ mode: 'classroom' }) : undefined}
-            selected={mode === 'classroom'}
-          >
-            <div>Classroom</div>
-            <ModeDetails>Take control over who can edit</ModeDetails>
-          </Mode>
-        </ModeSelect>
-      </Margin>
-
-      {owners && (
-        <Margin top={1}>
-          <SubTitle>Owners</SubTitle>
-          <Users>
-            {owners.map(owner => (
-              <User
-                key={owner.id}
-                currentUserId={currentUserId}
-                user={owner}
-                roomInfo={roomInfo}
-                type="Owner"
-                sideView={
-                  owner.id !== currentUserId && (
-                    <IconContainer>
-                      {followingUserId === owner.id ? (
-                        <Tooltip content="Stop following">
-                          <UnFollowIcon
-                            onClick={() => setFollowing({ liveUserId: null })}
-                          />
-                        </Tooltip>
-                      ) : (
-                        <Tooltip content="Follow along">
-                          <FollowIcon
-                            onClick={() =>
-                              setFollowing({ liveUserId: owner.id })
-                            }
-                          />
-                        </Tooltip>
-                      )}
-                    </IconContainer>
-                  )
-                }
-              />
-            ))}
-          </Users>
-        </Margin>
-      )}
-
-      {editors.length > 0 && mode === 'classroom' && (
-        <Margin top={1}>
-          <SubTitle>Editors</SubTitle>
-          <Users>
-            {editors.map(user => (
-              <User
-                currentUserId={currentUserId}
-                key={user.id}
-                user={user}
-                roomInfo={roomInfo}
-                type="Editor"
-                sideView={
-                  <>
-                    {user.id !== currentUserId && (
-                      <IconContainer>
-                        {followingUserId === user.id ? (
-                          <Tooltip content="Stop following">
-                            <UnFollowIcon
-                              onClick={() => setFollowing({ liveUserId: null })}
-                            />
-                          </Tooltip>
-                        ) : (
-                          <Tooltip content="Follow along">
-                            <FollowIcon
-                              onClick={() =>
-                                setFollowing({ liveUserId: user.id })
-                              }
-                            />
-                          </Tooltip>
-                        )}
-                      </IconContainer>
-                    )}
-                    {isOwner && mode === 'classroom' && (
-                      <IconContainer style={{ marginLeft: '0.25rem' }}>
-                        <Tooltip content="Make spectator">
-                          <RemoveIcon
-                            onClick={() =>
-                              removeEditor({ liveUserId: user.id })
-                            }
-                          />
-                        </Tooltip>
-                      </IconContainer>
-                    )}
-                  </>
-                }
-              />
-            ))}
-          </Users>
-        </Margin>
-      )}
-
-      <Margin top={1}>
-        <SubTitle>Users</SubTitle>
-
-        <Users>
-          {otherUsers.length ? (
-            otherUsers.map(user => (
-              <User
-                currentUserId={currentUserId}
-                key={user.id}
-                user={user}
-                roomInfo={roomInfo}
-                type="Spectator"
-                sideView={
-                  <>
-                    {mode !== 'classroom' && user.id !== currentUserId && (
-                      <IconContainer>
-                        {followingUserId === user.id ? (
-                          <Tooltip content="Stop following">
-                            <UnFollowIcon
-                              onClick={() => setFollowing({ liveUserId: null })}
-                            />
-                          </Tooltip>
-                        ) : (
-                          <Tooltip content="Follow along">
-                            <FollowIcon
-                              onClick={() =>
-                                setFollowing({ liveUserId: user.id })
-                              }
-                            />
-                          </Tooltip>
-                        )}
-                      </IconContainer>
-                    )}
-                    {isOwner && mode === 'classroom' && (
-                      <IconContainer style={{ marginLeft: '0.25rem' }}>
-                        <Tooltip content="Make editor">
-                          <AddIcon
-                            onClick={() => addEditor({ liveUserId: user.id })}
-                          />
-                        </Tooltip>
-                      </IconContainer>
-                    )}
-                  </>
-                }
-              />
-            ))
-          ) : (
-            <div
-              style={{
-                color: 'rgba(255, 255, 255, 0.8)',
-                fontWeight: 600,
-                fontSize: '.875rem',
-                marginTop: '0.25rem',
-              }}
-            >
-              No other users in session, invite them!
-            </div>
-          )}
-        </Users>
-      </Margin>
-    </Container>
-  );
-};
-
-export default LiveInfo;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/elements.ts
new file mode 100644
index 00000000000..7d47e4cb2bb
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/elements.ts
@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+
+export const IconContainer = styled.div<{ isSecond: boolean }>`
+  ${({ isSecond, theme }) => css`
+    transition: 0.3s ease color;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+    cursor: pointer;
+
+    ${isSecond &&
+      css`
+        margin-left: 0.25rem;
+      `};
+
+    &:hover {
+      color: white;
+    }
+  `};
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/index.tsx
new file mode 100644
index 00000000000..136eb30583e
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Button/index.tsx
@@ -0,0 +1,20 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { ComponentProps, ComponentType, FunctionComponent } from 'react';
+
+import { IconContainer } from './elements';
+
+type Props = {
+  Icon: ComponentType;
+  tooltip: string;
+} & Partial<Pick<ComponentProps<typeof IconContainer>, 'isSecond'>>;
+export const Button: FunctionComponent<Props> = ({
+  Icon,
+  isSecond = false,
+  tooltip,
+}) => (
+  <IconContainer isSecond={isSecond}>
+    <Tooltip content={tooltip}>
+      <Icon />
+    </Tooltip>
+  </IconContainer>
+);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/Countdown.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Countdown.js
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/Countdown.js
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Countdown.js
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/FollowButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/FollowButton.tsx
new file mode 100644
index 00000000000..f674552c893
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/FollowButton.tsx
@@ -0,0 +1,38 @@
+import { LiveUser } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import UnFollowIcon from 'react-icons/lib/io/eye-disabled';
+import FollowIcon from 'react-icons/lib/io/eye';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button } from './Button';
+
+type Props = {
+  user: LiveUser;
+};
+export const FollowButton: FunctionComponent<Props> = ({ user: { id } }) => {
+  const {
+    actions: {
+      live: { onFollow },
+    },
+    state: {
+      live: { followingUserId, liveUserId },
+    },
+  } = useOvermind();
+
+  if (id === liveUserId) {
+    return null;
+  }
+
+  const buttonProps =
+    followingUserId === id
+      ? {
+          Icon: () => <UnFollowIcon onClick={() => onFollow(null)} />,
+          tooltip: 'Stop following',
+        }
+      : {
+          Icon: () => <FollowIcon onClick={() => onFollow(id)} />,
+          tooltip: 'Follow along',
+        };
+  return <Button {...buttonProps} />;
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/elements.ts
new file mode 100644
index 00000000000..d62db4feaa0
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/elements.ts
@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components';
+
+export const ModeSelect = styled.div`
+  position: relative;
+  margin: 0.5rem 1rem;
+`;
+
+export const Mode = styled.button<{ selected: boolean }>`
+  ${({ onClick, selected }) => css`
+    display: block;
+    text-align: left;
+    transition: 0.3s ease opacity;
+    padding: 0.5rem 1rem;
+    color: white;
+    border-radius: 4px;
+    width: 100%;
+    font-size: 1rem;
+
+    font-weight: 600;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    cursor: ${onClick ? 'pointer' : 'inherit'};
+    opacity: ${selected ? 1 : 0.6};
+    margin: 0.25rem 0;
+
+    z-index: 3;
+
+    ${onClick &&
+      css`
+        &:hover {
+          opacity: 1;
+        }
+      `};
+  `};
+`;
+
+export const ModeDetails = styled.div`
+  ${({ theme }) => css`
+    font-size: 0.75rem;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+    margin-top: 0.25rem;
+  `};
+`;
+
+export const ModeSelector = styled.div<{ i: number }>`
+  ${({ i }) => css`
+    transition: 0.3s ease transform;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 48px;
+
+    border: 2px solid rgba(253, 36, 57, 0.6);
+    background-color: rgba(253, 36, 57, 0.6);
+    border-radius: 4px;
+    z-index: -1;
+
+    transform: translateY(${i * 55}px);
+  `};
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/index.tsx
new file mode 100644
index 00000000000..d17da3d332c
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/LiveMode/index.tsx
@@ -0,0 +1,51 @@
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { SubTitle } from '../elements';
+
+import { Mode, ModeDetails, ModeSelect, ModeSelector } from './elements';
+
+const noop = () => undefined;
+export const LiveMode: FunctionComponent = () => {
+  const {
+    actions: {
+      live: { onModeChanged },
+    },
+    state: {
+      live: {
+        isOwner,
+        roomInfo: { mode },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Margin top={1}>
+      <SubTitle>Live Mode</SubTitle>
+
+      <ModeSelect>
+        <ModeSelector i={mode === 'open' ? 0 : 1} />
+
+        <Mode
+          onClick={isOwner ? () => onModeChanged('open') : noop}
+          selected={mode === 'open'}
+        >
+          <div>Open</div>
+
+          <ModeDetails>Everyone can edit</ModeDetails>
+        </Mode>
+
+        <Mode
+          onClick={isOwner ? () => onModeChanged('classroom') : noop}
+          selected={mode === 'classroom'}
+        >
+          <div>Classroom</div>
+
+          <ModeDetails>Take control over who can edit</ModeDetails>
+        </Mode>
+      </ModeSelect>
+    </Margin>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeEditorButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeEditorButton.tsx
new file mode 100644
index 00000000000..8ca6bd81667
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeEditorButton.tsx
@@ -0,0 +1,28 @@
+import { LiveUser } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import AddIcon from 'react-icons/lib/md/add';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button } from './Button';
+
+type Props = {
+  user: LiveUser;
+};
+export const MakeEditorButton: FunctionComponent<Props> = ({
+  user: { id },
+}) => {
+  const {
+    actions: {
+      live: { onAddEditorClicked },
+    },
+  } = useOvermind();
+
+  return (
+    <Button
+      Icon={() => <AddIcon onClick={() => onAddEditorClicked(id)} />}
+      isSecond
+      tooltip="Make editor"
+    />
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeSpectatorButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeSpectatorButton.tsx
new file mode 100644
index 00000000000..f9ade31466b
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/MakeSpectatorButton.tsx
@@ -0,0 +1,28 @@
+import { LiveUser } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import RemoveIcon from 'react-icons/lib/md/remove';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button } from './Button';
+
+type Props = {
+  user: LiveUser;
+};
+export const MakeSpectatorButton: FunctionComponent<Props> = ({
+  user: { id },
+}) => {
+  const {
+    actions: {
+      live: { onRemoveEditorClicked },
+    },
+  } = useOvermind();
+
+  return (
+    <Button
+      Icon={() => <RemoveIcon onClick={() => onRemoveEditorClicked(id)} />}
+      isSecond
+      tooltip="Make spectator"
+    />
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/ChatEnabled.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/ChatEnabled.tsx
new file mode 100644
index 00000000000..2054f842a89
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/ChatEnabled.tsx
@@ -0,0 +1,33 @@
+import Switch from '@codesandbox/common/lib/components/Switch';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Preference, PreferencesContainer } from './elements';
+
+export const ChatEnabled: FunctionComponent = () => {
+  const {
+    actions: {
+      live: { onChatEnabledChange },
+    },
+    state: {
+      live: {
+        roomInfo: { chatEnabled },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <PreferencesContainer>
+      <Preference>Chat enabled</Preference>
+
+      <Switch
+        offMode
+        onClick={() => onChatEnabledChange(!chatEnabled)}
+        right={chatEnabled}
+        secondary
+        small
+      />
+    </PreferencesContainer>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/HideNotifications.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/HideNotifications.tsx
new file mode 100644
index 00000000000..bdce8ae3aa8
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/HideNotifications.tsx
@@ -0,0 +1,31 @@
+import Switch from '@codesandbox/common/lib/components/Switch';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Preference, PreferencesContainer } from './elements';
+
+export const HideNotifications: FunctionComponent = () => {
+  const {
+    actions: {
+      live: { onToggleNotificationsHidden },
+    },
+    state: {
+      live: { notificationsHidden },
+    },
+  } = useOvermind();
+
+  return (
+    <PreferencesContainer>
+      <Preference>Hide notifications</Preference>
+
+      <Switch
+        offMode
+        onClick={() => onToggleNotificationsHidden()}
+        right={notificationsHidden}
+        secondary
+        small
+      />
+    </PreferencesContainer>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/elements.ts
new file mode 100644
index 00000000000..77048281db6
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/elements.ts
@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components';
+
+export const PreferencesContainer = styled.div`
+  margin: 1rem;
+  display: flex;
+`;
+
+export const Preference = styled.div`
+  ${({ theme }) => css`
+    flex: 1;
+    font-weight: 400;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+  `};
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/index.tsx
new file mode 100644
index 00000000000..c2093a0f472
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/Preferences/index.tsx
@@ -0,0 +1,27 @@
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { SubTitle } from '../elements';
+
+import { ChatEnabled } from './ChatEnabled';
+import { HideNotifications } from './HideNotifications';
+
+export const Preferences: FunctionComponent = () => {
+  const {
+    state: {
+      live: { isOwner },
+    },
+  } = useOvermind();
+
+  return (
+    <Margin top={1}>
+      <SubTitle>Preferences</SubTitle>
+
+      {isOwner && <ChatEnabled />}
+
+      <HideNotifications />
+    </Margin>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/elements.ts
new file mode 100644
index 00000000000..a7f03b9fe99
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/elements.ts
@@ -0,0 +1,44 @@
+import delay from '@codesandbox/common/lib/utils/animation/delay-effect';
+import styled, { css } from 'styled-components';
+
+export const ProfileImage = styled.img<{ borderColor: string }>`
+  width: 26px;
+  height: 26px;
+  border-radius: 2px;
+  border-left: 2px solid ${({ borderColor }) => borderColor};
+
+  margin-right: 0.5rem;
+`;
+
+export const Status = styled.div`
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+`;
+
+export const UserContainer = styled.div<{ isCurrentUser: boolean }>`
+  ${({ isCurrentUser, theme }) => css`
+    ${delay()};
+    display: flex;
+    align-items: center;
+    margin: 0.5rem 0;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+
+    ${isCurrentUser &&
+      css`
+        color: white;
+      `};
+
+    &:first-child {
+      margin-top: 0;
+    }
+  `};
+`;
+
+export const UserName = styled.div`
+  font-weight: 600;
+  font-size: 0.875rem;
+`;
+
+export const UserNameContainer = styled.div`
+  flex: 1;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx
new file mode 100644
index 00000000000..66bcd0ff7ff
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx
@@ -0,0 +1,47 @@
+import { LiveUser } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent, ReactNode } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import {
+  ProfileImage,
+  Status,
+  UserContainer,
+  UserName,
+  UserNameContainer,
+} from './elements';
+
+type Props = {
+  user: LiveUser;
+  type: string;
+  sideView: ReactNode;
+};
+export const User: FunctionComponent<Props> = ({ user, type, sideView }) => {
+  const {
+    state: {
+      live: { liveUserId, roomInfo },
+    },
+  } = useOvermind();
+
+  const metaData = roomInfo.users.find(({ id }) => id === user.id);
+  const [r, g, b] = metaData?.color || [0, 0, 0];
+  const isCurrentUser = user.id === liveUserId;
+
+  return (
+    <UserContainer isCurrentUser={isCurrentUser}>
+      <ProfileImage
+        alt={user.username}
+        borderColor={`rgba(${r}, ${g}, ${b}, 0.7)`}
+        src={user.avatarUrl}
+      />
+
+      <UserNameContainer>
+        <UserName>{user.username}</UserName>
+
+        {type && <Status>{`${type}${isCurrentUser && ' (you)'}`}</Status>}
+      </UserNameContainer>
+
+      {sideView}
+    </UserContainer>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts
new file mode 100644
index 00000000000..f6fe0dbbe42
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts
@@ -0,0 +1,61 @@
+import InputBase from '@codesandbox/common/lib/components/Input';
+import delay from '@codesandbox/common/lib/utils/animation/delay-effect';
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    ${delay()};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+    box-sizing: border-box;
+  `};
+`;
+
+export const Input = styled(InputBase)`
+  width: calc(100% - 1.5rem);
+  margin: 0 0.75rem;
+  font-size: 0.875rem;
+`;
+
+export const LiveMessage = styled.div`
+  font-size: 1rem;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+
+export const NoOtherUsers = styled.div`
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+`;
+
+export const SubTitle = styled.div`
+  text-transform: uppercase;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.5);
+
+  padding-left: 1rem;
+  font-size: 0.875rem;
+`;
+
+export const Title = styled.div`
+  color: #fd2439fa;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+
+  padding: 0 1rem 0.5rem;
+
+  svg {
+    margin-right: 0.25rem;
+  }
+`;
+
+export const Users = styled.div`
+  ${({ theme }) => css`
+    padding: 0 1rem 0.25rem;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  `};
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx
new file mode 100644
index 00000000000..54e6a5b33a8
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx
@@ -0,0 +1,172 @@
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { sortBy } from 'lodash-es';
+import React, { FocusEvent, FunctionComponent } from 'react';
+import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+
+import { useOvermind } from 'app/overmind';
+
+import { Description, WorkspaceInputContainer } from '../../../elements';
+
+import LiveButton from '../LiveButton';
+
+import Countdown from './Countdown';
+import {
+  Container,
+  Input,
+  LiveMessage,
+  NoOtherUsers,
+  SubTitle,
+  Title,
+  Users,
+} from './elements';
+import { FollowButton } from './FollowButton';
+import { LiveMode } from './LiveMode';
+import { MakeEditorButton } from './MakeEditorButton';
+import { MakeSpectatorButton } from './MakeSpectatorButton';
+import { Preferences } from './Preferences';
+import { User } from './User';
+
+export const LiveInfo: FunctionComponent = () => {
+  const {
+    actions: {
+      live: { onSessionCloseClicked },
+    },
+    state: {
+      live: {
+        isOwner,
+        isTeam,
+        reconnecting,
+        roomInfo: { editorIds, mode, ownerIds, roomId, startTime, users },
+      },
+    },
+  } = useOvermind();
+  const select = ({ target }: FocusEvent<HTMLInputElement>) => target.select();
+
+  const owners = users.filter(({ id }) => ownerIds.includes(id));
+  const editors = sortBy(
+    users.filter(({ id }) => editorIds.includes(id) && !ownerIds.includes(id)),
+    'username'
+  );
+  const otherUsers = sortBy(
+    users.filter(({ id }) => !ownerIds.includes(id) && !editorIds.includes(id)),
+    'username'
+  );
+  const getLiveMessage = () => {
+    if (isTeam) {
+      return 'Your team is live!';
+    }
+
+    if (isOwner) {
+      return "You've gone live!";
+    }
+
+    return 'You are live!';
+  };
+
+  return (
+    <Container>
+      <Title>
+        <LiveMessage>
+          {reconnecting ? (
+            'Reconnecting...'
+          ) : (
+            <>
+              <RecordIcon /> {getLiveMessage()}
+            </>
+          )}
+        </LiveMessage>
+
+        <div>{startTime !== null && <Countdown time={startTime} />}</div>
+      </Title>
+
+      <Description>
+        Share this link with others to invite them to the session:
+      </Description>
+
+      <Input onFocus={select} value={`https://codesandbox.io/live/${roomId}`} />
+
+      {isOwner && !isTeam && (
+        <WorkspaceInputContainer>
+          <LiveButton
+            message="Stop Session"
+            onClick={() => onSessionCloseClicked()}
+            showIcon={false}
+          />
+        </WorkspaceInputContainer>
+      )}
+
+      <Preferences />
+
+      <LiveMode />
+
+      {owners && (
+        <Margin top={1}>
+          <SubTitle>Owners</SubTitle>
+
+          <Users>
+            {owners.map(owner => (
+              <User
+                key={owner.id}
+                user={owner}
+                type="Owner"
+                sideView={<FollowButton user={owner} />}
+              />
+            ))}
+          </Users>
+        </Margin>
+      )}
+
+      {editors.length > 0 && mode === 'classroom' && (
+        <Margin top={1}>
+          <SubTitle>Editors</SubTitle>
+
+          <Users>
+            {editors.map(user => (
+              <User
+                key={user.id}
+                user={user}
+                type="Editor"
+                sideView={
+                  <>
+                    <FollowButton user={user} />
+
+                    {isOwner && mode === 'classroom' && (
+                      <MakeSpectatorButton user={user} />
+                    )}
+                  </>
+                }
+              />
+            ))}
+          </Users>
+        </Margin>
+      )}
+
+      <Margin top={1}>
+        <SubTitle>Users</SubTitle>
+
+        <Users>
+          {otherUsers.length ? (
+            otherUsers.map(user => (
+              <User
+                key={user.id}
+                user={user}
+                type="Spectator"
+                sideView={
+                  <>
+                    {mode !== 'classroom' && <FollowButton user={user} />}
+
+                    {isOwner && mode === 'classroom' && (
+                      <MakeEditorButton user={user} />
+                    )}
+                  </>
+                }
+              />
+            ))
+          ) : (
+            <NoOtherUsers>No other users in session, invite them!</NoOtherUsers>
+          )}
+        </Users>
+      </Margin>
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx
deleted file mode 100644
index 94689771b51..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { LiveUser, RoomInfo } from '@codesandbox/common/lib/types';
-import { useOvermind } from 'app/overmind';
-import React from 'react';
-
-import { ProfileImage, Status, UserContainer, UserName } from './elements';
-
-interface Props {
-  user: LiveUser;
-  type: string;
-  sideView: React.ReactNode;
-  roomInfo: RoomInfo;
-  currentUserId: string;
-}
-
-export const User: React.FC<Props> = ({
-  user,
-  type,
-  sideView,
-  roomInfo,
-  currentUserId,
-}) => {
-  // We need to observe the user and roomInfo
-  useOvermind();
-
-  const metaData = roomInfo.users.find(u => u.id === user.id);
-  const [r, g, b] = metaData ? metaData.color : [0, 0, 0];
-
-  const isCurrentUser = user.id === currentUserId;
-
-  return (
-    <UserContainer isCurrentUser={isCurrentUser}>
-      <ProfileImage
-        src={user.avatarUrl}
-        alt={user.username}
-        borderColor={`rgba(${r}, ${g}, ${b}, 0.7)`}
-      />
-      <div style={{ flex: 1 }}>
-        <UserName>{user.username}</UserName>
-        {type && (
-          <Status>
-            {type}
-            {isCurrentUser && ' (you)'}
-          </Status>
-        )}
-      </div>
-      {sideView}
-    </UserContainer>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts
deleted file mode 100644
index a604996149b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import Input from '@codesandbox/common/lib/components/Input';
-import delay from '@codesandbox/common/lib/utils/animation/delay-effect';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  ${delay()};
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  box-sizing: border-box;
-`;
-
-export const Title = styled.div`
-  color: #fd2439fa;
-  font-weight: 800;
-  display: flex;
-  align-items: center;
-  vertical-align: middle;
-
-  padding: 0.5rem 1rem;
-  padding-top: 0;
-
-  svg {
-    margin-right: 0.25rem;
-  }
-`;
-
-export const StyledInput = styled(Input)`
-  width: calc(100% - 1.5rem);
-  margin: 0 0.75rem;
-  font-size: 0.875rem;
-`;
-
-export const SubTitle = styled.div`
-  text-transform: uppercase;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
-
-  padding-left: 1rem;
-  font-size: 0.875rem;
-`;
-
-export const Users = styled.div`
-  padding: 0.25rem 1rem;
-  padding-top: 0;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-`;
-
-export const ModeSelect = styled.div`
-  position: relative;
-  margin: 0.5rem 1rem;
-`;
-
-interface IModeProps {
-  selected: boolean;
-}
-
-export const Mode = styled.button`
-  display: block;
-  text-align: left;
-  transition: 0.3s ease opacity;
-  padding: 0.5rem 1rem;
-  color: white;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 1rem;
-
-  font-weight: 600;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: ${props => (props.onClick ? 'pointer' : 'inherit')};
-  color: white;
-  opacity: ${(props: IModeProps) => (props.selected ? 1 : 0.6)};
-  margin: 0.25rem 0;
-
-  z-index: 3;
-
-  ${props =>
-    props.onClick &&
-    `
-  &:hover {
-    opacity: 1;
-  }`};
-`;
-
-export const ModeDetails = styled.div`
-  font-size: 0.75rem;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  margin-top: 0.25rem;
-`;
-
-interface IModeSelectorProps {
-  i: number;
-}
-
-export const ModeSelector = styled.div`
-  transition: 0.3s ease transform;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 48px;
-
-  border: 2px solid rgba(253, 36, 57, 0.6);
-  background-color: rgba(253, 36, 57, 0.6);
-  border-radius: 4px;
-  z-index: -1;
-
-  transform: translateY(${(props: IModeSelectorProps) => props.i * 55}px);
-`;
-
-export const PreferencesContainer = styled.div`
-  margin: 1rem;
-  display: flex;
-`;
-
-export const Preference = styled.div`
-  flex: 1;
-  font-weight: 400;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-`;
-
-export const IconContainer = styled.div`
-  transition: 0.3s ease color;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  cursor: pointer;
-
-  &:hover {
-    color: white;
-  }
-`;
-
-export const Status = styled.div`
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.6);
-`;
-
-export const UserContainer = styled.div<{ isCurrentUser: boolean }>`
-  ${delay()};
-  display: flex;
-  align-items: center;
-  margin: 0.5rem 0;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  ${props =>
-    props.isCurrentUser &&
-    `
-    color: white;
-  `};
-
-  &:first-child {
-    margin-top: 0;
-  }
-`;
-
-export const ProfileImage = styled.img<{ borderColor: string }>`
-  width: 26px;
-  height: 26px;
-  border-radius: 2px;
-  border-left: 2px solid ${({ borderColor }) => borderColor};
-
-  margin-right: 0.5rem;
-`;
-
-export const UserName = styled.div`
-  font-weight: 600;
-  font-size: 0.875rem;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
index 4fffdb98941..c7b289f3e7b 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
@@ -12,39 +12,20 @@ import {
 import { More } from '../More';
 
 import LiveButton from './LiveButton';
-import LiveInfo from './LiveInfo';
+import { LiveInfo } from './LiveInfo';
 
 export const Live: FunctionComponent = () => {
   const {
     actions: {
-      live: {
-        createLiveClicked,
-        onAddEditorClicked,
-        onChatEnabledChange,
-        onFollow,
-        onModeChanged,
-        onRemoveEditorClicked,
-        onSessionCloseClicked,
-        onToggleNotificationsHidden,
-      },
+      live: { createLiveClicked },
     },
     state: {
       editor: {
         currentSandbox: { id, owned },
         isAllModulesSynced,
       },
-      live: {
-        followingUserId,
-        isLive,
-        isLoading,
-        isOwner,
-        isTeam,
-        liveUserId,
-        notificationsHidden,
-        reconnecting,
-        roomInfo,
-      },
       isLoggedIn,
+      live: { isLive, isLoading },
     },
   } = useOvermind();
   const showPlaceHolder = (!isLive && !owned) || !isLoggedIn;
@@ -66,24 +47,7 @@ export const Live: FunctionComponent = () => {
   return (
     <div>
       {isLive ? (
-        <LiveInfo
-          addEditor={onAddEditorClicked}
-          chatEnabled={roomInfo.chatEnabled}
-          currentUserId={liveUserId}
-          followingUserId={followingUserId}
-          isOwner={isOwner}
-          isTeam={isTeam}
-          notificationsHidden={notificationsHidden}
-          onSessionCloseClicked={onSessionCloseClicked}
-          ownerIds={roomInfo.ownerIds}
-          reconnecting={reconnecting}
-          removeEditor={onRemoveEditorClicked}
-          roomInfo={roomInfo}
-          setFollowing={onFollow}
-          setMode={onModeChanged}
-          toggleChatEnabled={() => onChatEnabledChange(!roomInfo.chatEnabled)}
-          toggleNotificationsHidden={onToggleNotificationsHidden}
-        />
+        <LiveInfo />
       ) : (
         <>
           <Description style={{ marginBottom: '1rem' }}>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx
index f49c69fb6e4..bec883b73d3 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx
@@ -18,6 +18,7 @@ import {
   Switch,
 } from '@codesandbox/components';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { RoomInfo } from '@codesandbox/common/lib/types';
 
 import { useOvermind } from 'app/overmind';
 
@@ -135,7 +136,9 @@ export const LiveNow = () => {
           <Select
             icon={mode === 'open' ? OpenIcon : ClassroomIcon}
             value={mode}
-            onChange={event => onModeChanged({ mode: event.target.value })}
+            onChange={event =>
+              onModeChanged(event.target.value as RoomInfo['mode'])
+            }
             disabled={!isOwner}
           >
             <option value="open">Everyone can edit</option>
@@ -235,7 +238,7 @@ const User = ({ user, liveRole }) => {
               <Tooltip content="Make editor">
                 <AddIcon
                   css={{ cursor: 'pointer' }}
-                  onClick={() => onAddEditorClicked({ liveUserId: user.id })}
+                  onClick={() => onAddEditorClicked(user.id)}
                 />
               </Tooltip>
             )}
@@ -243,7 +246,7 @@ const User = ({ user, liveRole }) => {
               <Tooltip content="Make spectator">
                 <RemoveIcon
                   css={{ cursor: 'pointer' }}
-                  onClick={() => onRemoveEditorClicked({ liveUserId: user.id })}
+                  onClick={() => onRemoveEditorClicked(user.id)}
                 />
               </Tooltip>
             )}
@@ -256,14 +259,14 @@ const User = ({ user, liveRole }) => {
               <Tooltip content="Stop following">
                 <UnfollowIcon
                   css={{ cursor: 'pointer' }}
-                  onClick={() => onFollow({ liveUserId: null })}
+                  onClick={() => onFollow(null)}
                 />
               </Tooltip>
             ) : (
               <Tooltip content="Follow along">
                 <FollowIcon
                   css={{ cursor: 'pointer' }}
-                  onClick={() => onFollow({ liveUserId: user.id })}
+                  onClick={() => onFollow(user.id)}
                 />
               </Tooltip>
             )}
diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
index c4660ff4b29..c96a2e53ef0 100644
--- a/packages/common/src/types/index.ts
+++ b/packages/common/src/types/index.ts
@@ -210,7 +210,7 @@ export type RoomInfo = {
   startTime: number;
   ownerIds: string[];
   roomId: string;
-  mode: string;
+  mode: 'classroom' | 'open';
   chatEnabled: boolean;
   sandboxId: string;
   editorIds: string[];