diff --git a/front/package.json b/front/package.json
index 30c588e7..72f19126 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.7.2",
     "express": "^4.19.2",
     "jwt-decode": "^4.0.0",
+    "openvidu-browser": "^2.30.1",
     "phaser": "^3.80.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/front/server/signalingServer.ts b/front/server/signalingServer.ts
deleted file mode 100644
index 91827928..00000000
--- a/front/server/signalingServer.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import express from 'express';
-import http from 'http';
-import { Server as socketIo } from 'socket.io';
-
-interface Room{
-  users: string[]
-}
-
-
-const app = express(); // express 애플리케이션 인스턴스 생성
-const server = http.createServer(app); // hTTP 서버 생성, 이 서버가 Express 애플리케이션 처리
-
-// socket.io 서버 인스턴스 
-const io = new socketIo(server, {
-  cors: {
-    origin: true, // FIXME :보안을 위해 CORS 설정 구체화 해줘야 함
-  },
-});
-
-const totalRooms :{[key: string] : Room} = {}; // {방의 이름 : [user 소켓 id]}의 객체
-
-// 클라이언트가 socket.io 서버에 연결 되어있을 때
-io.on('connection', (socket: any) => {
-    console.log(`Client connected. socket: ${socket.id}`);
-  
-    // 채팅을 위한 방에 접속
-    socket.on('join', (data: { room: string }) => {    
-      if(!data?.room) return;
-      socket.join(data.room);
-      // 방이 없으면 새로운 방을 만든다.
-      if(!totalRooms[data.room]){
-        totalRooms[data.room] = {users: []};
-      }
-      //방에 사용자를 추가
-      totalRooms[data.room].users.push(socket.id);
-      socket.room = data.room;
-
-      console.log(`Join room ${data.room}. Socket ${socket.id}`);
-    });
-  
-    // peer가 제안 :: SDP 방식(제안-응답)
-    socket.on('offer', (data: { sdp: string; room: string }) => {
-      socket.to(data.room).emit('offer', { sdp: data.sdp, sender: socket.id });
-    });
-
-    // peer가 응답
-    socket.on('answer', (data: { sdp: string; room: string }) => {
-      socket.to(data.room).emit('answer', { sdp: data.sdp, sender: socket.id });
-    });
-  
-    // peer가 자신이 데이터를 보낼 수 있는 네트워크 경로를 찾기 위해 ICE 프로세스 수행
-    socket.on('candidate', (data: { candidate: string; room: string }) => {
-      socket.to(data.room).emit('candidate', { candidate: data.candidate, sender: socket.id });
-    });
-  
-    // 연결 종료
-    socket.on('disconnect', () => {
-      // 방에서 사용자 제거
-      if(socket.room && totalRooms[socket.room]){
-        totalRooms[socket.room].users = totalRooms[socket.room].users.filter(
-          (id) => id !==socket.id
-        )
-        //사용자가 한명도 없으면 방 없앰
-        if(totalRooms[socket.room].users.length ===0){
-          delete totalRooms[socket.room];
-        }
-      }
-      console.log('Client disconnected');
-    });
-  });
-
-// 포트 실행
-server.listen(5001, () => {  // 포트 번호
-  console.log('Listening on port 5001');
-});
\ No newline at end of file
diff --git a/front/src/App.css b/front/src/App.css
index e69de29b..0e6befce 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -0,0 +1,3 @@
+.stream-container {
+	padding: 0;
+}
\ No newline at end of file
diff --git a/front/src/components/VideoCall/OpenViduVideoComponent.tsx b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
new file mode 100644
index 00000000..7581d8d5
--- /dev/null
+++ b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
@@ -0,0 +1,22 @@
+import { StreamManager } from 'openvidu-browser';
+import React, { useRef, useEffect } from 'react';
+
+
+interface OpenViduVideoComponentProps {
+    streamManager: StreamManager | undefined;
+}
+
+// 최종적으로 미디어 스트림을 표시하는 최종 HTMl 래핑.
+const OpenViduVideoComponent: React.FC<OpenViduVideoComponentProps> = ({ streamManager }) => {
+    const videoRef = useRef<HTMLVideoElement>(null); // videoRef의 타입을 HTMLVideoElement로 지정
+
+    useEffect(() => {
+        if (streamManager && videoRef.current) {
+            streamManager.addVideoElement(videoRef.current);
+        }
+    }, [streamManager]);
+
+    return <video className='w-40 h-32 rounded-lg' autoPlay ref={videoRef} />;
+}
+
+export default OpenViduVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideoComponents.tsx b/front/src/components/VideoCall/UserVideoComponents.tsx
new file mode 100644
index 00000000..57975243
--- /dev/null
+++ b/front/src/components/VideoCall/UserVideoComponents.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import OpenViduVideoComponent from './OpenViduVideoComponent';
+import './UserVideo.css';
+import { StreamManager } from 'openvidu-browser';
+import { Box } from '@mui/material';
+
+
+interface UserVideoComponentProps {
+    streamManager: StreamManager
+}
+// 모든 사용자 비디오 표시, 클릭이벤트 처리
+const UserVideoComponent: React.FC<UserVideoComponentProps> = ({ streamManager }) => {
+    const getNicknameTag = (): string => {
+        // Gets the nickName of the user
+        return JSON.parse(streamManager!.stream.connection.data).clientData;
+    }
+
+    return (
+        <Box sx={{height: '100%'}}>
+            {streamManager !== undefined ? (
+                <Box sx={{width: '100%', height: '100%', backgroundColor: 'black', borderRadius: '10px', position: 'relative'}}>
+                    {/* OpenViduVideoComponent : 사용자 비디오 컴포넌트 */}
+                    <OpenViduVideoComponent streamManager={streamManager}/>
+                    <div><p className='text-white absolute bottom-0 left-0'>{getNicknameTag()}</p></div>
+                </Box>
+            ) : null}
+        </Box>
+    );
+}
+
+export default UserVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/VideoCallBoxList.tsx b/front/src/components/VideoCall/VideoCallBoxList.tsx
index e7176ecf..930a148a 100644
--- a/front/src/components/VideoCall/VideoCallBoxList.tsx
+++ b/front/src/components/VideoCall/VideoCallBoxList.tsx
@@ -1,104 +1,303 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import VideoCallBoxListItem from './VideoCallBoxListItem'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import { Box } from '@mui/material';
+import { Device, OpenVidu, Publisher, Session, StreamManager, } from 'openvidu-browser';
+
 import axios from 'axios';
-import { useParams } from 'react-router';
-import { ServerMember } from '../../types/server';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import UserVideoComponent from './UserVideoComponents';
+import { Box } from '@mui/material';
+
+// 서버 주소 (현재는 튜토리얼 서버)
+const APPLICATION_SERVER_URL = "http://localhost:5000/";
 
+
+// 화상회의 주요 구성 요소 컴포넌트 : 화상회의 참여 및 관리 기능
 const VideoCallBoxList = () => {
-  const [curVideoCallBoxPage, setCurVideoCallBoxPage] = useState(0);
-  const [slicedMemberList, setSlicedMemberList] = useState<ServerMember[]>([]); // 페이징 처리 된 멤버 리스트
-  const [serverMemberList, setServerMemberList] = useState([]);
-  // const serverId = useParams();
-
-  // FIXME : 해당 API axios 인터셉터 개발되면 수정 필요
-  const accessToken = localStorage.getItem('dicoTown_AccessToken');
-  const getServerMember = useCallback(()=>{
-    axios.get(`http://kpring.duckdns.org/server/api/v1/server/66795ea1981fc767b76ca9d0`,{
-      headers: {'Authorization': `${accessToken}`}
-    })
-    .then(response=>{
-      setServerMemberList(response.data.data.users);
-    })
-    .catch(err=>console.log(err))
-  },[accessToken])
-
-
-  // 마지막 페이지 수
-  const lastPage = useMemo(()=>{
-    const memberCnt = serverMemberList.length;
-    let lastPage = 0;
-    if(memberCnt%4 === 0){
-      lastPage = Math.floor(memberCnt/4) - 1
-    }else{
-      lastPage = Math.floor(memberCnt/4)
-    }
-    return lastPage
-  },[serverMemberList])
-
-  // 화면 공유 박스 이전 페이지 이동 핸들링 함수
-  const handleBoxPagePrev = useCallback(()=>{
-    let curPage = curVideoCallBoxPage;
-    if(curPage!==0){
-      setCurVideoCallBoxPage(curPage - 1)
-    }
-  },[curVideoCallBoxPage])
-
-  // 화면 공유 박스 다음 페이지 이동 핸들링 함수
-  const handleBoxPageNext = useCallback(()=>{
-    if(curVideoCallBoxPage!==lastPage){
-      let curPage = curVideoCallBoxPage;
-      setCurVideoCallBoxPage(curPage + 1)
-    }
-  },[curVideoCallBoxPage,lastPage])
-
-
-  // 화면공유 멤버 리스트 슬라이싱 함수 
-  const sliceMemberList = useCallback(()=>{
-    const newMemberList = serverMemberList.slice(curVideoCallBoxPage*4, (curVideoCallBoxPage*4)+4);
-    setSlicedMemberList(newMemberList)
-  },[curVideoCallBoxPage, serverMemberList])
-
-  // 무한루프 방지를 위해 useEffect 분리
-  useEffect(()=>{
-    getServerMember();
-  },[getServerMember])
-
-  useEffect(() => {
-    sliceMemberList();
-  }, [sliceMemberList]);
+    const [mySessionId, setMySessionId] = useState('SessionA') //세션 아이디
+    const [myUserName, setMyUserName] = useState(`Participant${Math.floor(Math.random() * 100)}`) //참가자 닉네임(지금은 임의로)
+    const [session, setSession] = useState<Session | ''>('');
+    const [mainStreamManager, setMainStreamManager] = useState<Publisher | null >(null);
+    const [publisher, setPublisher] = useState<Publisher | null>(null); //영상 송출자 : 로컬 웹캠 스트림
+    const [subscribers, setSubscribers] = useState<StreamManager[]>([]); // 영상 시청자 : 다른 사용자 활성 스트림
+    const [currentVideoDevice, setCurrentVideoDevice] = useState<Device | null>(null);
+
+    const OV = useRef(new OpenVidu());
+
+    //세션아이디 변경
+    const handleChangeSessionId = useCallback((e : React.ChangeEvent<HTMLInputElement>) => {
+        setMySessionId(e.target.value);
+    }, []);
+
+    // 유저이름 직접 변경
+    const handleChangeUserName = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setMyUserName(e.target.value);
+    }, []);
+
+    // 
+    const handleMainVideoStream = useCallback((stream: StreamManager) => {
+      const publisher = stream as Publisher; // 타입 변환
   
-  return (
-    <Box sx={{width: '880px', height:'160px', display:'flex', alignItems:'center'}}>
-      <ArrowBackIosIcon 
-      sx={{
-        color: `${curVideoCallBoxPage === 0 ? 'gray': 'black'}`,
-        cursor: 'pointer'
-      }}
-      onClick={handleBoxPagePrev} />
-      <Box   sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        height: '100%',
-        width: '100%'
-      }}>
-        {
-            slicedMemberList.map((member,index)=>(
-                <VideoCallBoxListItem key={index} member={member}/>
-            ))
+      if (mainStreamManager !== publisher) {
+          setMainStreamManager(publisher);
+      }
+  }, [mainStreamManager]);
+
+    // join 버튼을 클릭한 후에 호출됨. (사용자 닉네임 입력, server에서 두개의 토큰을 가져옴)
+    const joinSession = useCallback(() => {
+        const mySession = OV.current.initSession();
+
+        mySession.on('streamCreated', (event) => {
+            const subscriber = mySession.subscribe(event.stream, undefined);
+            setSubscribers((subscribers) => [...subscribers, subscriber]);
+        });
+
+        mySession.on('streamDestroyed', (event) => {
+            deleteSubscriber(event.stream.streamManager);
+        });
+
+        mySession.on('exception', (exception) => {
+            console.warn(exception);
+        });
+
+        setSession(mySession);
+    }, []);
+
+    useEffect(() => {
+        if (session) {
+            // Get a token from the OpenVidu deployment
+            getToken().then(async (token) => {
+                try {
+                    await session.connect(token, { clientData: myUserName });
+
+                    let publisher = await OV.current.initPublisherAsync(undefined, {
+                        audioSource: undefined,
+                        videoSource: undefined,
+                        publishAudio: true,
+                        publishVideo: true,
+                        resolution: '640x480',
+                        frameRate: 30,
+                        insertMode: 'APPEND',
+                        mirror: false,
+                    });
+
+                    session.publish(publisher);
+
+                    const devices = await OV.current.getDevices();
+                    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+                    const currentVideoDeviceId = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings().deviceId;
+                    const currentVideoDevice = videoDevices.find(device => device.deviceId === currentVideoDeviceId);
+
+                    setMainStreamManager(publisher);
+                    setPublisher(publisher);
+                    if (currentVideoDevice) {
+                      setCurrentVideoDevice(currentVideoDevice);
+                  } else {
+                      setCurrentVideoDevice(null); // 필요에 따라 null로 설정
+                  }
+                } catch (error) {
+                  if (error instanceof Error) {
+                    console.log(error.message)
+                  } else {
+                    console.log(String(error))
+                  }
+                }
+            });
         }
-      </Box>
-      <ArrowForwardIosIcon 
-      sx={{
-        color: `${curVideoCallBoxPage === 0 ? 'gray': 'black'}`,
-        cursor: 'pointer'
-      }}
-      onClick={handleBoxPageNext}
-      />
-    </Box>
-  )
-}
+    }, [session, myUserName]);
+
+
+    const leaveSession = useCallback(() => {
+        // Leave the session
+        if (session) {
+            session.disconnect();
+        }
+    
+        // Reset all states and OpenVidu object
+        OV.current = new OpenVidu();
+        setSession('');
+        setSubscribers([]);
+        setMySessionId('SessionA');
+        setMyUserName('Participant' + Math.floor(Math.random() * 100));
+        setMainStreamManager(null);
+        setPublisher(null);
+    }, [session]);
+
+    // 비디오 장치 전환 기능 (이후에는 자동 스위치가 아니라, 목록만 불러와서 사용자가 직접 선택할 수 있게끔 하는게 좋아보임)
+    const switchCamera = useCallback(async () => {
+        try {
+            const devices = await OV.current.getDevices(); //미디어 장치 목록 가져오기
+            const videoDevices = devices.filter(device => device.kind === 'videoinput'); // 그 중 카메라만 추출
+    
+            if (videoDevices && videoDevices.length > 1 && currentVideoDevice) { 
+                const newVideoDevice = videoDevices.filter(device => device.deviceId !== currentVideoDevice.deviceId);
+    
+                if (newVideoDevice.length > 0) {
+                    const newPublisher = OV.current.initPublisher(undefined, {
+                        videoSource: newVideoDevice[0].deviceId,
+                        publishAudio: true,
+                        publishVideo: true,
+                        mirror: true,
+                    });
+    
+                    if (session) {
+                      if (mainStreamManager){
+                        await session.unpublish(mainStreamManager);
+                      }
+                        
+                        await session.publish(newPublisher);
+                        setCurrentVideoDevice(newVideoDevice[0]);
+                        setMainStreamManager(newPublisher);
+                        setPublisher(newPublisher);
+                    }
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }, [currentVideoDevice, session, mainStreamManager]);
+
+    const deleteSubscriber = useCallback((streamManager : StreamManager) => {
+        setSubscribers((prevSubscribers) => {
+            const index = prevSubscribers.indexOf((streamManager));
+            if (index > -1) {
+                const newSubscribers = [...prevSubscribers];
+                newSubscribers.splice(index, 1);
+                return newSubscribers;
+            } else {
+                return prevSubscribers;
+            }
+        });
+    }, []);
 
-export default VideoCallBoxList
\ No newline at end of file
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            leaveSession();
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [leaveSession]);
+
+  /**
+     * --------------------------------------------
+     * 애플리케이션 서버에서 토큰 받기
+     * --------------------------------------------
+     * 아래의 메서드는 애플리케이션 서버에 세션과 토큰 생성을 요청합니다.
+     * 이렇게 하면 OpenVidu 배포가 안전하게 유지됩니다.
+     *
+     * 이 샘플 코드에서는 사용자 제어가 전혀 없습니다. 누구든지
+     * 애플리케이션 서버의 엔드포인트에 접근할 수 있습니다! 실제 운영 환경에서는
+     * 애플리케이션 서버가 사용자를 식별하여 엔드포인트에 대한 접근을 허용해야 합니다.
+     *
+     * OpenVidu를 애플리케이션 서버에 통합하는 방법에 대한 자세한 내용은
+     * https://docs.openvidu.io/en/stable/application-server 를 방문하세요.
+     */
+
+    // 서버에 세션아이디로 getToken
+    const getToken = useCallback(async () => {
+        return createSession(mySessionId).then(sessionId =>
+            createToken(sessionId),
+        );
+    }, [mySessionId]);
+    //세션 id로 세션 생성하고 세션 아이디 반환
+    const createSession = async (sessionId : string) => {
+        const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, {
+            headers: { 'Content-Type': 'application/json', },
+        });
+        return response.data; // The sessionId
+    };
+    //세션 아이디로 토큰 요청, 토큰 반환
+    const createToken = async (sessionId : string) => {
+        const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, {
+            headers: { 'Content-Type': 'application/json', },
+        });
+        return response.data; // The token
+    };
+    return (
+        <div className='w-100%'>
+            {session === '' ? (
+                <div id="join">
+                    <div id="join-dialog" className="jumbotron vertical-center">
+                        <form className="form-group" onSubmit={joinSession}>
+                            <p>
+                                <label>참가자 이름: </label>
+                                <input
+                                    className="form-control"
+                                    type="text"
+                                    id="userName"
+                                    value={myUserName}
+                                    onChange={handleChangeUserName}
+                                    required
+                                />
+                            </p>
+                            <p>
+                                <label> 서버 이름: </label>
+                                <input
+                                    className="form-control"
+                                    type="text"
+                                    id="sessionId"
+                                    value={mySessionId}
+                                    onChange={handleChangeSessionId}
+                                    required
+                                />
+                            </p>
+                            <p className="text-center">
+                                <input className="text-white bg-black rounded-md" name="commit" type="submit" value="JOIN" />
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            ) : null}
+
+            {session !== undefined ? (
+                <div id="session">
+                    <div id="session-header">
+                        <h1 id="session-title">서버 이름 : {mySessionId}</h1>
+                        <input
+                            className="text-white bg-black rounded-md"
+                            type="button"
+                            id="buttonLeaveSession"
+                            onClick={leaveSession}
+                            value="Leave session"
+                        />
+                        <input
+                            className="text-white bg-black rounded-md"
+                            type="button"
+                            id="buttonSwitchCamera"
+                            onClick={switchCamera}
+                            value="Switch Camera"
+                        />
+                    </div>
+
+                    {/* {mainStreamManager !== null ? (
+                        <div id="main-video" className="col-md-6">
+                            {mainStreamManager && <UserVideoComponent streamManager={mainStreamManager} />} 
+
+                        </div>
+                    ) : null} */}
+                    <Box sx={{ 
+                        display: 'flex', 
+                        gap: '16px',
+                        height: '128px' 
+                        }}>
+                        {publisher !== null ? (
+                                <div onClick={() => handleMainVideoStream(publisher)} className='h-full'>
+                                    { publisher && <UserVideoComponent
+                                        streamManager={publisher} />}
+                                </div>
+                            ) : null}
+                            {subscribers.map((sub, i) => (
+                                <div key={sub.id} onClick={() => handleMainVideoStream(sub)}>
+                                    <UserVideoComponent streamManager={sub} />
+                                </div>
+                            ))}
+                    </Box>
+
+                    
+                </div>
+            ) : null}
+        </div>
+    );
+}
+export default VideoCallBoxList;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/registerServiceWorker.js b/front/src/components/VideoCall/registerServiceWorker.js
new file mode 100644
index 00000000..9979c1f0
--- /dev/null
+++ b/front/src/components/VideoCall/registerServiceWorker.js
@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.1/8 is considered localhost for IPv4.
+      window.location.hostname.match(
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+      )
+  );
+  
+  export default function register() {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+        return;
+      }
+  
+      window.addEventListener('load', () => {
+        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  
+        if (isLocalhost) {
+          // This is running on localhost. Lets check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl);
+  
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://goo.gl/SC7cgQ'
+            );
+          });
+        } else {
+          // Is not local host. Just register service worker
+          registerValidSW(swUrl);
+        }
+      });
+    }
+  }
+  
+  function registerValidSW(swUrl) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then(registration => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and
+                // the fresh content will have been added to the cache.
+                // It's the perfect time to display a "New content is
+                // available; please refresh." message in your web app.
+                console.log('New content is available; please refresh.');
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+              }
+            }
+          };
+        };
+      })
+      .catch(error => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+  
+  function checkValidServiceWorker(swUrl) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl)
+      .then(response => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        if (
+          response.status === 404 ||
+          response.headers.get('content-type').indexOf('javascript') === -1
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then(registration => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl);
+        }
+      })
+      .catch(() => {
+        console.log(
+          'No internet connection found. App is running in offline mode.'
+        );
+      });
+  }
+  
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready.then(registration => {
+        registration.unregister();
+      });
+    }
+  }
\ No newline at end of file
diff --git a/front/yarn.lock b/front/yarn.lock
index 249abe9a..85af234c 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4904,7 +4904,7 @@ eventemitter3@^5.0.1:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
   integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
 
-events@^3.2.0:
+events@3.3.0, events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -5199,6 +5199,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+freeice@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/freeice/-/freeice-2.2.2.tgz#f66b3e0f67c2fda835161f76d4884881cde83be4"
+  integrity sha512-XNoIxDHufqPIBSLpp4IrFPnoc+hv/0RwdOGhIoggIDC2ZKf5r6OoixbeoFJSmZOAq2aYiEUArhuQ8zVVrM5C4w==
+  dependencies:
+    normalice "^1.0.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -5422,6 +5429,13 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
+hark@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/hark/-/hark-1.2.3.tgz#959981400f561be5580ecd4321a9f55b16bacbd0"
+  integrity sha512-u68vz9SCa38ESiFJSDjqK8XbXqWzyot7Cj6Y2b6jk2NJ+II3MY2dIrLMg/kjtIAun4Y1DHF/20hfx4rq1G5GMg==
+  dependencies:
+    wildemitter "^1.2.0"
+
 harmony-reflect@^1.4.6:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
@@ -6674,6 +6688,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+jsnlog@2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/jsnlog/-/jsnlog-2.30.0.tgz#6feb20bf44fee693b255e31f92f739b21b4188f9"
+  integrity sha512-o3ROQVkhek+dkc7/9TXlB4TNtxUpYsRLOBJHZYk3Vy0B5zRBmfv9tyr56PrjcgEXuy06ARgfLTANY0+ImhzzGA==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -7029,6 +7048,11 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -7170,6 +7194,11 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+normalice@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalice/-/normalice-1.0.1.tgz#03435c2eecd5631a6bca02da3930ec3e345a80f7"
+  integrity sha512-wF2/tv9q/K8S+RqCgll5yC6z/zcXNr+rEHfGIw8A6D58vjfJo+kp749MI6cAHv72LE7nwv92Qi6tZhIeMOOJpg==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -7348,6 +7377,22 @@ open@^8.0.9, open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+openvidu-browser@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/openvidu-browser/-/openvidu-browser-2.30.1.tgz#98151fee267d84cfd4155c981f32ed7a07fe7982"
+  integrity sha512-R4OxEmr5syHisPxL8ndViqwYkUfe/muMPhwD1LhqnwObVDDZwI5LQTEVWSp2X8wc3GhWgNdQbsArpKqBUf3bzQ==
+  dependencies:
+    events "3.3.0"
+    freeice "2.2.2"
+    hark "1.2.3"
+    inherits "2.0.4"
+    jsnlog "2.30.0"
+    mime "3.0.0"
+    platform "1.3.6"
+    semver "7.6.2"
+    uuid "9.0.1"
+    wolfy87-eventemitter "5.2.9"
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -7557,6 +7602,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+platform@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
+  integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -8796,6 +8846,11 @@ selfsigned@^2.1.1:
     "@types/node-forge" "^1.3.0"
     node-forge "^1"
 
+semver@7.6.2:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
 semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -9823,6 +9878,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -10117,6 +10177,16 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+wildemitter@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/wildemitter/-/wildemitter-1.2.1.tgz#9da3b5ca498e4378628d1783145493c70a10b774"
+  integrity sha512-UMmSUoIQSir+XbBpTxOTS53uJ8s/lVhADCkEbhfRjUGFDPme/XGOb0sBWLx5sTz7Wx/2+TlAw1eK9O5lw5PiEw==
+
+wolfy87-eventemitter@5.2.9:
+  version "5.2.9"
+  resolved "https://registry.yarnpkg.com/wolfy87-eventemitter/-/wolfy87-eventemitter-5.2.9.tgz#e879f770b30fbb6512a8afbb330c388591099c2a"
+  integrity sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw==
+
 word-wrap@^1.2.5, word-wrap@~1.2.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"