diff --git a/debug.log b/debug.log
index 79c61558..580915a9 100644
--- a/debug.log
+++ b/debug.log
@@ -1,3 +1,5 @@
+[1022/141204.980:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+
 [1009/090500.006:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 [1009/090500.011:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 [1009/090500.012:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
diff --git a/src/client/canvas/DrawingCanvas.tsx b/src/client/canvas/DrawingCanvas.tsx
index cf4a3915..a46efeb9 100644
--- a/src/client/canvas/DrawingCanvas.tsx
+++ b/src/client/canvas/DrawingCanvas.tsx
@@ -317,7 +317,7 @@ export const DrawingCanvas: React.FunctionComponent<Props> = (props: Props) => {
                         <canvas
                             ref={canvasRefCallback}
                             width={1000}
-                            height={800}
+                            height={700}
                             onMouseDown={onMouseDown}
                             onMouseUp={onMouseUp}
                             onMouseMove={(e) => {
diff --git a/src/client/chat/Chat.less b/src/client/chat/Chat.less
index 90b73125..0e86d58d 100644
--- a/src/client/chat/Chat.less
+++ b/src/client/chat/Chat.less
@@ -1,6 +1,6 @@
 .chat-container {
     .chat-log-container {
-        height: 300px;
+        height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
         .message-container {
diff --git a/src/client/chat/ChatContainer.tsx b/src/client/chat/ChatContainer.tsx
index 8d3ab00e..ddfa0e3f 100644
--- a/src/client/chat/ChatContainer.tsx
+++ b/src/client/chat/ChatContainer.tsx
@@ -99,9 +99,9 @@ export const ChatContainer: React.FunctionComponent<Props> = (props: Props) => {
             <Row>
                 <ChatLog messages={data || []} currentUser={props.username} />
             </Row>
-            <Row className="d-flex m-1 p-1 ">
+            <Row className="d-flex m-1 p-1 justify-content-center">
                 <Form onSubmit={onSubmit}>
-                    <Form.Row className="d-flex justify-content-center flex-nowrap align-content-start ">
+                    <Form.Row className="d-flex justify-content-center flex-nowrap align-content-start">
                         <Col>
                             <Form.Control
                                 className="send-chat"
@@ -113,7 +113,7 @@ export const ChatContainer: React.FunctionComponent<Props> = (props: Props) => {
                             />
                         </Col>
                         <Col xs="auto">
-                            <Button type="submit" className="mr-2 ">
+                            <Button type="submit" className="mr-2" size="sm">
                                 Send
                             </Button>
                         </Col>
diff --git a/src/client/chat/ChatLog.tsx b/src/client/chat/ChatLog.tsx
index 2bb0e43e..30a1ba7b 100644
--- a/src/client/chat/ChatLog.tsx
+++ b/src/client/chat/ChatLog.tsx
@@ -18,7 +18,11 @@ export const ChatLog: React.FunctionComponent<Props> = (props: Props) => {
     const scrollAnchorRef = React.useRef<HTMLDivElement | null>(null);
 
     React.useEffect(() => {
-        scrollAnchorRef.current?.scrollIntoView({ behavior: "smooth" });
+        scrollAnchorRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
     }, [messages]);
 
     return (
diff --git a/src/client/chat/ChatSession.tsx b/src/client/chat/ChatSession.tsx
index 1ddd252d..d02ff0a7 100644
--- a/src/client/chat/ChatSession.tsx
+++ b/src/client/chat/ChatSession.tsx
@@ -187,7 +187,11 @@ export const ChatSession: React.FunctionComponent<Props> = (props: Props) => {
                                     />
                                 </Col>
                                 <Col xs="auto">
-                                    <Button type="submit" className="mb-2">
+                                    <Button
+                                        type="submit"
+                                        className="mb-2"
+                                        size="sm"
+                                    >
                                         Send
                                     </Button>
                                 </Col>
diff --git a/src/client/filehandler/FileModal.tsx b/src/client/filehandler/FileModal.tsx
index cff3db7c..945bf741 100644
--- a/src/client/filehandler/FileModal.tsx
+++ b/src/client/filehandler/FileModal.tsx
@@ -21,30 +21,20 @@ type Props = {
     }>;
     roomType: RoomType;
     isLoading?: boolean;
-    size?: "sm" | "lg";
+    setShowModal: Function;
+    showModal: boolean;
 };
 
 /**
  * Similar to the file container but is rendered in an file modal.
  */
 export const FileModal = (props: Props) => {
-    const [showModal, setShowModal] = React.useState<boolean>(false);
-
     return (
         <div>
-            <Button
-                className="file-modal"
-                size={props.size}
-                onClick={() => {
-                    setShowModal(true);
-                }}
-            >
-                Files
-            </Button>
             <Modal
-                show={showModal}
+                show={props.showModal}
                 onHide={() => {
-                    setShowModal(false);
+                    props.setShowModal(false);
                 }}
                 size="xl"
                 scrollable={true}
@@ -67,7 +57,7 @@ export const FileModal = (props: Props) => {
                     <Button
                         variant="primary"
                         onClick={() => {
-                            setShowModal(false);
+                            props.setShowModal(false);
                         }}
                     >
                         Close
diff --git a/src/client/hooks/useScreenSharing.tsx b/src/client/hooks/useScreenSharing.tsx
index 2add46a2..52d3c4c3 100644
--- a/src/client/hooks/useScreenSharing.tsx
+++ b/src/client/hooks/useScreenSharing.tsx
@@ -92,7 +92,7 @@ export const useScreenSharing = (
             setScreenStream(stream);
         } catch (e) {
             console.log("Error getting screen from user", e);
-            return;
+            return Promise.reject(e);
         }
 
         // Create new peer
diff --git a/src/client/rooms/ClassroomPageContainer.tsx b/src/client/rooms/ClassroomPageContainer.tsx
index 64bf759d..af3f7455 100644
--- a/src/client/rooms/ClassroomPageContainer.tsx
+++ b/src/client/rooms/ClassroomPageContainer.tsx
@@ -1,8 +1,10 @@
 import { List } from "immutable";
 import React, { useRef } from "react";
-import { Button, Col, Container, Row } from "react-bootstrap";
+import { Button, ButtonGroup, Col, Container, Row } from "react-bootstrap";
+import * as AiIcons from "react-icons/ai";
+import * as FaIcons from "react-icons/fa";
 import { MdNotificationsActive, MdNotificationsOff } from "react-icons/md";
-import { RouteComponentProps } from "react-router-dom";
+import { Link, RouteComponentProps } from "react-router-dom";
 import socketIOClient from "socket.io-client";
 import { useDebouncedCallback } from "use-debounce";
 import { ResponseFormEvent, RoomEvent } from "../../events";
@@ -17,18 +19,22 @@ import { Loader } from "../components";
 import { FileModal } from "../filehandler/FileModal";
 import { useDynamicFetch, useFetch } from "../hooks";
 import { useMyPeer } from "../hooks/useMyPeer";
+import { useScreenSharing } from "../hooks/useScreenSharing";
 import { BreakoutRoomAllocateIndicator } from "../Indicators";
 import { PeerContext } from "../peer";
 import { ResponsesModal } from "../responses";
 import { BreakoutAllocationEventData, TopLayerContainerProps } from "../types";
-import { requestIsLoaded, requestIsLoading } from "../utils";
+import { requestIsLoaded, isStaff } from "../utils";
 import { ScreenSharingContainer } from "../videostreaming/ScreenSharingContainer";
 import "./classroom.less";
 import {
+    StreamControl,
+    HostDisplay,
+    Progress,
     BreakoutRoomListModal,
     BreakoutRoomModal,
-    Progress,
-} from "./components/";
+    Participants,
+} from "./components";
 import { SidePanelContainer } from "./containers";
 import "./room.less";
 
@@ -45,7 +51,7 @@ export const ClassroomPageContainer: React.FunctionComponent<Props> = (
 ) => {
     const notification = useRef(new Audio("/public/notification.wav"));
     const [soundEnabled, setSoundEnabled] = React.useState<boolean>(false);
-    const { id: userId } = props.userData;
+    const { id: userId, userType } = props.userData;
     const { classroomId: sessionId } = props.match.params;
     const peerData = useMyPeer(socket, userId, sessionId);
     const [
@@ -53,6 +59,8 @@ export const ClassroomPageContainer: React.FunctionComponent<Props> = (
         setBreakoutRoomModalVisible,
     ] = React.useState<boolean>(false);
 
+    const [showFileModal, setShowFileModal] = React.useState<boolean>(false);
+
     const [
         breakoutRoomListModalVisible,
         setBreakoutRoomListModalVisible,
@@ -88,6 +96,11 @@ export const ClassroomPageContainer: React.FunctionComponent<Props> = (
         List([])
     );
 
+    const { setupScreenSharing, stopScreenSharing } = useScreenSharing(
+        userId,
+        sessionId
+    );
+
     const [, addRaisedHand] = useDynamicFetch<
         undefined,
         { sessionId: string; userId: string }
@@ -155,6 +168,25 @@ export const ClassroomPageContainer: React.FunctionComponent<Props> = (
         fetchRaisedHandUsers.callback();
     }, [fetchRaisedHandUsers]);
 
+    const [altView, setAltView] = React.useState<boolean>(false);
+
+    const video = (
+        <Row className="video-container">
+            <ScreenSharingContainer />
+        </Row>
+    );
+
+    const participants = (
+        <Container className="alt-view-users mt-4">
+            <Participants
+                users={sessionUsersResponse.data?.users || []}
+                raisedHandUsers={raisedHandUsers.toArray()}
+                myUserId={props.userData.id}
+                size="lg"
+            ></Participants>
+        </Container>
+    );
+
     const onNewForm = React.useCallback(() => {
         setSoundEnabled((prev) => {
             if (prev) {
@@ -229,209 +261,292 @@ export const ClassroomPageContainer: React.FunctionComponent<Props> = (
         }
     }, [fileData]);
 
+    const presenterView = React.useMemo(() => {
+        return (
+            <HostDisplay
+                hostId={sessionResponse.data?.createdBy}
+                myUserId={userId}
+            />
+        );
+    }, [sessionResponse, userId]);
+
     if (!requestIsLoaded(sessionResponse)) {
         return <Loader full />;
     }
 
     return (
         <PeerContext.Provider value={peerData}>
-            <Container fluid className="classroom-container">
-                <Col md={9}>
-                    <header className="d-flex">
-                        <Container fluid>
-                            <h1>
-                                {`${sessionResponse.data.courseCode} - ${sessionResponse.data.name}`}
-                            </h1>
-                            <p>{sessionResponse.data.roomType}</p>
-                            <p>{sessionResponse.data.description}</p>
-                        </Container>
-                        <Container fluid>
-                            <Progress
-                                startTime={
-                                    new Date(sessionResponse.data.startTime)
-                                }
-                                endTime={new Date(sessionResponse.data.endTime)}
-                            />
-                        </Container>
-                    </header>
-                    <Container fluid>
-                        <div className="stream-container">
-                            <Row>
-                                <Col md={4}>
-                                    <div className="dflex justify-content-center align-items-center presenter-container">
-                                        <div></div>
+            <Row>
+                <Col className="mr-4">
+                    <Row className="head-panel mt-4 mb-4">
+                        <Col xs={4}>
+                            <Container className="d-flex align-items-center">
+                                <Link to="/classes">
+                                    <Button
+                                        className="justify-content-center back-btn"
+                                        variant="light"
+                                        size="sm"
+                                    >
+                                        <AiIcons.AiOutlineArrowLeft className="icon" />
+                                        Back
+                                    </Button>
+                                </Link>
+                                <h1 className="ml-2 m-0 text-truncate">
+                                    {`${sessionResponse.data.courseCode} - ${sessionResponse.data.roomType}`}
+                                </h1>
+                            </Container>
+                        </Col>
+                        <Col xs={8}>
+                            <div>
+                                <Progress
+                                    startTime={
+                                        new Date(sessionResponse.data.startTime)
+                                    }
+                                    endTime={
+                                        new Date(sessionResponse.data.endTime)
+                                    }
+                                />
+                                <ButtonGroup
+                                    className="view-control mt-2 d-flex justify-content-center toggle-container"
+                                    size="sm"
+                                >
+                                    <p
+                                        className={`pr-2 font-weight-bold ${
+                                            !altView ? "active" : ""
+                                        }`}
+                                        onClick={() => {
+                                            setAltView(false);
+                                        }}
+                                    >
+                                        Speaker View
+                                    </p>
+                                    <p
+                                        className={`pl-2 font-weight-bold ${
+                                            altView ? "active" : ""
+                                        }`}
+                                        onClick={() => {
+                                            setAltView(true);
+                                        }}
+                                    >
+                                        Participants View
+                                    </p>
+                                </ButtonGroup>
+                            </div>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <Row className="classroom-row">
+                                <Col
+                                    sm={4}
+                                    className="d-flex align-items-center justify-content-center"
+                                >
+                                    {altView ? null : presenterView}
+                                    <div className="video-alt">
+                                        {altView ? presenterView : null}
+                                        {altView ? video : null}
                                     </div>
                                 </Col>
-                                <Col md={8}>
-                                    <Container className="view-control d-flex justify-content-center">
-                                        <Button>Speaker View</Button>
-                                        <Button>Participants View</Button>
-                                    </Container>
-                                    <Container className="video-container mt-4">
-                                        {/* <StreamSelectorWrapper /> */}
-                                        <ScreenSharingContainer
-                                            userId={userId}
-                                            sessionId={sessionId}
-                                        />
-                                    </Container>
-                                    <Container className="room-control d-flex justify-content-center mt-4">
-                                        <Button
-                                            onClick={() => {
-                                                setBreakoutRoomModalVisible(
-                                                    true
-                                                );
-                                            }}
-                                        >
-                                            Manage Breakout Rooms
-                                        </Button>
-                                        <Button
-                                            onClick={() => {
-                                                setBreakoutRoomListModalVisible(
-                                                    true
-                                                );
-                                            }}
-                                        >
-                                            Breakout Rooms
-                                        </Button>
-                                        <Button
-                                            onClick={async () => {
-                                                if (handRaisedRef.current) {
-                                                    setRaisedHandUsers(
-                                                        raisedHandUsers.splice(
-                                                            raisedHandUsers.indexOf(
-                                                                userId
-                                                            ),
-                                                            1
-                                                        )
-                                                    );
-                                                } else {
-                                                    setRaisedHandUsers(
-                                                        raisedHandUsers.concat([
-                                                            userId,
-                                                        ])
-                                                    );
-                                                }
-                                                setRaisedHandStatus.callback(
-                                                    handRaisedRef.current
-                                                );
-                                                handRaisedRef.current = !handRaisedRef.current;
-                                            }}
-                                        >
-                                            Raise Hand
-                                        </Button>
-                                        <Button>Camera off</Button>
-                                        <Button>Mic off</Button>
-                                        <Button
-                                            onClick={() => {
-                                                setResponsesModalStatus({
-                                                    visible: true,
-                                                    type: "result",
-                                                });
-                                            }}
-                                        >
-                                            {props.userData.userType ===
-                                            UserType.STUDENT
-                                                ? "View Questions"
-                                                : "View Results"}
-                                        </Button>
-                                        <FileModal
-                                            uploadType={
-                                                FileUploadType.DOCUMENTS
-                                            }
-                                            socket={socket}
-                                            sessionID={sessionId}
-                                            userID={props.userData.id}
-                                            updateFiles={getFileData}
-                                            isLoading={requestIsLoading(
-                                                fileData
-                                            )}
-                                            files={files}
-                                            roomType={RoomType.CLASS}
-                                        />
-                                        {props.userData.userType ===
-                                            UserType.COORDINATOR && (
-                                            <Button
-                                                onClick={() => {
-                                                    setResponsesModalStatus({
-                                                        visible: true,
-                                                        type: "ask",
-                                                    });
-                                                }}
-                                            >
-                                                Ask Questions
-                                            </Button>
-                                        )}
-                                        <Button
-                                            onClick={() => {
-                                                setSoundEnabled((prev) => {
-                                                    return !prev;
-                                                });
-                                            }}
-                                        >
-                                            {soundEnabled ? (
-                                                <MdNotificationsActive />
-                                            ) : (
-                                                <MdNotificationsOff />
-                                            )}
-                                        </Button>
-                                    </Container>
+                                <Col sm={8} className="video-column">
+                                    {altView ? participants : video}
                                 </Col>
                             </Row>
-                        </div>
-                    </Container>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={4}>
+                            <Row className="d-flex justify-content-center">
+                                <StreamControl
+                                    setupScreenSharing={setupScreenSharing}
+                                    stopScreenSharing={stopScreenSharing}
+                                    disableStaffControl={isStaff(userType)}
+                                />
+                            </Row>
+                            <Row className="d-flex justify-content-center">
+                                <ButtonGroup className="classroom-btn-grp d-flex mt-4"></ButtonGroup>
+                            </Row>
+                        </Col>
+                        <Col sm={8} className="d-flex justify-content-center">
+                            <ButtonGroup className="classroom-btn-grp d-flex mt-4">
+                                <Button
+                                    className="first-btn"
+                                    id="settings-options"
+                                    onClick={() => {
+                                        setBreakoutRoomListModalVisible(true);
+                                    }}
+                                >
+                                    <AiIcons.AiOutlineTeam className="setting-icon" />
+                                    <p className="icon-label">Breakout Rooms</p>
+                                </Button>
+                                {isStaff(userType) && (
+                                    <Button
+                                        className="setting-btn"
+                                        id="settings-options"
+                                        onClick={() => {
+                                            setBreakoutRoomModalVisible(true);
+                                        }}
+                                    >
+                                        <AiIcons.AiOutlineCluster className="setting-icon" />
+                                        <p className="icon-label">
+                                            Manage Rooms
+                                        </p>
+                                    </Button>
+                                )}
+                                <Button
+                                    className="setting-btn"
+                                    onClick={async () => {
+                                        if (handRaisedRef.current) {
+                                            setRaisedHandUsers(
+                                                raisedHandUsers.splice(
+                                                    raisedHandUsers.indexOf(
+                                                        userId
+                                                    ),
+                                                    1
+                                                )
+                                            );
+                                        } else {
+                                            setRaisedHandUsers(
+                                                raisedHandUsers.concat([userId])
+                                            );
+                                        }
+                                        setRaisedHandStatus.callback(
+                                            handRaisedRef.current
+                                        );
+                                        handRaisedRef.current = !handRaisedRef.current;
+                                    }}
+                                >
+                                    <FaIcons.FaRegHandPaper className="setting-icon " />
+                                    <p className="icon-label">Raise Hand</p>
+                                </Button>
+                                <Button
+                                    className="setting-btn"
+                                    onClick={() => {
+                                        setResponsesModalStatus({
+                                            visible: true,
+                                            type: "result",
+                                        });
+                                    }}
+                                >
+                                    <AiIcons.AiOutlineProfile className="setting-icon"></AiIcons.AiOutlineProfile>
+                                    {props.userData.userType ===
+                                    UserType.STUDENT ? (
+                                        <p className="icon-label">
+                                            View Questions
+                                        </p>
+                                    ) : (
+                                        <p>View Results</p>
+                                    )}
+                                </Button>
+                                <Button
+                                    onClick={() => {
+                                        setShowFileModal(true);
+                                    }}
+                                    className="setting-btn"
+                                >
+                                    <AiIcons.AiOutlineUpload className="setting-icon" />
+                                    <p className="icon-label">View Files</p>
+                                </Button>
+                                {props.userData.userType ===
+                                    UserType.COORDINATOR && (
+                                    <Button
+                                        onClick={() => {
+                                            setResponsesModalStatus({
+                                                visible: true,
+                                                type: "ask",
+                                            });
+                                        }}
+                                        className="setting-btn"
+                                    >
+                                        <AiIcons.AiOutlineQuestionCircle className="setting-icon" />
+                                        <p className="icon-label">
+                                            Ask Questions
+                                        </p>
+                                    </Button>
+                                )}
+                                <Button
+                                    className="end-btn"
+                                    onClick={() => {
+                                        setSoundEnabled((prev) => {
+                                            return !prev;
+                                        });
+                                    }}
+                                >
+                                    {soundEnabled ? (
+                                        <MdNotificationsActive className="setting-icon" />
+                                    ) : (
+                                        <MdNotificationsOff className="setting-icon" />
+                                    )}
+                                    <p className="icon-label">
+                                        Toggle Notifications
+                                    </p>
+                                </Button>
+                            </ButtonGroup>
+                        </Col>
+                    </Row>
                 </Col>
-                <Col md={3}>
+                <Col md={3} className="p-0">
                     <SidePanelContainer
                         sessionId={sessionId}
                         username={props.userData.username}
-                        myUserId={props.userData.id}
                         initialChatLog={sessionResponse.data.messages}
                         users={sessionUsersResponse.data?.users}
                         raisedHandUsers={raisedHandUsers.toArray()}
                         roomType={RoomType.CLASS}
                         socket={socket}
+                        myUserId={props.userData.id}
                     />
                 </Col>
-                <BreakoutRoomModal
-                    userData={sessionUsersResponse.data?.users || []}
-                    visible={createBreakoutRoomModalVisible}
-                    sessionId={props.match.params.classroomId}
-                    handleClose={() => {
-                        setBreakoutRoomModalVisible(false);
-                    }}
-                />
-                <BreakoutRoomListModal
-                    {...props}
-                    visible={breakoutRoomListModalVisible}
-                    sessionId={props.match.params.classroomId}
-                    handleClose={() => {
-                        setBreakoutRoomListModalVisible(false);
-                    }}
-                />
-                <BreakoutRoomAllocateIndicator
-                    {...props}
-                    event={breakoutAllocationEventData}
-                    onClose={() => {
-                        setBreakoutAllocationEventData(undefined);
-                    }}
-                />
-                <ResponsesModal
-                    sid={sessionId}
-                    userid={props.userData.id}
-                    userType={props.userData.userType}
-                    sock={socket}
-                    modalVisible={responsesModalStatus.visible}
-                    closeModal={() => {
-                        setResponsesModalStatus((prev) => {
-                            return {
-                                ...prev,
-                                visible: false,
-                            };
-                        });
-                    }}
-                    modalType={responsesModalStatus.type}
-                />
-            </Container>
+            </Row>
+            <BreakoutRoomModal
+                userData={sessionUsersResponse.data?.users || []}
+                visible={createBreakoutRoomModalVisible}
+                sessionId={props.match.params.classroomId}
+                handleClose={() => {
+                    setBreakoutRoomModalVisible(false);
+                }}
+            />
+            <BreakoutRoomListModal
+                {...props}
+                visible={breakoutRoomListModalVisible}
+                sessionId={props.match.params.classroomId}
+                handleClose={() => {
+                    setBreakoutRoomListModalVisible(false);
+                }}
+            />
+            <BreakoutRoomAllocateIndicator
+                {...props}
+                event={breakoutAllocationEventData}
+                onClose={() => {
+                    setBreakoutAllocationEventData(undefined);
+                }}
+            />
+            <ResponsesModal
+                sid={sessionId}
+                userid={props.userData.id}
+                userType={props.userData.userType}
+                sock={socket}
+                modalVisible={responsesModalStatus.visible}
+                closeModal={() => {
+                    setResponsesModalStatus((prev) => {
+                        return {
+                            ...prev,
+                            visible: false,
+                        };
+                    });
+                }}
+                modalType={responsesModalStatus.type}
+            ></ResponsesModal>
+            <FileModal
+                uploadType={FileUploadType.DOCUMENTS}
+                socket={socket}
+                sessionID={sessionId}
+                userID={props.userData.id}
+                updateFiles={getFileData}
+                files={files}
+                roomType={RoomType.CLASS}
+                showModal={showFileModal}
+                setShowModal={setShowFileModal}
+            ></FileModal>
         </PeerContext.Provider>
     );
 };
diff --git a/src/client/rooms/PrivateRoom.less b/src/client/rooms/PrivateRoom.less
index 92a7d911..4a2fc385 100644
--- a/src/client/rooms/PrivateRoom.less
+++ b/src/client/rooms/PrivateRoom.less
@@ -60,3 +60,8 @@
         }
     }
 }
+
+.room-content-container {
+    min-height: 600px;
+    max-height: 800px;
+}
diff --git a/src/client/rooms/PrivateRoomContainer.tsx b/src/client/rooms/PrivateRoomContainer.tsx
index 6f803ea2..efd2769f 100644
--- a/src/client/rooms/PrivateRoomContainer.tsx
+++ b/src/client/rooms/PrivateRoomContainer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Col, Container, Row } from "react-bootstrap";
+import { Button, Col, Container, Row, ButtonGroup } from "react-bootstrap";
 import * as AiIcons from "react-icons/ai";
 import { Link, RouteComponentProps } from "react-router-dom";
 import {
@@ -16,6 +16,8 @@ import { requestIsLoaded } from "../utils";
 import { ScreenSharingContainer } from "../videostreaming/ScreenSharingContainer";
 import { SessionContainer, SidePanelContainer } from "./containers";
 import "./PrivateRoom.less";
+import { StreamControl } from "./components";
+import { useScreenSharing } from "../hooks/useScreenSharing";
 
 type Props = RouteComponentProps<{ roomId: string }> &
     TopLayerContainerProps & {
@@ -52,6 +54,13 @@ export const PrivateRoomContainer: React.FunctionComponent<Props> = (
         true
     );
 
+    const { setupScreenSharing, stopScreenSharing } = useScreenSharing(
+        props.userData.id,
+        roomId
+    );
+
+    const [showFileModal, setShowFileModal] = React.useState<boolean>(false);
+
     const [files, setFiles] = React.useState<
         Array<{
             id: string;
@@ -82,23 +91,7 @@ export const PrivateRoomContainer: React.FunctionComponent<Props> = (
             ) => {
                 return (
                     <>
-                        {props.roomType === RoomType.BREAKOUT && (
-                            <Row>
-                                <Button
-                                    onClick={() => {
-                                        props.history.push(
-                                            `/classroom/${sessionData.parentSessionId}`
-                                        );
-                                    }}
-                                >
-                                    Main Room
-                                </Button>
-                            </Row>
-                        )}
-                        <Container
-                            fluid
-                            className="private-room-container pr-0"
-                        >
+                        <Container fluid className="private-room-container p-0">
                             <Row>
                                 <Col md={9}>
                                     <header className="d-flex info-header">
@@ -117,6 +110,17 @@ export const PrivateRoomContainer: React.FunctionComponent<Props> = (
                                                                     Back
                                                                 </Button>
                                                             </Link>
+                                                            <Link
+                                                                to={`/classroom/${sessionData.parentSessionId}`}
+                                                            >
+                                                                <Button
+                                                                    variant="light"
+                                                                    size="sm"
+                                                                    className="d-flex align-items-center"
+                                                                >
+                                                                    Main Room
+                                                                </Button>
+                                                            </Link>
                                                             <span className="session-name d-flex align-items-center ml-2">
                                                                 <h1 className="m-0 text-truncate">{`${sessionData.name}`}</h1>
                                                             </span>
@@ -156,34 +160,45 @@ export const PrivateRoomContainer: React.FunctionComponent<Props> = (
                                             </Row>
                                         </Container>
                                     </header>
-                                    <Container fluid>
+                                    <Container
+                                        fluid
+                                        className="room-content-container d-flex align-items-center justify-content-center"
+                                    >
                                         {showCanvas ? (
                                             <DrawingCanvas
                                                 sessionId={sessionData.id}
                                                 socket={socket}
                                             />
                                         ) : (
-                                            <ScreenSharingContainer
-                                                userId={props.userData.id}
-                                                sessionId={sessionData.id}
-                                            />
+                                            <ScreenSharingContainer />
                                         )}
                                     </Container>
                                     <Row className="d-flex justify-content-center">
-                                        <FileModal
-                                            uploadType={
-                                                FileUploadType.DOCUMENTS
+                                        <StreamControl
+                                            setupScreenSharing={
+                                                setupScreenSharing
+                                            }
+                                            stopScreenSharing={
+                                                stopScreenSharing
                                             }
-                                            socket={socket}
-                                            sessionID={roomId}
-                                            userID={props.userData.id}
-                                            updateFiles={getFileData}
-                                            files={files}
-                                            roomType={props.roomType}
                                         />
+                                        <ButtonGroup className="classroom-btn-grp d-flex mt-4">
+                                            <Button
+                                                className="first-btn"
+                                                id="settings-options"
+                                                onClick={() => {
+                                                    setShowFileModal(true);
+                                                }}
+                                            >
+                                                <AiIcons.AiOutlineUpload className="setting-icon" />
+                                                <p className="icon-label">
+                                                    View Files
+                                                </p>
+                                            </Button>
+                                        </ButtonGroup>
                                     </Row>
                                 </Col>
-                                <Col md={3} className="pr-0">
+                                <Col md={3} className="p-0">
                                     <SidePanelContainer
                                         sessionId={roomId}
                                         username={props.userData.username}
@@ -197,6 +212,17 @@ export const PrivateRoomContainer: React.FunctionComponent<Props> = (
                                 </Col>
                             </Row>
                         </Container>
+                        <FileModal
+                            uploadType={FileUploadType.DOCUMENTS}
+                            socket={socket}
+                            sessionID={roomId}
+                            userID={props.userData.id}
+                            updateFiles={getFileData}
+                            files={files}
+                            roomType={props.roomType}
+                            showModal={showFileModal}
+                            setShowModal={setShowFileModal}
+                        />
                     </>
                 );
             }}
diff --git a/src/client/rooms/classroom.less b/src/client/rooms/classroom.less
index f53b61c8..33309075 100644
--- a/src/client/rooms/classroom.less
+++ b/src/client/rooms/classroom.less
@@ -7,8 +7,18 @@
     .hand {
         position: absolute;
         top: 0px;
-        right: -10px;
-        color: mediumpurple;
+        left: 70px;
+        color: @content-bg;
+    }
+    &.lg {
+        img,
+        .stream-video-wrapper {
+            width: 100px;
+            height: 100px;
+        }
+        .username {
+            color: black;
+        }
     }
 }
 
@@ -18,13 +28,18 @@
     flex-wrap: wrap;
     position: relative;
     img,
-    video {
+    .stream-video-wrapper {
         width: 50px;
         height: 50px;
+
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
         border-radius: 50%;
+        overflow: hidden;
+        .stream-video {
+            object-fit: cover;
+        }
         &.student {
             border: 1px solid mediumpurple;
         }
@@ -47,11 +62,68 @@
 .classroom-container {
     display: flex;
     min-height: 100vh;
-    .stream-container {
-        height: 600px;
+}
+.video-container {
+    height: 600px;
+}
+
+.presenter-container {
+    .presenter-picture {
+        width: 300px;
+        height: 300px;
+        margin: auto;
+        border-radius: 50px;
+        overflow: hidden;
+        img {
+            height: 100%;
+            width: 100%;
+        }
     }
+}
+
+.video-alt {
     .video-container {
+        height: 250px;
+        width: 400px;
+    }
+    .presenter-container {
+        font-family: Raleway;
+        padding-top: 20% !important;
+    }
+    .presenter-picture {
+        min-width: 100px;
+        min-height: 100px;
+        width: 5vw;
+        height: 5vw;
+        margin: auto;
+        border-radius: 200px;
         background-color: lightblue;
-        height: 500px;
+    }
+    .presenter-name {
+        font-family: Raleway;
+        font-weight: 600;
+        font-size: 25px;
+        margin: auto;
+        text-align: center;
+    }
+    .presenter-role {
+        font-family: Raleway;
+        font-weight: 200;
+        font-size: 15px;
+        margin: auto;
+        text-align: center;
+    }
+}
+
+.alt-view-users {
+    height: 500px;
+    width: 900px;
+    margin-left: 0;
+    .user-display {
+        padding: 25px;
+        img {
+            height: 100px;
+            width: 100px;
+        }
     }
 }
diff --git a/src/client/rooms/components/BreakoutRoomListModal.tsx b/src/client/rooms/components/BreakoutRoomListModal.tsx
index 54282e5f..3a3babc5 100644
--- a/src/client/rooms/components/BreakoutRoomListModal.tsx
+++ b/src/client/rooms/components/BreakoutRoomListModal.tsx
@@ -49,6 +49,11 @@ export const BreakoutRoomListModal: React.FunctionComponent<Props> = (
             <Modal.Body>
                 {requestIsLoaded(breakoutRoomResponse) ? (
                     <Container fluid>
+                        {breakoutRoomResponse.data.rooms.length === 0 && (
+                            <p className="text-muted">
+                                There are no breakout rooms available
+                            </p>
+                        )}
                         {breakoutRoomResponse.data.rooms.map((room, index) => {
                             return (
                                 <Container className="mt-4" key={room.roomId}>
diff --git a/src/client/rooms/components/HostDisplay.tsx b/src/client/rooms/components/HostDisplay.tsx
new file mode 100644
index 00000000..46451ba3
--- /dev/null
+++ b/src/client/rooms/components/HostDisplay.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { UserData } from "../../../types";
+import { Loader, ProfilePicture } from "../../components";
+import { useFetch } from "../../hooks";
+import { requestIsLoaded, userTypeToClass } from "../../utils";
+import { PeerContext } from "../../peer";
+import { MyVideo } from "../../videostreaming";
+
+type Props = {
+    hostId?: string;
+    myUserId: string;
+};
+
+export const HostDisplay: React.FunctionComponent<Props> = (props: Props) => {
+    const { peer: myPeer, stream: myStream } = React.useContext(PeerContext);
+    const [userResponse] = useFetch<UserData, { userID?: string }>(
+        "/user/getUserById",
+        { userID: props.hostId }
+    );
+
+    if (!requestIsLoaded(userResponse)) {
+        return <Loader />;
+    }
+
+    return (
+        <div className="presenter-container text-center">
+            <div className="presenter-picture peach-gradient d-flex align-items-center">
+                {myPeer && myStream ? (
+                    <MyVideo muted />
+                ) : (
+                    props.hostId && (
+                        <ProfilePicture
+                            userId={props.hostId}
+                            openChatOnClick={props.myUserId !== props.hostId}
+                        />
+                    )
+                )}
+            </div>
+            <h1 className="mt-4">{userResponse.data.username}</h1>
+            <p className="text-muted text-capitalize">
+                Course {userTypeToClass(userResponse.data.userType)}
+            </p>
+        </div>
+    );
+};
diff --git a/src/client/rooms/components/Participants.tsx b/src/client/rooms/components/Participants.tsx
index 1c7b4e3c..ee405ad0 100644
--- a/src/client/rooms/components/Participants.tsx
+++ b/src/client/rooms/components/Participants.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Row } from "react-bootstrap";
-import { GiHand } from "react-icons/gi";
+import { FaHandPaper } from "react-icons/fa";
 import { UserDataResponseType } from "../../../types";
 import { PeerContext } from "../../peer";
 import { UserDisplay } from "../components";
@@ -14,6 +14,8 @@ type Props = {
     raisedHandUsers: Array<string>;
     // Current user id.
     myUserId: string;
+    // Large or small user profiles?
+    size?: "lg" | "sm";
 };
 
 /**
@@ -28,7 +30,7 @@ export const Participants: React.FunctionComponent<Props> = (props: Props) => {
     const handIcon = React.useCallback(
         (user: { id: string }) => {
             return raisedHandUsers.includes(user.id) ? (
-                <GiHand className="hand" />
+                <FaHandPaper className="hand" />
             ) : (
                 <></>
             );
@@ -37,8 +39,10 @@ export const Participants: React.FunctionComponent<Props> = (props: Props) => {
     );
 
     return (
-        <Row className="mt-2">
-            <div className="user-display-container">
+        <Row className="mt-3">
+            <div
+                className={`user-display-container ${props.size || "sm"} px-2`}
+            >
                 {props.users.map((user) => {
                     if (user.id === props.myUserId) {
                         if (myPeer && myStream) {
diff --git a/src/client/rooms/components/Progress.tsx b/src/client/rooms/components/Progress.tsx
index a6e2fae7..96a8a135 100644
--- a/src/client/rooms/components/Progress.tsx
+++ b/src/client/rooms/components/Progress.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Container } from "react-bootstrap";
+import { Container, Row } from "react-bootstrap";
 import format from "date-fns/format";
 
 type Props = {
@@ -14,40 +14,66 @@ type Props = {
  */
 export const Progress: React.FunctionComponent<Props> = (props: Props) => {
     const { startTime, endTime } = props;
-
+    const startTimeSeconds = startTime.getTime() / 1000;
+    const endTimeSeconds = endTime.getTime() / 1000;
     const [progress, setProgress] = React.useState<number>(
-        props.startTime.getTime()
+        new Date().getTime() / 1000
     );
 
     React.useEffect(() => {
-        const timeoutRef = setTimeout(() => {
+        const intervalRef = setInterval(() => {
             setProgress((prev) => {
                 return prev + 1;
             });
         }, 1000);
         return () => {
-            clearTimeout(timeoutRef);
+            clearTimeout(intervalRef);
         };
     }, []);
 
     const progressPercent = React.useMemo(() => {
-        return progress / endTime.getTime();
-    }, [progress, endTime]);
+        return (
+            100 -
+            ((endTimeSeconds - progress) /
+                (endTimeSeconds - startTimeSeconds)) *
+                100
+        );
+    }, [progress, endTimeSeconds, startTimeSeconds]);
+
+    const progressText = React.useMemo(() => {
+        if (progressPercent < 0) {
+            return "Class will start soon...";
+        } else if (progressPercent > 0 && progressPercent < 100) {
+            return "Class in progress...";
+        } else {
+            return "Class over...";
+        }
+    }, [progressPercent]);
 
     return (
-        <Container className="d-flex align-items-center">
-            <span className="start-time mr-2">
-                {format(startTime, "hh:mm")}
-            </span>
-            <div className="progress-bar">
-                <div
-                    className="progress-inner"
-                    style={{
-                        width: `${progressPercent}%`,
-                    }}
-                ></div>
-            </div>
-            <span className="end-time ml-2">{format(endTime, "hh:mm")}</span>
+        <Container>
+            <Row className="d-flex align-items-center justify-content-center">
+                <p className="text-muted">{progressText}</p>
+            </Row>
+            <Row className="d-flex align-items-center justify-content-center">
+                <span className="start-time mr-2">
+                    {format(startTime, "dd/mm hh:mm")}
+                </span>
+                <div className="progress-bar">
+                    <div
+                        className="progress-inner"
+                        style={{
+                            width: `${Math.max(
+                                Math.min(progressPercent, 100),
+                                0
+                            )}%`,
+                        }}
+                    ></div>
+                </div>
+                <span className="end-time ml-2">
+                    {format(endTime, "dd/mm hh:mm")}
+                </span>
+            </Row>
         </Container>
     );
 };
diff --git a/src/client/rooms/components/StreamControl.tsx b/src/client/rooms/components/StreamControl.tsx
new file mode 100644
index 00000000..3211613b
--- /dev/null
+++ b/src/client/rooms/components/StreamControl.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+import { ButtonGroup, Button } from "react-bootstrap";
+import * as BiIcons from "react-icons/bi";
+import {
+    MdPhonelink,
+    MdPhonelinkOff,
+    MdFiberSmartRecord,
+} from "react-icons/md";
+import { PeerContext } from "../../peer";
+import {
+    turnVideoOff,
+    turnAudioOn,
+    turnVideoOn,
+    turnAudioOff,
+} from "../../hooks/useMediaStream";
+import { useScreenRecording } from "../../hooks/useScreenRecording";
+import { AiOutlineVideoCameraAdd } from "react-icons/ai";
+
+type Props = {
+    setupScreenSharing: () => Promise<void>;
+    stopScreenSharing: () => void;
+    disableStaffControl?: boolean;
+};
+
+/**
+ * Component for controlling stream elements such as camera, mic etc.
+ */
+export const StreamControl: React.FunctionComponent<Props> = (props: Props) => {
+    const { setupScreenSharing, stopScreenSharing } = props;
+    const { stream } = React.useContext(PeerContext);
+    const [beginRecording, stopAndSaveRecording] = useScreenRecording();
+
+    const [cameraEnabled, setCameraEnabled] = React.useState<boolean>(false);
+    const [cameraAudioEnabled, setCameraAudioEnabled] = React.useState<boolean>(
+        false
+    );
+    const [screenEnabled, setScreenEnabled] = React.useState<boolean>(false);
+    const [isRecording, setIsRecording] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        if (stream) {
+            if (cameraEnabled) {
+                turnVideoOn(stream);
+            } else {
+                turnVideoOff(stream);
+            }
+        }
+    }, [cameraEnabled, stream]);
+
+    React.useEffect(() => {
+        if (stream) {
+            if (cameraAudioEnabled) {
+                turnAudioOn(stream);
+            } else {
+                turnAudioOff(stream);
+            }
+        }
+    }, [cameraAudioEnabled, stream]);
+
+    return (
+        <ButtonGroup className="classroom-btn-grp d-flex mt-4">
+            <Button
+                className="first-btn"
+                disabled={props.disableStaffControl}
+                onClick={() => {
+                    setCameraEnabled((enabled) => {
+                        return !enabled;
+                    });
+                }}
+            >
+                {cameraEnabled ? (
+                    <BiIcons.BiVideoOff className="setting-icon" />
+                ) : (
+                    <BiIcons.BiVideo className="setting-icon" />
+                )}
+                <p className="icon-label">
+                    Camera {cameraEnabled ? "off" : "on"}
+                </p>
+            </Button>
+            <Button
+                className="setting-btn"
+                disabled={props.disableStaffControl}
+                onClick={() => {
+                    setCameraAudioEnabled((enabled) => {
+                        return !enabled;
+                    });
+                }}
+            >
+                {cameraAudioEnabled ? (
+                    <BiIcons.BiMicrophoneOff className="setting-icon" />
+                ) : (
+                    <BiIcons.BiMicrophone className="setting-icon" />
+                )}
+                <p className="icon-label">
+                    Mic {cameraAudioEnabled ? "off" : "on"}
+                </p>
+            </Button>
+            <Button
+                className="setting-btn"
+                disabled={props.disableStaffControl}
+                onClick={async () => {
+                    if (!screenEnabled) {
+                        await setupScreenSharing().catch(() => {
+                            setScreenEnabled(false);
+                        });
+                        setScreenEnabled(true);
+                    } else {
+                        stopScreenSharing();
+                        setScreenEnabled(false);
+                    }
+                }}
+            >
+                {screenEnabled ? (
+                    <MdPhonelinkOff className="setting-icon" />
+                ) : (
+                    <MdPhonelink className="setting-icon" />
+                )}
+                <p className="icon-label">
+                    {screenEnabled ? "Stop sharing" : "Share screen"}
+                </p>
+            </Button>
+            <Button
+                className="end-btn"
+                onClick={async () => {
+                    if (!isRecording) {
+                        await beginRecording();
+                        setIsRecording(true);
+                    } else {
+                        stopAndSaveRecording();
+                        setIsRecording(false);
+                    }
+                }}
+            >
+                {isRecording ? (
+                    <MdFiberSmartRecord className="setting-icon" />
+                ) : (
+                    <AiOutlineVideoCameraAdd className="setting-icon" />
+                )}
+                <p className="icon-label">
+                    {isRecording ? "Save recording" : "Start recording"}
+                </p>
+            </Button>
+        </ButtonGroup>
+    );
+};
diff --git a/src/client/rooms/components/index.tsx b/src/client/rooms/components/index.tsx
index a18a35b8..7f22dc9b 100644
--- a/src/client/rooms/components/index.tsx
+++ b/src/client/rooms/components/index.tsx
@@ -6,3 +6,5 @@ export * from "./Participants";
 export * from "./ScheduleRoomForm";
 export * from "./CreatePrivateRoomForm";
 export * from "./Progress";
+export * from "./StreamControl";
+export * from "./HostDisplay";
diff --git a/src/client/rooms/containers/ParticipantsContainer.tsx b/src/client/rooms/containers/ParticipantsContainer.tsx
index a63bfbad..d2bbc342 100644
--- a/src/client/rooms/containers/ParticipantsContainer.tsx
+++ b/src/client/rooms/containers/ParticipantsContainer.tsx
@@ -39,9 +39,10 @@ export const ParticipantsContainer: React.FunctionComponent<Props> = (
 
     return (
         <Container>
-            <Container className="search-bar">
+            <Container className="search-bar mt-2">
                 <Form.Control
                     type="text"
+                    className="mr-2"
                     placeholder="Find a person..."
                     onChange={(e) => {
                         setFilterValue(e.target.value);
diff --git a/src/client/rooms/containers/SessionContainer.tsx b/src/client/rooms/containers/SessionContainer.tsx
index 9ac02073..1532645b 100644
--- a/src/client/rooms/containers/SessionContainer.tsx
+++ b/src/client/rooms/containers/SessionContainer.tsx
@@ -91,7 +91,7 @@ export const SessionContainer: React.FunctionComponent<Props> = (
 
     return (
         <PeerContext.Provider value={peerData}>
-            <Container fluid>
+            <Container fluid className="p-0">
                 {children(
                     sessionResponse.data,
                     sessionUsersResponse.data?.users,
diff --git a/src/client/rooms/containers/SidePanelContainer.less b/src/client/rooms/containers/SidePanelContainer.less
index 092cc921..a13fa802 100644
--- a/src/client/rooms/containers/SidePanelContainer.less
+++ b/src/client/rooms/containers/SidePanelContainer.less
@@ -11,6 +11,7 @@
     margin-bottom: 0 !important;
     font-size: 13px !important;
     font-weight: 600 !important;
+    background: linear-gradient(40deg, #6547ae, #5c499d) !important;
 }
 
 .panel-container {
@@ -30,7 +31,6 @@
     padding: 0;
     color: white;
     font-size: 1.5em;
-    margin-top: 5%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
@@ -45,10 +45,7 @@
 .search-bar input {
     background-color: #5d4f8f;
     border-radius: 22px;
-    padding: 5%;
-    width: 80%;
     margin: auto;
-    height: 30px;
     border-color: #5d4f8f;
     font-size: 13px;
 }
@@ -63,5 +60,16 @@
 }
 
 .chat-outer-container {
+    height: calc(100% - 50px);
     overflow-x: hidden;
+    .chat-container {
+        height: inherit;
+        & > .row:first-child {
+            height: inherit;
+        }
+    }
+}
+
+.messages-row {
+    height: calc(100% - 600px);
 }
diff --git a/src/client/rooms/containers/SidePanelContainer.tsx b/src/client/rooms/containers/SidePanelContainer.tsx
index f840f57b..8101344e 100644
--- a/src/client/rooms/containers/SidePanelContainer.tsx
+++ b/src/client/rooms/containers/SidePanelContainer.tsx
@@ -3,6 +3,7 @@ import { Container, Row } from "react-bootstrap";
 import { MessageData, RoomType, UserDataResponseType } from "../../../types";
 import { ChatContainer } from "../../chat";
 import { Loader } from "../../components";
+import { isStaff } from "../../utils";
 import { ParticipantsContainer } from "./ParticipantsContainer";
 import "./SidePanelContainer.less";
 
@@ -28,18 +29,33 @@ export const SidePanelContainer: React.FunctionComponent<Props> = (
             <Row>
                 <div className="panel-container tutors-container">
                     <Container className="section-header">
-                        <h6>Tutor Team</h6>
+                        <h6>Staff</h6>
                     </Container>
+                    {props.users ? (
+                        <ParticipantsContainer
+                            users={props.users.filter((user) =>
+                                isStaff(user.userType)
+                            )}
+                            raisedHandUsers={props.raisedHandUsers}
+                            myUserId={props.myUserId}
+                        />
+                    ) : (
+                        <Container className="loader-container">
+                            <Loader />
+                        </Container>
+                    )}
                 </div>
             </Row>
             <Row>
-                <Container className="panel-container students-container ">
+                <Container className="panel-container students-container">
                     <Container className="section-header">
                         <h6>Participants</h6>
                     </Container>
                     {props.users ? (
                         <ParticipantsContainer
-                            users={props.users}
+                            users={props.users.filter(
+                                (user) => !isStaff(user.userType)
+                            )}
                             raisedHandUsers={props.raisedHandUsers}
                             myUserId={props.myUserId}
                         />
@@ -50,7 +66,7 @@ export const SidePanelContainer: React.FunctionComponent<Props> = (
                     )}
                 </Container>
             </Row>
-            <Row>
+            <Row className="messages-row">
                 <div className="panel-container messages-container">
                     <Container className="section-header">
                         <h6>Chat</h6>
diff --git a/src/client/rooms/room.less b/src/client/rooms/room.less
index 90ece1f0..e547cb58 100644
--- a/src/client/rooms/room.less
+++ b/src/client/rooms/room.less
@@ -1,7 +1,14 @@
+@import "../styles/Colours.less";
+
+.classroom-container {
+    background-color: white;
+}
+
 .panel {
+    height: calc(100vh - 50px);
     .panel-container {
         width: 100%;
-        background-color: lightcyan;
+        background: linear-gradient(40deg, #8d78bf, #6860c8) !important;
     }
     .tutors-container {
         min-height: 200px;
@@ -10,10 +17,111 @@
         min-height: 400px;
     }
     .messages-container {
+        height: 100%;
         min-height: 200px;
     }
 }
-.presenter-container {
-    height: 100%;
-    background-color: lightpink;
+
+.head-panel {
+    text-align: center;
+    align-items: center;
+}
+
+.setting-icon {
+    font-size: 30px;
+    margin: 10px 10px 0;
+}
+
+.classroom-btn-grp .back-btn {
+    background-color: @page-bg !important;
+    box-shadow: none;
+    color: grey;
+    font-weight: 600;
+    font-family: Raleway;
+    &:hover {
+        color: black !important;
+        box-shadow: none;
+        border: none !important;
+    }
+    &:active {
+        background-color: @page-bg !important;
+        color: grey !important;
+        box-shadow: none;
+        border: none !important;
+    }
+}
+
+.first-btn {
+    border-radius: 15px 0 0 15px;
+    font-family: Raleway !important;
+    width: 10%;
+}
+
+.setting-btn {
+    border-radius: 0;
+    width: 10%;
+}
+
+.end-btn {
+    border-radius: 0 15px 15px 0;
+}
+
+.first-btn,
+.setting-btn,
+.end-btn,
+.file-btn {
+    color: white !important;
+    min-width: 100px;
+    padding: 5px;
+    height: 90px;
+    font-size: 10px;
+    font-family: Raleway !important;
+    font-weight: 600;
+    &:hover {
+        background-color: darken(grey, 10%) !important;
+    }
+    &:focus {
+        box-shadow: 0 0 0 0.2rem lighten(grey, 40%) !important;
+        color: @primary-dark !important;
+    }
+    &:active {
+        color: @primary-dark !important;
+    }
+}
+
+.file-btn {
+    width: 100px;
+    color: #4f4f4f;
+    font-size: 10px;
+    font-family: "Raleway";
+    font-weight: 600;
+    &:focus {
+        box-shadow: 0 0 0 0.2rem lighten(grey, 40%) !important;
+        color: #4f4f4f !important;
+    }
+}
+
+.speaker-btn,
+.participant-btn {
+    background-color: @page-bg !important;
+    color: #4f4f4f !important;
+    font-family: Raleway;
+    font-weight: 600;
+    align-content: center;
+    &:hover {
+        background-color: @content-bg !important;
+    }
+    &:focus {
+        background-color: @content-bg;
+        box-shadow: 0 0 0 0.2rem lighten(grey, 40%) !important;
+    }
+    &:active {
+        background-color: @content-bg !important;
+        color: #4f4f4f;
+        font-weight: 800;
+    }
+}
+
+.participant-btn {
+    font-weight: 400 !important;
 }
diff --git a/src/client/styles/App.less b/src/client/styles/App.less
index 3fcace5b..83fc74e8 100644
--- a/src/client/styles/App.less
+++ b/src/client/styles/App.less
@@ -88,6 +88,10 @@ code {
         background: linear-gradient(40deg, #986eff, #7873f5) !important;
     }
 
+    .purple-gradient2 {
+        background: linear-gradient(40deg, #986eff, #7873f5) !important;
+    }
+
     .peach-gradient {
         background: linear-gradient(40deg, #ff906f, #fc6262) !important;
     }
diff --git a/src/client/videostreaming/RemotePeerVideo.tsx b/src/client/videostreaming/RemotePeerVideo.tsx
index c5d59d49..47bc8320 100644
--- a/src/client/videostreaming/RemotePeerVideo.tsx
+++ b/src/client/videostreaming/RemotePeerVideo.tsx
@@ -38,5 +38,12 @@ export const RemotePeerVideo: React.FunctionComponent<Props> = ({
             currentRef?.removeEventListener("loadedmetadata", playVideo);
     }, [peerId, myPeerId, addPeer, peerStreams]);
 
-    return <video ref={videoRef} className={className} />;
+    return (
+        <div className="stream-video-wrapper">
+            <video
+                ref={videoRef}
+                className={`${className ? className : ""} stream-video`}
+            />
+        </div>
+    );
 };
diff --git a/src/client/videostreaming/ScreenSharingContainer.tsx b/src/client/videostreaming/ScreenSharingContainer.tsx
index fcea43cf..12bdc9ac 100644
--- a/src/client/videostreaming/ScreenSharingContainer.tsx
+++ b/src/client/videostreaming/ScreenSharingContainer.tsx
@@ -1,87 +1,33 @@
-import React, { useContext, useState } from "react";
-import { useScreenSharing } from "../hooks/useScreenSharing";
-import { StreamVideo } from "./StreamVideo";
-import { Button, Col, Form, Row, Container } from "react-bootstrap";
+import React, { useContext } from "react";
+import { Col, Container, Row } from "react-bootstrap";
 import { PeerContext } from "../peer";
+import { StreamVideo } from "./StreamVideo";
 
-type Prop = {
-    userId: string;
-    sessionId: string;
-};
+type Props = {};
 
 /**
  * Component handling the sharing of screens.
  */
-export const ScreenSharingContainer: React.FunctionComponent<Prop> = (
+export const ScreenSharingContainer: React.FunctionComponent<Props> = (
     props
 ) => {
-    const { userId, sessionId } = props;
-    const {
-        setupScreenSharing,
-        stopScreenSharing,
-        forceStopScreenSharing,
-    } = useScreenSharing(userId, sessionId);
-    const [forceStopText, setForceStopText] = useState<string>("");
     const { sharingStreams } = useContext(PeerContext);
+
     return (
-        <>
-            <Container className="screen-sharing-container d-flex justify-content-center align-items-center">
-                <Row>
-                    {sharingStreams
-                        .entrySeq()
-                        .toArray()
-                        .map(([userId, { stream }]) => (
-                            <Col xs="auto" key={userId}>
-                                User: {userId}
-                                <StreamVideo muted={true} stream={stream} />
-                            </Col>
-                        ))}
-                    {sharingStreams.size === 0 && (
-                        <p className="text-muted">No active streams...</p>
-                    )}
-                </Row>
-            </Container>
-            <Row className="d-flex justify-content-center mt-3">
-                <Col xs="auto">
-                    <Button
-                        onClick={async () => {
-                            await setupScreenSharing();
-                        }}
-                    >
-                        Start Sharing
-                    </Button>
-                </Col>
-                <Col xs="auto">
-                    <Button onClick={() => stopScreenSharing()}>
-                        Stop Sharing
-                    </Button>
-                </Col>
-                <Col xs="auto">
-                    <Form
-                        onSubmit={(e) => {
-                            e.preventDefault();
-                            forceStopScreenSharing(forceStopText);
-                        }}
-                    >
-                        <Form.Row>
-                            <Col xs="auto">
-                                <Form.Control
-                                    className="mb-2"
-                                    value={forceStopText}
-                                    onChange={(e) => {
-                                        setForceStopText(e.target.value);
-                                    }}
-                                />
-                            </Col>
-                            <Col xs="auto">
-                                <Button type="submit" className="mb-2">
-                                    Send
-                                </Button>
-                            </Col>
-                        </Form.Row>
-                    </Form>
-                </Col>
+        <Container className="screen-sharing-container d-flex justify-content-center align-items-center">
+            <Row>
+                {sharingStreams
+                    .entrySeq()
+                    .toArray()
+                    .map(([userId, { stream }]) => (
+                        <Col xs="auto" key={userId}>
+                            <StreamVideo muted={true} stream={stream} />
+                        </Col>
+                    ))}
+                {sharingStreams.size === 0 && (
+                    <p className="text-muted">No active stream</p>
+                )}
             </Row>
-        </>
+        </Container>
     );
 };
diff --git a/src/client/videostreaming/StreamVideo.less b/src/client/videostreaming/StreamVideo.less
deleted file mode 100644
index a2e9f793..00000000
--- a/src/client/videostreaming/StreamVideo.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.stream-video {
-    width: 100%;
-}
diff --git a/src/client/videostreaming/StreamVideo.tsx b/src/client/videostreaming/StreamVideo.tsx
index 92e3ee71..8068d9a5 100644
--- a/src/client/videostreaming/StreamVideo.tsx
+++ b/src/client/videostreaming/StreamVideo.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import "./StreamVideo.less";
 
 type Props = {
     muted: boolean;
@@ -29,10 +28,8 @@ export const StreamVideo: React.FunctionComponent<Props> = ({
     }, [stream]);
 
     return (
-        <video
-            className={`${className ? className : undefined} stream-video`}
-            ref={videoRef}
-            muted={muted}
-        />
+        <div className={`${className ? className : ""} stream-video-wrapper`}>
+            <video className="stream-video" ref={videoRef} muted={muted} />
+        </div>
     );
 };
diff --git a/src/client/videostreaming/VideoContainer.less b/src/client/videostreaming/VideoContainer.less
index 67af9c18..9b977187 100644
--- a/src/client/videostreaming/VideoContainer.less
+++ b/src/client/videostreaming/VideoContainer.less
@@ -5,6 +5,16 @@
 }
 
 .screen-sharing-container {
-    min-height: 500px;
-    background-color: #efefef;
+    height: 100%;
+    border-radius: 10px;
+}
+
+.stream-video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.stream-video-wrapper {
+    height: 100%;
 }
diff --git a/src/server/routes/filehandler.ts b/src/server/routes/filehandler.ts
index 1fced74d..8ff2bb66 100644
--- a/src/server/routes/filehandler.ts
+++ b/src/server/routes/filehandler.ts
@@ -10,10 +10,12 @@ import { FileForm, IFileForm } from "../database/schema/ResponseForm";
 
 export const router = express.Router();
 
+export const noAuthRouter = express.Router();
+
 /**
  * Gets a single file by id.
  */
-router.get(
+noAuthRouter.get(
     "/file/:fileId",
     asyncHandler<{}, { fileId: string }>(async (req, res) => {
         const file = await File.findById(req.params.fileId);
@@ -192,7 +194,7 @@ router.post(
 );
 
 // Get the user profile picture.
-router.get(
+noAuthRouter.get(
     "/getPfp/:userId",
     asyncHandler<undefined, { userId: string }>(async (req, res) => {
         try {
diff --git a/src/server/routes/index.ts b/src/server/routes/index.ts
index ace6b158..151fde4a 100644
--- a/src/server/routes/index.ts
+++ b/src/server/routes/index.ts
@@ -1,10 +1,13 @@
 export { router as healthCheckRoute } from "./health-check";
 export { router as sessionRoute } from "./session";
 export { router as chatRoute } from "./chat";
-export { router as userRoute } from "./user";
+export { router as userRoute, noAuthRouter as userNoAuthRoute } from "./user";
 export { router as courseRoute } from "./course";
 export { router as authRoute } from "./auth";
 export { router as videoRoute } from "./video";
 export { router as jobRoute } from "./job";
-export { router as fileRoute } from "./filehandler";
+export {
+    router as fileRoute,
+    noAuthRouter as fileNoAuthRoute,
+} from "./filehandler";
 export { router as responseRoute } from "./response-handler";
diff --git a/src/server/routes/session.ts b/src/server/routes/session.ts
index 82bc1f39..bdf2dba3 100644
--- a/src/server/routes/session.ts
+++ b/src/server/routes/session.ts
@@ -283,6 +283,7 @@ router.post(
                         endTime: session.endTime,
                         colourCode: session.colourCode,
                         open: session.open,
+                        createdBy: session.createdBy,
                     });
                 }
             } catch (e) {
diff --git a/src/server/routes/user.ts b/src/server/routes/user.ts
index 2114937f..9378f18d 100644
--- a/src/server/routes/user.ts
+++ b/src/server/routes/user.ts
@@ -15,8 +15,10 @@ import { MongoError } from "mongodb";
 
 export const router = express.Router();
 
+export const noAuthRouter = express.Router();
+
 // Route to handle login requests.
-router.post(
+noAuthRouter.post(
     "/login",
     asyncHandler<LoginSuccessResponseType, {}, LoginUserRequestType>(
         async (req, res, next) => {
@@ -39,7 +41,7 @@ router.post(
 );
 
 // Route to handle registration requests.
-router.post(
+noAuthRouter.post(
     "/register",
     asyncHandler<LoginSuccessResponseType, {}, CreateUserRequestType>(
         async (req, res, next) => {
diff --git a/src/server/server.ts b/src/server/server.ts
index 8fed9407..061d5fff 100644
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -1,4 +1,5 @@
 import bodyParser from "body-parser";
+import jwt from "jsonwebtoken";
 import dotenv from "dotenv";
 import express, { Express, NextFunction, Request, Response } from "express";
 import fileUpload from "express-fileupload";
@@ -34,10 +35,11 @@ import {
     sessionRoute,
     userRoute,
     videoRoute,
+    userNoAuthRoute,
+    fileNoAuthRoute,
 } from "./routes";
 import { asyncHandler } from "./utils";
 import { UserType } from "../types";
-
 // Environment environment variables.
 dotenv.config();
 
@@ -374,6 +376,22 @@ app.use((req: Request, res: Response, next: NextFunction) => {
     next();
 });
 
+const preAuthCheck = asyncHandler(
+    async (req: Request, res: Response, next: NextFunction) => {
+        if (req.headers.authorization) {
+            const id = jwt.verify(
+                req.headers.authorization,
+                process.env.JWT_SECRET || "monkey_default_jwt"
+            ) as string;
+            if ((await User.count({ _id: id })) > 0) {
+                next();
+                return;
+            }
+        }
+        res.status(401).end();
+    }
+);
+
 // Base route
 app.get(
     "/",
@@ -387,39 +405,46 @@ app.use("/", express.static("build"));
 
 app.use("/public", express.static("public"));
 
+// Login and Registration routes.
+app.use("/user", userNoAuthRoute);
+
+// File routes.
+app.use("/filehandler", fileNoAuthRoute);
+
 // Health check route.
 app.use("/health", healthCheckRoute);
 
+// Authorisation routes.
+app.use("/auth", authRoute);
+
+// Login and Registration routes.
+app.use("/user", preAuthCheck, userRoute);
+
 // Session routes.
-app.use("/session", sessionRoute);
+app.use("/session", preAuthCheck, sessionRoute);
 
 // Chat routes.
-app.use("/chat", chatRoute);
-
-// Login and Registration routes.
-app.use("/user", userRoute);
+app.use("/chat", preAuthCheck, chatRoute);
 
 // Course routes.
-app.use("/courses", courseRoute);
+app.use("/courses", preAuthCheck, courseRoute);
 
 // Video routes.
-app.use("/videos", videoRoute);
-
-// Authorisation routes.
-app.use("/auth", authRoute);
+app.use("/videos", preAuthCheck, videoRoute);
 
 // Job routes.
-app.use("/job", jobRoute);
+app.use("/job", preAuthCheck, jobRoute);
 
 // File routes.
-app.use("/filehandler", fileRoute);
+app.use("/filehandler", preAuthCheck, fileRoute);
 
 // Response collection routes.
-app.use("/response-handler", responseRoute);
+app.use("/response-handler", preAuthCheck, responseRoute);
 
 // TODO API Routes
 app.use(
     "/api",
+    preAuthCheck,
     asyncHandler(async (req, res, next) => {})
 );