diff --git a/frontend/src/components/Header/components/HeaderInstructorControls.tsx b/frontend/src/components/Header/components/HeaderInstructorControls.tsx
index a946332..1e847b6 100644
--- a/frontend/src/components/Header/components/HeaderInstructorControls.tsx
+++ b/frontend/src/components/Header/components/HeaderInstructorControls.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { Socket, Manager } from "socket.io-client";
-import { useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 import VolumeMeter from "./VolumeMeter";
 
@@ -31,6 +31,8 @@ const HeaderInstructorControls = () => {
   const selectedMicrophone = useRecoilValue(selectedMicrophoneState);
   const inputMicVolume = useRecoilValue(micVolmeState);
   const setInputMicVolumeState = useSetRecoilState(micVolmeState);
+  const setInstructorSocket = useSetRecoilState(instructorSocketState);
+  const navigate = useNavigate();
   const showToast = useToast();
 
   const canvasRef = useRecoilValue(canvasRefState);
@@ -38,22 +40,16 @@ const HeaderInstructorControls = () => {
 
   const timerIdRef = useRef<number | null>(null); // 경과 시간 표시 타이머 id
   const onFrameIdRef = useRef<number | null>(null); // 마이크 볼륨 측정 타이머 id
-
   const managerRef = useRef<Manager>();
   const socketRef = useRef<Socket>();
   const socketRef2 = useRef<Socket>();
-
-  const setInstructorSocket = useSetRecoilState(instructorSocketState);
-
   const pcRef = useRef<RTCPeerConnection>();
   const mediaStreamRef = useRef<MediaStream>();
   const updatedStreamRef = useRef<MediaStream>();
   const inputMicVolumeRef = useRef<number>(0);
   const prevInputMicVolumeRef = useRef<number>(0);
 
-
   const roomid = new URLSearchParams(useLocation().search).get("roomid") || "999999";
-
   const sampleAccessToken =
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InBsYXRpbm91c3NAZ21haWwuY29tIiwiaWF0IjoxNzAxNjY0NTc4LCJleHAiOjE3MDI3MDEzNzh9.e2ikfmTsFCoVNxenHpAh__hLhoJnUPWSf-FmFSPo_RA";
 
@@ -114,6 +110,7 @@ const HeaderInstructorControls = () => {
 
     setIsCloseModalOpen(false);
     showToast({ message: "강의가 종료되었습니다.", type: "alert" });
+    navigate("/lecture-end");
   };
 
   const initConnection = async () => {
@@ -121,7 +118,7 @@ const HeaderInstructorControls = () => {
       // 0. 소켓 연결
 
       managerRef.current = new Manager(import.meta.env.VITE_MEDIA_SERVER_URL);
-      
+
       socketRef.current = managerRef.current.socket("/create-room", {
         auth: {
           accessToken: sampleAccessToken,
@@ -370,14 +367,14 @@ const HeaderInstructorControls = () => {
 
     const isCanvasDataChanged = canvasData.canvasJSON !== newJSONData;
     const isViewportChanged = JSON.stringify(canvasData.viewport) !== JSON.stringify(newViewport);
-    const isSizeChanged = canvasData.width !== newWidth || canvasData.height !== newHegiht;
+    const isSizeChanged = canvasData.width !== newWidth || canvasData.height !== newHeight;
 
     if (isCanvasDataChanged || isViewportChanged || isSizeChanged) {
       canvasData.canvasJSON = newJSONData;
       canvasData.viewport = newViewport;
       canvasData.eventTime = Date.now() - startTime;
       canvasData.width = newWidth;
-      canvasData.height = newHegiht;
+      canvasData.height = newHeight;
       submitData(canvasData);
     }
   }
diff --git a/frontend/src/components/Header/components/HeaderParticipantControls.tsx b/frontend/src/components/Header/components/HeaderParticipantControls.tsx
index 3edacd1..816914f 100644
--- a/frontend/src/components/Header/components/HeaderParticipantControls.tsx
+++ b/frontend/src/components/Header/components/HeaderParticipantControls.tsx
@@ -11,11 +11,9 @@ import SmallButton from "@/components/SmallButton/SmallButton";
 import Modal from "@/components/Modal/Modal";
 import { useToast } from "@/components/Toast/useToast";
 
-import selectedSpeakerState from "../../../stores/stateSelectedSpeaker";
-import speakerVolmeState from "../../../stores/stateSpeakerVolume";
-
+import selectedSpeakerState from "@/stores/stateSelectedSpeaker";
+import speakerVolmeState from "@/stores/stateSpeakerVolume";
 import participantCavasInstanceState from "@/stores/stateParticipantCanvasInstance";
-
 import participantSocketRefState from "@/stores/stateParticipantSocketRef";
 
 const HeaderParticipantControls = () => {
@@ -104,6 +102,7 @@ const HeaderParticipantControls = () => {
     });
     socketRef2.current.on("ended", () => {
       showToast({ message: "강의가 종료되었습니다.", type: "alert" });
+      leaveLecture();
     });
 
     interface ICanvasData {
@@ -192,7 +191,7 @@ const HeaderParticipantControls = () => {
     if (mediaStreamRef.current) mediaStreamRef.current.getTracks().forEach((track) => track.stop()); // 미디어 트랙 중지
 
     setIsModalOpen(false);
-    navigate("/");
+    navigate("/lecture-end");
   };
 
   const initConnection = async () => {
diff --git a/frontend/src/pages/Participant/Participant.tsx b/frontend/src/pages/Participant/Participant.tsx
index e171406..9f09d25 100644
--- a/frontend/src/pages/Participant/Participant.tsx
+++ b/frontend/src/pages/Participant/Participant.tsx
@@ -4,7 +4,9 @@ import { fabric } from "fabric";
 
 import Header from "@/components/Header/Header";
 import participantCavasInstanceState from "@/stores/stateParticipantCanvasInstance";
-import QuestionLogButton from "./components/QuestionLogButton";
+import CloseIcon from "@/assets/svgs/close.svg?react";
+import QuestionIcon from "@/assets/svgs/whiteboard/question.svg?react";
+import LogToggleButton from "@/components/Button/LogToggleButton";
 import LogContainer from "@/components/LogContainer/LogContainer";
 
 import isQuestionLogOpenState from "@/stores/stateIsQuestionLogOpen";
@@ -49,8 +51,8 @@ const Participant = () => {
   return (
     <>
       <Header type="participant" />
-      <section className="relative w-[100vw] h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
-        <canvas ref={canvasRef} />
+      <section className="relative w-screen h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
+        <canvas className="-z-10" ref={canvasRef} />
         <LogContainer
           type="question"
           className={`absolute top-2.5 right-2.5 ${isQuestionLogOpen ? "block" : "hidden"}`}
diff --git a/frontend/src/pages/Participant/ParticipantVideoVer.tsx b/frontend/src/pages/Participant/ParticipantVideoVer.tsx
index 2f543d5..049dd88 100644
--- a/frontend/src/pages/Participant/ParticipantVideoVer.tsx
+++ b/frontend/src/pages/Participant/ParticipantVideoVer.tsx
@@ -19,7 +19,7 @@ const Participant = () => {
     <>
       <Header type="participant" />
       <section className="relative">
-        <video className="w-[100vw] h-[calc(100vh-5rem)]" autoPlay muted ref={videoRef}></video>
+        <video className="w-screen h-[calc(100vh-5rem)]" autoPlay muted ref={videoRef}></video>
         <LogContainer type="question" className={"absolute top-2.5 right-2.5"} />
       </section>
     </>
diff --git a/frontend/src/pages/Test/components/CanvasSection.tsx b/frontend/src/pages/Test/components/CanvasSection.tsx
index 8ea3e90..6f46124 100644
--- a/frontend/src/pages/Test/components/CanvasSection.tsx
+++ b/frontend/src/pages/Test/components/CanvasSection.tsx
@@ -99,7 +99,7 @@ const CanvasSection = () => {
   }, []);
 
   return (
-    <div className="relative w-[100vw] h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
+    <div className="relative w-screen h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
       <canvas ref={canvasRef} />
 
       <Toolbar />