diff --git a/frontend/src/App.js b/frontend/src/App.js
index 15017eb..58da895 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -10,13 +10,10 @@ import Login from "./pages/LoginPage/Login";
 import Register from "./pages/Registration/Register";
 import Dashboard from "./pages/Dashboard/Dashboard";
 import AddSession from "./pages/AddSession/AddSession";
-import Session from "./pages/JoinSession/Session";
 import SessionRoom from "./pages/Session/SessionRoom";
 import JoinSession from "./pages/JoinSession/JoinSession";
 import Profile from "./pages/Profile/Profile";
-import RatingSession from "./pages/Rating/RatingSession";
 import AverageSession from "./pages/Rating/AverageSession";
-import RatingDetails from "./pages/Rating/RatingDetails";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./style/flexboxgrid.min.css";
@@ -44,8 +41,6 @@ function App() {
               <Route path="dashboard" element={<Dashboard />} />
               <Route path="add_session" element={<AddSession />} />
               <Route path="session/:id" element={<SessionRoom />} />
-              <Route path="search_session" element={<Session />} />
-              <Route path="rating_session" element={<RatingSession />} />
               <Route path="average_session" element={<AverageSession />} />
               <Route path="joinsession/:id" element={<JoinSession />} />
               <Route path="profile" element={<Profile />} />
diff --git a/frontend/src/components/Modals/ConfirmEndRoom.jsx b/frontend/src/components/Modals/ConfirmEndRoom.jsx
new file mode 100644
index 0000000..8cb9a22
--- /dev/null
+++ b/frontend/src/components/Modals/ConfirmEndRoom.jsx
@@ -0,0 +1,70 @@
+import React, { useContext } from 'react'
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Divider from '@mui/joy/Divider';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+import { useHMSActions } from '@100mslive/react-sdk';
+import SessionContext from '../../context/SessionContext';
+
+function ConfirmEndRoom({ endRoom, setEndRoom }) {
+    const hmsActions = useHMSActions();
+    const { dispatch } = useContext(SessionContext)
+
+    const handleEndRoom = async () => {
+        try {
+            const lock = false; // set to true to disallow rejoins
+            const reason = 'Host ended the session';
+            await hmsActions.endRoom(lock, reason);
+            dispatch({ type: "LEAVE" })
+        } catch (error) {
+            // Permission denied or not connected to room
+            console.error(error);
+        }
+    }
+    return (
+        <React.Fragment>
+            <Modal
+                aria-labelledby="alert-dialog-modal-title"
+                aria-describedby="alert-dialog-modal-description"
+                open={endRoom}
+                onClose={() => setEndRoom(false)}
+                sx={{ padding: '2px 20px 2px 10px' }}
+            >
+                <ModalDialog variant="outlined" role="alertdialog" sx={{ backgroundColor: '#09090d', color: '#d8d8df' }}>
+                    <Typography
+                        id="alert-dialog-modal-title"
+                        component="h2"
+                        level="inherit"
+                        fontSize="1.25em"
+                        mb="0.25em"
+                    >
+                        That's a wrap!
+                    </Typography>
+                    <Divider sx={{ my: 2 }} />
+                    <Typography
+                        id="alert-dialog-modal-description"
+                        mb={3}
+                        fontWeight='light'
+                        sx={{ color: '#d8d8df', fontWeight: 'light', lineHeight: '2' }}
+                    >
+                        Done with your pitch presentation? Let's end the session.
+                        {<br />}
+                        Note: Participants can't join if you end the session.
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                        <Button variant="plain" color="neutral" onClick={() => setEndRoom(false)}>
+                            Cancel
+                        </Button>
+                        <Button variant="solid" color="danger" onClick={handleEndRoom} sx={{ backgroundColor: '#a10e25', "&:hover": { backgroundColor: "#a10e25" } }}>
+                            End Session
+                        </Button>
+                    </Box>
+                </ModalDialog>
+            </Modal>
+        </React.Fragment>
+    );
+}
+
+export default ConfirmEndRoom
diff --git a/frontend/src/components/Modals/ConfirmRatingSubmit.jsx b/frontend/src/components/Modals/ConfirmRatingSubmit.jsx
new file mode 100644
index 0000000..b5c2489
--- /dev/null
+++ b/frontend/src/components/Modals/ConfirmRatingSubmit.jsx
@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Divider from '@mui/joy/Divider';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+import SessionContext from '../../context/SessionContext';
+
+function ConfirmRatingSubmit({ roomEnded, setRoomEnded, setRatingsModalState }) {
+    const { dispatch } = useContext(SessionContext)
+
+    const handleSubmit = async () => {
+        dispatch({ type: "LEAVE" })
+    }
+
+    const handleReviewRating = () => {
+        setRoomEnded(false)
+        setRatingsModalState(true)
+    }
+    return (
+        <React.Fragment>
+            <Modal
+                aria-labelledby="alert-dialog-modal-title"
+                aria-describedby="alert-dialog-modal-description"
+                open={roomEnded}
+                sx={{ padding: '2px 20px 2px 10px' }}
+            >
+                <ModalDialog variant="outlined" role="alertdialog" sx={{ backgroundColor: '#09090d', color: '#d8d8df' }}>
+                    <Typography
+                        id="alert-dialog-modal-title"
+                        component="h2"
+                        level="inherit"
+                        fontSize="1.25em"
+                        mb="0.25em"
+                    >
+                        Host just ended the session!
+                    </Typography>
+                    <Divider sx={{ my: 2 }} />
+                    <Typography
+                        id="alert-dialog-modal-description"
+                        mb={3}
+                        fontWeight='light'
+                        sx={{ color: '#d8d8df', fontWeight: 'light', lineHeight: '2' }}
+                    >
+                        How was our presentation? Your review is very important to us!
+                        {<br />}
+                        Note: You can still change your submitted review.
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                        <Button variant="plain" color="neutral" onClick={handleReviewRating}>
+                            Review Rating
+                        </Button>
+                        <Button variant="solid" color="danger" onClick={handleSubmit} sx={{ backgroundColor: '#a10e25', "&:hover": { backgroundColor: "#a10e25" } }}>
+                            Submit and Leave Session
+                        </Button>
+                    </Box>
+                </ModalDialog>
+            </Modal>
+        </React.Fragment>
+    );
+}
+
+export default ConfirmRatingSubmit
diff --git a/frontend/src/components/SessionDetails/SessionDetails.jsx b/frontend/src/components/SessionDetails/SessionDetails.jsx
index 31e8a80..aa24652 100644
--- a/frontend/src/components/SessionDetails/SessionDetails.jsx
+++ b/frontend/src/components/SessionDetails/SessionDetails.jsx
@@ -27,8 +27,6 @@ function SessionDetails({ detailsModalState, setDetailsModalState }) {
     const { session } = useContext(SessionContext)
     const [link, setLink] = useState('')
 
-    console.log(session);
-
     useEffect(() => {
         if (detailsModalState) {
             setLink(`http://localhost:3000/#/session/${session.session[0].searchID}`)
diff --git a/frontend/src/components/SessionRoom/Chats.jsx b/frontend/src/components/SessionRoom/Chats.jsx
index a2068f4..1267ded 100644
--- a/frontend/src/components/SessionRoom/Chats.jsx
+++ b/frontend/src/components/SessionRoom/Chats.jsx
@@ -1,11 +1,31 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import SessionContext from '../../context/SessionContext';
+import ConfirmEndRoom from '../Modals/ConfirmEndRoom';
 import Input from './Input'
 
 import Messages from './Messages'
 
 function Chats() {
+    // Ari dri ang context pher
+    const { session } = useContext(SessionContext)
+    const [endRoom, setEndRoom] = useState(false)
+
+    const handleEndRoom = async () => {
+        setEndRoom(true)
+    };
     return (
         <div className='sessionChats-container'>
+
+            {session.role === 'creator' ? (
+                <>
+                    <ConfirmEndRoom endRoom={endRoom} setEndRoom={setEndRoom} />
+                    <div className="sessionNav-endSession">
+                        <button onClick={handleEndRoom}>End Session</button>
+                    </div>
+                </>
+            )
+                : (null)
+            }
             <div className="sessionChats-controls">
                 <button className='active'>Chats</button>
                 <button>Participants</button>
@@ -23,4 +43,4 @@ function Chats() {
     )
 }
 
-export default Chats
\ No newline at end of file
+export default Chats
diff --git a/frontend/src/components/SessionRoom/SessionNav.jsx b/frontend/src/components/SessionRoom/SessionNav.jsx
deleted file mode 100644
index 1308093..0000000
--- a/frontend/src/components/SessionRoom/SessionNav.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useHMSActions } from '@100mslive/react-sdk';
-import React, { useContext } from 'react'
-import SessionContext from '../../context/SessionContext';
-
-function SessionNav({ role }) {
-    const hmsActions = useHMSActions();
-    // Ari dri ang context pher
-    const { session } = useContext(SessionContext)
-
-    const endRoom = async () => {
-        try {
-            const lock = false; // set to true to disallow rejoins
-            const reason = 'party is over';
-            await hmsActions.endRoom(lock, reason);
-        } catch (error) {
-            // Permission denied or not connected to room
-            console.error(error);
-        }
-    };
-
-    return (
-        <div className='sessionNav-container'>
-            <div className="sessionNav-controls">
-                <div className="pitch-title">
-                    <h2>{session.session[0].sessionName}</h2>
-                </div>
-                {role === 'creator' ? (
-                    <div className="sessionNav-buttons">
-                        <button className='askPro-button'>Ask a Pro</button>
-                        <button className='uploadFiles-button'>Upload Files</button>
-                        <button className='openRating-button'>Open Rating</button>
-                    </div>
-                ) : (null)
-                }
-
-            </div>
-            {role === 'creator' ? (
-                <div className="sessionNav-endSession">
-                    <button onClick={endRoom}>End Session</button>
-                </div>) : (null)
-            }
-        </div>
-    )
-}
-
-export default SessionNav
diff --git a/frontend/src/components/SessionRoom/Stream.jsx b/frontend/src/components/SessionRoom/Stream.jsx
index b35f1d8..409c22f 100644
--- a/frontend/src/components/SessionRoom/Stream.jsx
+++ b/frontend/src/components/SessionRoom/Stream.jsx
@@ -1,6 +1,5 @@
 import React, { } from 'react'
 import Chats from './Chats'
-import SessionNav from './SessionNav'
 import Video from './Video'
 
 
@@ -8,11 +7,9 @@ function Stream({ role, peers }) {
 
     return (
         <div className='sessionStream-container'>
-            <SessionNav role={role} />
             <div className='sessionStream-content'>
                 <Video peers={peers} />
                 <Chats />
-
             </div>
         </div>
 
diff --git a/frontend/src/components/SessionRoom/Video.jsx b/frontend/src/components/SessionRoom/Video.jsx
index 72dde98..73d7320 100644
--- a/frontend/src/components/SessionRoom/Video.jsx
+++ b/frontend/src/components/SessionRoom/Video.jsx
@@ -1,20 +1,26 @@
 import React, { useContext, useState } from 'react'
-import { selectIsSomeoneScreenSharing, useHMSActions, useHMSStore, useVideo } from "@100mslive/react-sdk";
+import { HMSNotificationTypes, selectIsSomeoneScreenSharing, useHMSActions, useHMSNotifications, useHMSStore, useVideo } from "@100mslive/react-sdk";
 import { useEffect } from 'react';
 import SessionContext from '../../context/SessionContext';
 import ReactLoading from 'react-loading';
-import Tabs, { tabsClasses } from '@mui/joy/Tabs';
+import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
 import Box from '@mui/joy/Box';
 import SessionDetails from '../SessionDetails/SessionDetails';
+import RatingSession from '../../pages/Rating/RatingSession';
+import RatingDetails from '../../pages/Rating/RatingDetails';
+import ConfirmRatingSubmit from '../Modals/ConfirmRatingSubmit';
 
 function Video() {
     const screenShareOn = useHMSStore(selectIsSomeoneScreenSharing)
     const hmsActions = useHMSActions()
+    const roomEndedNotif = useHMSNotifications(HMSNotificationTypes.ROOM_ENDED)
     const { session } = useContext(SessionContext)
     const [index, setIndex] = useState(0);
     const [detailsModalState, setDetailsModalState] = useState(false)
+    const [ratingsModalState, setRatingsModalState] = useState(false)
+    const [roomEnded, setRoomEnded] = useState(false)
     const { videoRef } = useVideo(
         {
             trackId: screenShareOn ? session.peer.auxiliaryTracks[0] : session.peer.videoTrack
@@ -37,21 +43,53 @@ function Video() {
     useEffect(() => {
         if (index === 1) {
             setDetailsModalState(true)
-
+        }
+        if (index === 2) {
+            setRatingsModalState(true)
         }
     }, [index])
 
     useEffect(() => {
         if (detailsModalState === false && index === 1) {
             setIndex(0)
+        }
+        if (ratingsModalState === false && index === 2) {
+            setIndex(0)
+        }
+    }, [detailsModalState, ratingsModalState])
 
+    useEffect(() => {
+        if (session.role === 'participant' && roomEndedNotif) {
+            setRoomEnded(true)
         }
-    }, [detailsModalState])
+    }, [roomEndedNotif])
 
 
     return (
         <div className='sessionVideo-container'>
+
             <SessionDetails setDetailsModalState={setDetailsModalState} detailsModalState={detailsModalState} />
+            {session.role === 'creator' ? <RatingDetails setRatingsModalState={setRatingsModalState} ratingsModalState={ratingsModalState} />
+                : <RatingSession setRatingsModalState={setRatingsModalState} ratingsModalState={ratingsModalState} roomEnded={roomEnded} setRoomEnded={setRoomEnded} roomEndedNotif={roomEndedNotif} />
+            }
+            {session.role === 'participant' ? <ConfirmRatingSubmit roomEnded={roomEnded} setRoomEnded={setRoomEnded} setRatingsModalState={setRatingsModalState} /> : null}
+
+            <div className='sessionNav-container'>
+                <div className="sessionNav-controls">
+                    <div className="pitch-title">
+                        <h2>{session.session[0].sessionName}</h2>
+                    </div>
+                    {session.role === 'creator' ? (
+                        <div className="sessionNav-buttons">
+                            <button className='askPro-button'>Ask a Pro</button>
+                            <button className='uploadFiles-button'>Upload Files</button>
+                            <button className='openRating-button'>Open Rating</button>
+                        </div>
+                    ) : (null)
+                    }
+                </div>
+            </div>
+
             <Box sx={{ display: 'flex', gap: 2, flexDirection: 'column', borderRadius: '10px', alignSelf: 'start', marginLeft: '50px', height: '50px', justifyContent: 'center', alignItems: 'center' }}>
                 <Tabs
                     aria-label="Outlined tabs"
@@ -79,7 +117,7 @@ function Video() {
                             variant={index === 2 ? 'outlined' : 'plain'}
                             color={index === 2 ? 'warning' : 'neutral'}
                         >
-                            Rate
+                            {session.role === 'creator' ? 'Rate Details' : 'Rate'}
                         </Tab>
                     </TabList>
                 </Tabs>
diff --git a/frontend/src/components/datatable/Datatable.jsx b/frontend/src/components/datatable/Datatable.jsx
index 0408b49..56f61b3 100644
--- a/frontend/src/components/datatable/Datatable.jsx
+++ b/frontend/src/components/datatable/Datatable.jsx
@@ -112,21 +112,22 @@ const Datatable = () => {
         const dataUser = await responseUser.data.filter(user => parseInt(user.id) === parseInt(filteredSession[0].creator))
 
         dispatch({
-          type: "UPDATE_SESSION",
+          type: "UPDATE_ROLE",
           payload: {
-            session: filteredSession,
-            hostName: dataUser[0].first_name.charAt(0).toUpperCase() + dataUser[0].first_name.slice(1)
+            role: role
           }
         })
 
         dispatch({
-          type: "UPDATE_ROLE",
+          type: "UPDATE_SESSION",
           payload: {
-            role: role
+            session: filteredSession,
+            hostName: dataUser[0].first_name.charAt(0).toUpperCase() + dataUser[0].first_name.slice(1),
+            isConnected: true
           }
         })
 
-        navigate(`/session/${filteredSession[0].sessionID}`)
+        navigate(`/session/${filteredSession[0].searchID}`)
 
 
       }
diff --git a/frontend/src/context/SessionContext.js b/frontend/src/context/SessionContext.js
index 03ecadc..9086d81 100644
--- a/frontend/src/context/SessionContext.js
+++ b/frontend/src/context/SessionContext.js
@@ -22,7 +22,8 @@ export function SessionContextProvider({ children }) {
                 return {
                     ...state,
                     session: action.payload.session,
-                    hostName: action.payload.hostName
+                    hostName: action.payload.hostName,
+                    isConnected: action.payload.isConnected
                 }
 
             case "UPDATE_HOSTJOINED":
@@ -45,7 +46,8 @@ export function SessionContextProvider({ children }) {
                     peer: null,
                     loading: true,
                     isConnected: false,
-                    hostJoined: false
+                    hostJoined: false,
+                    hostName: null
                 }
 
             default:
diff --git a/frontend/src/hooks/useGetPeer.jsx b/frontend/src/hooks/useGetPeer.jsx
index c1aa2b3..f90cb64 100644
--- a/frontend/src/hooks/useGetPeer.jsx
+++ b/frontend/src/hooks/useGetPeer.jsx
@@ -50,12 +50,6 @@ function useGetPeer({ role }) {
             }
 
         }
-
-        if (!isConnected && Object.keys(remotePeer).length == 0) {
-            dispatch({
-                type: "LEAVE"
-            })
-        }
     }, [localPeer, remotePeer, isConnected, role])
 
     return {
diff --git a/frontend/src/hooks/useNotification.jsx b/frontend/src/hooks/useNotification.jsx
index aab109b..db18cb0 100644
--- a/frontend/src/hooks/useNotification.jsx
+++ b/frontend/src/hooks/useNotification.jsx
@@ -57,19 +57,20 @@ function useNotification() {
                     if (!isHandRaised && peer) {
                         const index = raisedHand.current.findIndex(obj => obj.toastCreator === peer.id)
                         if (index != -1) {
-                            console.log("ASDSAD");
-                            console.log(typeof (raisedHand.current[index].toastID.toString()));
                             toast.dismiss(raisedHand.current[index].toastID.toString())
                             raisedHand.current = raisedHand.current.filter((item) => item.toastCreator !== peer.id)
-                            console.log(raisedHand);
-
-
                         }
 
                     }
+                    break;
 
+                case 'TRACK_DEGRADED':
+                    toast.warning('Slow Internet Connection')
                     break;
 
+                case 'TRACK_RESTORED':
+                    toast.success('Internet restored')
+
                 default:
                     break;
             }
diff --git a/frontend/src/pages/JoinSession/Session.jsx b/frontend/src/pages/JoinSession/Session.jsx
deleted file mode 100644
index 9454f26..0000000
--- a/frontend/src/pages/JoinSession/Session.jsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import React from 'react'
-import { useEffect } from 'react'
-import { useState } from 'react'
-import axios from 'axios'
-import Navbar from '../../components/Navbar/Navbar'
-import { useNavigate } from 'react-router-dom'
-import "./Session.scss"
-import "./JoinSessionModal.scss"
-import { IconButton } from '@mui/material';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Modal from '@mui/material/Modal';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-import { styled } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-
-const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '50%',
-    bgcolor: 'background.paper',
-    boxShadow: 24,
-    borderRadius: '16px',
-    p: 4,
-};
-
-function Session() {
-    const [api, setApi] = useState([])
-    const [search, setSearch] = useState([])
-    const [password, setPassword] = useState([])
-    const [open, setOpen] = React.useState(false);
-    const handleClose = () => setOpen(false);
-    const [modal, setModal] = useState(false);
-
-    const [sessionName, setSessionName] = useState("")
-    const [description, setDescription] = useState("")
-    const [startsAt, setStartsAt] = useState("")
-    const [creator, setCreator] = useState(0)
-    const [searchID, setSearchID] = useState("")
-    const [list, setList] = useState("")
-
-
-
-
-    //Temp
-    const [passwordStatus, setPasswordStatus] = useState(false)
-    const navigate = useNavigate()
-    const Item = styled(Paper)(({ theme }) => ({
-        backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
-        ...theme.typography.body2,
-        padding: theme.spacing(1),
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    }));
-
-    useEffect(() => {
-        fetchApi()
-    }, [])
-
-
-    const fetchApi = async () => {
-        const response = await axios.get('http://127.0.0.1:8000/api/joinsession/1')
-        const data = await response.data
-        setApi(data)
-
-        setSessionName(data[0].sessionName)
-        setDescription(data[0].sessionDescription)
-        setStartsAt(data[0].startsAt)
-        setSearchID(data[0].searchID)
-
-
-        const responseUser = await axios.get('http://127.0.0.1:8000/api/users')
-        const dataUser = await responseUser.data
-        setApi(dataUser)
-
-        for (let i = 0; i < dataUser.length; i++) {
-            if (dataUser[i].id == data[0].creator) {
-                setCreator(dataUser[i].first_name)
-                break
-            }
-        }
-        console.log(data);
-        console.log(dataUser);
-    }
-
-    const joinSession = async () => {
-        await fetch('http://localhost:8000/api/auth', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'include',
-            body: JSON.stringify({
-                password
-            })
-        });
-    }
-
-
-    //Temp
-    const toggleModal = () => {
-        setModal(!modal);
-    };
-
-    if (modal) {
-        document.body.classList.add('active-modal')
-    } else {
-        document.body.classList.remove('active-modal')
-    }
-
-    const handleJoin = (e) => {
-        e.preventDefault()
-
-        setPasswordStatus(true)
-        toggleModal()
-
-    }
-
-    const handlePasswordSubmit = (e) => {
-        e.preventDefault()
-        if (password === api[0].sessionPassword) {
-            navigate(`/session`)
-        } else {
-            alert("Incorrect Password!")
-        }
-
-    }
-
-    const handleOpen = () => {
-        setOpen(true);
-        setList(`http://localhost:3000/#/session/${searchID}`)
-    }
-
-    return (
-        <>
-            <Navbar />
-            <Button onClick={handleOpen}>Open modal</Button>
-            <Modal
-                open={open}
-                onClose={handleClose}
-                aria-labelledby="modal-modal-title"
-                aria-describedby="modal-modal-description"
-            >
-                <Box sx={style}>
-                    <Typography id="modal-modal-description">
-                        <div className="rating-space">
-                            <div className="rating-container">
-                                <div className="items-1 item">
-                                    <div className="items-1-2 item rating-logo">
-                                        <IconButton onClick={handleClose} >
-                                            <HighlightOffIcon />
-                                        </IconButton>
-                                    </div>
-                                </div>
-                                <div className="items-2 items">{sessionName} Session Details</div>
-                                <span className="rating-line"></span>
-                                <Box sx={{ flexGrow: 1 }}>
-                                    <Grid container spacing={2}>
-                                        <Grid item xs={12}>
-                                            <div className="item-session">Description</div>
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <div className="item-session-description">
-                                                <p> {description}</p>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session">Date</div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session">Visiblity</div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session">Author</div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session-description">
-                                                <p> {startsAt}</p>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session-description">
-                                                <p>Private</p>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <div className="item-session-description">
-                                                <p>{creator}</p>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <div className="item-session">Link</div>
-                                        </Grid>
-                                        <Grid item xs={8}>
-                                            <TextField
-                                                autoFocus
-                                                margin="dense"
-                                                id="link"
-                                                type="text"
-                                                // defaultValue={`http://localhost:3000/#/session/${searchID}`}
-                                                defaultValue={list}
-                                                value={list}
-                                                // value={joinPassword}
-                                                onChange={(e) => setList(e.target.value)}
-                                                fullWidth
-                                                inputProps={{ readOnly: true }}
-                                                variant="standard"
-                                            />
-                                        </Grid>
-                                        <Grid item xs={4}>
-                                            <Button
-                                                size="medium"
-                                                sx={{
-                                                    width: 300
-                                                }}
-                                                color="success"
-                                                variant="contained"
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(list)
-                                                    alert('Copied Link');
-                                                }}
-                                            >
-                                                Copy
-                                            </Button>
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <div className="item-session">Code</div>
-                                        </Grid>
-                                        <Grid item xs={6}>
-                                            <div className="item-session">
-                                                <Button
-                                                    size="medium"
-                                                    sx={{
-                                                        width: 200
-                                                    }}
-                                                    variant="contained"
-                                                    onClick={() => {
-                                                        navigator.clipboard.writeText(searchID)
-                                                        alert('Copied session search ID');
-                                                    }}
-                                                >
-                                                    Copy
-                                                </Button>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={6}>
-                                            <div className="item-session-close">
-                                                <Button
-                                                    size="medium"
-                                                    sx={{
-                                                        width: 200
-                                                    }}
-                                                    variant="outlined"
-                                                    onClick={
-                                                        handleClose
-                                                    }
-                                                >
-                                                    Close
-                                                </Button>
-                                            </div>
-                                        </Grid>
-                                    </Grid>
-                                </Box>
-                            </div>
-                        </div>
-                    </Typography>
-                </Box>
-            </Modal>
-        </>
-    )
-}
-
-export default Session
diff --git a/frontend/src/pages/JoinSession/Session.scss b/frontend/src/pages/JoinSession/Session.scss
deleted file mode 100644
index 557ed88..0000000
--- a/frontend/src/pages/JoinSession/Session.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap');
-
-// .session-space{
-//   justify-content: center;
-//   align-items: center;
-//   display: flex;
-//   padding: 5rem;
-// }
-
-// .session-space div{
-//   font-family: 'Mulish', sans-serif;
-// }
-
-// .session-container{
-//   max-width: 700px;
-//   width: 100%;
-//   border-radius: 5px;
-//   padding: 10px;
-//   margin: 10px;
-//   display: flex;
-//   flex-direction: column;
-// }
-
-// .session{
-//   color: #000;
-//   font-size: 35px;
-//   padding: 0px;
-//   margin: 0px 0px 20px 0px;
-//   display: flex;
-//   flex-grow: 1;
-// }
-
-// .session-1{
-//   align-self: flex-end;
-// }
-
-// .session-2{
-//   display: flex;
-//   flex-direction: row;
-// }
-
-// .session-2-1{
-//   padding: 100px 50px 98px 50px;
-//   background-color: #ccc;
-// }
-
-// .session-2-2{
-//   margin: 0px 0px 0px 20px;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: space-around;
-//   color: #000;
-// }
-
-
-// .session-2-2-1{
-//   font-size: 32px;
-//   font-weight: bold;
-// }
-
-
-// .session-2-2-2{
-//   font-size: 16px;
-//   font-weight: lighter;
-//   color: #808080;
-// }
-
-// .session-2-2-3{
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: flex-start;
-// }
-
-// .session-space .session-container .button button{
-//   font-family: 'Mulish', sans-serif;
-//   padding: 10px 30px 10px 30px;
-//   border: #3C64B1;
-//   font-size: 15px;
-//   color: white;
-//   background-color: #3C64B1;
-// }
-
-// .session-space .session-container .button-shaded button{
-//   font-family: 'Mulish', sans-serif;
-//   padding: 10px 30px 16px 30px;
-//   border: #3C64B1;
-//   font-size: 15px;
-//   color: white;
-//   background-color: #3C64B1;
-// }
-
-
-// .session-space .session-container .button-noshade button{
-//   font-family: 'Mulish', sans-serif;
-//   padding: 10px 20px 15px 20px;
-//   margin: 0px 0px 0px 10px;
-//   border: #3C64B1;
-//   font-size: 15px;
-//   color: #000;
-//   background-color: #fff;
-//   border: 1px solid #ccc;
-// }
-
-// .session-space .session-container .button input{
-//   font-family: 'Mulish', sans-serif;
-//   color: #808080;
-//   padding: 4px 30px 5px 30px;
-//   border: 1px solid #ccc;
-// }
-
-
diff --git a/frontend/src/pages/Rating/RatingDetails.jsx b/frontend/src/pages/Rating/RatingDetails.jsx
index a73840e..9630609 100644
--- a/frontend/src/pages/Rating/RatingDetails.jsx
+++ b/frontend/src/pages/Rating/RatingDetails.jsx
@@ -1,11 +1,11 @@
 import axios from 'axios'
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { useNavigate, useParams } from 'react-router-dom'
 import Navbar from '../../components/Navbar/Navbar'
 import { IconButton } from '@mui/material';
-import { PieChart, Pie, Sector, Cell, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, ResponsiveContainer} from 'recharts'
+import { PieChart, Pie, Sector, Cell, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, ResponsiveContainer } from 'recharts'
 import Datatable from '../../pages/Rating/RatingDataTable/RatingDatatable'
 import "./RatingSession.scss"
 import Box from '@mui/material/Box';
@@ -16,6 +16,7 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import Tab from '@mui/material/Tab';
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { fontWeight } from '@mui/system'
+import SessionContext from '../../context/SessionContext'
 const style = {
   position: 'absolute',
   top: '50%',
@@ -30,7 +31,7 @@ const style = {
 };
 
 
-const RatingDetails = () => {
+const RatingDetails = ({ ratingsModalState, setRatingsModalState }) => {
   const [api, setApi] = useState([])
   const [ratingApi, setRatingApi] = useState([])
   const [punctuality, setPunctuality] = useState("")
@@ -38,10 +39,7 @@ const RatingDetails = () => {
   const [delivery, setDelivery] = useState("")
   const [innovativeness, setInnovativeness] = useState("")
   const [feedback, setFeedback] = useState("")
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
+  const { session } = useContext(SessionContext)
   const [value, setValue] = React.useState('1');
 
   const handleChange = (event, newValue) => {
@@ -50,108 +48,90 @@ const RatingDetails = () => {
 
   useEffect(() => {
     const fetchApi = async () => {
-        const response = await axios.get(`http://127.0.0.1:8000/api/getAverageRatings`)   
-        const data = await response.data
-        setApi(data)
-
-        setPunctuality(data[0].AveragePunctuality)
-        setPresentation(data[0].AveragePresentation)
-        setDelivery(data[0].AverageDelivery)
-        setInnovativeness(data[0].AverageInnovativeness)
+      const response = await axios.get(`http://127.0.0.1:8000/api/getAverageRatings`)
+      const data = await response.data
+      setApi(data)
 
-        const ratingResponse = await axios.get(`http://127.0.0.1:8000/api/getRatings`)
-        const ratingData = await ratingResponse.data
-        setRatingApi(ratingData)
-      
-        
+      setPunctuality(data[0].AveragePunctuality)
+      setPresentation(data[0].AveragePresentation)
+      setDelivery(data[0].AverageDelivery)
+      setInnovativeness(data[0].AverageInnovativeness)
 
-        
-      
+      const ratingResponse = await axios.get(`http://127.0.0.1:8000/api/getRatings`)
+      const ratingData = await ratingResponse.data
+      setRatingApi(ratingData)
     }
     fetchApi()
-}, [])
-
-
-  
+  }, [])
 
   const data = [
-      {name: "Project Goals and Significance", value: punctuality},
-      {name: "Project Plan and Timeline", value: presentation},
-      {name: "Resource Request", value: delivery},
-      {name: "Relevant Experience", value: innovativeness},
+    { name: "Project Goals and Significance", value: punctuality },
+    { name: "Project Plan and Timeline", value: presentation },
+    { name: "Resource Request", value: delivery },
+    { name: "Relevant Experience", value: innovativeness },
   ];
 
-//   const data1 = [
-//     {name: "Punctuality", value: 10000},
-//     {name: "Presentation", value: 20000},
-//     {name: "Delivery", value: 30000},
-//     {name: "Innovativeness", value: 40000},
-// ];
+  const handleClose = () => {
+    setRatingsModalState(false);
+  }
 
-  
-  
   return (
-    <>
-    <Navbar/>
-  
-  <Button onClick={handleOpen}>Open modal</Button>
     <Modal
-      open={open}
+      open={ratingsModalState}
       onClose={handleClose}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
       <Box sx={style}>
         <Typography id="modal-modal-description">
-        <div className="rating-space">
+          <div className="rating-space">
             <div className="rating-container">
-              <div className = "items-1 item">
-                <div className = "items-1-2 item rating-logo">
-                  <IconButton onClick = {handleClose} >
-                  <HighlightOffIcon/>
+              <div className="items-1 item">
+                <div className="items-1-2 item rating-logo">
+                  <IconButton onClick={handleClose} >
+                    <HighlightOffIcon />
                   </IconButton>
                 </div>
               </div>
-              <div className = "items-2 items">Session Title</div>
-              <span className = "rating-line"></span>
-              <div className = "items-3">
-              <Box sx={{ width: '100%', typography: 'body1' }}>
-                <TabContext value={value}>
-                  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                    <TabList onChange={handleChange} aria-label="lab API tabs example">
-                      <Tab label="Score" value="1" />
-                      <Tab label="Feedback" value="2" />
-                    </TabList>
-                  </Box>
-                  <TabPanel value="1">
-                  <div className = "items-3-1 charts">
-                      <BarChart width={1000} height={250} data={data}>
-                        <CartesianGrid strokeDasharray="3 3" />
-                        <XAxis dataKey="name"/>
-                        <YAxis domain={[0, 5]} ticks = {[0, 1, 2, 3, 4, 5]}/>
-                        <Tooltip />
-                        <Legend />
-                        <Bar dataKey="value" barSize={100} fill="#8884d8" name='Session Rating' />
-                      </BarChart>
-                  </div>
-                  <div className = "items-3-2">
-                  </div>
-                  </TabPanel>
-                  <TabPanel value="2">
-                    <Datatable/>            
-                  </TabPanel>
-                </TabContext>
-              </Box>
+              <div className="items-2 items">{session.session[0].sessionName}</div>
+              <span className="rating-line"></span>
+              <div className="items-3">
+                <Box sx={{ width: '100%', typography: 'body1' }}>
+                  <TabContext value={value}>
+                    <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                      <TabList onChange={handleChange} aria-label="lab API tabs example">
+                        <Tab label="Score" value="1" />
+                        <Tab label="Feedback" value="2" />
+                      </TabList>
+                    </Box>
+                    <TabPanel value="1">
+                      <div className="items-3-1 charts">
+                        <BarChart width={1000} height={250} data={data}>
+                          <CartesianGrid strokeDasharray="3 3" />
+                          <XAxis dataKey="name" />
+                          <YAxis domain={[0, 5]} ticks={[0, 1, 2, 3, 4, 5]} />
+                          <Tooltip />
+                          <Legend />
+                          <Bar dataKey="value" barSize={100} fill="#8884d8" name='Session Rating' />
+                        </BarChart>
+                      </div>
+                      <div className="items-3-2">
+                      </div>
+                    </TabPanel>
+                    <TabPanel value="2">
+                      <Datatable />
+                    </TabPanel>
+                  </TabContext>
+                </Box>
+              </div>
             </div>
           </div>
-        </div>
 
-          
-        
+
+
         </Typography>
       </Box>
     </Modal>
-    </>
   )
 }
 
diff --git a/frontend/src/pages/Rating/RatingSession.jsx b/frontend/src/pages/Rating/RatingSession.jsx
index d332df7..6b9d6eb 100644
--- a/frontend/src/pages/Rating/RatingSession.jsx
+++ b/frontend/src/pages/Rating/RatingSession.jsx
@@ -1,18 +1,13 @@
 import axios from 'axios'
-import React, { useState } from 'react'
-import { useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import { useNavigate, useParams } from 'react-router-dom'
-import Navbar from '../../components/Navbar/Navbar'
+import React, { useContext, useState } from 'react'
 import { IconButton } from '@mui/material';
-
 import "./RatingSession.scss"
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { Rating } from '@mui/material';
+import SessionContext from '../../context/SessionContext';
 
 const style = {
   position: 'absolute',
@@ -21,77 +16,78 @@ const style = {
   transform: 'translate(-50%, -50%)',
   width: '50%',
   bgcolor: 'background.paper',
-  // border: '2px solid #000',
   boxShadow: 24,
   borderRadius: '16px',
   p: 4,
 };
 
 
-const RatingSession = () => {
-    const [value, setValue] = React.useState(2)
-    const [punctuality, setPunctuality] = useState(0)
-    const [presentation, setPresentation] = useState(0)
-    const [delivery, setDelivery] = useState(0)
-    const [innovativeness, setInnovativeness] = useState(0)
-    const [feedback, setFeedback] = useState("")
-    const [open, setOpen] = React.useState(false);
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
+const RatingSession = ({ setRatingsModalState, ratingsModalState, roomEnded, setRoomEnded, roomEndedNotif }) => {
 
-    const [modal, setModal] = useState(false);
+  // Context
+  const { session } = useContext(SessionContext)
 
+  const [punctuality, setPunctuality] = useState(0)
+  const [presentation, setPresentation] = useState(0)
+  const [delivery, setDelivery] = useState(0)
+  const [innovativeness, setInnovativeness] = useState(0)
+  const [feedback, setFeedback] = useState("")
 
-    const rateSession = async () => {
-        let formField = new FormData()
+  const [modal, setModal] = useState(false);
 
-        formField.append('punctuality',punctuality)
-        formField.append('presentation',presentation)
-        formField.append('delivery',delivery)
-        formField.append('innovativeness',innovativeness)
-        formField.append('feedback',feedback)
+  const rateSession = async () => {
+    let formField = new FormData()
 
-        try {
-          const req = await axios.post(`http://localhost:8000/api/rateSession`, formField)
-          console.log(req.data);
-          alert('Succesfully Created')
-        } catch (err) {
-          alert('Fail to create session')
-        }
+    formField.append('punctuality', punctuality)
+    formField.append('presentation', presentation)
+    formField.append('delivery', delivery)
+    formField.append('innovativeness', innovativeness)
+    formField.append('feedback', feedback)
 
+    try {
+      const req = await axios.post(`http://localhost:8000/api/rateSession`, formField)
+      console.log(req.data);
+      alert('Succesfully Created')
+    } catch (err) {
+      alert('Fail to create session')
+    }
 
-        // setPunctuality(0)
-        // setPresentation(0)
-        // setDelivery(0)
-        // setInnovativeness(0)
-        // setFeedback("") 
 
-    }
+    // setPunctuality(0)
+    // setPresentation(0)
+    // setDelivery(0)
+    // setInnovativeness(0)
+    // setFeedback("") 
 
-    const toggleModal = () =>{
-      setModal(!modal);
-    };
+  }
 
-    if(modal){
-        document.body.classList.add('active-modal')
-    }else{
-        document.body.classList.remove('active-modal')
-    }
+  const toggleModal = () => {
+    setModal(!modal);
+  };
+
+  if (modal) {
+    document.body.classList.add('active-modal')
+  } else {
+    document.body.classList.remove('active-modal')
+  }
 
-    const handleJoin = (e) => {
-        e.preventDefault()
+  const handleJoin = (e) => {
+    e.preventDefault()
 
-        toggleModal()
+    toggleModal()
 
+  }
+
+  const handleClose = () => {
+    setRatingsModalState(false);
+    if (roomEndedNotif && roomEnded === false) {
+      setRoomEnded(true)
     }
-    
-  
+  }
+
   return (
-    <>
-    <Navbar/>
-    <Button onClick={handleOpen}>Open modal</Button>
     <Modal
-      open={open}
+      open={ratingsModalState}
       onClose={handleClose}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
@@ -100,76 +96,75 @@ const RatingSession = () => {
         <Typography id="modal-modal-description">
           <div className="rating-space">
             <div className="rating-container">
-              <div className = "items-1 item">
-                <div className = "items-1-1 item">Rate</div>
-                <div className = "items-1-2 item rating-logo">
-                  <IconButton onClick = {handleClose} >
-                  <HighlightOffIcon/>
+              <div className="items-1 item">
+                <div className="items-1-1 item">Rate</div>
+                <div className="items-1-2 item rating-logo">
+                  <IconButton onClick={handleClose} >
+                    <HighlightOffIcon />
                   </IconButton>
                 </div>
               </div>
-              <div className = "items-2 items">Session Title</div>
-              <span className = "rating-line"></span>
+              <div className="items-2 items">{session.session[0].sessionName}</div>
+              <span className="rating-line"></span>
               <Box
-                  display="flex"
-                  flexDirection="column"
-                  alignItems="center"
-                  justifyContent="center"
-                  sx={{
-                    '& > legend': { 
-                      mt: 2 ,
-                    },
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                justifyContent="center"
+                sx={{
+                  '& > legend': {
+                    mt: 2,
+                  },
+                }}
+              >
+                <Typography component="legend">Goals and Significance</Typography>
+                <Rating
+                  component="legend"
+                  name="goal"
+                  value={punctuality}
+                  onChange={(event, newValue) => {
+                    setPunctuality(newValue);
+                  }}
+                />
+                <Typography component="legend">Plan and Timeline</Typography>
+                <Rating
+                  name="plan"
+                  value={presentation}
+                  onChange={(event, newValue) => {
+                    setPresentation(newValue);
+                  }}
+                />
+                <Typography component="legend">Resource Request</Typography>
+                <Rating
+                  name="resource"
+                  value={delivery}
+                  onChange={(event, newValue) => {
+                    setDelivery(newValue);
+                  }}
+                />
+                <Typography component="legend">Relevant Experience</Typography>
+                <Rating
+                  name="relevant"
+                  value={innovativeness}
+                  onChange={(event, newValue) => {
+                    setInnovativeness(newValue);
                   }}
-                  >
-                  <Typography component="legend">Goals and Significance</Typography>
-                  <Rating
-                    component="legend"
-                    name="goal"
-                    value={punctuality}
-                    onChange={(event, newValue) => {
-                      setPunctuality(newValue);
-                    }}
-                  />
-                  <Typography component="legend">Plan and Timeline</Typography>
-                  <Rating
-                    name="plan"
-                    value={presentation}
-                    onChange={(event, newValue) => {
-                      setPresentation(newValue);
-                    }}
-                  />
-                  <Typography component="legend">Resource Request</Typography>
-                  <Rating
-                    name="resource"
-                    value={delivery}
-                    onChange={(event, newValue) => {
-                      setDelivery(newValue);
-                    }}
-                  />
-                  <Typography component="legend">Relevant Experience</Typography>
-                  <Rating
-                    name="relevant"
-                    value={innovativeness}
-                    onChange={(event, newValue) => {
-                      setInnovativeness(newValue);
-                    }}
-                  />
-                </Box>
-              <div className = "items-5 item">
-                <div className = "items-5-1 item item-direction">
+                />
+              </Box>
+              <div className="items-5 item">
+                <div className="items-5-1 item item-direction">
                   <label className="details">Feedback</label>
-                  <textarea type="text" name="Feedback" placeholder="Feedback here" onChange={(e) => setFeedback(e.target.value)}/>
+                  <textarea type="text" name="Feedback" placeholder="Feedback here" onChange={(e) => setFeedback(e.target.value)} value={feedback} />
                 </div>
               </div>
-              <div className = "items-6 item button">
-                <input type="submit" value="Submit" onClick = {rateSession}/>
+              <div className="items-6 item button">
+                <input type="submit" value="Submit" onClick={rateSession} />
               </div>
             </div>
           </div>
-          </Typography>
-        </Box>
-      </Modal>
-    </>
+        </Typography>
+      </Box>
+    </Modal>
   )
 }
 
diff --git a/frontend/src/pages/Session/SessionRoom.jsx b/frontend/src/pages/Session/SessionRoom.jsx
index ed496e1..7e23e08 100644
--- a/frontend/src/pages/Session/SessionRoom.jsx
+++ b/frontend/src/pages/Session/SessionRoom.jsx
@@ -15,20 +15,20 @@ function SessionRoom() {
     const { session, dispatch } = useContext(SessionContext)
     const loading = session.loading
     const role = session.role
+    useNotification()
 
     const hmsActions = useHMSActions()
     const { isConnected } = useGetPeer({ role })
     const [loadingText, setloadingText] = useState('')
-    const notification = useNotification()
 
     useEffect(() => {
         window.onunload = () => {
-            if (isConnected) {
+            if (session.isConnected) {
                 hmsActions.leave();
                 dispatch({ type: "LEAVE" })
             }
         };
-    }, [hmsActions, isConnected]);
+    }, [hmsActions, session.isConnected]);
 
     useEffect(() => {
         const unSub = () => {
@@ -43,13 +43,12 @@ function SessionRoom() {
         return (
             unSub()
         )
-    }, [role, session.loading, isConnected])
-
+    }, [role, session.loading, session.isConnected])
 
     return (
         <div className='main-content'>
             <Navbar />
-            {isConnected ?
+            {session.isConnected ?
                 loading === false ? (
                     <>
                         <div className='sessionRoom'>
diff --git a/frontend/src/pages/Session/sessionRoom.scss b/frontend/src/pages/Session/sessionRoom.scss
index 9ea00ef..2dfc09a 100644
--- a/frontend/src/pages/Session/sessionRoom.scss
+++ b/frontend/src/pages/Session/sessionRoom.scss
@@ -89,6 +89,7 @@
                     display: flex;
                     align-items: center;
                     flex-direction: row;
+                    align-self: baseline;
                     height: 50px;
                     // border-bottom: 1px solid gray;
 
@@ -152,7 +153,7 @@
                     }
 
                     .sessionNav-endSession {
-                        margin-right: 1em;
+                        height: 50px;
 
                         button {
                             font-size: .6rem;
@@ -248,6 +249,28 @@
                         justify-content: center;
                         overflow: hidden;
 
+                        .sessionNav-endSession {
+                            height: 50px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            padding: 8px 16px;
+
+                            button {
+                                font-size: .6rem;
+                                font-weight: 200;
+                                height: 1.5rem;
+                                border-radius: 50px;
+                                border: none;
+                                background-color: #BA6451;
+                                color: whitesmoke;
+                                font-weight: 700;
+                                width: 125px;
+                                cursor: pointer;
+
+                            }
+                        }
+
 
                         .sessionChats-controls {
                             background-color: rgb(165, 163, 163);