diff --git a/frontend/app/teacher/lecture-detail/[lectureId]/_components/LectureHeader/LectureHeader.tsx b/frontend/app/teacher/lecture-detail/[lectureId]/_components/LectureHeader/LectureHeader.tsx
index 5eb63d30..79692ee4 100644
--- a/frontend/app/teacher/lecture-detail/[lectureId]/_components/LectureHeader/LectureHeader.tsx
+++ b/frontend/app/teacher/lecture-detail/[lectureId]/_components/LectureHeader/LectureHeader.tsx
@@ -9,6 +9,8 @@ import MakeQuizModal from "@/components/Modal/MakeQuizModal/MakeQuizModal";
 import { FetchLectureDetailResult } from "@/types/lectures/fetchLectureDetailTypes";
 import { fetchLectureDetail } from "@/api/lectures/fetchLectureDetail";
 import { useLectureDetail } from "../LectureDetailContext";
+import { useRouter } from "next/navigation";
+import { ROUTES } from "@/constants/routes";
 
 export default function LectureHeader() {
   const { lectureId, setClassId, refreshKey } = useLectureDetail();
@@ -17,6 +19,8 @@ export default function LectureHeader() {
   const [showQuizModal, setShowQuizModal] = useState(false);
   const [loading, setLoading] = useState(true);
 
+  const router = useRouter();
+
   const fetchData = useCallback(async () => {
     try {
       setLoading(true);
@@ -43,8 +47,7 @@ export default function LectureHeader() {
   }, [lectureId, setClassId, fetchData, refreshKey]);
 
   const handleStartLecture = () => {
-    // TODO: 강의 시작 로직 구현
-    console.log("강의 시작");
+    router.push(ROUTES.teacherLectureLive(lectureId));
   };
 
   const handleQuizModalClose = () => {
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.module.scss
new file mode 100644
index 00000000..607f6781
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.module.scss
@@ -0,0 +1,17 @@
+@import "@/styles/variables";
+
+.wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ef4444;
+  box-shadow: 0 0 0 2px #fff;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.tsx
new file mode 100644
index 00000000..2bda7008
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { MessageCircleMore } from "lucide-react";
+import { useLive } from "../../LectureLiveProvider";
+import styles from "./ChatingButton.module.scss";
+
+export default function ChatingButton({
+  className,
+  onPress,
+}: {
+  className?: string;
+  onPress?: () => void;
+}) {
+  const { panels, togglePanel } = useLive();
+  const isOpen = panels.chat;
+  const [unread, setUnread] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) setUnread(false);
+  }, [isOpen]);
+
+  useEffect(() => {
+    const onNew = () => {
+      if (!isOpen) setUnread(true);
+    };
+    window.addEventListener("live:chat:new", onNew as EventListener);
+    return () => window.removeEventListener("live:chat:new", onNew as EventListener);
+  }, [isOpen]);
+
+  const onClick = () => {
+    onPress?.();
+    togglePanel("chat");
+  };
+
+  return (
+    <span className={`${styles.wrap} ${className ?? ""}`}>
+      <IconButton
+        ariaLabel="채팅"
+        onClick={onClick}
+        icon={<MessageCircleMore data-active={isOpen} />}
+      />
+      {unread && !isOpen && <i className={styles.badge} aria-hidden />}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.module.scss
new file mode 100644
index 00000000..1b79c032
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.module.scss
@@ -0,0 +1,60 @@
+@import "@/styles/variables";
+
+.wrap {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.header {
+  padding: $spacing-sm $spacing-sm 0 $spacing-sm;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerTitle {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-neutral-1;
+}
+
+.closeBtn :global(button) {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+
+  &:hover { background: $color-neutral-7; }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: $spacing-sm;
+  gap: $spacing-xs;
+}
+
+.row {
+  display: flex;
+}
+
+.teacher { justify-content: flex-end; }
+.student { justify-content: flex-start; }
+
+.inputRow {
+  padding: $spacing-sm;
+  border-top: 1px solid $color-neutral-7;
+
+  :global(.inputBox) {
+    padding-right: 6px;
+  }
+}
+
+.inputRow :global(.iconRight) {
+  display: inline-flex;
+  align-items: center;
+}
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx
new file mode 100644
index 00000000..26c09040
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "./ChatingPanel.module.scss";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { X, SendHorizontal } from "lucide-react";
+import { useLive } from "../../LectureLiveProvider";
+import ChatBox from "@/components/ChatBox/ChatBox";
+import BasicInput from "@/components/Input/BasicInput/BasicInput";
+
+type Msg = {
+  id: string;
+  text: string;
+  role: "teacher" | "student";
+  ts?: number;
+};
+
+export default function ChatPanel() {
+  const { togglePanel } = useLive();
+
+  const [msgs, setMsgs] = useState<Msg[]>([
+    { id: "seed1", text: "질문이요~", role: "student", ts: Date.now()},
+  ]);
+  const [text, setText] = useState("");
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  const closeChat = () => togglePanel("chat");
+
+  const send = () => {
+    const t = text.trim();
+    if (!t) return;
+    setMsgs((m) => [
+      ...m,
+      { id: String(Date.now()), text: t, role: "teacher", ts: Date.now() },
+    ]);
+    setText("");
+  };
+
+  const onSubmit: React.FormEventHandler = (e) => {
+    e.preventDefault();
+    send();
+  };
+
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [msgs]);
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const fmt = (ts: number) => {
+    const d = new Date(ts);
+    const yy = pad(d.getFullYear() % 100);
+    const MM = pad(d.getMonth() + 1);
+    const dd = pad(d.getDate());
+    const hh = pad(d.getHours());
+    const mm = pad(d.getMinutes());
+    const ss = pad(d.getSeconds());
+    return `${yy}.${MM}.${dd} ${hh}:${mm}:${ss}`;
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.header}>
+        <span className={styles.headerTitle}>Question</span>
+        <div className={styles.closeBtn}>
+          <IconButton ariaLabel="채팅 닫기" onClick={closeChat} icon={<X />} />
+        </div>
+      </div>
+
+      <div ref={bodyRef} className={styles.body}>
+        {msgs.map((m) => {
+          const tsText = m.ts ? fmt(m.ts) : "";
+          return (
+            <div
+              key={m.id}
+              className={`${styles.row} ${
+                m.role === "teacher" ? styles.teacher : styles.student
+              }`}
+            >
+              <ChatBox
+                isAnonymous={true}
+                nickname=""
+                profilePicture=""
+                message={m.text}
+                timestamp={tsText}
+                variant={m.role === "teacher" ? "teacher" : "student"}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      <form className={styles.inputRow} onSubmit={onSubmit}>
+        <BasicInput
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="답변 입력하기"
+          iconRight={
+            <IconButton
+              ariaLabel="전송"
+              onClick={send}
+              icon={<SendHorizontal size={18} color="#9AA4B2" />}
+            />
+          }
+        />
+      </form>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/DocumentSideButton/DocumentSideButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/DocumentSideButton/DocumentSideButton.tsx
new file mode 100644
index 00000000..c4a64303
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/DocumentSideButton/DocumentSideButton.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { PanelLeft, PanelLeftDashed } from "lucide-react";
+import { useLive } from "../LectureLiveProvider";
+
+export type DocumentSideButtonProps = {
+  open: boolean;
+  onToggle: () => void;
+  ariaLabelOpen?: string;
+  ariaLabelClose?: string;
+  disabled?: boolean;
+};
+
+export default function DocumentSideButton({
+  open,
+  onToggle,
+  ariaLabelOpen = "슬라이드 패널 열기",
+  ariaLabelClose = "슬라이드 패널 닫기",
+  disabled = false,
+}: DocumentSideButtonProps) {
+  const label = open ? ariaLabelClose : ariaLabelOpen;
+
+  return (
+    <IconButton
+      ariaLabel={label}
+      onClick={onToggle}
+      disabled={disabled}
+      icon={open ? <PanelLeft /> : <PanelLeftDashed />}
+    />
+  );
+}
+
+export function DocumentSideButtonConnected() {
+  const { panels, togglePanel } = useLive();
+  return (
+    <DocumentSideButton
+      open={panels.files}
+      onToggle={() => togglePanel("files")}
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss
new file mode 100644
index 00000000..620aa3b2
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss
@@ -0,0 +1,48 @@
+@import "@/styles/variables";
+
+.container {
+    width: 100%;
+    background: $color-white;
+    border-bottom: 1px solid $color-neutral-7;
+}
+
+.inner {
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px $spacing-md;
+}
+
+.left {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+}
+
+.divider {
+    width: 1px;
+    height: 20px;
+    background: $color-neutral-7;
+    margin: 0 $spacing-xs;
+}
+
+
+.left svg[data-active="true"] {
+    color: $color-blue;
+    stroke: $color-blue;
+}
+
+
+.endBtn {
+    align-self: center;           
+    height: auto !important;    
+    min-height: 0 !important;
+    line-height: 2;               
+    padding-block: 3px !important; 
+}
+
+.docBtnZ {
+    position: relative;
+    z-index: 2000;
+  }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
new file mode 100644
index 00000000..bb6519f7
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useState, useRef, useMemo, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import styles from "./LectureLiveHeader.module.scss";
+import FitContentButton from "@/components/Button/FitContentButton/FitContentButton";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { DocumentSideButtonConnected } from "../DocumentSideButton/DocumentSideButton";
+import PenToolButtons from "../PenTool/PenToolButtons/PenToolButtons";
+import { useLive } from "../LectureLiveProvider";
+import { FileText } from "lucide-react";
+import ToolPopover from "../ToolPopover/ToolPopover";
+import LectureNotePopover from "../LectureNote/LectureNotePopover/LectureNotePopover";
+import ChatingButton from "../Chating/ChatingButton/ChatingButton";
+import RecordingButton from "../Recording/RecordingButton/RecordingButton";
+import ConfirmModal from "@/components/Modal/ConfirmModal/ConfirmModal";
+import { getRecordingEngine, type RecState } from "../Recording/recordingEngine";
+import { ROUTES } from "@/constants/routes";
+import { Tool } from "../LectureLiveProvider";
+
+export default function LectureLiveHeader({
+  onToggleChat,
+  onEndLecture,
+}: {
+  onUploadDoc?: () => void;
+  onToggleChat?: () => void;
+  onToggleAudio?: () => void;
+  onEndLecture?: () => void;
+}) {
+  const { tool, setTool } = useLive();
+  const docBtnRef = useRef<HTMLSpanElement>(null);
+  const [openDoc, setOpenDoc] = useState(false);
+
+  const [endOpen, setEndOpen] = useState(false);
+
+  const engine = useMemo(() => getRecordingEngine(), []);
+  const [recState, setRecState] = useState<RecState>(engine.getSnapshot().state);
+  const isRecording = recState === "recording";
+
+  useEffect(() => {
+    const off = engine.subscribe("state", setRecState);
+    return () => off();
+  }, [engine]);
+
+  const selectTool = (t: Tool) => setTool(t);
+  const closePen = () => setTool("pencilOff");
+
+  const handleEndLectureClick = () => {
+    closePen();
+    setEndOpen(true);
+  };
+
+  const router = useRouter();
+  const { lectureId } = useParams<{ lectureId: string }>();
+
+  const handleConfirmEnd = async () => {
+    if (isRecording) {
+      try {
+        await engine.stop();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    setEndOpen(false);
+    onEndLecture?.();
+
+    router.push(ROUTES.teacherLectureDetail(lectureId));
+  };
+
+  const handleCancelEnd = () => setEndOpen(false);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.inner}>
+        <div className={styles.left}>
+          <DocumentSideButtonConnected />
+
+          <span ref={docBtnRef} className={styles.docBtnZ}>
+            <IconButton
+              ariaLabel="문서 불러오기"
+              onClick={() => setOpenDoc((v) => !v)}
+              icon={<FileText />}
+            />
+          </span>
+
+          <ToolPopover
+            open={openDoc}
+            anchorRef={docBtnRef}
+            onClose={() => setOpenDoc(false)}
+            align="start"
+            side="bottom"
+          >
+            <LectureNotePopover onPicked={() => setOpenDoc(false)} />
+          </ToolPopover>
+
+          <span className={styles.divider} />
+          <PenToolButtons value={tool} onChange={selectTool} />
+          <span className={styles.divider} />
+
+          <RecordingButton />
+
+          <ChatingButton
+            onPress={() => {
+              closePen();
+              onToggleChat?.();
+            }}
+          />
+        </div>
+
+        <FitContentButton onClick={handleEndLectureClick}>
+          강의 종료
+        </FitContentButton>
+      </div>
+
+      {endOpen && (
+        <ConfirmModal onConfirm={handleConfirmEnd} onClose={handleCancelEnd}>
+          {isRecording ? (
+            <>
+              지금 녹음이 진행 중입니다.
+              <br />
+              종료하면 현재까지의 녹음이 저장됩니다.
+              <br />
+              <br />
+              종료하시겠습니까?
+            </>
+          ) : (
+            <>강의를 종료하시겠습니까?</>
+          )}
+        </ConfirmModal>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
new file mode 100644
index 00000000..0c0d9150
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { createContext, useContext, useMemo, useState, useRef, useCallback } from "react";
+
+export type DocType = "pdf" | "pptx" | "unknown";
+type DocState = { url: string; type: DocType; name: string };
+
+export type Tool = "pencilOff" | "pen" | "eraser" | "highlighter";
+export type Panel = "files" | "chat";
+
+type PenOptions = { color: string; size: number };
+type HighlighterOptions = { color: string; size: number; alpha: number };
+type EraserOptions = { size: number };
+
+
+interface LiveState {
+  tool: Tool;
+  isDrawing: boolean;
+
+  panels: Record<Panel, boolean>;
+
+  pen: PenOptions;
+  highlighter: HighlighterOptions;
+  eraser: EraserOptions;
+  doc: DocState;
+
+  setDoc: (d: DocState) => void;
+  setTool: (t: Tool) => void;
+  togglePanel: (p: Panel) => void;
+
+  setPen: (patch: Partial<PenOptions>) => void;
+  setHighlighter: (patch: Partial<HighlighterOptions>) => void;
+  setEraser: (patch: Partial<EraserOptions>) => void;
+
+  getPageCanvas: (page: number, w: number, h: number, dpr: number) => HTMLCanvasElement;
+  getPageCanvasOrNull: (page: number) => HTMLCanvasElement | null;
+  clearPage: (page: number) => void;
+
+  resetDrawings: () => void;
+}
+
+const LiveCtx = createContext<LiveState | null>(null);
+
+export function LectureLiveProvider({ children }: { children: React.ReactNode }) {
+  const [tool, setToolState] = useState<Tool>("pencilOff");
+
+  const [panels, setPanels] = useState<Record<Panel, boolean>>({
+    files: true,
+    chat: true,
+  });
+
+  const [pen, setPenState] = useState<PenOptions>({
+    color: "#111111",
+    size: 3,
+  });
+
+  const [highlighter, setHighlighterState] = useState<HighlighterOptions>({
+    color: "#fcf1b7",
+    size: 12,
+    alpha: 0.02,
+  });
+
+  const [doc, setDocState] = useState<DocState>({
+    url: "/file/기말보고서_졸업을하자.pdf",
+    type: "pdf",
+    name: "기말보고서_졸업을하자.pdf",
+  });
+
+  const drawStoreRef = useRef<Map<number, HTMLCanvasElement>>(new Map());
+  const resetDrawings = useCallback(() => drawStoreRef.current.clear(), []);
+
+  const [eraser, setEraserState] = useState<EraserOptions>({ size: 12 });
+
+  const setDoc = (d: DocState) => {
+    setDocState(d);
+    resetDrawings();
+    window.dispatchEvent(new CustomEvent("live:doc-changed"));
+  };
+  
+
+  const getPageCanvas = useCallback((page: number, w: number, h: number, dpr: number) => {
+    let c = drawStoreRef.current.get(page);
+    if (!c) {
+      c = document.createElement("canvas");
+      c.width  = Math.max(1, Math.round(w * dpr));
+      c.height = Math.max(1, Math.round(h * dpr));
+      drawStoreRef.current.set(page, c);
+    }
+    return c;
+  }, []);
+
+  const getPageCanvasOrNull = useCallback((page: number) => {
+    return drawStoreRef.current.get(page) ?? null;
+  }, []);
+
+  const clearPage = useCallback((page: number) => {
+    const c = drawStoreRef.current.get(page);
+    if (c) c.getContext("2d")!.clearRect(0, 0, c.width, c.height);
+  }, []);
+
+  const setTool = (t: Tool) => setToolState(t);
+
+  const togglePanel = (p: Panel) =>
+    setPanels((prev) => ({ ...prev, [p]: !prev[p] }));
+
+  const setPen = (patch: Partial<PenOptions>) =>
+    setPenState((prev) => ({ ...prev, ...patch }));
+
+  const setHighlighter = (patch: Partial<HighlighterOptions>) =>
+    setHighlighterState((prev) => ({ ...prev, ...patch }));
+
+  const isDrawing =
+    tool === "pen" || tool === "eraser" || tool === "highlighter";
+
+  const setEraser = (patch: Partial<EraserOptions>) =>
+    setEraserState((prev) => ({ ...prev, ...patch }));
+
+  const value = useMemo<LiveState>(
+    () => ({
+      tool,
+      isDrawing,
+      panels,
+      pen,
+      highlighter,
+      eraser,
+      doc,
+      setDoc,
+      resetDrawings,
+      getPageCanvas,
+      getPageCanvasOrNull,
+      clearPage,
+      setTool,
+      togglePanel,
+      setPen,
+      setHighlighter,
+      setEraser,
+    }),
+    [tool, isDrawing, panels, pen, highlighter, eraser, doc, resetDrawings, getPageCanvas, getPageCanvasOrNull, clearPage]
+  );
+
+  return <LiveCtx.Provider value={value}>{children}</LiveCtx.Provider>;
+}
+
+export const useLive = () => {
+  const ctx = useContext(LiveCtx);
+  if (!ctx) throw new Error("useLive must be used within LectureLiveProvider");
+  return ctx;
+};
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss
new file mode 100644
index 00000000..44ccb2dd
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss
@@ -0,0 +1,54 @@
+@import "@/styles/variables";
+
+.grid {
+  --left-col: 200px;
+  --right-col: 360px;
+
+  --grid-gap: 10px;
+  --grid-pad: 10px;
+
+
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-columns: var(--left-col) 1fr var(--right-col);
+  gap: var(--grid-gap);
+  padding: var(--grid-pad);
+}
+
+
+.left, .center, .right {
+  border: 1px solid $color-neutral-7;
+  border-radius: 16px;
+  background: $color-white;
+
+
+  min-height: 0;
+  overflow: hidden;
+}
+
+
+.left { overflow-y: auto; }
+.right { overflow-y: auto; }
+
+
+.center {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-xs;
+  min-height: 0;
+  position: relative;
+  isolation: isolate;
+}
+
+
+@media (max-width: 767px) {
+  .grid {
+    --left-col: 0px;
+    --right-col: 0px;
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
new file mode 100644
index 00000000..e0aaa8c0
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "./LectureMainGrid.module.scss";
+import { useLive } from "../LectureLiveProvider";
+import ChatPanel from "../Chating/ChatingPanel/ChatingPanel";
+import dynamic from "next/dynamic";
+
+const PageThumbsSidebar = dynamic(
+  () => import("../LectureNote/PageThumbsSidebar/PageThumbsSidebar"),
+  { ssr: false, loading: () => null }
+);
+
+const DocumentViewer = dynamic(
+  () => import("../LectureNote/DocumentViewer/DocumentViewer"),
+  { ssr: false, loading: () => null }
+);
+
+const DrawingCanvasOverlay = dynamic(
+  () => import("../LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay"),
+  { ssr: false, loading: () => null }
+);
+
+export default function LectureMainGrid() {
+  const { panels, doc } = useLive();
+  const [count, setCount] = useState(1);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const resolvedType: "pdf" | "pptx" | undefined =
+  doc.type === "pdf" || doc.type === "pptx" ? doc.type : undefined;
+
+  useEffect(() => {
+    const resetOnDocChange = () => setCurrentPage(0);
+    window.addEventListener("live:doc-changed", resetOnDocChange);
+    return () => window.removeEventListener("live:doc-changed", resetOnDocChange);
+  }, []);
+
+  useEffect(() => {
+    const isTypingTarget = (t: EventTarget | null) => {
+      if (!(t instanceof HTMLElement)) return false;
+      const tag = t.tagName.toLowerCase();
+      return tag === "input" || tag === "textarea" || t.isContentEditable;
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      if (isTypingTarget(e.target)) return;
+
+      if (e.key === " " || e.key === "Enter" || e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        setCurrentPage((p) => Math.min(count - 1, p + 1));
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setCurrentPage((p) => Math.max(0, p - 1));
+      }
+    };
+
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [count, doc.url]);
+
+  return (
+    <main
+      className={styles.grid}
+      style={
+        {
+          "--left-col": panels.files ? "clamp(220px, 18vw, 320px)" : "0px",
+          "--right-col": panels.chat ? "min(28vw, 380px)" : "0px",
+        } as React.CSSProperties
+      }
+    >
+      <aside className={styles.left}>
+        <PageThumbsSidebar
+          fileUrl={doc.url}
+          typeOverride={resolvedType}
+          currentPage={currentPage}
+          onSelect={setCurrentPage}
+          onCountChange={setCount}
+        />
+      </aside>
+
+      <section className={styles.center} data-live-center>
+        <DocumentViewer
+          fileUrl={doc.url}
+          typeOverride={resolvedType}
+          currentPage={currentPage}
+          onChangePage={setCurrentPage}
+          onLoad={setCount}
+        />
+        <DrawingCanvasOverlay currentPage={currentPage} />
+      </section>
+
+      <aside className={styles.right}>
+        <ChatPanel />
+      </aside>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss
new file mode 100644
index 00000000..5a033a93
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss
@@ -0,0 +1,34 @@
+@import "@/styles/variables";
+
+.viewer {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+  min-height: 0;
+}
+
+.stage {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  padding: 1px;
+  isolation: isolate;
+}
+
+.docBox {
+  position: relative;
+  display: grid;
+  place-items: center;
+  z-index: 0;
+}
+
+.pptxFrame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  position: relative;
+  z-index: 0;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx
new file mode 100644
index 00000000..b8b79903
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import styles from "./DocumentViewer.module.scss";
+import { useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { DocType } from "../../LectureLiveProvider";
+import type { PageProps } from "react-pdf";
+
+
+const PDFDocument = dynamic(() => import("react-pdf").then(m => m.Document), { ssr: false });
+const PDFPage = dynamic(() => import("react-pdf").then(m => m.Page),     { ssr: false });
+
+export function getDocType(url: string): DocType {
+  const m = url.split("?")[0].toLowerCase();
+  if (m.endsWith(".pdf")) return "pdf";
+  if (m.endsWith(".pptx")) return "pptx";
+  return "unknown";
+}
+
+export function toAbsoluteUrl(pathOrUrl: string) {
+  if (/^https?:\/\//i.test(pathOrUrl)) return pathOrUrl;
+  if (typeof window === "undefined") return pathOrUrl;
+  return new URL(pathOrUrl, window.location.origin).toString();
+}
+
+export default function DocumentViewer({
+  fileUrl,
+  currentPage,
+  onChangePage,
+  onLoad,
+  typeOverride,
+}: {
+  fileUrl: string;
+  currentPage: number;
+  onChangePage: (i: number) => void;
+  onLoad?: (numPages: number) => void;
+  typeOverride?: DocType;
+}) {
+  const type = useMemo(
+    () => (typeOverride && typeOverride !== "unknown" ? typeOverride : getDocType(fileUrl)),
+    [fileUrl, typeOverride]
+  );
+
+  useEffect(() => {
+    if (type !== "pdf") return;
+    (async () => {
+      const m = await import("react-pdf");
+      m.pdfjs.GlobalWorkerOptions.workerSrc =
+        `https://unpkg.com/pdfjs-dist@${m.pdfjs.version}/build/pdf.worker.min.mjs`;
+    })();
+  }, [type]);
+
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [stageW, setStageW] = useState(0);
+  const [stageH, setStageH] = useState(0);
+  const [naturalW, setNaturalW] = useState(1);
+  const [naturalH, setNaturalH] = useState(1);
+
+  useEffect(() => {
+    if (!stageRef.current) return;
+    const el = stageRef.current;
+    const measure = () => {
+      const cs = getComputedStyle(el);
+      const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+      const padY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+      setStageW(el.clientWidth - padX);
+      setStageH(el.clientHeight - padY);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const SAFE_PAD = 2;
+  const scale =
+    type === "pdf" && naturalW && naturalH
+      ? Math.min((stageW - SAFE_PAD) / naturalW, (stageH - SAFE_PAD) / naturalH)
+      : 1;
+
+  const handleDocLoad = ({ numPages }: { numPages: number }) => {
+    if (type !== "pdf") return;
+    onLoad?.(numPages);
+    if (currentPage > numPages - 1) onChangePage(numPages - 1);
+  };
+
+const handlePageLoad: NonNullable<PageProps["onLoadSuccess"]> = (page) => {
+    if (type !== "pdf") return;
+    const vp = page.getViewport({ scale: 1 });
+    setNaturalW(vp.width);
+    setNaturalH(vp.height);
+  };
+
+  const docBoxStyle: React.CSSProperties =
+    type === "pdf"
+      ? { width: Math.max(1, naturalW * scale), height: Math.max(1, naturalH * scale) }
+      : { width: "100%", height: "100%" };
+
+  return (
+    <div className={styles.viewer}>
+      <div ref={stageRef} className={styles.stage}>
+        <div className={styles.docBox} data-doc-box style={docBoxStyle}>
+          {type === "pdf" && (
+            <PDFDocument file={fileUrl} onLoadSuccess={handleDocLoad} loading="로딩 중…">
+              <PDFPage
+                pageNumber={currentPage + 1}
+                scale={scale}
+                renderTextLayer={false}
+                renderAnnotationLayer={false}
+                onLoadSuccess={handlePageLoad}
+              />
+            </PDFDocument>
+          )}
+
+          {type === "pptx" && (
+            <iframe
+              title="PPTX Viewer"
+              className={styles.pptxFrame}
+              src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+                toAbsoluteUrl(fileUrl)
+              )}`}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.module.scss
new file mode 100644
index 00000000..38e1dffa
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.module.scss
@@ -0,0 +1,14 @@
+.overlay {
+    position: absolute;
+    inset: 0;
+  }
+  
+.eraserCursor {
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.10);
+    border: 1px solid rgba(0,0,0,0.45);
+    transform: translate(-50%, -50%);
+    z-index: 1210;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.tsx
new file mode 100644
index 00000000..15dd6180
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DrawingCanvasOverlay/DrawingCanvasOverlay.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useLive } from "../../LectureLiveProvider";
+import styles from "./DrawingCanvasOverlay.module.scss";
+
+export default function DrawingCanvasOverlay({
+  selector = "[data-doc-box]",
+  currentPage,
+}: {
+  selector?: string;
+  currentPage: number;
+}) {
+  const { tool, pen, highlighter, eraser, getPageCanvas, getPageCanvasOrNull } = useLive();
+
+  const [host, setHost] = useState<HTMLElement | null>(null);
+  const viewRef = useRef<HTMLCanvasElement>(null);
+  const cursorRef = useRef<HTMLDivElement>(null);
+
+  const pageRef = useRef(currentPage);
+  useEffect(() => { pageRef.current = currentPage; }, [currentPage]);
+
+  useEffect(() => {
+    const find = () => document.querySelector<HTMLElement>(selector);
+    let el = find();
+    if (el) { setHost(el); return; }
+    const mo = new MutationObserver(() => {
+      el = find();
+      if (el) { setHost(el); mo.disconnect(); }
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [selector]);
+
+  const syncFromBacking = () => {
+    if (!host || !viewRef.current) return;
+    const view = viewRef.current;
+    const rect = host.getBoundingClientRect();
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    getPageCanvas(pageRef.current, rect.width, rect.height, dpr);
+
+
+    view.width = Math.max(1, Math.round(rect.width * dpr));
+    view.height = Math.max(1, Math.round(rect.height * dpr));
+    view.style.width = `${rect.width}px`;
+    view.style.height = `${rect.height}px`;
+
+    const vctx = view.getContext("2d")!;
+    vctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    vctx.clearRect(0, 0, rect.width, rect.height);
+
+    const back = getPageCanvasOrNull(pageRef.current);
+    if (back) {
+      vctx.drawImage(back, 0, 0, back.width, back.height, 0, 0, rect.width, rect.height);
+    }
+  };
+
+  useEffect(() => {
+    if (!host) return;
+    const resize = () => syncFromBacking();
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    window.addEventListener("resize", resize);
+    window.addEventListener("scroll", resize, true);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", resize);
+      window.removeEventListener("scroll", resize, true);
+    };
+  }, [host]);
+
+  useEffect(() => { syncFromBacking(); }, [currentPage, host]);
+
+  useEffect(() => {
+    if (!cursorRef.current) return;
+    cursorRef.current.style.display = tool === "eraser" ? "block" : "none";
+  }, [tool]);
+
+useEffect(() => {
+  const onClear = () => {
+    const back = getPageCanvasOrNull(pageRef.current);
+    if (back) {
+      const bctx = back.getContext("2d")!;
+  
+      bctx.setTransform(1, 0, 0, 1, 0, 0);
+      bctx.clearRect(0, 0, back.width, back.height);
+    }
+
+    if (viewRef.current) {
+      const v = viewRef.current;
+      const vctx = v.getContext("2d")!;
+      vctx.setTransform(1, 0, 0, 1, 0, 0);
+      vctx.clearRect(0, 0, v.width, v.height);
+    }
+
+    syncFromBacking();
+    requestAnimationFrame(syncFromBacking);
+  };
+
+  window.addEventListener("live:clear-page", onClear);
+  return () => window.removeEventListener("live:clear-page", onClear);
+}, [getPageCanvasOrNull]);
+
+  useEffect(() => {
+    if (!host || !viewRef.current || !cursorRef.current) return;
+
+    const view = viewRef.current;
+    const cursor = cursorRef.current;
+    let drawing = false;
+
+    const getLocal = (e: PointerEvent) => {
+      const r = view.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top, w: r.width, h: r.height };
+    };
+    const getScale = () => {
+      const back = getPageCanvasOrNull(pageRef.current);
+      const vw = view.getBoundingClientRect().width || 1;
+      return back ? back.width / vw : Math.max(1, window.devicePixelRatio || 1);
+    };
+
+    const showCursor = (x: number, y: number) => {
+      if (tool !== "eraser") { cursor.style.display = "none"; return; }
+      const d = Math.max(2, eraser.size);
+      cursor.style.width = `${d}px`;
+      cursor.style.height = `${d}px`;
+      cursor.style.left = `${x}px`;
+      cursor.style.top  = `${y}px`;
+      cursor.style.display = "block";
+    };
+    const hideCursor = () => { cursor.style.display = "none"; };
+
+    const down = (e: PointerEvent) => {
+      if (tool !== "pen" && tool !== "eraser" && tool !== "highlighter") return;
+      e.preventDefault();
+      drawing = true;
+      view.setPointerCapture?.(e.pointerId);
+    
+      const rect = host.getBoundingClientRect();
+      const dpr = Math.max(1, window.devicePixelRatio || 1);
+      const back = getPageCanvas(pageRef.current, rect.width, rect.height, dpr);
+      const bctx = back.getContext("2d")!;
+    
+      const { x, y, w, h } = getLocal(e);
+      const bx = (x / w) * back.width;
+      const by = (y / h) * back.height;
+    
+      const isHL = tool === "highlighter";
+      const basePx = isHL ? highlighter.size : (tool === "eraser" ? eraser.size : pen.size);
+    
+      bctx.lineCap = "round";
+      bctx.lineJoin = "round";
+      bctx.globalCompositeOperation =
+        tool === "eraser" ? "destination-out" :
+        isHL ? "multiply" : "source-over";
+    
+      bctx.globalAlpha = isHL ? (highlighter.alpha ?? 0.02) : 1;
+    
+      bctx.strokeStyle = isHL ? highlighter.color : pen.color;
+    
+      bctx.lineWidth = Math.max(1, basePx * getScale());
+    
+      bctx.beginPath();
+      bctx.moveTo(bx, by);
+    
+      showCursor(x, y);
+    };
+    
+    const move = (e: PointerEvent) => {
+      const { x, y, w, h } = getLocal(e);
+      showCursor(x, y);
+      if (!drawing) return;
+    
+      const back = getPageCanvasOrNull(pageRef.current)!;
+      const bctx = back.getContext("2d")!;
+      const bx = (x / w) * back.width;
+      const by = (y / h) * back.height;
+    
+      const isHL = tool === "highlighter";
+      const basePx = isHL ? highlighter.size : (tool === "eraser" ? eraser.size : pen.size);
+    
+      bctx.lineCap = "round";
+      bctx.lineJoin = "round";
+      bctx.globalCompositeOperation =
+        tool === "eraser" ? "destination-out" :
+        isHL ? "multiply" : "source-over";
+    
+      bctx.globalAlpha = isHL ? (highlighter.alpha ?? 0.02) : 1;
+      bctx.strokeStyle = isHL ? highlighter.color : pen.color;
+    
+      bctx.lineWidth = Math.max(1, basePx * getScale());
+    
+      bctx.lineTo(bx, by);
+      bctx.stroke();
+    
+      syncFromBacking();
+    };
+
+    const end = (e?: PointerEvent) => {
+      if (!drawing) { hideCursor(); return; }
+      drawing = false;
+      const back = getPageCanvasOrNull(pageRef.current);
+      back?.getContext("2d")?.closePath();
+      if (e) { try { view.releasePointerCapture?.(e.pointerId); } catch {} }
+      syncFromBacking();
+      hideCursor();
+    };
+
+    const enter = (e: PointerEvent) => { const { x, y } = getLocal(e); showCursor(x, y); };
+    
+    view.addEventListener("pointerdown", down);
+    view.addEventListener("pointermove", move);
+    view.addEventListener("pointerup", end);
+    view.addEventListener("pointerleave", end);
+    view.addEventListener("pointercancel", end);
+    view.addEventListener("pointerenter", enter);
+
+    return () => {
+      view.removeEventListener("pointerdown", down);
+      view.removeEventListener("pointermove", move);
+      view.removeEventListener("pointerup", end);
+      view.removeEventListener("pointerleave", end);
+      view.removeEventListener("pointercancel", end);
+      view.removeEventListener("pointerenter", enter);
+    };
+  }, [
+    host,
+    tool,
+    pen.color, pen.size,
+    highlighter.color, highlighter.size, highlighter.alpha,
+    eraser.size,
+    getPageCanvas, getPageCanvasOrNull
+  ]);
+
+  if (!host) return null;
+
+  return createPortal(
+    <>
+      <canvas
+        ref={viewRef}
+        className={styles.overlay}
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: (tool === "pen" || tool === "eraser" || tool === "highlighter") ? "auto" : "none",
+          touchAction: "none",
+          zIndex: 1200,
+        }}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+      <div ref={cursorRef} className={styles.eraserCursor} />
+    </>,
+    host
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss
new file mode 100644
index 00000000..179c3f21
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss
@@ -0,0 +1,85 @@
+@import "@/styles/variables";
+
+.wrap {
+  min-width: 260px;
+  padding: 8px 10px;
+}
+
+.list {
+  display: grid;
+  gap: 6px;
+  padding: 8px 10px;
+  background: transparent;
+  border-radius: $radius-xl;
+}
+
+.row {
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  outline: none;
+
+  font: inherit;
+  color: inherit;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 2px;
+  padding: 8px 10px;
+
+  background: transparent;
+  border-radius: 12px;
+  cursor: pointer;
+
+  &:hover { background: #f7fafc; }
+  & + & { border-top: none; }
+}
+
+.active {
+  outline: none;
+  box-shadow: 0 0 0 2px $color-blue inset;
+  background: #f7fafc;
+}
+
+.footer {
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+}
+
+.divider {
+    height: 1px;
+    background: rgba(0,0,0,0.06);
+    margin: 5px;
+  }
+
+.uploadBtn {
+  width: 100%;
+  height: 40px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  outline: none;
+
+  background: transparent;
+  color: $color-neutral-4;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  font: inherit;
+}
+
+.row :global(.fileDisplayContainer) { gap: 8px; }
+.row :global(.fileIconContainer) {
+  width: 28px;
+  height: 28px;
+  background: transparent !important;
+  border: none !important;
+}
+.row :global(.fileIconContainer) .icon { width: 18px; height: 18px; }
+.row :global(.fileName) {
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
new file mode 100644
index 00000000..3d41613b
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./LectureNotePopover.module.scss";
+import FileDisplay from "@/components/FileDisplay/FileDisplay";
+import { useLive } from "../../LectureLiveProvider";
+
+type Item = { name: string; url: string; type: "pdf" | "pptx" };
+
+export default function LectureNotePopover({
+  onPicked,
+}: {
+  onPicked?: () => void;
+}) {
+  const { setDoc, doc } = useLive();
+
+  const initialItems = useMemo<Item[]>(
+    () => [
+      { name: "2024-DA-2-2-Probability.pdf", url: "/file/2024-DA-2-2-Probability.pdf", type: "pdf" },
+      { name: "기말보고서_졸업을하자.pdf", url: "/file/기말보고서_졸업을하자.pdf", type: "pdf" },
+    ],
+    []
+  );
+
+  const [items, setItems] = useState<Item[]>(initialItems);
+
+  const pick = (it: Item) => {
+    setDoc({ url: it.url, type: it.type, name: it.name });
+    window.dispatchEvent(new Event("live:doc-changed"));
+    onPicked?.();
+  };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const objUrlsRef = useRef<string[]>([]);
+
+  const onUploadClick = () => inputRef.current?.click();
+  const onUploadChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const ext = f.name.toLowerCase().endsWith(".pptx") ? "pptx" : "pdf";
+    const url = URL.createObjectURL(f);
+    objUrlsRef.current.push(url);
+    const it: Item = { name: f.name, url, type: ext as "pdf" | "pptx" };
+    setItems((prev) => [it, ...prev]);
+    pick(it);
+    e.currentTarget.value = "";
+  };
+
+  useEffect(() => {
+    return () => objUrlsRef.current.forEach((u) => URL.revokeObjectURL(u));
+  }, []);
+
+  return (
+    <div className={styles.pop}>
+      <div className={styles.list}>
+        {items.map((it) => (
+          <div key={it.url}>
+            <button
+              type="button"
+              onClick={() => pick(it)}
+              className={`${styles.row} ${doc?.url === it.url ? styles.active : ""}`}
+              aria-label={`${it.name} 열기`}
+            >
+                
+              <FileDisplay fileName={it.name} />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.divider} />
+      <button type="button" className={styles.uploadBtn} onClick={onUploadClick}>
+        강의자료 업로드
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".pdf,.pptx"
+        hidden
+        onChange={onUploadChange}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.module.scss
new file mode 100644
index 00000000..cca7a8c5
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.module.scss
@@ -0,0 +1,72 @@
+@import "@/styles/variables";
+
+.wrap {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.list {
+  overflow: auto;
+  padding: $spacing-sm $spacing-xs $spacing-sm $spacing-sm;
+  display: grid;
+
+  row-gap: $spacing-sm;
+  column-gap: 0;
+
+  justify-items: center;
+
+  min-height: 0;
+  scrollbar-gutter: stable;
+}
+
+.docAsContents {
+  display: contents;
+}
+
+.thumb {
+  display: block;
+  width: 90%;
+  margin-inline: auto;
+
+  border: 1px solid $color-neutral-7;
+  border-radius: 10px;
+  background: $color-white;
+  padding: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color $transition-fast, box-shadow $transition-fast;
+
+  &:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
+}
+
+.thumb.active {
+  outline: 2px solid $color-blue;
+  outline-offset: 1px;
+}
+
+.thumb canvas { 
+  width: 100% !important; 
+  height: auto !important; 
+  display: block; 
+}
+
+
+.pageIndex {
+  font-size: $font-size-xs;
+  color: $color-neutral-5;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  line-height: 1;
+}
+
+.pagePreview {
+  aspect-ratio: 3 / 4;
+  width: 100%;
+  background: #f5f7fb;
+  border: 1px dashed $color-neutral-7;
+  display: grid;
+  place-items: center;
+}
+
+.pageLabel { display: none; }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
new file mode 100644
index 00000000..3465207f
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import styles from "./PageThumbsSidebar.module.scss";
+import { Document, Page, pdfjs } from "react-pdf";
+import JSZip from "jszip";
+import { useEffect, useState } from "react";
+import { getDocType } from "../DocumentViewer/DocumentViewer";
+
+pdfjs.GlobalWorkerOptions.workerSrc =
+  `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+export default function PageThumbsSidebar({
+  fileUrl,
+  currentPage,
+  onSelect,
+  thumbWidth = 160,
+  onCountChange,
+  typeOverride,
+}: {
+  fileUrl: string;
+  currentPage: number;
+  onSelect: (index: number) => void;
+  thumbWidth?: number;
+  onCountChange?: (count: number) => void;
+  typeOverride?: "pdf" | "pptx";
+}) {
+  const type = typeOverride ?? getDocType(fileUrl);
+
+  const [pdfCount, setPdfCount] = useState<number>(0);
+  const [pptxCount, setPptxCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (type !== "pptx") return;
+    (async () => {
+      const res = await fetch(fileUrl);
+      const blob = await res.blob();
+      const zip = await JSZip.loadAsync(blob);
+      const count = Object.keys(zip.files).filter((k) =>
+        /^ppt\/slides\/slide\d+\.xml$/.test(k)
+      ).length;
+      setPptxCount(count);
+      onCountChange?.(count);
+    })().catch(console.error);
+  }, [fileUrl, type, onCountChange]);
+
+  if (type === "pdf") {
+    return (
+      <div className={styles.wrap}>
+        <div className={styles.list}>
+          <Document
+            file={fileUrl}
+            onLoadSuccess={({ numPages }) => {
+              setPdfCount(numPages);
+              onCountChange?.(numPages);
+            }}
+            loading={null}
+            className={styles.docAsContents}
+          >
+            {Array.from({ length: pdfCount }, (_, i) => (
+              <button
+                key={i}
+                className={`${styles.thumb} ${i === currentPage ? styles.active : ""}`}
+                onClick={() => onSelect(i)}
+                aria-label={`페이지 ${i + 1}`}
+              >
+                <Page
+                  pageNumber={i + 1}
+                  width={thumbWidth}
+                  renderTextLayer={false}
+                  renderAnnotationLayer={false}
+                />
+                <div className={styles.pageIndex}>p.{i + 1}</div>
+              </button>
+            ))}
+          </Document>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === "pptx") {
+    return (
+      <div className={styles.wrap}>
+        <div className={styles.list}>
+          {Array.from({ length: pptxCount }, (_, i) => (
+            <button
+              key={i}
+              className={`${styles.thumb} ${i === currentPage ? styles.active : ""}`}
+              onClick={() => onSelect(i)}
+              aria-label={`슬라이드 ${i + 1}`}
+            >
+              <div className={styles.pagePreview} />
+              <div className={styles.pageIndex}>p.{i + 1}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.module.scss
new file mode 100644
index 00000000..c2bd4853
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.module.scss
@@ -0,0 +1,55 @@
+@import "@/styles/variables";
+
+.wrap {
+  display: grid;
+  gap: $spacing-sm;
+  justify-items: center;
+  min-width: 200px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+}
+
+.circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid $color-neutral-7;
+  background: $color-white;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: transform $transition-fast, box-shadow $transition-fast;
+
+  &:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
+}
+
+.circle.active {
+  outline: 2px solid $color-blue;
+  outline-offset: 0;
+  border-color: transparent;
+  background: $color-white;
+}
+
+.dot {
+  background: $color-neutral-6;
+  border-radius: 999px;
+  display: block;
+}
+
+.clearBtn {
+  padding: 8px 12px;
+  border: 1px solid #ffd3d6;
+  background: #fff5f5;
+  color: #d92c2c;
+  border-radius: 8px;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  transition: background-color $transition-fast;
+
+  &:hover { background: #ffe8e9; }
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.tsx
new file mode 100644
index 00000000..b36370de
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/EraserPopover/EraserPopover.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import styles from "./EraserPopover.module.scss";
+
+export default function EraserPopover({
+  width,
+  onChangeWidth,
+  onClearPage,
+}: {
+  width: number;
+  onChangeWidth: (w: number) => void;
+  onClearPage: () => void;
+}) {
+  const sizes = [12, 16, 24, 30, 38];
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.row}>
+        {sizes.map((s) => (
+          <button
+            key={s}
+            type="button"
+            className={`${styles.circle} ${width === s ? styles.active : ""}`}
+            aria-label={`지우개 크기 ${s}`}
+            onClick={() => onChangeWidth(s)}
+          >
+            <span
+              className={styles.dot}
+              style={{ width: s, height: s }}
+            />
+          </button>
+        ))}
+      </div>
+
+      <button type="button" className={styles.clearBtn} onClick={onClearPage}>
+        페이지 전체 삭제
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopover.module.scss
new file mode 100644
index 00000000..1c9cf3de
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopover.module.scss
@@ -0,0 +1,65 @@
+@import "@/styles/variables";
+
+.wrap {
+  display: grid;
+  gap: $spacing-md;
+  justify-items: center;
+  min-width: 200px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-md;
+}
+
+
+.swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid $color-neutral-7;
+  cursor: pointer;
+  transition: transform $transition-fast, box-shadow $transition-fast;
+  will-change: box-shadow, transform;
+
+  &:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.10); }
+
+  &.active,
+  &.active:hover {
+      box-shadow:
+      0 0 0 3px #fff,
+      0 0 0 6px var(--ring-color, $color-blue);
+      transform: none;
+   }
+   
+}
+
+
+.sizeBtn {
+  width: 40px;
+  height: 32px;
+  border-radius: 10px;
+  border: 1px solid $color-neutral-7;
+  background: $color-white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover { background: #f8fafc; }
+}
+
+.sizePreview {
+  width: 22px;
+  border-radius: 999px;
+  background: $color-neutral-6;
+  display: inline-block;
+}
+
+.sizeActive {
+  outline: 3px solid #3B82F6;
+  outline-offset: 0;
+  border-color: transparent;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopver.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopver.tsx
new file mode 100644
index 00000000..e42da4fe
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/HighlighterPopover/HighlighterPopver.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import styles from "./HighlighterPopover.module.scss";
+
+export default function HighlighterPopover({
+  color,
+  size,
+  onChangeColor,
+  onChangeSize,
+}: {
+  color: string;
+  size: number;
+  onChangeColor: (c: string) => void;
+  onChangeSize: (w: number) => void;
+}) {
+  
+  const colors = ["#fcf1b7", "#dde6f9", "#d7f9e6", "#ffd9d9", "#f8d5dc"];
+  const sizes = [8, 12, 16, 20, 24];
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.row}>
+        {colors.map((c) => (
+          <button
+            key={c}
+            type="button"
+            className={`${styles.swatch} ${color === c ? styles.active : ""}`}
+            style={{ backgroundColor: c, ["--ring-color"]: "#3B82F6",
+            } as React.CSSProperties
+          }
+            onClick={() => onChangeColor(c)}
+            aria-label={`형광 색상 ${c}`}
+          />
+        ))}
+      </div>
+
+      <div className={styles.row}>
+        {sizes.map((w) => (
+          <button
+            key={w}
+            type="button"
+            className={`${styles.sizeBtn} ${size === w ? styles.sizeActive : ""}`}
+            onClick={() => onChangeSize(w)}
+            aria-label={`형광 굵기 ${w}`}
+          >
+            <span className={styles.sizePreview} style={{ height: w }} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.module.scss
new file mode 100644
index 00000000..5778dc3b
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.module.scss
@@ -0,0 +1,64 @@
+@import "@/styles/variables";
+
+.wrap {
+    display: grid;
+    gap: $spacing-md;
+    justify-items: center;
+    min-width: 200px;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-md;
+}
+
+
+.swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 1px solid $color-neutral-7;
+    cursor: pointer;
+    transition: transform $transition-fast, box-shadow $transition-fast;
+    outline: none;
+    will-change: box-shadow, transform;
+
+    &:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.10); }
+
+    &.active,
+    &.active:hover {
+        box-shadow:
+        0 0 0 3px #fff,
+        0 0 0 6px var(--ring-color, $color-blue);
+        transform: none;
+     }
+}
+
+
+.sizeBtn {
+    width: 40px;
+    height: 32px;
+    border-radius: 10px;
+    border: 1px solid $color-neutral-7;
+    background: $color-white;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform $transition-fast, box-shadow $transition-fast;
+}
+
+.sizeBtn.active {
+    border: 3px solid #3B82F6;
+    box-shadow: none;
+    outline: none;
+  }
+
+.sizePreview {
+    width: 20px;
+    border-radius: 999px;
+    background: $color-neutral-6;
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.tsx
new file mode 100644
index 00000000..63702448
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenPopover/PenPopover.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import styles from "./PenPopover.module.scss";
+
+export default function PenPopover({
+  color,
+  width,
+  onChangeColor,
+  onChangeWidth,
+}: {
+  color: string;
+  width: number;
+  onChangeColor: (c: string) => void;
+  onChangeWidth: (w: number) => void;
+}) {
+  const colors = ["#111111", "#EB5757", "#1F75FF", "#2ECC71", "#F2C94C"];
+  const widths = [2, 3, 5, 8, 12];
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.row}>
+        {colors.map((c) => (
+          <button
+            key={c}
+            type="button"
+            className={`${styles.swatch} ${color === c ? styles.active : ""}`}
+            style={{ backgroundColor: c, ["--ring-color"]: "#3B82F6",
+            } as React.CSSProperties
+           }
+            onClick={() => onChangeColor(c)}
+            aria-label={`색상 ${c}`}
+          />
+        ))}
+      </div>
+
+      <div className={styles.row}>
+        {widths.map((w) => (
+          <button
+            key={w}
+            type="button"
+            className={`${styles.sizeBtn} ${width === w ? styles.active : ""}`}
+            onClick={() => onChangeWidth(w)}
+            aria-label={`굵기 ${w}`}
+          >
+            <span className={styles.sizePreview} style={{ height: w }} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.module.scss
new file mode 100644
index 00000000..262e5da2
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.module.scss
@@ -0,0 +1,85 @@
+@import "@/styles/variables";
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+
+  svg[data-active="true"] { stroke: $color-blue; }
+}
+
+.anchorWrap { 
+    display: inline-flex; 
+    z-index: 2000;
+    display: inline-flex;
+}
+
+.palette { 
+    display: grid; 
+    gap: $spacing-sm; 
+    min-width: 180px; 
+}
+
+.sectionLabel {
+  font-size: $font-size-xs;
+  color: $color-neutral-6;
+}
+
+.colors {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.dot {
+  width: 18px; 
+  height: 18px; 
+  border-radius: 50%;
+  border: 1px 
+  solid $color-neutral-7; 
+  cursor: pointer; 
+  padding: 0;
+}
+
+.dotSelected { 
+    outline: 2px 
+    solid $color-blue; 
+    outline-offset: 2px; 
+}
+
+.sizes {
+  display: flex; gap: $spacing-sm;
+}
+
+.sizeBtn {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  border: 1px solid $color-neutral-7; border-radius: 6px;
+  background: $color-white; cursor: pointer; padding: 0 6px;
+}
+
+.sizeSelected { 
+    border-color: $color-blue; 
+}
+
+.sizePreview {
+  width: 100%; 
+  background: $color-neutral-8; 
+  display: block; 
+  border-radius: 999px;
+}
+
+.toolWrap {
+  display: inline-flex;
+  border-radius: 10px;
+  transition: background .15s ease, box-shadow .15s ease;
+}
+.toolWrap[data-active="1"] {
+  background: rgba($color-blue, .12);
+  box-shadow: inset 0 0 0 1px rgba($color-blue, .25);
+}
+
+.anchorWrap {
+  display: inline-flex;
+  position: relative;
+  z-index: 2000;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.tsx
new file mode 100644
index 00000000..f990c4b8
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/PenTool/PenToolButtons/PenToolButtons.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { Pencil, Eraser, Highlighter, PencilOff } from "lucide-react";
+import styles from "./PenToolButtons.module.scss";
+import ToolPopover from "../../ToolPopover/ToolPopover";
+import PenPopover from "../PenPopover/PenPopover";
+import EraserPopover from "../EraserPopover/EraserPopover";
+import HighlighterPopover from "../HighlighterPopover/HighlighterPopver";
+import { useLive } from "../../LectureLiveProvider";
+
+export type Tool = "pen" | "eraser" | "highlighter" | "pencilOff";
+
+export default function PenToolButtons({
+  value,
+  onChange,
+  className,
+  disabled,
+}: {
+  value: Tool;
+  onChange: (tool: Tool) => void;
+  className?: string;
+  disabled?: boolean;
+}) {
+  const { pen, setPen, eraser, setEraser, highlighter, setHighlighter } = useLive();
+
+  const penAnchorRef = useRef<HTMLSpanElement>(null);
+  const eraserAnchorRef = useRef<HTMLSpanElement>(null);
+  const highlighterAnchorRef = useRef<HTMLSpanElement>(null);
+
+  const [openPen, setOpenPen] = useState(false);
+  const [openEraser, setOpenEraser] = useState(false);
+  const [openHighlighter, setOpenHighlighter] = useState(false);
+
+  const closeAll = () => {
+    setOpenPen(false);
+    setOpenEraser(false);
+    setOpenHighlighter(false);
+  };
+
+  const choose = (t: Tool) => {
+    onChange(t);
+    if (t !== "pen") setOpenPen(false);
+    if (t !== "eraser") setOpenEraser(false);
+    if (t !== "highlighter") setOpenHighlighter(false);
+  };
+
+  const onPenClick = useCallback(() => {
+    setOpenEraser(false);
+    setOpenHighlighter(false);
+    setOpenPen((v) => !v);
+    onChange("pen");
+  }, [onChange]);
+
+  const onEraserClick = useCallback(() => {
+    setOpenPen(false);
+    setOpenHighlighter(false);
+    setOpenEraser((v) => !v);
+    onChange("eraser");
+  }, [onChange]);
+
+  const onHighlighterClick = useCallback(() => {
+    setOpenPen(false);
+    setOpenEraser(false);
+    setOpenHighlighter((v) => !v);
+    onChange("highlighter");
+  }, [onChange]);
+
+  return (
+    <div className={`${styles.group} ${className ?? ""}`}>
+      <span className={styles.toolWrap} data-active={value === "pen" ? "1" : "0"}>
+        <span ref={penAnchorRef} className={styles.anchorWrap}>
+          <IconButton
+            ariaLabel="펜"
+            onClick={onPenClick}
+            icon={
+              <Pencil
+                data-active={value === "pen"}
+                style={{ stroke: pen.color, color: pen.color }}
+              />
+            }
+            disabled={disabled}
+          />
+        </span>
+      </span>
+
+      <ToolPopover open={openPen} anchorRef={penAnchorRef} onClose={() => setOpenPen(false)}>
+        <PenPopover
+          color={pen.color}
+          width={pen.size}
+          onChangeColor={(c) => setPen({ color: c })}
+          onChangeWidth={(w) => setPen({ size: w })}
+        />
+      </ToolPopover>
+
+      <span className={styles.toolWrap} data-active={value === "eraser" ? "1" : "0"}>
+        <span ref={eraserAnchorRef} className={styles.anchorWrap}>
+          <IconButton
+            ariaLabel="지우개"
+            onClick={onEraserClick}
+            icon={<Eraser data-active={value === "eraser"} />}
+            disabled={disabled}
+          />
+        </span>
+      </span>
+
+      <ToolPopover open={openEraser} anchorRef={eraserAnchorRef} onClose={() => setOpenEraser(false)}>
+        <EraserPopover
+          width={eraser.size}
+          onChangeWidth={(w) => setEraser({ size: w })}
+          onClearPage={() => {
+            window.dispatchEvent(new CustomEvent("live:clear-page"));
+            setOpenEraser(false);
+          }}
+        />
+      </ToolPopover>
+
+      <span className={styles.toolWrap} data-active={value === "highlighter" ? "1" : "0"}>
+        <span ref={highlighterAnchorRef} className={styles.anchorWrap}>
+          <IconButton
+            ariaLabel="형광펜"
+            onClick={onHighlighterClick}
+            icon={
+              <Highlighter
+                data-active={value === "highlighter"}
+                style={{ stroke: highlighter.color, color: highlighter.color }}
+              />
+            }
+            disabled={disabled}
+          />
+        </span>
+      </span>
+
+      <ToolPopover
+        open={openHighlighter}
+        anchorRef={highlighterAnchorRef}
+        onClose={() => setOpenHighlighter(false)}
+      >
+        <HighlighterPopover
+          color={highlighter.color}
+          size={highlighter.size}
+          onChangeColor={(c) => setHighlighter({ color: c })}
+          onChangeSize={(w) => setHighlighter({ size: w })}
+        />
+      </ToolPopover>
+
+      <span className={styles.toolWrap} data-active={value === "pencilOff" ? "1" : "0"}>
+        <IconButton
+          ariaLabel="펜 끄기"
+          onClick={() => {
+            closeAll();
+            choose("pencilOff");
+          }}
+          icon={<PencilOff data-active={value === "pencilOff"} />}
+          disabled={disabled}
+        />
+      </span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.module.scss
new file mode 100644
index 00000000..3a564cf1
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.module.scss
@@ -0,0 +1,17 @@
+@import "@/styles/variables";
+
+.wrap {
+  position: relative;
+  z-index: 2000;
+}
+
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+  background: #ef4444;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px white;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
new file mode 100644
index 00000000..dfaea1e8
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useRef, useState, useMemo } from "react";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import ToolPopover from "../../ToolPopover/ToolPopover";
+import RecordingPopover from "../RecordingPopover/RecordingPopover";
+import ConfirmModal from "@/components/Modal/ConfirmModal/ConfirmModal";
+import { AudioLines } from "lucide-react";
+import styles from "./RecordingButton.module.scss";
+import { getRecordingEngine } from "../recordingEngine";
+
+export default function RecordingButton() {
+  const engine = useMemo(() => getRecordingEngine(), []);
+  const anchorRef = useRef<HTMLSpanElement>(null);
+
+  const [open, setOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+
+  const [isRecording, setIsRecording] = useState(
+    engine.getSnapshot().state === "recording"
+  );
+
+  useEffect(() => {
+    const off = engine.subscribe("state", (s) => setIsRecording(s === "recording"));
+    return () => off();
+  }, [engine]);
+
+  const handleRequestConfirmStop = () => {
+    setOpen(false);
+    setConfirmOpen(true);
+  };
+
+  const confirmStopAndSave = async () => {
+    await engine.stop();
+    setConfirmOpen(false);
+    setOpen(true);
+  };
+
+  const cancelConfirm = () => {
+    setConfirmOpen(false);
+  };
+
+  return (
+    <span ref={anchorRef} className={styles.wrap}>
+      <IconButton
+        ariaLabel="녹음"
+        onClick={() => setOpen((v) => !v)}
+        icon={<AudioLines data-active={open} />}
+      />
+      {isRecording && !open && <i className={styles.badge} aria-hidden />}
+
+      <ToolPopover
+        open={open}
+        anchorRef={anchorRef}
+        onClose={() => setOpen(false)}
+        align="start"
+        side="bottom"
+      >
+        <RecordingPopover
+          onRequestConfirmStop={handleRequestConfirmStop}
+        />
+      </ToolPopover>
+
+      {confirmOpen && (
+        <ConfirmModal
+          onConfirm={confirmStopAndSave}
+          onClose={cancelConfirm}
+        >
+          확인 버튼을 누르면
+          <br />
+          이 강의의 녹음은 저장됩니다.
+          <br />
+          <br />
+          종료하시겠습니까?
+        </ConfirmModal>
+      )}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.module.scss
new file mode 100644
index 00000000..947adf21
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.module.scss
@@ -0,0 +1,47 @@
+@import "@/styles/variables";
+
+.wrap {
+  min-width: 180px;
+  display: grid;
+  gap: 6px;
+  padding: 6px 8px;
+}
+
+.timer {
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  font-size: 18px;
+  font-weight: $font-weight-bold;
+  text-align: center;
+  color: $color-neutral-1;
+}
+
+
+.controls {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+  justify-items: center;
+
+  :global(button) {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+  }
+
+  :global(button:not(:disabled):hover),
+  :global(button:not(:disabled):active) {
+    background: #f7fafc;
+  }
+
+  :global(button:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.stateText {
+  text-align: center;
+  color: $color-neutral-4;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.tsx
new file mode 100644
index 00000000..b68a3f6c
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingPopover/RecordingPopover.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import styles from "./RecordingPopover.module.scss";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { Mic, Square } from "lucide-react";
+import { getRecordingEngine, type RecState } from "../recordingEngine";
+
+export default function RecordingPopover({
+  defaultState = "idle",
+  onStart,
+  onStop,
+  onRequestConfirmStop,
+}: {
+  defaultState?: RecState;
+  onStart?: () => void;
+  onStop?: () => void;
+  onRequestConfirmStop?: () => void;
+}) {
+  const engine = useMemo(() => getRecordingEngine(), []);
+
+  const snap = engine.getSnapshot();
+  const [state, setState] = useState<RecState>(snap.state ?? defaultState);
+  const [elapsedMs, setElapsedMs] = useState<number>(snap.elapsedMs ?? 0);
+  const [audioUrl, setAudioUrl] = useState<string | null>(snap.url ?? null);
+
+  useEffect(() => {
+    const off1 = engine.subscribe("state", (s) => setState(s));
+    const off2 = engine.subscribe("elapsed", (ms) => setElapsedMs(ms));
+    const off3 = engine.subscribe("done", (_blob, url) => {
+      setAudioUrl(url);
+      onStop?.();
+    });
+    return () => {
+      off1(); off2(); off3();
+    };
+  }, [engine, onStop]);
+
+  const fmt = (ms: number) => {
+    const sec = Math.floor(ms / 1000);
+    const h = String(Math.floor(sec / 3600)).padStart(2, "0");
+    const m = String(Math.floor((sec % 3600) / 60)).padStart(2, "0");
+    const s = String(sec % 60).padStart(2, "0");
+    return `${h}:${m}:${s}`;
+  };
+
+  const start = async () => {
+    if (state !== "idle") return;
+    try {
+      await engine.start();
+      onStart?.();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const canStart = state === "idle";
+  const canStop  = state === "recording";
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.timer} aria-live="polite">{fmt(elapsedMs)}</div>
+
+      <div className={styles.controls}>
+        <IconButton
+          ariaLabel="녹음 시작"
+          onClick={start}
+          disabled={!canStart}
+          icon={<Mic color={canStart ? "#0EA5E9" : "#9AA4B2"} />}
+        />
+        <IconButton
+          ariaLabel="종료"
+          onClick={() => onRequestConfirmStop?.()}
+          disabled={!canStop}
+          icon={<Square color={canStop ? "#EF4444" : "#9AA4B2"} />}
+        />
+      </div>
+
+      <div className={styles.stateText}>
+        {state === "idle" && "대기 중"}
+        {state === "recording" && "녹음 중"}
+        {state === "stopped" && "종료됨"}
+      </div>
+
+      {audioUrl && state === "stopped" && (
+        <div style={{ display: "grid", gap: 8 }}>
+          <audio src={audioUrl} controls />
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/StartRecordingPrompt/StartRecordingPrompt.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/StartRecordingPrompt/StartRecordingPrompt.tsx
new file mode 100644
index 00000000..9cdd2d56
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/StartRecordingPrompt/StartRecordingPrompt.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ConfirmModal from "@/components/Modal/ConfirmModal/ConfirmModal";
+import cmStyles from "@/components/Modal/ConfirmModal/ConfirmModal.module.scss";
+import { getRecordingEngine } from "../recordingEngine";
+
+export default function StartRecordingPrompt() {
+  const engine = getRecordingEngine();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setOpen(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const raf = requestAnimationFrame(() => {
+      const nodes = document.querySelectorAll<HTMLElement>(`.${cmStyles.overlay}`);
+      const overlay = nodes[nodes.length - 1];
+      if (overlay) {
+        overlay.style.zIndex = "2147483647";
+        overlay.style.position = "fixed";
+        overlay.style.inset = "0";
+        overlay.style.pointerEvents = "auto";
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+
+  const onConfirm = async () => {
+    try {
+      await engine.start();
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setOpen(false);
+    }
+  };
+
+  const onClose = () => setOpen(false);
+
+  if (!open) return null;
+
+  return (
+    <ConfirmModal onConfirm={onConfirm} onClose={onClose}>
+      강의가 시작되었습니다. 
+      <br />
+      바로 녹음을 시작할까요?
+    </ConfirmModal>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/micRecorderToMp3.d.ts b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/micRecorderToMp3.d.ts
new file mode 100644
index 00000000..a4a4fbb0
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/micRecorderToMp3.d.ts
@@ -0,0 +1,9 @@
+declare module 'mic-recorder-to-mp3' {
+    export default class MicRecorder {
+      constructor(options?: { bitRate?: number; sampleRate?: number; encoder?: 'lamejs' });
+      start(): Promise<void>;
+      stop(): { getMp3(): Promise<[ArrayBuffer, Blob]> };
+      pause?: () => void;
+      resume?: () => void;
+    }
+  }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/recordingEngine.ts b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/recordingEngine.ts
new file mode 100644
index 00000000..470b1335
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/recordingEngine.ts
@@ -0,0 +1,112 @@
+"use client";
+import MicRecorder from "mic-recorder-to-mp3";
+
+export type RecState = "idle" | "recording" | "stopped";
+type Unsub = () => void;
+
+type ListenerMap = {
+  state:   (s: RecState) => void;
+  level:   (v: number) => void;
+  elapsed: (ms: number) => void;
+  done:    (blob: Blob, url: string) => void;
+};
+
+type Mp3Result = { getMp3: () => Promise<[ArrayBuffer, Blob]> };
+type RecorderLike = {
+  start: () => Promise<void> | void;
+  stop: () => Mp3Result;
+};
+
+class RecordingEngine {
+  private state: RecState = "idle";
+  private recorder: RecorderLike | null = null;
+  private stream: MediaStream | null = null;
+
+  private timerId: number | null = null;
+  private startedAt = 0;
+  private elapsedMs = 0;
+
+  private url: string | null = null;
+
+  private listeners: { [K in keyof ListenerMap]: Array<ListenerMap[K]> } = {
+    state: [],
+    level: [],
+    elapsed: [],
+    done: [],
+  };
+
+  subscribe<K extends keyof ListenerMap>(kind: K, fn: ListenerMap[K]): Unsub {
+    this.listeners[kind].push(fn);
+    return () => {
+      const arr = this.listeners[kind];
+      const idx = arr.indexOf(fn);
+      if (idx >= 0) arr.splice(idx, 1);
+    };
+  }
+
+  private emit<K extends keyof ListenerMap>(kind: K, ...args: Parameters<ListenerMap[K]>) {
+    const cbs = this.listeners[kind] as Array<(...a: Parameters<ListenerMap[K]>) => void>;
+    for (const cb of cbs) cb(...args);
+  }
+
+  private setState(s: RecState) {
+    this.state = s;
+    this.emit("state", s);
+  }
+
+  getSnapshot() {
+    return { state: this.state, elapsedMs: this.elapsedMs, url: this.url };
+  }
+
+  private async ensureMic() {
+    if (!this.stream) {
+      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    }
+  }
+
+  async start() {
+    if (this.state === "recording") return;
+    await this.ensureMic();
+
+    this.recorder = new MicRecorder({ bitRate: 128 }) as unknown as RecorderLike;
+    await this.recorder.start();
+
+    this.startedAt = Date.now();
+    this.elapsedMs = 0;
+    if (this.timerId) clearInterval(this.timerId);
+    this.timerId = window.setInterval(() => {
+      this.elapsedMs = Date.now() - this.startedAt;
+      this.emit("elapsed", this.elapsedMs);
+    }, 250);
+
+    this.setState("recording");
+    window.dispatchEvent(new CustomEvent("live:recording:start"));
+  }
+
+  async stop() {
+    if (this.state !== "recording" || !this.recorder) return;
+
+    const result = await this.recorder.stop();
+    const [, blob] = await result.getMp3();
+
+    if (this.timerId) { clearInterval(this.timerId); this.timerId = null; }
+    this.elapsedMs = Date.now() - this.startedAt;
+    this.emit("elapsed", this.elapsedMs);
+
+    this.stream?.getTracks().forEach((t) => t.stop());
+    this.stream = null;
+
+    if (this.url) URL.revokeObjectURL(this.url);
+    this.url = URL.createObjectURL(blob);
+    this.emit("done", blob, this.url);
+
+    this.setState("stopped");
+    window.dispatchEvent(new CustomEvent("live:recording:stop"));
+  }
+}
+
+let _engine: RecordingEngine | null = null;
+export function getRecordingEngine() {
+  if (!_engine) _engine = new RecordingEngine();
+  return _engine;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.module.scss
new file mode 100644
index 00000000..5e1907df
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.module.scss
@@ -0,0 +1,33 @@
+@import "@/styles/variables";
+
+.container {
+  position: fixed;
+  z-index: 1500;
+  filter: drop-shadow($shadow-md);
+}
+
+.panel {
+  position: relative;
+  background: $color-skyblue;
+  z-index: 2; 
+  border-radius: 16px;
+  overflow: visible;
+}
+
+.content {
+  padding: $spacing-sm $spacing-md;
+  min-width: 160px;
+}
+
+.cap {
+  position: absolute;
+  width: var(--cap-w);
+  height: var(--cap-h);
+  left: var(--cap-left);
+  top: calc(-1 * var(--cap-h) + var(--seam-overlap));
+  z-index: 1; 
+  background: $color-skyblue;
+  border-bottom: none;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.tsx
new file mode 100644
index 00000000..cc69c989
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/ToolPopover/ToolPopover.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styles from "./ToolPopover.module.scss";
+
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+type CapAlign = "center" | "flush-left";
+
+interface ToolPopoverProps {
+  open: boolean;
+  anchorRef: React.RefObject<Element | null>;
+  side?: Side;
+  align?: Align;
+  offset?: number;
+
+  cap?: boolean;
+  capPad?: number;
+  capMinWidth?: number;
+  capHeight?: number;
+  capMatchAnchor?: boolean;
+  capOvershoot?: number;
+  capOffsetX?: number;
+  seamOverlap?: number;
+  capAlign?: CapAlign;
+  panelOffsetX?: number;
+
+  onClose?: () => void;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export default function ToolPopover({
+  open,
+  anchorRef,
+  side = "bottom",
+  align = "start",
+  capAlign = "center",
+  offset = -3,
+  capOffsetX = 0,
+  cap = true,
+  capPad = 12,
+  capMinWidth = 48,
+  capHeight = 20,
+  capMatchAnchor = true,
+  capOvershoot = 13,
+  seamOverlap = 16,
+  panelOffsetX = -40,
+  onClose,
+  className,
+  children,
+}: ToolPopoverProps) {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [pos, setPos] = useState<{ top: number; left: number }>({ top: -99999, left: -99999 });
+  const [capVars, setCapVars] = useState<{ w: number; h: number; left: number }>({
+    w: capMinWidth,
+    h: capHeight,
+    left: 8,
+  });
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleDown = (target: EventTarget | null) => {
+      if (!target || !(target instanceof Node)) return;
+      if (boxRef.current?.contains(target)) return;
+      if (anchorRef?.current && anchorRef.current.contains(target)) return;
+      onClose?.();
+    };
+
+    const onPointerDown = (e: PointerEvent) => handleDown(e.target);
+    const onMouseDown = (e: MouseEvent) => handleDown(e.target);
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose?.();
+    };
+
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("keydown", onEsc);
+
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("keydown", onEsc);
+    };
+  }, [open, onClose, anchorRef]);
+
+  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
+
+  const compute = () => {
+    if (!open || !boxRef.current || !anchorRef.current) return;
+
+    const a = anchorRef.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, margin = 6;
+
+    const panelRect = boxRef.current.getBoundingClientRect();
+
+    let left = 0, top = 0;
+    if (side === "bottom") top = a.bottom + offset;
+    if (side === "top")    top = a.top - panelRect.height - offset;
+    if (side === "left")   left = a.left - panelRect.width - offset;
+    if (side === "right")  left = a.right + offset;
+
+    if (side === "top" || side === "bottom") {
+      if (align === "start")  left = a.left;
+      if (align === "center") left = a.left + a.width / 2 - panelRect.width / 2;
+      if (align === "end")    left = a.right - panelRect.width;
+    } else {
+      if (align === "start")  top = a.top;
+      if (align === "center") top = a.top + a.height / 2 - panelRect.height / 2;
+      if (align === "end")    top = a.bottom - panelRect.height;
+    }
+
+    left += panelOffsetX;
+
+    left = clamp(left, margin, vw - panelRect.width - margin);
+    top  = clamp(top,  margin, vh - panelRect.height - margin);
+    setPos({ top, left });
+
+    if (cap && side === "bottom") {
+      const w = capMatchAnchor ? a.width + capPad * 2 : Math.max(a.width + capPad * 2, capMinWidth);
+      const h = capMatchAnchor ? Math.max(a.height + capOvershoot, capHeight) : capHeight;
+
+      const anchorLocalLeft = a.left - left;
+      const centerBased = anchorLocalLeft + a.width / 2 - w / 2;
+
+      let capLeft = centerBased + capOffsetX;
+      if (capAlign === "flush-left") capLeft = anchorLocalLeft - capPad + capOffsetX;
+
+      setCapVars({ w, h, left: capLeft });
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(document.documentElement);
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [
+    open, side, align, offset,
+    cap, capAlign, capPad, capMinWidth, capHeight, capMatchAnchor, capOvershoot, capOffsetX,
+    anchorRef.current,
+  ]);
+
+  const node = (
+    <div
+      ref={boxRef}
+      className={`${styles.container} ${className ?? ""}`}
+      style={{
+        top: pos.top,
+        left: pos.left,
+        "--cap-w": `${capVars.w}px`,
+        "--cap-h": `${capVars.h}px`,
+        "--cap-left": `${capVars.left}px`,
+        "--seam-overlap": `${seamOverlap}px`,
+      } as React.CSSProperties}
+      data-side={side}
+      data-align={align}
+      data-cap={cap ? "1" : "0"}
+    >
+      {cap && side === "bottom" && <div className={styles.cap} />}
+      <div className={styles.panel}>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+
+  if (!mounted) return null;
+  return open ? createPortal(node, document.body) : null;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/page.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/page.module.scss
new file mode 100644
index 00000000..7a15e362
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/page.module.scss
@@ -0,0 +1,9 @@
+@import "@/styles/variables";
+
+.lectureLivePage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;     
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/page.tsx b/frontend/app/teacher/lecture-live/[lectureId]/page.tsx
new file mode 100644
index 00000000..d4523af1
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import style from "./page.module.scss";
+import LectureMainGrid from "./_components/LectureMainGrid/LectureMainGrid";
+import { LectureLiveProvider } from "./_components/LectureLiveProvider";
+import LiveTopHeader from "./_components/LectureLiveHeader/LectureLiveHeader";
+import StartRecordingPrompt from "./_components/Recording/StartRecordingPrompt/StartRecordingPrompt";
+
+export default function TeacherLectureLivePage() {
+
+  return (
+    <div className={style.lectureLivePage}>
+      <LectureLiveProvider>
+        <StartRecordingPrompt />
+        <LiveTopHeader />
+        <LectureMainGrid />
+      </LectureLiveProvider>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/components/Button/FitContentButton/FitContentButton.tsx b/frontend/components/Button/FitContentButton/FitContentButton.tsx
index 83a55444..90686871 100644
--- a/frontend/components/Button/FitContentButton/FitContentButton.tsx
+++ b/frontend/components/Button/FitContentButton/FitContentButton.tsx
@@ -8,6 +8,7 @@ interface FitContentButtonProps {
   onClick: () => void;
   disabled?: boolean;
   type?: "button" | "submit" | "reset";
+  className?: string;
 }
 
 const FitContentButton: React.FC<FitContentButtonProps> = ({
@@ -15,10 +16,11 @@ const FitContentButton: React.FC<FitContentButtonProps> = ({
   onClick,
   disabled = false,
   type = "button",
+  className,
 }) => {
   return (
     <button
-      className={`${styles.button} ${disabled ? styles.disabled : ""}`}
+      className={`${styles.button} ${disabled ? styles.disabled : ""} ${className ?? ""}`}
       onClick={onClick}
       disabled={disabled}
       type={type}
diff --git a/frontend/components/ChatBox/ChatBox.module.scss b/frontend/components/ChatBox/ChatBox.module.scss
index 7643b98f..ba0ab3cb 100644
--- a/frontend/components/ChatBox/ChatBox.module.scss
+++ b/frontend/components/ChatBox/ChatBox.module.scss
@@ -43,4 +43,16 @@
       }
     }
   }
+  
+  &.teacher {
+    .messageContainer {
+      background: $color-skyblue;
+    }
+  }
+
+  &.student {
+    .messageContainer {
+      background: $color-white;
+    }
+  }
 }
diff --git a/frontend/components/ChatBox/ChatBox.tsx b/frontend/components/ChatBox/ChatBox.tsx
index 27c60450..81927509 100644
--- a/frontend/components/ChatBox/ChatBox.tsx
+++ b/frontend/components/ChatBox/ChatBox.tsx
@@ -10,6 +10,7 @@ type ChatBoxProps = {
   profilePicture: string; // 프로필 사진
   message: string; // 채팅 내용
   timestamp: string; // 날짜
+  variant?: "student" | "teacher"; // 강사, 학생 채팅 css
 };
 
 const ChatBox: React.FC<ChatBoxProps> = ({
@@ -18,9 +19,10 @@ const ChatBox: React.FC<ChatBoxProps> = ({
   profilePicture,
   message,
   timestamp,
+  variant="student",
 }) => {
   return (
-    <div className={styles.chatBox}>
+<div className={`${styles.chatBox} ${styles[variant]}`}>
       <div className={styles.messageContainer}>
         {!isAnonymous && (
           <Image
@@ -34,13 +36,11 @@ const ChatBox: React.FC<ChatBoxProps> = ({
 
         <div className={styles.textContainer}>
           <div className={styles.header}>
-            {!isAnonymous ? (
-              <span className={styles.nickname}>{nickname}</span>
-            ) : (
+            {!isAnonymous && 
               <span className={styles.nickname}>
-                익명{Math.floor(Math.random() * 100)}
+                {nickname}
               </span>
-            )}
+            }
             <span className={styles.timestamp}>{timestamp}</span>
           </div>
           <div className={styles.message}>{message}</div>
diff --git a/frontend/config/teacherRouteConfig.ts b/frontend/config/teacherRouteConfig.ts
index 7892e907..153e4f41 100644
--- a/frontend/config/teacherRouteConfig.ts
+++ b/frontend/config/teacherRouteConfig.ts
@@ -22,7 +22,8 @@ export const TEACHER_ROUTE_CONFIG: Record<
     | "teacherLectureDetail"
     | "teacherSetting"
     | "teacherStudentManagement"
-  >,
+    | "teacherLectureLive"
+    >,
   RouteConfig
 > = {
   teacherHome: {
@@ -55,6 +56,11 @@ export const TEACHER_ROUTE_CONFIG: Record<
     headerType: TeacherHeaderType.NONE,
     sidebarType: SiderbarType.NONE,
   },
+  teacherLectureLive: {
+    path: ROUTES.teacherLectureLive,
+    headerType: TeacherHeaderType.NONE,
+    sidebarType: SiderbarType.NONE,
+  },
   teacherSetting: {
     path: ROUTES.teacherSetting,
     headerType: TeacherHeaderType.NONE,
diff --git a/frontend/constants/routes.ts b/frontend/constants/routes.ts
index a4d47ca6..976746f2 100644
--- a/frontend/constants/routes.ts
+++ b/frontend/constants/routes.ts
@@ -24,6 +24,8 @@ export const ROUTES = {
     `/teacher/quiz-dashboard/${lectureId}`, // 강사 퀴즈 대시보드
   teacherLectureDetail: (lectureId: string) =>
     `/teacher/lecture-detail/${lectureId}`, // 강사 강의 상세
+  teacherLectureLive: (lectureId: string) => 
+    `/teacher/lecture-live/${lectureId}`, // 강사 실시간 강의
   teacherSetting: "/teacher/setting", // 강사 설정
   teacherStudentManagement: "/teacher/student-management", // 강사 학생 관리
 };
diff --git a/frontend/middleware.ts b/frontend/middleware.ts
index aa489896..472e22a1 100644
--- a/frontend/middleware.ts
+++ b/frontend/middleware.ts
@@ -26,6 +26,7 @@ const TEACHER_PATHS = [
   ROUTES.teacherLectureNoteManagement,
   "/teacher/quiz-dashboard",
   "/teacher/lecture-detail",
+  "/teacher/lecture-live",
   ROUTES.teacherSetting,
   ROUTES.teacherStudentManagement,
 ];
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 44f15820..85c702c7 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -17,6 +17,15 @@ const nextConfig: NextConfig = {
     @use "@/styles/_variables.scss" as *;
     @use "@/styles/_mixins.scss" as *;`,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'kwclasslog.s3.ap-southeast-2.amazonaws.com',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextPWA(nextConfig);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0dfd414b..96bae6e9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,15 +17,19 @@
         "flatpickr": "^4.6.13",
         "jsonwebtoken": "^9.0.2",
         "jsqr": "^1.4.0",
+        "jszip": "^3.10.1",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^0.487.0",
+        "mic-recorder-to-mp3": "^2.2.2",
         "next": "15.2.4",
         "next-pwa": "^5.6.0",
+        "pdfjs-dist": "^5.4.149",
         "qrcode.react": "^4.2.0",
         "react": "^19.0.0",
         "react-datepicker": "^8.3.0",
         "react-dom": "^19.0.0",
         "react-masonry-css": "^1.0.16",
+        "react-pdf": "^10.1.0",
         "recharts": "^2.15.3",
         "zustand": "^5.0.3"
       },
@@ -2256,6 +2260,191 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.78.tgz",
+      "integrity": "sha512-YaBHJvT+T1DoP16puvWM6w46Lq3VhwKIJ8th5m1iEJyGh7mibk5dT7flBvMQ1EH1LYmMzXJ+OUhu+8wQ9I6u7g==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.78",
+        "@napi-rs/canvas-darwin-arm64": "0.1.78",
+        "@napi-rs/canvas-darwin-x64": "0.1.78",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.78",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.78",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.78",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.78",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.78",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.78",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.78"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.78.tgz",
+      "integrity": "sha512-N1ikxztjrRmh8xxlG5kYm1RuNr8ZW1EINEDQsLhhuy7t0pWI/e7SH91uFVLZKCMDyjel1tyWV93b5fdCAi7ggw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.78.tgz",
+      "integrity": "sha512-FA3aCU3G5yGc74BSmnLJTObnZRV+HW+JBTrsU+0WVVaNyVKlb5nMvYAQuieQlRVemsAA2ek2c6nYtHh6u6bwFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.78.tgz",
+      "integrity": "sha512-xVij69o9t/frixCDEoyWoVDKgE3ksLGdmE2nvBWVGmoLu94MWUlv2y4Qzf5oozBmydG5Dcm4pRHFBM7YWa1i6g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.78.tgz",
+      "integrity": "sha512-aSEXrLcIpBtXpOSnLhTg4jPsjJEnK7Je9KqUdAWjc7T8O4iYlxWxrXFIF8rV8J79h5jNdScgZpAUWYnEcutR3g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.78.tgz",
+      "integrity": "sha512-dlEPRX1hLGKaY3UtGa1dtkA1uGgFITn2mDnfI6YsLlYyLJQNqHx87D1YTACI4zFCUuLr/EzQDzuX+vnp9YveVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.78.tgz",
+      "integrity": "sha512-TsCfjOPZtm5Q/NO1EZHR5pwDPSPjPEttvnv44GL32Zn1uvudssjTLbvaG1jHq81Qxm16GTXEiYLmx4jOLZQYlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.78.tgz",
+      "integrity": "sha512-+cpTTb0GDshEow/5Fy8TpNyzaPsYb3clQIjgWRmzRcuteLU+CHEU/vpYvAcSo7JxHYPJd8fjSr+qqh+nI5AtmA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.78.tgz",
+      "integrity": "sha512-wxRcvKfvYBgtrO0Uy8OmwvjlnTcHpY45LLwkwVNIWHPqHAsyoTyG/JBSfJ0p5tWRzMOPDCDqdhpIO4LOgXjeyg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.78.tgz",
+      "integrity": "sha512-vQFOGwC9QDP0kXlhb2LU1QRw/humXgcbVp8mXlyBqzc/a0eijlLF9wzyarHC1EywpymtS63TAj8PHZnhTYN6hg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.78",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.78.tgz",
+      "integrity": "sha512-/eKlTZBtGUgpRKalzOzRr6h7KVSuziESWXgBcBnXggZmimwIJWPJlEcbrx5Tcwj8rPuZiANXQOG9pPgy9Q4LTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.7.tgz",
@@ -4583,6 +4772,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4977,6 +5172,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -6429,6 +6633,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
@@ -7169,6 +7379,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/jwa": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -7209,6 +7431,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/lamejs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz",
+      "integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==",
+      "license": "LGPL-3.0",
+      "dependencies": {
+        "use-strict": "1.0.1"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -7305,6 +7536,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -7468,6 +7708,15 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/make-cancellable-promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
+      "integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -7492,6 +7741,15 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/make-event-props": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
+      "integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -7501,6 +7759,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge-refs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
+      "integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -7516,6 +7791,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mic-recorder-to-mp3": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz",
+      "integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "lamejs": "^1.2.0"
+      },
+      "peerDependencies": {
+        "webrtc-adapter": ">=4.1.1"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -7940,6 +8227,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8012,6 +8305,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "5.4.149",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.149.tgz",
+      "integrity": "sha512-Xe8/1FMJEQPUVSti25AlDpwpUm2QAVmNOpFP0SIahaPIOKBKICaefbzogLdwey3XGGoaP4Lb9wqiw2e9Jqp0LA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20.16.0 || >=22.3.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.77"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8281,6 +8586,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8419,6 +8730,47 @@
         "react": ">=16.0.0"
       }
     },
+    "node_modules/react-pdf": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.1.0.tgz",
+      "integrity": "sha512-iUI1YqWgwwZcsXjrehTp3Yi8nT/bvTaWULaRMMyJWvoqqSlopk4LQQ9GDqUnDtX3gzT2glrqrLbjIPl56a+Q3w==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "dequal": "^2.0.3",
+        "make-cancellable-promise": "^2.0.0",
+        "make-event-props": "^2.0.0",
+        "merge-refs": "^2.0.0",
+        "pdfjs-dist": "5.3.93",
+        "tiny-invariant": "^1.0.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-pdf/node_modules/pdfjs-dist": {
+      "version": "5.3.93",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.3.93.tgz",
+      "integrity": "sha512-w3fQKVL1oGn8FRyx5JUG5tnbblggDqyx2XzA5brsJ5hSuS+I0NdnJANhmeWKLjotdbPQucLBug5t0MeWr0AAdg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20.16.0 || >=22.3.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.71"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
@@ -8450,6 +8802,33 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -8940,6 +9319,13 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -9007,6 +9393,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
@@ -9227,6 +9619,21 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -10060,11 +10467,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-strict": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
+      "integrity": "sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ==",
+      "license": "ISC"
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/victory-vendor": {
@@ -10089,6 +10501,15 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
@@ -10247,6 +10668,20 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.3.tgz",
+      "integrity": "sha512-5fALBcroIl31OeXAdd1YUntxiZl1eHlZZWzNg3U4Fn+J9/cGL3eT80YlrsWGvj2ojuz1rZr2OXkgCzIxAZ7vRQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fc32d8b9..ff9077ee 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,15 +18,19 @@
     "flatpickr": "^4.6.13",
     "jsonwebtoken": "^9.0.2",
     "jsqr": "^1.4.0",
+    "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.487.0",
+    "mic-recorder-to-mp3": "^2.2.2",
     "next": "15.2.4",
     "next-pwa": "^5.6.0",
+    "pdfjs-dist": "^5.4.149",
     "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-datepicker": "^8.3.0",
     "react-dom": "^19.0.0",
     "react-masonry-css": "^1.0.16",
+    "react-pdf": "^10.1.0",
     "recharts": "^2.15.3",
     "zustand": "^5.0.3"
   },
diff --git a/frontend/public/file/2024-DA-2-2-Probability.pdf b/frontend/public/file/2024-DA-2-2-Probability.pdf
new file mode 100644
index 00000000..4cc92d0c
Binary files /dev/null and b/frontend/public/file/2024-DA-2-2-Probability.pdf differ
diff --git "a/frontend/public/file/\352\270\260\353\247\220\353\263\264\352\263\240\354\204\234_\354\241\270\354\227\205\354\235\204\355\225\230\354\236\220.pdf" "b/frontend/public/file/\352\270\260\353\247\220\353\263\264\352\263\240\354\204\234_\354\241\270\354\227\205\354\235\204\355\225\230\354\236\220.pdf"
new file mode 100644
index 00000000..8380db57
Binary files /dev/null and "b/frontend/public/file/\352\270\260\353\247\220\353\263\264\352\263\240\354\204\234_\354\241\270\354\227\205\354\235\204\355\225\230\354\236\220.pdf" differ