diff --git a/packages/client/src/app/routes/Router.tsx b/packages/client/src/app/routes/Router.tsx
index 0007b46d..0f4920e6 100644
--- a/packages/client/src/app/routes/Router.tsx
+++ b/packages/client/src/app/routes/Router.tsx
@@ -27,16 +27,14 @@ export default function Router() {
       </Route>
       <Route element={<GuestLayout />}>
         <Route element={<PreventGuestRouter />}>
-          <Route path="/quiz/session/:pinCode/:id" element={<QuizSession />} />
           <Route path="/quiz/wait/:pinCode" element={<QuizWaitPage />} />
           <Route path="/guest/questions" element={<GuestQnA />} />
         </Route>
         <Route path="/nickname/:pinCode" element={<Nickname />} />
       </Route>
       <Route path="/quiz/question" element={<QuizQuestion />} />
-
+      <Route path="/quiz/session/:pinCode/:id" element={<QuizSession />} />
       <Route path="/quiz/session/host/:pinCode/:id" element={<QuizMasterSession />} />
-
       <Route path="/quiz/session/:pinCode/end" element={<Leaderboard />} />
       <Route path={'*'} element={<NotFound />} />
     </Routes>
diff --git a/packages/client/src/pages/leaderboard/index.tsx b/packages/client/src/pages/leaderboard/index.tsx
index 9af0f0af..0458424b 100644
--- a/packages/client/src/pages/leaderboard/index.tsx
+++ b/packages/client/src/pages/leaderboard/index.tsx
@@ -1,10 +1,13 @@
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { getQuizSocket } from '@/shared/utils/socket';
 import TopPlayer from './TopPlayer';
 import PlayerList from './PlayerList';
 import ConfettiBackground from './ConfettiBackground';
 import { useLeaderboard } from './model/hooks/useLeaderboard';
+import { deleteCookie } from '@/shared/utils/cookie';
+import { LogOut } from 'lucide-react';
+import LoadingSpinner from '@/shared/assets/icons/loading-alt-loop.svg?react';
 
 export interface Ranking {
   nickname: string;
@@ -17,22 +20,39 @@ export default function Leaderboard() {
 
   const socket = getQuizSocket();
   const { data, isLoading } = useLeaderboard(socket, pinCode ?? '');
+  const navigate = useNavigate();
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <LoadingSpinner className="animate-spin w-10 h-10" />
+      </div>
+    );
   }
 
   if (data) {
-    //TODO: 쿠키 삭제 로직
+    deleteCookie('sid');
   }
 
   return (
     <section className="relative w-dvw min-h-dvh h-fit bg-gradient-to-br from-blue-100 via-white to-purple-100">
       <ConfettiBackground />
       <div className="w-full max-w-3xl mx-auto p-6 bg-gradient-to-br from-blue-50 via-white to-purple-50 rounded-2xl shadow-xl">
-        <span className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
-          최종 결과 🎉
-        </span>
+        <div className="flex items-center justify-between">
+          <span className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+            최종 결과 🎉
+          </span>
+          <button
+            className="flex items-center px-4 py-2 text-sm font-medium text-gray-600 
+                  bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-50 
+                   hover:text-gray-900 hover:border-gray-300 transition-all duration-200 ease-in-out
+                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300"
+            onClick={() => navigate('/')}
+          >
+            <LogOut className="h-4 w-4 mr-2" />
+            나가기
+          </button>
+        </div>
         <div className="flex justify-center ">
           <div className="w-full">
             <TopPlayer players={data?.rankerData.slice(0, 3) ?? []} />
@@ -48,7 +68,9 @@ export default function Leaderboard() {
             </div>
             <div className="p-2 border-x border-gray-100">
               <div className="text-sm text-gray-500 mb-1">평균 점수</div>
-              <div className="font-bold text-gray-800">{data?.averageScore}점</div>
+              <div className="font-bold text-gray-800">
+                {Number(data?.averageScore.toFixed(1))}점
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/client/src/pages/main/index.tsx b/packages/client/src/pages/main/index.tsx
index d575008b..fd99475a 100644
--- a/packages/client/src/pages/main/index.tsx
+++ b/packages/client/src/pages/main/index.tsx
@@ -1,9 +1,25 @@
 import { toastController } from '@/features/toast/model/toastController';
-import { getPincodeExist, checkPincodePossible } from '@/shared/api/games';
+import { getPincodeExist, checkPincodePossible, checkPincodeStatus } from '@/shared/api/games';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FloatingSquare from './ui/FloatingSquare';
 import FloatingQuestion from './ui/FloatingQuestion';
+import { getCookie } from '@/shared/utils/cookie';
+
+const mappingGameStatus = (status: string, pinCode: string) => {
+  switch (status) {
+    case 'WAITING':
+      return `/quiz/wait/${pinCode}`;
+    case 'IN PROGRESS':
+      return `/quiz/session/${pinCode}/1`;
+    case 'LEADERBOARD':
+      return `/quiz/session/${pinCode}/end`;
+    case 'END':
+      return `/quiz/session/${pinCode}/end`;
+    default:
+      return '/';
+  }
+};
 
 export default function MainPage() {
   const [pinCode, setPinCode] = useState<string>('');
@@ -18,12 +34,24 @@ export default function MainPage() {
     const response = await getPincodeExist(pinCode);
 
     if (response.isExist) {
-      const checkResponse = await checkPincodePossible(pinCode);
-      console.log(checkResponse);
-      if (checkResponse.isPossible) {
-        navigate(`/nickname/${pinCode}`);
+      const sid = getCookie('sid');
+      if (sid) {
+        const response = await checkPincodeStatus(pinCode, sid);
+        if (response.isPossible) {
+          const status = response.gameStatus;
+          const path = mappingGameStatus(status, pinCode);
+          navigate(path);
+        } else {
+          toast.info('게임이 종료되었습니다.');
+        }
       } else {
-        toast.warning('방이 가득 찼습니다.');
+        const checkResponse = await checkPincodePossible(pinCode);
+        console.log(checkResponse);
+        if (checkResponse.isPossible) {
+          navigate(`/nickname/${pinCode}`);
+        } else {
+          toast.warning('방이 가득 찼습니다.');
+        }
       }
       return;
     }
diff --git a/packages/client/src/pages/quiz-list/ui/ClassItem.tsx b/packages/client/src/pages/quiz-list/ui/ClassItem.tsx
index 7495e053..d8e4064b 100644
--- a/packages/client/src/pages/quiz-list/ui/ClassItem.tsx
+++ b/packages/client/src/pages/quiz-list/ui/ClassItem.tsx
@@ -41,7 +41,6 @@ export default function ClassItem({ index, quizList }: ClassItemProps) {
     setCookie('sid', sid);
 
     const pinCode = await waitForSocketEvent('pincode', socket);
-    setCookie('pinCode', pinCode);
 
     navigate(`/quiz/wait/${pinCode}`);
   };
diff --git a/packages/client/src/pages/quiz-master-session/index.lazy.tsx b/packages/client/src/pages/quiz-master-session/index.lazy.tsx
index 0d5cbc67..cdadbc29 100644
--- a/packages/client/src/pages/quiz-master-session/index.lazy.tsx
+++ b/packages/client/src/pages/quiz-master-session/index.lazy.tsx
@@ -49,6 +49,7 @@ export default function QuizMasterSessionLazyPage() {
         quizData={quiz.currentQuizData}
         initializeStates={initializeStates}
         setInitializeStates={setInitializeStates}
+        totalParticipants={quiz.participantLength}
       />
     </div>
   );
diff --git a/packages/client/src/pages/quiz-master-session/ui/AnswerChart.tsx b/packages/client/src/pages/quiz-master-session/ui/AnswerChart.tsx
index 724b6140..35b5ef23 100644
--- a/packages/client/src/pages/quiz-master-session/ui/AnswerChart.tsx
+++ b/packages/client/src/pages/quiz-master-session/ui/AnswerChart.tsx
@@ -16,7 +16,7 @@ import { QuizData } from '@youquiz/shared/interfaces/utils/quizdata.interface';
 interface AnswerStatProps {
   answerStats: MasterStatisticsResponse['choiceStatus'];
   quizData: QuizData;
-  participantCount: number;
+  totalParticipants: number;
 }
 
 const calculateTickCount = (maxValue: number): number => {
@@ -28,13 +28,13 @@ const calculateTickCount = (maxValue: number): number => {
   return Math.max(divisors[Math.min(divisors.length - 1, maxTicks - 1)], 2);
 };
 
-export default function AnswerGraph({ answerStats, quizData, participantCount }: AnswerStatProps) {
+export default function AnswerGraph({ answerStats, quizData, totalParticipants }: AnswerStatProps) {
   const answerStatsArray = quizData.choices.map((choice, index) => ({
     answer: `${index + 1}번: ${choice.content} ${choice.isCorrect ? '(정답)' : ''}`,
     count: answerStats[index] || 0,
     isCorrect: choice.isCorrect,
   }));
-  const tickCount = calculateTickCount(participantCount);
+  const tickCount = calculateTickCount(totalParticipants);
 
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -64,7 +64,7 @@ export default function AnswerGraph({ answerStats, quizData, participantCount }:
           axisLine={false}
           tickLine={false}
           tickCount={tickCount}
-          domain={[0, participantCount]}
+          domain={[0, totalParticipants]}
         />
         <Tooltip formatter={(value: number) => [`${value}명`, '참여자 수']} />
         <Legend formatter={() => '참여자 수'} />
diff --git a/packages/client/src/pages/quiz-master-session/ui/Statistics.tsx b/packages/client/src/pages/quiz-master-session/ui/Statistics.tsx
index 016db9ed..234d25ca 100644
--- a/packages/client/src/pages/quiz-master-session/ui/Statistics.tsx
+++ b/packages/client/src/pages/quiz-master-session/ui/Statistics.tsx
@@ -13,6 +13,7 @@ interface StatisticsProps {
   quizData: QuizData;
   initializeStates: boolean;
   setInitializeStates: React.Dispatch<React.SetStateAction<boolean>>;
+  totalParticipants: number;
 }
 
 interface HistoryItem {
@@ -26,6 +27,7 @@ export default function Statistics({
   quizData,
   initializeStates,
   setInitializeStates,
+  totalParticipants,
 }: StatisticsProps) {
   const socket = getQuizSocket();
   const [masterStatistics, setMasterStatistics] = usePersistState<MasterStatisticsResponse>(
@@ -72,7 +74,7 @@ export default function Statistics({
       <div className="grid grid-cols-[3fr_1fr] gap-4 mx-5 h-[calc(100vh-300px)]">
         <AnswerGraph
           answerStats={masterStatistics.choiceStatus}
-          participantCount={masterStatistics.participantLength}
+          totalParticipants={totalParticipants}
           quizData={quizData}
         />
         <div>
diff --git a/packages/client/src/pages/quiz-session/index.lazy.tsx b/packages/client/src/pages/quiz-session/index.lazy.tsx
index 463ec74d..58c7d9de 100644
--- a/packages/client/src/pages/quiz-session/index.lazy.tsx
+++ b/packages/client/src/pages/quiz-session/index.lazy.tsx
@@ -12,7 +12,6 @@ export default function QuizSessionLazyPage() {
   const { pinCode } = useParams();
   const [isQuizEnd, setIsQuizEnd] = usePersistState('isQuizEnd', false);
   const { data: quiz, refetch } = useQuizSession({ socket, pinCode: pinCode as string });
-
   return (
     <>
       {!isQuizEnd && (
@@ -21,8 +20,13 @@ export default function QuizSessionLazyPage() {
             startTime={quiz.startTime}
             timeLimit={quiz.currentQuizData.timeLimit}
             setQuizEnd={setIsQuizEnd}
+            totalParticipants={quiz.participantLength}
+          />
+          <QuizBox
+            quiz={quiz.currentQuizData}
+            startTime={quiz.startTime}
+            quizMaxNum={quiz.quizMaxNum}
           />
-          <QuizBox quiz={quiz.currentQuizData} startTime={quiz.startTime} />
         </div>
       )}
       {isQuizEnd && (
diff --git a/packages/client/src/pages/quiz-session/model/hooks/useGetMyInfo.ts b/packages/client/src/pages/quiz-session/model/hooks/useGetMyInfo.ts
new file mode 100644
index 00000000..e55deeb9
--- /dev/null
+++ b/packages/client/src/pages/quiz-session/model/hooks/useGetMyInfo.ts
@@ -0,0 +1,17 @@
+import { getCookie } from '@/shared/utils/cookie';
+import { emitEventWithAck } from '@/shared/utils/emitEventWithAck';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Socket } from 'socket.io-client';
+
+interface UseGetMyInfoProps {
+  socket: Socket;
+}
+
+export const useGetMyInfo = ({ socket }: UseGetMyInfoProps) => {
+  return useSuspenseQuery({
+    queryKey: ['myInfo'],
+    queryFn: () => {
+      return emitEventWithAck<any>(socket, 'my info', { sid: getCookie('sid') });
+    },
+  });
+};
diff --git a/packages/client/src/pages/quiz-session/model/hooks/useQuizSession.ts b/packages/client/src/pages/quiz-session/model/hooks/useQuizSession.ts
index 0e80a3fe..c799896d 100644
--- a/packages/client/src/pages/quiz-session/model/hooks/useQuizSession.ts
+++ b/packages/client/src/pages/quiz-session/model/hooks/useQuizSession.ts
@@ -12,6 +12,7 @@ interface ShowQuizResponse {
   currentQuizData: QuizData;
   isLast: boolean;
   startTime: number;
+  participantLength: number;
 }
 
 export const useQuizSession = ({ socket, pinCode }: UseQuizSessionProps) => {
diff --git a/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx b/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx
new file mode 100644
index 00000000..51df29ef
--- /dev/null
+++ b/packages/client/src/pages/quiz-session/ui/ProgressBar.tsx
@@ -0,0 +1,64 @@
+interface ProgressBarProps {
+  /** 전체 시간 설정 */
+  time: number;
+  /** 프로그래스바 타입 */
+  type: 'success' | 'warning' | 'error' | 'info' | 'gradient';
+  /** 프로그래스바 모양 */
+  barShape?: 'rounded' | 'square';
+  /** 마우스 호버 시 정지 여부 */
+  pauseOnHover?: boolean;
+  /** 애니메이션 종료 시 콜백 함수 */
+  handleAnimationEnd?: () => void;
+  /** 현재 진행 시간 */
+  currentTime?: number;
+}
+
+const progressBarColors = {
+  success: 'bg-secondary',
+  warning: 'bg-yellow-500',
+  error: 'bg-red-500',
+  info: 'bg-blue-500',
+  gradient: 'bg-gradient-to-r from-red-500 to-orange-500',
+};
+
+const progressBarShapes = {
+  rounded: 'rounded-r-base',
+  square: 'rounded-none',
+};
+
+const ProgressBar = ({
+  time = 5,
+  type = 'success',
+  barShape = 'rounded',
+  pauseOnHover,
+  handleAnimationEnd,
+  currentTime = 0,
+}: ProgressBarProps) => {
+  const progressBarColor = progressBarColors[type];
+  const progressBarShape = progressBarShapes[barShape];
+
+  // 현재 시간에 따른 진행률 계산
+  const progress = Math.min(Math.max((currentTime / time) * 100, 0), 100);
+  // 남은 시간 비율 계산
+  const remainingTimeRatio = 1 - currentTime / time;
+  // 애니메이션 지속 시간 계산 (초 단위)
+  const animationDuration = time * remainingTimeRatio;
+
+  return (
+    <section className="group" onAnimationEnd={handleAnimationEnd}>
+      <div className="h-[6px] w-full bg-transparent">
+        <div
+          className={`h-[6px] ${progressBarColor} ${progressBarShape} ${
+            pauseOnHover && 'group-hover:[animation-play-state:paused]'
+          }`}
+          style={{
+            width: `${progress}%`,
+            animation: `progress ${animationDuration}s linear forwards`,
+          }}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default ProgressBar;
diff --git a/packages/client/src/pages/quiz-session/ui/QuizBox.tsx b/packages/client/src/pages/quiz-session/ui/QuizBox.tsx
index 18509a2d..5ea41c94 100644
--- a/packages/client/src/pages/quiz-session/ui/QuizBox.tsx
+++ b/packages/client/src/pages/quiz-session/ui/QuizBox.tsx
@@ -11,9 +11,10 @@ import { usePersistState } from '@/shared/hooks/usePersistState';
 interface QuizBoxProps {
   quiz: QuizData;
   startTime: number;
+  quizMaxNum: number;
 }
 
-export default function QuizBox({ quiz, startTime }: QuizBoxProps) {
+export default function QuizBox({ quiz, startTime, quizMaxNum }: QuizBoxProps) {
   const { pinCode } = useParams();
   const [selectedAnswer, setSelectedAnswer] = useState<number[]>([]);
   const [hasSubmitted, setHasSubmitted] = usePersistState('hasSubmitted', false);
@@ -99,13 +100,8 @@ export default function QuizBox({ quiz, startTime }: QuizBoxProps) {
       <div className="relative z-10 p-6 max-w-4xl mx-auto mb-8">
         <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-12">
           <div className="flex items-center justify-between mb-6">
-            <span className="text-sm text-gray-500">Question {quiz.position}/10</span>
             <span className="text-sm text-gray-500">
-              난이도
-              <div className="flex items-center">
-                <div className="w-12 h-2 bg-gradient-to-t from-blue-200 to-blue-100 rounded-base" />
-                <div className="w-12 h-2 bg-gradient-to-t from-blue-200 to-blue-100 rounded-base" />
-              </div>
+              Question {quiz.position + 1}/{quizMaxNum + 1}
             </span>
           </div>
           {/* 문제 */}
@@ -159,7 +155,7 @@ export default function QuizBox({ quiz, startTime }: QuizBoxProps) {
           <button
             ref={hardButtonRef}
             onClick={() => handleReaction('hard')}
-            className={`relative w-[160px] px-4 py-2 rounded-full transition-all flex items-center justify-center space-x-2 ${
+            className={`relative w-[170px] px-4 py-2 rounded-full transition-all flex items-center justify-center space-x-2 ${
               reactionStats.hard > 0
                 ? 'bg-red-500/90 text-white'
                 : 'bg-white border hover:border-red-400'
diff --git a/packages/client/src/pages/quiz-session/ui/QuizEnd.tsx b/packages/client/src/pages/quiz-session/ui/QuizEnd.tsx
index e667c8fe..5072e5fa 100644
--- a/packages/client/src/pages/quiz-session/ui/QuizEnd.tsx
+++ b/packages/client/src/pages/quiz-session/ui/QuizEnd.tsx
@@ -24,7 +24,7 @@ const LOCAL_STORAGE_KEYS = [
   'participantStatistics',
   'hasSubmitted',
   'submitOrder',
-  'remianingTime',
+  'ramainingTime',
 ];
 
 export default function QuizEnd({ refetch, setQuizEnd }: QuizEndProps) {
@@ -34,7 +34,6 @@ export default function QuizEnd({ refetch, setQuizEnd }: QuizEndProps) {
 
   const { data: ranking } = useShowRanking({ socket, pinCode: pinCode as string });
   console.log(ranking);
-  // TODO: localStorage 삭제하기
   useEffect(() => {
     const handleStartQuiz = () => {
       clearLocalStorage(LOCAL_STORAGE_KEYS);
@@ -58,7 +57,7 @@ export default function QuizEnd({ refetch, setQuizEnd }: QuizEndProps) {
   }, []);
 
   return (
-    <div className="h-[calc(100vh-78px)] bg-gradient-to-b from-blue-100 to-white p-4">
+    <div className="h-dvh bg-gradient-to-b from-blue-100 to-white p-4">
       <div className="max-w-2xl mx-auto mt-12 p-16 ">
         <div className="text-center mb-8">
           <span className="text-4xl font-semibold text-gray-600">🏆 중 간 점 검</span>
diff --git a/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx b/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx
index 8c4f3acb..5f559a03 100644
--- a/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx
+++ b/packages/client/src/pages/quiz-session/ui/QuizHeader.tsx
@@ -1,27 +1,53 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-import { getQuizSocket } from '@/shared/utils/socket';
 import { usePersistState } from '@/shared/hooks/usePersistState';
+import { getQuizSocket } from '@/shared/utils/socket';
+import { useGetMyInfo } from '../model/hooks/useGetMyInfo';
+
+import DogImage from '@/shared/assets/characters/강아지.png';
+import CatImage from '@/shared/assets/characters/고양이.png';
+import PigImage from '@/shared/assets/characters/돼지.png';
+import RabbitImage from '@/shared/assets/characters/토끼.png';
+import PenguinImage from '@/shared/assets/characters/펭귄.png';
+import HamsterImage from '@/shared/assets/characters/햄스터.png';
+import { Calendar, Clock, Users } from 'lucide-react';
+// import ProgressBar from './ProgressBar';
 
 interface QuizHeaderProps {
   startTime: number;
   timeLimit: number;
   setQuizEnd: React.Dispatch<React.SetStateAction<boolean>>;
+  totalParticipants: number;
 }
 
-export default function QuizHeader({ startTime, timeLimit, setQuizEnd }: QuizHeaderProps) {
-  const socket = getQuizSocket();
-  const [submitStatus, setSubmitStatus] = useState<any>({
-    count: 0,
-    total: 0,
-  });
+const characters = [DogImage, CatImage, PigImage, RabbitImage, PenguinImage, HamsterImage];
+const characterNames = ['강아지', '고양이', '돼지', '토끼', '펭귄', '햄스터'];
+
+export default function QuizHeader({
+  startTime,
+  timeLimit,
+  setQuizEnd,
+  totalParticipants,
+}: QuizHeaderProps) {
   const [remainingTime, setRemainingTime] = usePersistState('ramainingTime', timeLimit);
+  const [participantStatistics, setParticipantStatistics] = usePersistState(
+    'participantStatistics',
+    {
+      totalSubmit: 0,
+    },
+  );
+  const socket = getQuizSocket();
+  const { data: myInfo } = useGetMyInfo({ socket });
+  const { nickname, character } = myInfo;
 
   useEffect(() => {
     const intervalId = setInterval(() => {
       const timeLeft = timeLimit - Math.floor((Date.now() - startTime) / 1000);
       setRemainingTime(timeLeft);
     }, 1000);
+    socket.on('participant statistics', (response) => {
+      setParticipantStatistics(response);
+    });
 
     return () => {
       clearInterval(intervalId);
@@ -29,31 +55,52 @@ export default function QuizHeader({ startTime, timeLimit, setQuizEnd }: QuizHea
   }, [startTime, timeLimit]);
 
   useEffect(() => {
-    if (remainingTime === 0) {
+    if (remainingTime <= 0) {
       setQuizEnd(true);
     }
   }, [remainingTime]);
 
-  useEffect(() => {
-    const handleSubmitStatus = (status: any) => {
-      console.log('submitStatus', status);
-      setSubmitStatus(status);
-    };
-
-    socket.on('submit status', handleSubmitStatus);
-
-    return () => {
-      socket.off('submit status', handleSubmitStatus);
-    };
-  }, []);
+  useEffect(() => {});
 
   return (
     <div className="relative z-10 p-6 max-w-4xl mx-auto pt-8 ">
-      <div className="flex justify-between items-center bg-white backdrop-blur-sm rounded-2xl shadow-lg p-4">
-        <div className="text-lg text-black-400 font-semibold">
-          {submitStatus.count} / {submitStatus.total}명 제출
+      <div className="flex-col justify-between items-center bg-white backdrop-blur-sm rounded-2xl shadow-lg pb-4 px-4">
+        <div className="flex justify-between">
+          <div className="flex flex-col p-2">
+            <img
+              src={characters[character]}
+              alt={`${characterNames[character]}character`}
+              className="w-16 h-16 rounded-full"
+            />
+            <h3 className="font-lg text-gray-500">{nickname}</h3>
+          </div>
+          <div className="flex flex-col">
+            <div className="flex items-center space-x-2 pt-6">
+              <Clock className="w-4 h-4 text-gray-500" />
+              <span className="text-gray-600">{remainingTime}초 남음</span>
+            </div>
+            {/* <ProgressBar
+              type="gradient"
+              time={timeLimit as 5}
+              currentTime={remainingTime}
+              pauseOnHover={false}
+            /> */}
+          </div>
+        </div>
+        <div className="border-t-2 pt-2">
+          <div className="flex justify-between h-10">
+            <div className="flex items-center space-x-2">
+              <Users className="w-4 h-4 text-gray-500" />
+              <span className="text-lg text-gray-600">
+                제출자 {participantStatistics.totalSubmit || 0}/{totalParticipants}
+              </span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Calendar className="w-4 h-4 text-gray-500" />
+              <span className="text-lg text-gray-600">2024.12.03</span>
+            </div>
+          </div>
         </div>
-        <div className="text-bold-lg">{remainingTime}초 남음</div>
       </div>
     </div>
   );
diff --git a/packages/client/src/pages/quiz-session/ui/QuizLoading.tsx b/packages/client/src/pages/quiz-session/ui/QuizLoading.tsx
index c5240776..beded324 100644
--- a/packages/client/src/pages/quiz-session/ui/QuizLoading.tsx
+++ b/packages/client/src/pages/quiz-session/ui/QuizLoading.tsx
@@ -22,7 +22,7 @@ const QuizLoading = () => {
 
           <div className="mt-8 text-center">
             <h2 className="text-xl font-medium text-slate-700 tracking-wide">
-              다음 퀴즈로 이동 중 입니다.
+              데이터를 가져오는 중 입니다.
             </h2>
 
             <div className="flex items-center justify-center gap-1.5 mt-3">
diff --git a/packages/client/src/shared/api/games/index.ts b/packages/client/src/shared/api/games/index.ts
index e7740c54..5afb8613 100644
--- a/packages/client/src/shared/api/games/index.ts
+++ b/packages/client/src/shared/api/games/index.ts
@@ -7,3 +7,7 @@ export function getPincodeExist(pinCode: string) {
 export function checkPincodePossible(pinCode: string) {
   return apiClient.get(`/games/${pinCode}/check`);
 }
+
+export function checkPincodeStatus(pinCode: string, sid: string) {
+  return apiClient.get(`/games/${pinCode}/sid/${sid}/status`);
+}
diff --git a/packages/client/src/shared/boundary/AsyncBoundary.tsx b/packages/client/src/shared/boundary/AsyncBoundary.tsx
index 475b811a..c6ad2318 100644
--- a/packages/client/src/shared/boundary/AsyncBoundary.tsx
+++ b/packages/client/src/shared/boundary/AsyncBoundary.tsx
@@ -1,16 +1,6 @@
 import { Suspense } from 'react';
-import LoadingSpinner from '@/shared/assets/icons/loading-alt-loop.svg?react';
+import QuizLoading from '@/pages/quiz-session/ui/QuizLoading';
 
 export default function AsyncBoundary({ children }: { children: React.ReactNode }) {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex items-center justify-center w-screen h-screen">
-          <LoadingSpinner className="animate-spin w-16 h-16 md:w-24 md:h-24 lg:w-32 lg:h-32" />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
+  return <Suspense fallback={<QuizLoading />}>{children}</Suspense>;
 }
diff --git a/packages/client/src/shared/utils/cookie.ts b/packages/client/src/shared/utils/cookie.ts
index c2f205b5..cb92702d 100644
--- a/packages/client/src/shared/utils/cookie.ts
+++ b/packages/client/src/shared/utils/cookie.ts
@@ -19,3 +19,7 @@ export function setCookie(name: string, val: any, day?: number) {
     document.cookie = `${name}=${value}; path=/`;
   }
 }
+
+export function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/`;
+}
diff --git a/packages/server/src/module/game/games/game.gateway.ts b/packages/server/src/module/game/games/game.gateway.ts
index 5eaaea9a..dd87ac68 100644
--- a/packages/server/src/module/game/games/game.gateway.ts
+++ b/packages/server/src/module/game/games/game.gateway.ts
@@ -197,7 +197,7 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
     // 퀴즈 데이터 가져오기, 초이스 개수를 알아야하기 위해 -> 이후 초이스 배열 만들어야함
     const quizData = JSON.parse(await this.redisService.get(`classId=${classId}`));
     console.log('upadate', updatedCurrentOrder);
-    const currentQuizData = quizData[updatedCurrentOrder];
+    const currentQuizData = quizData.find((quiz) => quiz.position === updatedCurrentOrder);
 
     const choicesLength = currentQuizData['choices'].length;
     const choiceStatus = Object.fromEntries(
@@ -231,14 +231,14 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
     const { pinCode } = payload;
     const gameInfo = JSON.parse(await this.redisService.get(`gameId=${pinCode}`));
 
-    const { classId, currentOrder, quizMaxNum } = gameInfo;
+    const { classId, currentOrder, quizMaxNum, participantList } = gameInfo;
     // TODO:캐싱된 퀴즈를 가져온다. 퀴즈를 생성할 경우, 만들어졌을거라 예상
     // 만일 레디스에 퀴즈가 저장되어있지않다면, 퀴즈를 다시 캐싱해오는 로직이 필요할지도.
 
     // 퀴즈 데이터 가져오기 이건 참여자들에게 보여줄려고 get한 데이터
     const quizData = JSON.parse(await this.redisService.get(`classId=${classId}`));
 
-    const currentQuizData = quizData[currentOrder];
+    const currentQuizData = quizData.find((quiz) => quiz.position === currentOrder);
 
     const isLast = gameInfo.currentOrder === quizMaxNum ? true : false;
 
@@ -247,8 +247,10 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
       await this.redisService.get(`gameId=${pinCode}:quizId=${currentOrder}`),
     );
 
+    const participantLength = participantList.length;
+
     const startTime = quizRedis.startTime;
-    return { quizMaxNum, currentQuizData, startTime, isLast };
+    return { quizMaxNum, currentQuizData, startTime, isLast, participantLength };
   }
 
   private async storeQuizToRedis(classId: number) {
@@ -467,4 +469,15 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
     const { pinCode, message, position } = payload;
     this.server.to(pinCode).emit('message', { message, position });
   }
+
+  @SubscribeMessage('my info')
+  async handleMyInfo(client: Socket, payload: any) {
+    const { sid } = payload;
+    const sidType = await this.gameService.checkSidType(sid);
+    const key = sidType.type === 'master' ? `master_sid=${sid}` : `participant_sid=${sid}`;
+
+    const { nickname, character } = JSON.parse(await this.redisService.get(key));
+
+    return { nickname, character };
+  }
 }