diff --git a/src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx b/src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx
index 90e778ff..a2f487db 100644
--- a/src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx
+++ b/src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx
@@ -334,6 +334,9 @@ const SectionList: React.FC<SectionListProps> = ({
                                 <SectionCourses
                                   title={group.title}
                                   description={section.description}
+                                  nodeGroupId={group.id}
+                                  clubSlug={club}
+                                  courseSlug={courseSlug}
                                   nodes={
                                     Array.isArray(group.nodes)
                                       ? group.nodes.map((node: any) => {
diff --git a/src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx b/src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx
index 751e6c4c..b3807b3e 100644
--- a/src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx
+++ b/src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx
@@ -21,6 +21,9 @@ export interface Node {
 export interface SectionCoursesProps {
   title: string;
   description: string;
+  clubSlug?: string;
+  courseSlug?: string;
+  nodeGroupId: string;
   nodes: Node[];
   onMove?: () => void;
   onDelete?: () => void;
@@ -55,6 +58,9 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
   onMoveDown,
   disableMoveUp,
   disableMoveDown,
+  clubSlug = "",
+  courseSlug = "",
+  nodeGroupId,
 }) => {
   return (
     <Paper
@@ -75,7 +81,17 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
         justifyContent="space-between"
         mb={0.2}
       >
-        <Typography variant="subtitle1" fontWeight={600}>
+        <Typography
+          variant="subtitle1"
+          fontWeight={600}
+          onClick={() => {
+            window.open(
+              `/club/${clubSlug}/course/${courseSlug}/nodegroup/${nodeGroupId}`,
+              "_blank"
+            );
+          }}
+          sx={{ cursor: "pointer", "&:hover": { textDecoration: "underline" } }}
+        >
           {title}
         </Typography>
         <Box display="flex" alignItems="center" gap={0.5}>
@@ -108,12 +124,13 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
             </Tooltip>
           )}
           {onMove && (
-            <Tooltip title="노드 그룹 이동">
+            <Tooltip title="노드 그룹 수정">
               <IconButton size="small" sx={{ color: "#fff" }} onClick={onMove}>
                 <EditIcon fontSize="small" />
               </IconButton>
             </Tooltip>
           )}
+
           {onDelete && (
             <Tooltip title="노드 그룹 삭제">
               <IconButton
diff --git a/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx b/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx
index cde27a49..a031f11c 100644
--- a/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx
+++ b/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx
@@ -178,6 +178,23 @@ function AdminCourseNodeGroupPage() {
     enabled: !!nodeGroupId,
   });
 
+  // 비디오 노드 중 업로드/트랜스코딩 상태가 있으면 3초마다 refetch
+  React.useEffect(() => {
+    if (!data || !Array.isArray(data.nodes)) return;
+    const hasUploadingVideo = data.nodes.some(
+      (node: any) =>
+        node.type === "VIDEO" &&
+        node.data?.file?.status &&
+        ["UPLOADED", "TRANSCODING"].includes(node.data.file.status)
+    );
+    if (!hasUploadingVideo) return;
+
+    const interval = setInterval(() => {
+      refetch && refetch();
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [data, refetch]);
+
   // 노드 그룹 제목 수정 상태
   const [editingTitle, setEditingTitle] = useState(false);
   const [title, setTitle] = useState(data?.title || "");
@@ -385,12 +402,6 @@ function AdminCourseNodeGroupPage() {
                           >
                             <ArrowDownwardIcon fontSize="small" />
                           </Button>
-                          <Box mt={1}>
-                            <EditIcon
-                              fontSize="small"
-                              sx={{ color: "#fff", cursor: "grab" }}
-                            />
-                          </Box>
                         </Box>
                       </Box>
                       <NodeRenderer node={node} refetch={refetch} />
diff --git a/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx b/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx
index 40721036..94df67cd 100644
--- a/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx
+++ b/src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx
@@ -16,7 +16,7 @@ const NodeVideo: React.FC<NodeVideoProps> = ({ node, refetch }) => {
   const [editing, setEditing] = React.useState(false);
 
   // 파일이 없거나, 수정 버튼을 누르면 업로드 UI 노출
-  if (!node?.data?.file?.playlist || editing) {
+  if (!node?.data?.file || editing) {
     return (
       <Box my={2}>
         <FileUploadBox
@@ -40,6 +40,91 @@ const NodeVideo: React.FC<NodeVideoProps> = ({ node, refetch }) => {
     );
   }
 
+  // 상태별 분기 처리
+  const status = node.data.file.status;
+  const progress = node.data.file.progress;
+
+  if (status === "TRANSCODING") {
+    return (
+      <Box my={2}>
+        <Typography color="primary" fontWeight={600} mb={1}>
+          비디오 트랜스코딩 중...
+        </Typography>
+        <Box display="flex" alignItems="center" gap={1}>
+          <Box width={120}>
+            <Box
+              sx={{
+                height: 8,
+                background: "#eee",
+                borderRadius: 4,
+                overflow: "hidden",
+              }}
+            >
+              <Box
+                sx={{
+                  width: `${progress || 0}%`,
+                  height: "100%",
+                  background: "#1976d2",
+                  transition: "width 0.3s",
+                }}
+              />
+            </Box>
+          </Box>
+          <Typography fontSize={14} color="text.secondary">
+            {progress != null ? `${progress}%` : "진행률 계산 중..."}
+          </Typography>
+        </Box>
+        <Typography variant="body2" color="text.secondary" mt={1}>
+          트랜스코딩이 완료되면 영상이 표시됩니다.
+        </Typography>
+        <Button sx={{ mt: 2 }} size="small" variant="outlined" disabled>
+          비디오 변경 (트랜스코딩 중)
+        </Button>
+      </Box>
+    );
+  }
+
+  if (status !== "TRANSCODE_COMPLETED") {
+    // 실패, 업로드 중, 대기 등 기타 상태
+    let message = "";
+    switch (status) {
+      case "PENDING":
+        message = "비디오 업로드 대기 중입니다.";
+        break;
+      case "UPLOADING":
+        message = "비디오 업로드 중입니다.";
+        break;
+      case "UPLOADED":
+        message =
+          "비디오 업로드가 완료되었습니다. 트랜스코딩을 기다리는 중입니다.";
+        break;
+      case "TRANSCODE_FAILED":
+        message = "비디오 트랜스코딩에 실패했습니다. 다시 업로드해 주세요.";
+        break;
+      default:
+        message = `비디오 상태: ${status}`;
+    }
+    return (
+      <Box my={2}>
+        <Typography
+          color={status === "TRANSCODE_FAILED" ? "error" : "primary"}
+          fontWeight={600}
+          mb={1}
+        >
+          {message}
+        </Typography>
+        <Button
+          sx={{ mt: 2 }}
+          size="small"
+          variant="outlined"
+          onClick={() => setEditing(true)}
+        >
+          비디오 변경
+        </Button>
+      </Box>
+    );
+  }
+
   return (
     <Box my={2}>
       <VideoPlayer src={node.data.file.playlist} />
diff --git a/src/main/front/src/admin-club/pages/AdminCoursePage.tsx b/src/main/front/src/admin-club/pages/AdminCoursePage.tsx
index 3a5a1707..ebdd650f 100644
--- a/src/main/front/src/admin-club/pages/AdminCoursePage.tsx
+++ b/src/main/front/src/admin-club/pages/AdminCoursePage.tsx
@@ -55,7 +55,7 @@ function AdminCoursePage() {
   if (coursesLoading) return <Typography>Loading...</Typography>;
 
   return (
-    <Box maxWidth={1000} mx="auto" mt={6}>
+    <Box mx="auto" mt={6}>
       <Paper
         elevation={3}
         sx={{ p: 4, borderRadius: 3, background: "rgba(255,255,255,0.04)" }}
@@ -81,103 +81,7 @@ function AdminCoursePage() {
             신규 코스 생성
           </Button>
         </Box>
-        {/* 신규 코스 생성 다이얼로그 */}
-        <Dialog open={addDialogOpen} onClose={() => setAddDialogOpen(false)}>
-          <DialogTitle>신규 코스 생성</DialogTitle>
-          <DialogContent sx={{ minWidth: 350 }}>
-            <Box display="flex" flexDirection="column" gap={2}>
-              <TextField
-                label="코스명"
-                value={newCourse.title}
-                onChange={(e) =>
-                  setNewCourse((c) => ({ ...c, title: e.target.value }))
-                }
-                fullWidth
-              />
-              <TextField
-                label="슬러그"
-                value={newCourse.slug}
-                onChange={(e) =>
-                  setNewCourse((c) => ({
-                    ...c,
-                    slug: e.target.value
-                      .toLowerCase()
-                      .replace(/[^a-z0-9-]/g, ""),
-                  }))
-                }
-                helperText="영문 소문자, 숫자, 하이픈만 사용 가능"
-              />
-              <TextField
-                label="설명"
-                value={newCourse.description}
-                onChange={(e) =>
-                  setNewCourse((c) => ({ ...c, description: e.target.value }))
-                }
-                fullWidth
-                multiline
-                minRows={2}
-              />
-              <Box display="flex" alignItems="center" gap={1}>
-                <Typography>공개 여부</Typography>
-                <Button
-                  variant={newCourse.isVisible ? "contained" : "outlined"}
-                  onClick={() =>
-                    setNewCourse((c) => ({ ...c, isVisible: !c.isVisible }))
-                  }
-                >
-                  {newCourse.isVisible ? "공개" : "비공개"}
-                </Button>
-              </Box>
-            </Box>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setAddDialogOpen(false)} disabled={isSaving}>
-              취소
-            </Button>
-            <Button
-              variant="contained"
-              onClick={handleSaveCourse}
-              disabled={
-                isSaving ||
-                !newCourse.title ||
-                !newCourse.slug ||
-                !newCourse.description
-              }
-            >
-              {isSaving ? (
-                <>
-                  <span style={{ marginRight: 8 }}>
-                    <svg width="18" height="18" viewBox="0 0 50 50">
-                      <circle
-                        cx="25"
-                        cy="25"
-                        r="20"
-                        fill="none"
-                        stroke="#fff"
-                        strokeWidth="5"
-                        strokeDasharray="31.4 31.4"
-                        strokeLinecap="round"
-                      >
-                        <animateTransform
-                          attributeName="transform"
-                          type="rotate"
-                          from="0 25 25"
-                          to="360 25 25"
-                          dur="1s"
-                          repeatCount="indefinite"
-                        />
-                      </circle>
-                    </svg>
-                  </span>
-                  저장 중...
-                </>
-              ) : (
-                "저장"
-              )}
-            </Button>
-          </DialogActions>
-        </Dialog>
-        <Grid container spacing={3}>
+        <Grid container sx={{ width: "100%" }} spacing={3}>
           <CourseList
             courses={clubCourses.map((course: any) => ({
               ...course,
@@ -186,6 +90,101 @@ function AdminCoursePage() {
           />
         </Grid>
       </Paper>
+
+      {/* 신규 코스 생성 다이얼로그 */}
+      <Dialog open={addDialogOpen} onClose={() => setAddDialogOpen(false)}>
+        <DialogTitle>신규 코스 생성</DialogTitle>
+        <DialogContent sx={{ minWidth: 350 }}>
+          <Box display="flex" flexDirection="column" gap={2}>
+            <TextField
+              label="코스명"
+              value={newCourse.title}
+              onChange={(e) =>
+                setNewCourse((c) => ({ ...c, title: e.target.value }))
+              }
+              fullWidth
+            />
+            <TextField
+              label="슬러그"
+              value={newCourse.slug}
+              onChange={(e) =>
+                setNewCourse((c) => ({
+                  ...c,
+                  slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""),
+                }))
+              }
+              helperText="영문 소문자, 숫자, 하이픈만 사용 가능"
+            />
+            <TextField
+              label="설명"
+              value={newCourse.description}
+              onChange={(e) =>
+                setNewCourse((c) => ({ ...c, description: e.target.value }))
+              }
+              fullWidth
+              multiline
+              minRows={2}
+            />
+            <Box display="flex" alignItems="center" gap={1}>
+              <Typography>공개 여부</Typography>
+              <Button
+                variant={newCourse.isVisible ? "contained" : "outlined"}
+                onClick={() =>
+                  setNewCourse((c) => ({ ...c, isVisible: !c.isVisible }))
+                }
+              >
+                {newCourse.isVisible ? "공개" : "비공개"}
+              </Button>
+            </Box>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setAddDialogOpen(false)} disabled={isSaving}>
+            취소
+          </Button>
+          <Button
+            variant="contained"
+            onClick={handleSaveCourse}
+            disabled={
+              isSaving ||
+              !newCourse.title ||
+              !newCourse.slug ||
+              !newCourse.description
+            }
+          >
+            {isSaving ? (
+              <>
+                <span style={{ marginRight: 8 }}>
+                  <svg width="18" height="18" viewBox="0 0 50 50">
+                    <circle
+                      cx="25"
+                      cy="25"
+                      r="20"
+                      fill="none"
+                      stroke="#fff"
+                      strokeWidth="5"
+                      strokeDasharray="31.4 31.4"
+                      strokeLinecap="round"
+                    >
+                      <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 25 25"
+                        to="360 25 25"
+                        dur="1s"
+                        repeatCount="indefinite"
+                      />
+                    </circle>
+                  </svg>
+                </span>
+                저장 중...
+              </>
+            ) : (
+              "저장"
+            )}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 }
diff --git a/src/main/front/src/admin-club/pages/AdminProgramListPage.tsx b/src/main/front/src/admin-club/pages/AdminProgramListPage.tsx
index 41a5bcb9..72d75fa0 100644
--- a/src/main/front/src/admin-club/pages/AdminProgramListPage.tsx
+++ b/src/main/front/src/admin-club/pages/AdminProgramListPage.tsx
@@ -125,7 +125,7 @@ function AdminProgramListPage() {
                         edge="end"
                         aria-label="view"
                         component={RouterLink}
-                        to={`/club/${club}/program/${program.id}`}
+                        to={`/club/${club}/program/${program.slug}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
diff --git a/src/main/front/src/components/ClubPage/ClubBadge.tsx b/src/main/front/src/components/ClubPage/ClubBadge.tsx
index 3709fc06..3127fde2 100644
--- a/src/main/front/src/components/ClubPage/ClubBadge.tsx
+++ b/src/main/front/src/components/ClubPage/ClubBadge.tsx
@@ -5,9 +5,16 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
 export interface ClubBadgeProps {
   text: string;
   hoverable?: boolean;
+  noEmoji?: boolean;
+  background?: React.CSSProperties["background"];
 }
 
-const ClubBadge: React.FC<ClubBadgeProps> = ({ text, hoverable }) => {
+const ClubBadge: React.FC<ClubBadgeProps> = ({
+  text,
+  hoverable,
+  noEmoji,
+  background,
+}) => {
   return (
     <Paper
       elevation={2}
@@ -15,7 +22,7 @@ const ClubBadge: React.FC<ClubBadgeProps> = ({ text, hoverable }) => {
         display: "inline-flex",
         alignItems: "center",
         gap: 1,
-        background: "rgba(250, 250, 250, 0.14)",
+        background: background || "rgba(250, 250, 250, 0.14)",
         color: "#fff",
         borderRadius: 2,
         mt: 1,
@@ -41,7 +48,9 @@ const ClubBadge: React.FC<ClubBadgeProps> = ({ text, hoverable }) => {
           : {}),
       }}
     >
-      <EmojiEventsIcon sx={{ fontSize: 18, mr: 0.5, color: "#ffd700" }} />
+      {!noEmoji && (
+        <EmojiEventsIcon sx={{ fontSize: 18, mr: 0.5, color: "#ffd700" }} />
+      )}
       <Typography
         component="span"
         sx={{ fontWeight: 500, fontSize: 15, color: "inherit" }}
diff --git a/src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx b/src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx
index d035da4b..f5dc39ec 100644
--- a/src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx
+++ b/src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx
@@ -67,6 +67,17 @@ function ClubRunningProgramBanner({
 
   return (
     <>
+      {(filteredPrograms.length === 0 ||
+        filteredPrograms.every((p) => p.isParticipant === "0")) && (
+        <Link to={`/club/${club}`} style={{ textDecoration: "none" }}>
+          <ClubBadge
+            hoverable
+            background="rgba(247, 91, 91, 0.14)"
+            noEmoji
+            text="‼️ 진행 중인 프로그램이 없습니다. 진도 확인이 되지 않습니다."
+          />
+        </Link>
+      )}
       <Box mt={0.5} {...props}>
         {filteredPrograms.map((program: any) => {
           const isParticipant = program.isParticipant === "1";
diff --git a/src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx b/src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx
index c61745c9..7017be5e 100644
--- a/src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx
+++ b/src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx
@@ -37,7 +37,7 @@ const ImagePreviewWithDownload: React.FC<Props> = ({ src, filename }) => {
             height: "100%",
             width: "100%",
             borderRadius: "12px",
-            objectFit: "cover",
+            objectFit: "contain",
           }}
         />
 
diff --git a/src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx b/src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx
index 33fc26a7..8adcc2b5 100644
--- a/src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx
+++ b/src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx
@@ -11,21 +11,40 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ content }) => {
     <Box
       p={2}
       //   bgcolor="#fdfdfd"
-      border="1px solid #ccc"
+      // border="1px solid #ccc"
       borderRadius={2}
-      sx={{ overflow: "auto", maxHeight: "100%" }}
+      sx={{ overflow: "auto", maxHeight: "100%", width: "100%" }}
     >
       <ReactMarkdown
         children={content}
         components={{
           h1: ({ ...props }) => (
-            <Typography variant="h4" gutterBottom {...props} />
+            <Typography
+              variant="h4"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
           ),
           h2: ({ ...props }) => (
-            <Typography variant="h5" gutterBottom {...props} />
+            <Typography
+              variant="h5"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
+          ),
+          h3: ({ ...props }) => (
+            <Typography
+              variant="h6"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
           ),
           p: ({ ...props }) => (
-            <Typography variant="body1" paragraph {...props} />
+            <Typography
+              variant="body1"
+              sx={{ lineHeight: 1.75, wordBreak: "keep-all" }}
+              {...props}
+            />
           ),
           li: ({ ...props }) => (
             <li>
diff --git a/src/main/front/src/components/NodeGroupPage/NextButton.tsx b/src/main/front/src/components/NodeGroupPage/NextButton.tsx
index e9200993..232e7b48 100644
--- a/src/main/front/src/components/NodeGroupPage/NextButton.tsx
+++ b/src/main/front/src/components/NodeGroupPage/NextButton.tsx
@@ -1,6 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { useFetchBe } from "../../tools/api";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+} from "@mui/material";
 
 type NextNodeGroupButtonProps = {
   currentNodeGroupId: string;
@@ -9,18 +17,17 @@ type NextNodeGroupButtonProps = {
 function NextNodeGroupButton({ currentNodeGroupId }: NextNodeGroupButtonProps) {
   const navigate = useNavigate();
   const fetchBe = useFetchBe();
-
   const { club, course_name } = useParams<{
     club: string;
     course_name: string;
   }>();
+  const [openModal, setOpenModal] = useState(false);
 
   const fetchNextNodeGroup = async (nodeGroupId: string) => {
     try {
       const response = await fetchBe(
         `/v1/node-group/next?nodeGroupId=${nodeGroupId}`
       );
-      console.log("return: " + response);
       return response;
     } catch (error) {
       console.error("다음 노드그룹 요청 실패:", error);
@@ -44,7 +51,7 @@ function NextNodeGroupButton({ currentNodeGroupId }: NextNodeGroupButtonProps) {
           `/club/${club}/course/${course_name}/nodegroup/${next.nodeGroupId}`
         );
       } else {
-        alert("마지막 노드 그룹입니다.");
+        setOpenModal(true);
       }
     } catch (error) {
       console.error("노드 그룹 이동 중 오류:", error);
@@ -52,13 +59,45 @@ function NextNodeGroupButton({ currentNodeGroupId }: NextNodeGroupButtonProps) {
     }
   };
 
+  const handleGoToCourse = () => {
+    if (club && course_name) {
+      navigate(`/club/${club}/course/${course_name}`);
+    } else {
+      navigate("/club");
+    }
+  };
+
   return (
-    <button
-      onClick={handleClick}
-      style={{ padding: "8px 16px", marginTop: "20px" }}
-    >
-      NEXT
-    </button>
+    <>
+      <button
+        onClick={handleClick}
+        style={{ padding: "8px 16px", marginTop: "20px" }}
+      >
+        NEXT
+      </button>
+      <Dialog open={openModal} onClose={() => setOpenModal(false)}>
+        <DialogTitle>마지막 강의입니다</DialogTitle>
+        <DialogContent>
+          <Typography>
+            이 코스의 모든 강의를 완료했습니다.
+            <br />
+            코스 페이지로 돌아가시겠습니까?
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenModal(false)} color="inherit">
+            닫기
+          </Button>
+          <Button
+            onClick={handleGoToCourse}
+            variant="contained"
+            color="primary"
+          >
+            코스로 이동
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 }
 
diff --git a/src/main/front/src/components/course/CourseItem.tsx b/src/main/front/src/components/course/CourseItem.tsx
index 47560375..d40117de 100644
--- a/src/main/front/src/components/course/CourseItem.tsx
+++ b/src/main/front/src/components/course/CourseItem.tsx
@@ -23,7 +23,7 @@ const CourseItem: React.FC<CourseItemProps> = ({
       component={Link}
       to={url}
       sx={{
-        maxWidth: 345,
+        // maxWidth: 345,
         position: "relative",
         overflow: "hidden",
         transition:
diff --git a/src/main/front/src/components/course/CourseList.tsx b/src/main/front/src/components/course/CourseList.tsx
index e2f90b4c..357b935d 100644
--- a/src/main/front/src/components/course/CourseList.tsx
+++ b/src/main/front/src/components/course/CourseList.tsx
@@ -1,6 +1,7 @@
 import { Box } from "@mui/system";
 import CourseItem from "./CourseItem";
 import { useParams } from "react-router";
+import { Grid } from "@mui/material";
 
 export interface CourseListProps {
   courses?: Array<{
@@ -17,17 +18,18 @@ function CourseList({ courses }: CourseListProps) {
   const { club } = useParams<{ club: string }>();
   if (!courses || courses.length === 0) return <Box>No courses available</Box>;
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Grid container spacing={2} width="100%">
       {courses?.map((course, idx) => (
-        <CourseItem
-          key={`course-${course?.id}`}
-          name={course.title}
-          picture={course.pictureUrl}
-          progress={course.progress}
-          url={course.url || `/club/${club}/course/${course.slug}`}
-        />
+        <Grid key={`course-${course?.id}`} size={{ xs: 12, sm: 6, md: 4 }}>
+          <CourseItem
+            name={course.title}
+            picture={course.pictureUrl}
+            progress={course.progress}
+            url={course.url || `/club/${club}/course/${course.slug}`}
+          />
+        </Grid>
       ))}
-    </Box>
+    </Grid>
   );
 }
 
diff --git a/src/main/front/src/pages/CoursePage.tsx b/src/main/front/src/pages/CoursePage.tsx
index 9e3947db..e971debe 100644
--- a/src/main/front/src/pages/CoursePage.tsx
+++ b/src/main/front/src/pages/CoursePage.tsx
@@ -17,6 +17,7 @@ import { useParams, useNavigate } from "react-router";
 import type { CourseData } from "../types/courseData.types";
 import { LatestComment } from "../types/latestComment.types";
 import ClubRunningProgramBanner from "../components/ClubPage/ClubRunningProgramBanner";
+import { currentProgram } from "../utils/currentProgram";
 
 function CoursePage() {
   const { userId } = useUserData();
@@ -32,6 +33,11 @@ function CoursePage() {
     queryFn: () => fetchBe("/v1/user/programs"),
   });
 
+  const { data: programs, isLoading: programsLoading } = useQuery({
+    queryKey: ["clubPrograms", clubSlug],
+    queryFn: () => fetchBe(`/v1/clubs/${clubSlug}/programs`),
+  });
+
   // 현재 club에 해당하는 programSlug 찾기
   const myProgram = (myPrograms ?? []).find((p) => p.clubSlug === clubSlug);
   const programSlug = myProgram?.slug;
@@ -126,6 +132,9 @@ function CoursePage() {
     percent = total > 0 ? Math.round((completed / total) * 1000) / 10 / 100 : 0;
   }
 
+  const filteredPrograms = currentProgram(programs ?? []);
+  console.log(filteredPrograms);
+
   return (
     <Box maxWidth={980} margin="auto" mb={10}>
       <ClubRunningProgramBanner club={clubSlug} sx={{ mb: 2 }} />
@@ -186,28 +195,32 @@ function CoursePage() {
       <Box display="flex" mt={2}>
         <CourseProgressList
           courseTitle={courseData?.title ?? ""}
-          sections={(courseData?.sections ?? []).map((section) => ({
-            ...section,
-            nodeGroups: (section.nodeGroups ?? []).map((group) => {
-              // nodeGroup 완료 여부 및 진행중 여부 계산
-              let isCompleted = false;
-              let isInProgress = false;
-              if (courseData && myProgress) {
-                const courseId = courseData.id;
-                const courseProgress = myProgress.courseProgress[courseId];
-                if (courseProgress?.map) {
-                  const state = courseProgress.map?.[group.id];
-                  isCompleted = state === "DONE";
-                  isInProgress = state === "IN_PROGRESS";
-                }
-              }
-              return {
-                ...group,
-                isCompleted,
-                isInProgress,
-              };
-            }),
-          }))}
+          sections={(courseData?.sections ?? [])
+            .sort((sec1, sec2) => sec1.order - sec2.order)
+            .map((section) => ({
+              ...section,
+              nodeGroups: (section.nodeGroups ?? [])
+                .sort((g1, g2) => g1.order - g2.order)
+                .map((group) => {
+                  // nodeGroup 완료 여부 및 진행중 여부 계산
+                  let isCompleted = false;
+                  let isInProgress = false;
+                  if (courseData && myProgress) {
+                    const courseId = courseData.id;
+                    const courseProgress = myProgress.courseProgress[courseId];
+                    if (courseProgress?.map) {
+                      const state = courseProgress.map?.[group.id];
+                      isCompleted = state === "DONE";
+                      isInProgress = state === "IN_PROGRESS";
+                    }
+                  }
+                  return {
+                    ...group,
+                    isCompleted,
+                    isInProgress,
+                  };
+                }),
+            }))}
           width={260}
         />
 
@@ -221,21 +234,40 @@ function CoursePage() {
                     지금까지 학습한 진도율을 확인하세요.
                   </Typography>
                   <Box display="flex" alignItems="center" mt={2}>
-                    <Box width={86}>
-                      <CourseProgress value={percent} />
-                    </Box>
-                    <Box ml={2} bgcolor={"#f0f0f010"} p={1} borderRadius={1}>
-                      <Typography variant="body2">진도율</Typography>
-                      <Typography variant="body2">
-                        {completed}/{total}
-                      </Typography>
-                    </Box>
-                    <Box ml={1} bgcolor={"#f0f0f010"} p={1} borderRadius={1}>
-                      <Typography variant="body2">남은 강의</Typography>
-                      <Typography variant="body2">
-                        {total - completed}개
+                    {filteredPrograms.length === 0 ||
+                    filteredPrograms.every((p) => p.isParticipant === "0") ? (
+                      <Typography variant="body2" color="error">
+                        진행중인 프로그램이 없습니다.
                       </Typography>
-                    </Box>
+                    ) : (
+                      <>
+                        <Box width={86}>
+                          <CourseProgress value={percent} />
+                        </Box>
+                        <Box
+                          ml={2}
+                          bgcolor={"#f0f0f010"}
+                          p={1}
+                          borderRadius={1}
+                        >
+                          <Typography variant="body2">진도율</Typography>
+                          <Typography variant="body2">
+                            {completed}/{total}
+                          </Typography>
+                        </Box>
+                        <Box
+                          ml={1}
+                          bgcolor={"#f0f0f010"}
+                          p={1}
+                          borderRadius={1}
+                        >
+                          <Typography variant="body2">남은 강의</Typography>
+                          <Typography variant="body2">
+                            {total - completed}개
+                          </Typography>
+                        </Box>
+                      </>
+                    )}
                   </Box>
                 </>
               }
@@ -331,68 +363,74 @@ function CoursePage() {
 
           <Box ml={2}>
             <Box>
-              {(courseData?.sections ?? []).map((section) => (
-                <Box key={section.id} mt={1}>
-                  <Section text={section.title} />
-                  {(section.nodeGroups ?? []).map((group) => (
-                    <Box mt={1.6} key={group.id}>
-                      <SectionCourses
-                        title={group.title}
-                        description={section.description}
-                        nodes={
-                          Array.isArray(group.nodes)
-                            ? group.nodes?.map((node) => {
-                                let title = "";
-                                switch (node.type) {
-                                  case "VIDEO":
-                                  case "IMAGE":
-                                  case "FILE":
-                                  case "TEXT":
-                                    title = node.data?.title ?? "";
-                                    break;
-                                  case "QUIZ":
-                                    title = node.data?.question ?? "";
-                                    break;
-                                  default:
-                                    title = "";
-                                }
-                                return {
-                                  id: node.id,
-                                  type:
-                                    node.type === "FILE"
-                                      ? "doc"
-                                      : (node.type.toLowerCase() as
-                                          | "video"
-                                          | "image"
-                                          | "quiz"
-                                          | "doc"
-                                          | "file"
-                                          | "text"),
-                                  title,
-                                };
-                              })
-                            : []
-                        }
-                        onTitleClick={() => {
-                          console.log("group id", group.id);
-                          if (clubSlug && courseSlug && group.id) {
-                            navigate(
-                              `/club/${clubSlug}/course/${courseSlug}/nodegroup/${group.id}`
-                            );
-                          }
-                        }}
-                        onNodeClick={() => {
-                          if (clubSlug && courseSlug && group.id) {
-                            navigate(
-                              `/club/${clubSlug}/course/${courseSlug}/nodegroup/${group.id}`
-                            );
-                          }
-                        }}
-                      />
-                    </Box>
-                  ))}
-                </Box>
-              ))}
+              {(courseData?.sections ?? [])
+                .sort((a, b) => a.order - b.order)
+                .map((section) => (
+                  <Box key={section.id} mt={1}>
+                    <Section text={section.title} />
+                    {(section.nodeGroups ?? [])
+                      .sort((a, b) => a.order - b.order)
+                      .map((group) => (
+                        <Box mt={1.6} key={group.id}>
+                          <SectionCourses
+                            title={group.title}
+                            description={section.description}
+                            nodes={
+                              Array.isArray(group.nodes)
+                                ? group.nodes
+                                    ?.sort((a, b) => a.order - b.order)
+                                    .map((node) => {
+                                      let title = "";
+                                      switch (node.type) {
+                                        case "VIDEO":
+                                        case "IMAGE":
+                                        case "FILE":
+                                        case "TEXT":
+                                          title = node.data?.title ?? "";
+                                          break;
+                                        case "QUIZ":
+                                          title = node.data?.question ?? "";
+                                          break;
+                                        default:
+                                          title = "";
+                                      }
+                                      return {
+                                        id: node.id,
+                                        type:
+                                          node.type === "FILE"
+                                            ? "doc"
+                                            : (node.type.toLowerCase() as
+                                                | "video"
+                                                | "image"
+                                                | "quiz"
+                                                | "doc"
+                                                | "file"
+                                                | "text"),
+                                        title,
+                                      };
+                                    })
+                                : []
+                            }
+                            onTitleClick={() => {
+                              console.log("group id", group.id);
+                              if (clubSlug && courseSlug && group.id) {
+                                navigate(
+                                  `/club/${clubSlug}/course/${courseSlug}/nodegroup/${group.id}`
+                                );
+                              }
+                            }}
+                            onNodeClick={() => {
+                              if (clubSlug && courseSlug && group.id) {
+                                navigate(
+                                  `/club/${clubSlug}/course/${courseSlug}/nodegroup/${group.id}`
+                                );
+                              }
+                            }}
+                          />
+                        </Box>
+                      ))}
+                  </Box>
+                ))}
             </Box>
           </Box>
         </Box>
diff --git a/src/main/front/src/pages/NodeGroupPage.tsx b/src/main/front/src/pages/NodeGroupPage.tsx
index 8c55b9a8..4bc5fd93 100644
--- a/src/main/front/src/pages/NodeGroupPage.tsx
+++ b/src/main/front/src/pages/NodeGroupPage.tsx
@@ -25,7 +25,7 @@ import ClubRunningProgramBanner from "../components/ClubPage/ClubRunningProgramB
 const nodeHeightMap: Record<string, number | string> = {
   video: 600,
   file: 100,
-  image: 500,
+  image: "auto",
   quiz: "auto",
   text: "auto",
 };
@@ -58,12 +58,29 @@ function NodeGroupPage() {
     data: nodeGroupData,
     isLoading,
     error,
+    refetch,
   } = useQuery<NodeGroup>({
     queryKey: ["node-group", nodeGroupUUID],
     queryFn: () => fetchBe(`/v1/node-group/${nodeGroupUUID}`),
     enabled: !!nodeGroupUUID, // UUID 있을 때만 실행
   });
 
+  // 트랜스코딩 중인 비디오 노드가 있으면 3초마다 polling
+  useEffect(() => {
+    if (!nodeGroupData?.nodes) return;
+    const hasTranscoding = nodeGroupData.nodes.some(
+      (node) =>
+        node.type === "VIDEO" &&
+        node.data?.file?.status &&
+        ["UPLOADED", "TRANSCODING"].includes(node.data.file.status)
+    );
+    if (!hasTranscoding) return;
+    const interval = setInterval(() => {
+      refetch && refetch();
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [nodeGroupData, refetch]);
+
   useEffect(() => {
     if (!nodeGroupData?.id) return;
     fetchBe("/v1/progress/start", {
@@ -102,212 +119,328 @@ function NodeGroupPage() {
 
       {/* 노드 목록 */}
       <Box>
-        {nodeGroupData.nodes.map((node, index) => {
-          const emojiCountMap: Record<string, number> = {};
+        {nodeGroupData.nodes
+          .sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0))
+          .map((node, index) => {
+            const emojiCountMap: Record<string, number> = {};
 
-          const emojiSummary = Object.entries(emojiCountMap)
-            .map(([emoji]) => `${emoji}`)
-            .join(" ");
+            const emojiSummary = Object.entries(emojiCountMap)
+              .map(([emoji]) => `${emoji}`)
+              .join(" ");
 
-          const isOpen = openNodeId === node.id;
+            const isOpen = openNodeId === node.id;
 
-          return (
-            // 노드의 완전 겉부분, 댓글+노드내용
-            <Box display="flex" flexDirection="column" mt={2}>
-              {/* 노드 번호, 제목, 댓글 부분  */}
+            return (
+              // 노드의 완전 겉부분, 댓글+노드내용
+              <Box key={node.id} display="flex" flexDirection="column" mt={2}>
+                {/* 노드 번호, 제목, 댓글 부분  */}
 
-              <Box display="flex" justifyContent="end" mt={4} mb={0}>
-                <Box display="flex" flexDirection="column" flex={5}>
-                  <Typography variant="h5" color="#fff" mr={2}>
-                    {node.data.title}
-                  </Typography>
-                  <Typography
-                    fontSize={14}
-                    color="#ffffff99"
-                    mt={0.5}
-                    sx={{ lineHeight: 1.4 }}
-                  >
-                    {!(node.type === "TEXT") && node.data.description}
-                  </Typography>
-                </Box>
+                <Box display="flex" justifyContent="end" mt={4} mb={0}>
+                  <Box display="flex" flexDirection="column" flex={5}>
+                    <Typography variant="h5" color="#fff" mr={2}>
+                      {node.data.title}
+                    </Typography>
+                    <Typography
+                      fontSize={14}
+                      color="#ffffff99"
+                      mt={0.5}
+                      sx={{ lineHeight: 1.4 }}
+                    >
+                      {!(node.type === "TEXT") && node.data.description}
+                    </Typography>
+                  </Box>
 
-                <Box
-                  flex={4}
-                  display="flex"
-                  flexDirection="column"
-                  alignItems="end"
-                  justifyContent="flex-end"
-                  borderRadius={2}
-                  position="relative" // 댓글"창"의 위치 기준
-                >
-                  {/* 댓글 버튼 */}
                   <Box
+                    flex={4}
                     display="flex"
-                    alignItems="center"
+                    flexDirection="column"
+                    alignItems="end"
                     justifyContent="flex-end"
-                    gap={1}
-                    // pr={1}
-                    px={2}
-                    py={1}
-                    // mt={1}
-                    // mb={1}
-                    // width=""
                     borderRadius={2}
-                    bgcolor="rgba(255,255,255,0.8)"
-                    sx={{ cursor: "pointer" }}
-                    onClick={() => toggleComments(node.id)}
+                    position="relative" // 댓글"창"의 위치 기준
                   >
-                    <Typography
+                    {/* 댓글 버튼 */}
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="flex-end"
+                      gap={1}
+                      // pr={1}
+                      px={2}
+                      py={1}
+                      // mt={1}
+                      // mb={1}
+                      // width=""
+                      borderRadius={2}
+                      bgcolor="rgba(255,255,255,0.8)"
                       sx={{ cursor: "pointer" }}
-                      variant="body2"
-                      fontSize={20}
+                      onClick={() => toggleComments(node.id)}
                     >
-                      {emojiSummary}
-                    </Typography>
-                    {node.comments.length === 0 ? (
                       <Typography
-                        display="flex"
-                        variant="body2"
-                        color="gray"
-                        fontSize={14}
                         sx={{ cursor: "pointer" }}
+                        variant="body2"
+                        fontSize={20}
                       >
-                        댓글을 추가해보세요!
-                        <ChatBubbleOutlineIcon
-                          fontSize="small"
-                          sx={{ color: "gray", marginLeft: "10px" }}
-                        />{" "}
-                      </Typography>
-                    ) : (
-                      <Typography fontSize={14} color="black">
-                        {node.comments.length}{" "}
+                        {emojiSummary}
                       </Typography>
+                      {node.comments.length === 0 ? (
+                        <Typography
+                          display="flex"
+                          variant="body2"
+                          color="gray"
+                          fontSize={14}
+                          sx={{ cursor: "pointer" }}
+                        >
+                          댓글을 추가해보세요!
+                          <ChatBubbleOutlineIcon
+                            fontSize="small"
+                            sx={{ color: "gray", marginLeft: "10px" }}
+                          />{" "}
+                        </Typography>
+                      ) : (
+                        <Typography fontSize={14} color="black">
+                          {node.comments.length}{" "}
+                        </Typography>
+                      )}
+                    </Box>
+
+                    {isOpen && (
+                      <Box
+                        position="absolute"
+                        // top={-20}
+                        // left="100%" // 버튼 오른쪽에 위치
+                        top={40}
+                        zIndex={999}
+                        width={400}
+                        maxHeight={500}
+                        ml={1}
+                        overflow="auto"
+                        boxShadow={3}
+                        borderRadius={2}
+                      >
+                        <CommentSection
+                          nodeId={node.id}
+                          // onSubmit={() => alert("submit")}
+                        />
+                      </Box>
                     )}
                   </Box>
-
-                  {isOpen && (
-                    <Box
-                      position="absolute"
-                      // top={-20}
-                      // left="100%" // 버튼 오른쪽에 위치
-                      top={40}
-                      zIndex={999}
-                      width={400}
-                      maxHeight={500}
-                      ml={1}
-                      overflow="auto"
-                      boxShadow={3}
-                      borderRadius={2}
-                    >
-                      <CommentSection
-                        nodeId={node.id}
-                        // onSubmit={() => alert("submit")}
-                      />
-                    </Box>
-                  )}
                 </Box>
-              </Box>
-
-              {/* 노드 안쪽내용 (댓글 아래) */}
-              <Box
-                key={node.id}
-                borderRadius={4}
-                bgcolor={"#f0f0f010"}
-                height={nodeHeightMap[node.type.toLowerCase()] || 400}
-                mt={1}
-                position="relative"
-                p={2}
-                display="flex"
-                flexDirection="row"
-                gap={1}
-              >
-                {/* 콘텐츠 영역 */}
 
+                {/* 노드 안쪽내용 (댓글 아래) */}
                 <Box
+                  key={node.id}
+                  borderRadius={4}
+                  bgcolor={"#f0f0f010"}
+                  height={nodeHeightMap[node.type.toLowerCase()] || 400}
+                  mt={1}
+                  position="relative"
+                  p={2}
                   display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                  height="100%"
-                  borderRadius={2}
-                  color="white"
-                  sx={{
-                    flex: 5,
-                    cursor: node.type === "IMAGE" ? "pointer" : "default",
-                    transition: "background-color 0.2s",
-                  }}
+                  flexDirection="row"
+                  gap={1}
                 >
+                  {/* 콘텐츠 영역 */}
+
                   <Box
-                    width="100%"
-                    height="100%"
                     display="flex"
                     alignItems="center"
                     justifyContent="center"
+                    height="100%"
+                    borderRadius={2}
+                    color="white"
+                    sx={{
+                      flex: 5,
+                      cursor: node.type === "IMAGE" ? "pointer" : "default",
+                      transition: "background-color 0.2s",
+                    }}
                   >
-                    {/* 콘텐츠 조건 분기 */}
-                    {node.type === "VIDEO" && node.data?.file?.playlist ? (
-                      <VideoPlayer
-                        src={`https://cms.handong.app${node.data.file.playlist}`}
-                      />
-                    ) : node.type === "IMAGE" &&
-                      node.data?.file?.presignedUrl ? (
-                      <ImagePreviewWithDownload
-                        src={node.data.file.presignedUrl}
-                        filename={node.data.file.originalFileName}
-                      />
-                    ) : node.type === "FILE" &&
-                      node.data?.file?.presignedUrl ? (
-                      <DownloadFileBox
-                        fileUrl={node.data.file.presignedUrl}
-                        fileName={node.data.file.originalFileName}
-                      />
-                    ) : node.type === "QUIZ" &&
-                      node.data?.question &&
-                      Array.isArray(node.data.options) &&
-                      typeof node.data.answer === "string" ? (
-                      node.data.answer.includes("&") ? (
-                        <MultiAnswerQuizBox
-                          question={node.data.question}
-                          options={node.data.options}
-                          answer={node.data.answer}
+                    <Box
+                      width="100%"
+                      height="100%"
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      {/* 콘텐츠 조건 분기 */}
+                      {node.type === "VIDEO" ? (
+                        (() => {
+                          const file = node.data?.file;
+                          const status = file?.status;
+                          const progress = file?.progress;
+                          if (!file) {
+                            return (
+                              <Typography color="#999" fontSize={18}>
+                                비디오 파일 정보 없음
+                              </Typography>
+                            );
+                          }
+                          if (status === "TRANSCODING") {
+                            return (
+                              <Box
+                                width="100%"
+                                display="flex"
+                                flexDirection="column"
+                                alignItems="center"
+                                justifyContent="center"
+                              >
+                                <Typography
+                                  color="primary"
+                                  fontWeight={600}
+                                  mb={1}
+                                >
+                                  비디오 트랜스코딩 중...
+                                </Typography>
+                                <Box
+                                  display="flex"
+                                  alignItems="center"
+                                  gap={1}
+                                  width={220}
+                                >
+                                  <Box width={120}>
+                                    <Box
+                                      sx={{
+                                        height: 8,
+                                        background: "#eee",
+                                        borderRadius: 4,
+                                        overflow: "hidden",
+                                      }}
+                                    >
+                                      <Box
+                                        sx={{
+                                          width: `${progress || 0}%`,
+                                          height: "100%",
+                                          background: "#1976d2",
+                                          transition: "width 0.3s",
+                                        }}
+                                      />
+                                    </Box>
+                                  </Box>
+                                  <Typography
+                                    fontSize={14}
+                                    color="text.secondary"
+                                  >
+                                    {progress != null
+                                      ? `${progress}%`
+                                      : "진행률 계산 중..."}
+                                  </Typography>
+                                </Box>
+                                <Typography
+                                  variant="body2"
+                                  color="text.secondary"
+                                  mt={1}
+                                >
+                                  트랜스코딩이 완료되면 영상이 표시됩니다.
+                                </Typography>
+                              </Box>
+                            );
+                          }
+                          if (status === "UPLOADED") {
+                            return (
+                              <Typography color="primary" fontWeight={600}>
+                                비디오 업로드가 완료되었습니다. 트랜스코딩을
+                                기다리는 중입니다.
+                              </Typography>
+                            );
+                          }
+                          if (status === "PENDING") {
+                            return (
+                              <Typography color="primary" fontWeight={600}>
+                                비디오 업로드 대기 중입니다.
+                              </Typography>
+                            );
+                          }
+                          if (status === "UPLOADING") {
+                            return (
+                              <Typography color="primary" fontWeight={600}>
+                                비디오 업로드 중입니다.
+                              </Typography>
+                            );
+                          }
+                          if (status === "TRANSCODE_FAILED") {
+                            return (
+                              <Typography color="error" fontWeight={600}>
+                                비디오 트랜스코딩에 실패했습니다. 다시 업로드해
+                                주세요.
+                              </Typography>
+                            );
+                          }
+                          if (
+                            status === "TRANSCODE_COMPLETED" &&
+                            file.playlist
+                          ) {
+                            return (
+                              <VideoPlayer
+                                src={`https://cms.handong.app${file.playlist}`}
+                              />
+                            );
+                          }
+                          return (
+                            <Typography color="#999" fontSize={18}>
+                              비디오 파일이 준비되지 않았습니다.
+                            </Typography>
+                          );
+                        })()
+                      ) : node.type === "IMAGE" &&
+                        node.data?.file?.presignedUrl ? (
+                        <ImagePreviewWithDownload
+                          src={node.data.file.presignedUrl}
+                          filename={node.data.file.originalFileName}
                         />
-                      ) : (
-                        <QuizBox
-                          question={node.data.question}
-                          options={node.data.options}
-                          answer={node.data.answer}
+                      ) : node.type === "FILE" &&
+                        node.data?.file?.presignedUrl ? (
+                        <DownloadFileBox
+                          fileUrl={node.data.file.presignedUrl}
+                          fileName={node.data.file.originalFileName}
                         />
-                      )
-                    ) : node.type === "TEXT" && node.data?.description ? (
-                      <MarkdownViewer content={node.data.description} />
-                    ) : (
-                      // 👉 콘텐츠가 없을 때 표시되는 fallback 메시지
-                      <Box
-                        display="flex"
-                        justifyContent="center"
-                        alignItems="center"
-                        height="100%"
-                        width="100%"
-                      >
-                        <Typography
-                          color="#999"
-                          fontSize={18}
+                      ) : node.type === "QUIZ" &&
+                        node.data?.question &&
+                        Array.isArray(node.data.options) &&
+                        typeof node.data.answer === "string" ? (
+                        node.data.answer.includes("&") ? (
+                          <MultiAnswerQuizBox
+                            question={node.data.question}
+                            options={node.data.options}
+                            answer={node.data.answer}
+                          />
+                        ) : (
+                          <QuizBox
+                            question={node.data.question}
+                            options={node.data.options}
+                            answer={node.data.answer}
+                          />
+                        )
+                      ) : node.type === "TEXT" && node.data?.description ? (
+                        <MarkdownViewer content={node.data.description} />
+                      ) : (
+                        // 👉 콘텐츠가 없을 때 표시되는 fallback 메시지
+                        <Box
                           display="flex"
+                          justifyContent="center"
                           alignItems="center"
+                          height="100%"
+                          width="100%"
                         >
-                          아직 콘텐츠가 없습니다.
-                          <HourglassEmptyIcon
-                            fontSize="large"
-                            style={{ marginLeft: "4px" }}
-                          />
-                        </Typography>
-                      </Box>
-                    )}
+                          <Typography
+                            color="#999"
+                            fontSize={18}
+                            display="flex"
+                            alignItems="center"
+                          >
+                            아직 콘텐츠가 없습니다.
+                            <HourglassEmptyIcon
+                              fontSize="large"
+                              style={{ marginLeft: "4px" }}
+                            />
+                          </Typography>
+                        </Box>
+                      )}
+                    </Box>
                   </Box>
                 </Box>
               </Box>
-            </Box>
-          );
-        })}
+            );
+          })}
       </Box>
       <Box display="flex" justifyContent="flex-end">
         <NextNodeGroupButton currentNodeGroupId={nodeGroupData.id} />
diff --git a/src/main/front/src/types/nodeGroupData.types.ts b/src/main/front/src/types/nodeGroupData.types.ts
index c8cdd2e2..9c8fa511 100644
--- a/src/main/front/src/types/nodeGroupData.types.ts
+++ b/src/main/front/src/types/nodeGroupData.types.ts
@@ -15,6 +15,7 @@ export interface NodeFile {
   presignedUrl?: string;
   playlist?: string;
   status?: string;
+  progress?: number;
 }
 
 export interface NodeData {