diff --git a/src/entities/main/ui/DateContainer/index.tsx b/src/entities/main/ui/DateContainer/index.tsx
index c6eb2ef7..4bcaaf13 100644
--- a/src/entities/main/ui/DateContainer/index.tsx
+++ b/src/entities/main/ui/DateContainer/index.tsx
@@ -27,7 +27,7 @@ const DateContainer = () => {
   }, []);
   const pastDays = Math.floor(totalDays / 2);
 
-  const { setSelectDate } = useSelectDateStore();
+  const { selectDate, setSelectDate } = useSelectDateStore();
 
   const { stageId } = useMyStageIdStore();
 
@@ -42,39 +42,37 @@ const DateContainer = () => {
     return { short: `${month}-${day}`, full: `${year}-${month}-${day}` };
   });
 
+  const syncSelectedDate = (fullDate: string) => {
+    const matchedDate = dates.find((d) => d.full === fullDate);
+
+    if (matchedDate) {
+      setSelectedDate(matchedDate.short);
+      setSelectDate(matchedDate.full);
+      setStartIndex(dates.findIndex((d) => d.full === fullDate));
+    } else {
+      const date = new Date(fullDate);
+      const short = `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+      setSelectedDate(short);
+      setSelectDate(fullDate);
+      setStartIndex(dates.findIndex((d) => d.full === fullDate));
+    }
+  };
+
   useEffect(() => {
-    const localSelectDate = sessionStorage.getItem('selectDate');
-
-    if (localSelectDate) {
-      const { selectDate: localDate, stageId: localStageId } =
-        JSON.parse(localSelectDate);
-
-      if (localDate !== '') {
-        if (stageId === localStageId) {
-          const matchedDate = dates.find((d) => d.full === localDate);
-
-          if (matchedDate) {
-            setSelectedDate(matchedDate.short);
-            setSelectDate(matchedDate.full);
-            const matchedIndex = dates.findIndex((d) => d.full === localDate);
-            setStartIndex(matchedIndex);
-          } else {
-            const date = new Date(localDate);
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            const short = `${month}-${day}`;
-
-            setSelectedDate(short);
-            setSelectDate(localDate);
-            const matchedIndex = dates.findIndex((d) => d.full === localDate);
-            setStartIndex(matchedIndex);
-          }
-        }
-      }
+    if (selectDate) syncSelectedDate(selectDate);
+  }, []);
+
+  useEffect(() => {
+    const local = sessionStorage.getItem('selectDate');
+    if (!local) return;
+
+    const { selectDate: localDate, stageId: localStageId } = JSON.parse(local);
+    sessionStorage.removeItem('selectDate');
 
-      sessionStorage.removeItem('selectDate');
+    if (localDate && stageId === localStageId) {
+      syncSelectedDate(localDate);
     }
-  }, [dates]);
+  }, [dates, stageId]);
 
   const todayIndex = dates.findIndex(
     (d) =>
diff --git a/src/entities/mini-game/coin-toss/model/drawVideoToCanvas.ts b/src/entities/mini-game/coin-toss/model/drawVideoToCanvas.ts
new file mode 100644
index 00000000..65359035
--- /dev/null
+++ b/src/entities/mini-game/coin-toss/model/drawVideoToCanvas.ts
@@ -0,0 +1,22 @@
+export function drawVideoFrameToCanvas(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+) {
+  const videoWidth = video.videoWidth;
+  const videoHeight = video.videoHeight;
+  const canvasWidth = canvas.width;
+  const canvasHeight = canvas.height;
+
+  const cropWidth = videoWidth;
+  const cropHeight = videoHeight;
+  const centerX = videoWidth * 0.5;
+  const centerY = videoHeight * 1;
+  const sx = Math.max(0, centerX - cropWidth / 2);
+  const sy = Math.max(0, centerY - cropHeight / 2);
+  const sw = Math.min(cropWidth, videoWidth - sx);
+  const sh = Math.min(cropHeight, videoHeight - sy);
+
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  ctx.drawImage(video, sx, sy, sw, sh, 0, 0, canvasWidth, canvasHeight);
+}
diff --git a/src/entities/mini-game/coin-toss/model/useVideoCanvasPlayer.ts b/src/entities/mini-game/coin-toss/model/useVideoCanvasPlayer.ts
new file mode 100644
index 00000000..640f7928
--- /dev/null
+++ b/src/entities/mini-game/coin-toss/model/useVideoCanvasPlayer.ts
@@ -0,0 +1,80 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { drawVideoFrameToCanvas } from './drawVideoToCanvas';
+
+interface UseVideoCanvasPlayerProps {
+  videoSource: string;
+  isPlaying: boolean;
+  onAnimationEnd?: () => void;
+}
+
+export function useVideoCanvasPlayer({
+  videoSource,
+  isPlaying,
+  onAnimationEnd,
+}: UseVideoCanvasPlayerProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const animationFrameId = useRef<number>();
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+
+    let isMounted = true;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const drawVideoFrames = () => {
+      if (!video || !canvas || !ctx) return;
+      if (video.readyState < 2) return;
+
+      drawVideoFrameToCanvas(video, canvas, ctx);
+
+      if (isMounted && isPlaying) {
+        animationFrameId.current = requestAnimationFrame(drawVideoFrames);
+      }
+    };
+
+    const drawInitialFrame = () => {
+      if (!video || !canvas || !ctx) return;
+      if (video.readyState < 2) return;
+
+      drawVideoFrameToCanvas(video, canvas, ctx);
+    };
+
+    const handleLoadedData = () => {
+      if (isPlaying) {
+        video.play();
+        drawVideoFrames();
+      } else {
+        drawInitialFrame();
+      }
+    };
+
+    const handleEnded = () => {
+      if (animationFrameId.current) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+      onAnimationEnd?.();
+    };
+
+    video.addEventListener('loadeddata', handleLoadedData);
+    video.addEventListener('ended', handleEnded);
+
+    video.src = videoSource;
+    video.load();
+
+    return () => {
+      isMounted = false;
+      video.removeEventListener('loadeddata', handleLoadedData);
+      video.removeEventListener('ended', handleEnded);
+      if (animationFrameId.current)
+        cancelAnimationFrame(animationFrameId.current);
+    };
+  }, [videoSource, isPlaying, onAnimationEnd]);
+
+  return { videoRef, canvasRef };
+}
diff --git a/src/entities/mini-game/coin-toss/model/useVideoCanvasRenderer.ts b/src/entities/mini-game/coin-toss/model/useVideoCanvasRenderer.ts
new file mode 100644
index 00000000..a30bc835
--- /dev/null
+++ b/src/entities/mini-game/coin-toss/model/useVideoCanvasRenderer.ts
@@ -0,0 +1,82 @@
+import { useEffect, RefObject, useRef } from 'react';
+
+interface Args {
+  videoRef: RefObject<HTMLVideoElement>;
+  canvasRef: RefObject<HTMLCanvasElement>;
+  videoSource: string;
+  isPlaying: boolean;
+  onAnimationEnd?: () => void;
+}
+
+export function useVideoCanvasRenderer({
+  videoRef,
+  canvasRef,
+  videoSource,
+  isPlaying,
+  onAnimationEnd,
+}: Args) {
+  const frameId = useRef<number>();
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+
+    let mounted = true;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const drawLoop = () => {
+      if (!mounted || !isPlaying) return;
+      if (video.readyState < 2) {
+        frameId.current = requestAnimationFrame(drawLoop);
+        return;
+      }
+
+      const vw = video.videoWidth;
+      const vh = video.videoHeight;
+      const cw = canvas.width;
+      const ch = canvas.height;
+
+      ctx.clearRect(0, 0, cw, ch);
+      ctx.drawImage(video, 0, vh - vh, vw, vh, 0, 0, cw, ch);
+
+      frameId.current = requestAnimationFrame(drawLoop);
+    };
+
+    const handleLoadedData = () => {
+      if (isPlaying) {
+        video.play();
+        drawLoop();
+      } else {
+        if (video.readyState >= 2) {
+          const vw = video.videoWidth;
+          const vh = video.videoHeight;
+          const cw = canvas.width;
+          const ch = canvas.height;
+
+          ctx.clearRect(0, 0, cw, ch);
+          ctx.drawImage(video, 0, vh - vh, vw, vh, 0, 0, cw, ch);
+        }
+      }
+    };
+
+    const handleEnded = () => {
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+      onAnimationEnd?.();
+    };
+
+    video.addEventListener('loadeddata', handleLoadedData);
+    video.addEventListener('ended', handleEnded);
+
+    video.src = videoSource;
+    video.load();
+
+    return () => {
+      mounted = false;
+      video.removeEventListener('loadeddata', handleLoadedData);
+      video.removeEventListener('ended', handleEnded);
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+    };
+  }, [videoSource, isPlaying, onAnimationEnd, videoRef, canvasRef]);
+}
diff --git a/src/entities/mini-game/coin-toss/ui/CoinTossAnimation/index.tsx b/src/entities/mini-game/coin-toss/ui/CoinTossAnimation/index.tsx
index b405c04f..74772b10 100644
--- a/src/entities/mini-game/coin-toss/ui/CoinTossAnimation/index.tsx
+++ b/src/entities/mini-game/coin-toss/ui/CoinTossAnimation/index.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import React from 'react';
 import { cn } from '@/shared/utils/cn';
+import { useVideoCanvasPlayer } from '../../model/useVideoCanvasPlayer';
 
 interface CoinTossAnimationProps {
   isPlaying: boolean;
@@ -14,94 +15,11 @@ const CoinTossAnimation = ({
   videoSource,
   onAnimationEnd,
 }: CoinTossAnimationProps) => {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const animationFrameId = useRef<number>();
-
-  useEffect(() => {
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-    if (!video || !canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const drawToCanvas = () => {
-      if (!video || !canvas || !ctx) return;
-
-      const videoWidth = video.videoWidth;
-      const videoHeight = video.videoHeight;
-      const canvasWidth = canvas.width;
-      const canvasHeight = canvas.height;
-
-      const zoom = 1;
-      const cropWidth = videoWidth / zoom;
-      const cropHeight = videoHeight / zoom;
-      const centerX = videoWidth * 0.5;
-      const centerY = videoHeight * 1;
-
-      const sx = Math.max(0, centerX - cropWidth / 2);
-      const sy = Math.max(0, centerY - cropHeight / 2);
-      const sw = Math.min(cropWidth, videoWidth - sx);
-      const sh = Math.min(cropHeight, videoHeight - sy);
-
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-      ctx.drawImage(video, sx, sy, sw, sh, 0, 0, canvasWidth, canvasHeight);
-
-      animationFrameId.current = requestAnimationFrame(drawToCanvas);
-    };
-
-    const drawInitialFrame = () => {
-      if (!video || !canvas || !ctx) return;
-
-      const videoWidth = video.videoWidth;
-      const videoHeight = video.videoHeight;
-      const canvasWidth = canvas.width;
-      const canvasHeight = canvas.height;
-
-      const zoom = 1;
-      const cropWidth = videoWidth / zoom;
-      const cropHeight = videoHeight / zoom;
-      const centerX = videoWidth * 0.5;
-      const centerY = videoHeight * 1;
-
-      const sx = Math.max(0, centerX - cropWidth / 2);
-      const sy = Math.max(0, centerY - cropHeight / 2);
-      const sw = Math.min(cropWidth, videoWidth - sx);
-      const sh = Math.min(cropHeight, videoHeight - sy);
-
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-      ctx.drawImage(video, sx, sy, sw, sh, 0, 0, canvasWidth, canvasHeight);
-    };
-
-    const handleEnded = () => {
-      if (animationFrameId.current) {
-        cancelAnimationFrame(animationFrameId.current);
-      }
-      onAnimationEnd?.();
-    };
-
-    const handleLoadedData = () => {
-      if (isPlaying) {
-        video.play();
-        drawToCanvas();
-      } else {
-        drawInitialFrame();
-      }
-    };
-
-    video.addEventListener('ended', handleEnded);
-    video.addEventListener('loadeddata', handleLoadedData);
-
-    // ✅ 무조건 load 호출해서 첫 프레임도 준비되게
-    video.load();
-
-    return () => {
-      video.removeEventListener('ended', handleEnded);
-      video.removeEventListener('loadeddata', handleLoadedData);
-      cancelAnimationFrame(animationFrameId.current!);
-    };
-  }, [isPlaying, videoSource, onAnimationEnd]);
+  const { videoRef, canvasRef } = useVideoCanvasPlayer({
+    videoSource,
+    isPlaying,
+    onAnimationEnd,
+  });
 
   return (
     <div className={cn('relative', 'rounded-lg')}>
@@ -120,7 +38,6 @@ const CoinTossAnimation = ({
       <video
         ref={videoRef}
         className="hidden"
-        src={videoSource}
         muted
         playsInline
         preload="auto"
diff --git a/src/entities/mini-game/coin-toss/ui/CoinTossButton/index.tsx b/src/entities/mini-game/coin-toss/ui/CoinTossButton/index.tsx
index 3214ecf0..ec481f25 100644
--- a/src/entities/mini-game/coin-toss/ui/CoinTossButton/index.tsx
+++ b/src/entities/mini-game/coin-toss/ui/CoinTossButton/index.tsx
@@ -7,6 +7,7 @@ interface CoinTossButtonProps {
   selectedSide: string | undefined;
   setValue: UseFormSetValue<CoinTossForm>;
   isPlaying: boolean;
+  isPending: boolean;
 }
 
 const CoinTossButton = ({
@@ -14,6 +15,7 @@ const CoinTossButton = ({
   selectedSide,
   setValue,
   isPlaying,
+  isPending,
 }: CoinTossButtonProps) => {
   const isSelected = selectedSide === side;
 
@@ -21,8 +23,10 @@ const CoinTossButton = ({
     <Button
       onClick={() => setValue('bet', side)}
       bg={!isSelected ? 'bg-black-800' : undefined}
-      border={!isSelected && !isPlaying ? 'border-white' : undefined}
-      disabled={isPlaying}
+      border={
+        !isSelected && !isPlaying && !isPending ? 'border-white' : undefined
+      }
+      disabled={isPlaying || isPending}
     >
       {side === 'FRONT' ? '앞면' : '뒷면'}
     </Button>
diff --git a/src/entities/mini-game/yavarwee/index.ts b/src/entities/mini-game/yavarwee/index.ts
index 6a18943d..8e690b7b 100644
--- a/src/entities/mini-game/yavarwee/index.ts
+++ b/src/entities/mini-game/yavarwee/index.ts
@@ -1,3 +1,7 @@
-export { default as YavarweeAnimation } from './ui/YavarweeAnimation';
 export { default as YavarweeButton } from './ui/YavarweeButton';
 export { default as Round } from './ui/Round';
+export { IdleOverlay } from './ui/IdleOverlay';
+export { RoundOverlay } from './ui/RoundOverlay';
+export { SelectingTimerProgress } from './ui/SelectingTimerProgress';
+export { StatusText } from './ui/StatusText';
+export { useCanvasAnimation } from './model/useCanvasAnimation';
diff --git a/src/entities/mini-game/yavarwee/model/drawBall.ts b/src/entities/mini-game/yavarwee/model/drawBall.ts
new file mode 100644
index 00000000..5b9c63fe
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/model/drawBall.ts
@@ -0,0 +1,13 @@
+import { BallState } from '@/shared/types/mini-game/yavarwee';
+
+export function drawBall(
+  ctx: CanvasRenderingContext2D,
+  ball: BallState,
+  ballImage: HTMLImageElement,
+) {
+  ctx.save();
+  ctx.translate(ball.x, ball.y + 30);
+  ctx.scale(ball.scale, ball.scale);
+  ctx.drawImage(ballImage, -37.5, -37.5, 75, 75);
+  ctx.restore();
+}
diff --git a/src/entities/mini-game/yavarwee/model/drawCups.ts b/src/entities/mini-game/yavarwee/model/drawCups.ts
new file mode 100644
index 00000000..b9913a98
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/model/drawCups.ts
@@ -0,0 +1,13 @@
+import { CupState } from '@/shared/types/mini-game/yavarwee';
+
+export function drawCups(
+  ctx: CanvasRenderingContext2D,
+  cups: CupState[],
+  cupImage: HTMLImageElement,
+) {
+  const sortedCups = [...cups].sort((a, b) => a.zIndex - b.zIndex);
+
+  sortedCups.forEach((cup) => {
+    ctx.drawImage(cupImage, cup.x - 105, cup.y - 105, 210, 210);
+  });
+}
diff --git a/src/entities/mini-game/yavarwee/model/getStatusText.ts b/src/entities/mini-game/yavarwee/model/getStatusText.ts
new file mode 100644
index 00000000..b4a6b126
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/model/getStatusText.ts
@@ -0,0 +1,20 @@
+import { GameState, Result } from '@/shared/types/mini-game/yavarwee';
+
+export function getStatusText(gameState: GameState, result: Result) {
+  switch (gameState) {
+    case 'betting':
+      return '포인트를 배팅해주세요!';
+    case 'showing':
+      return '공의 위치를 확인하세요!';
+    case 'hiding':
+      return '공을 숨기는 중...';
+    case 'shuffling':
+      return '컵을 섞는 중...';
+    case 'selecting':
+      return '컵을 선택해주세요!';
+    case 'result':
+      return result === 'correct' ? '정답입니다!' : '틀렸습니다!';
+    default:
+      return '';
+  }
+}
diff --git a/src/entities/mini-game/yavarwee/model/useCanvasAnimation.ts b/src/entities/mini-game/yavarwee/model/useCanvasAnimation.ts
new file mode 100644
index 00000000..880800c6
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/model/useCanvasAnimation.ts
@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import {
+  BallState,
+  CupState,
+  GameState,
+} from '@/shared/types/mini-game/yavarwee';
+import { drawBall } from './drawBall';
+import { drawCups } from './drawCups';
+
+export function useCanvasAnimation(
+  canvasRef: React.RefObject<HTMLCanvasElement>,
+  cups: CupState[],
+  ball: BallState,
+  cupImage: HTMLImageElement | null,
+  ballImage: HTMLImageElement | null,
+  gameState: GameState,
+  setCups: React.Dispatch<React.SetStateAction<CupState[]>>,
+  setBall: React.Dispatch<React.SetStateAction<BallState>>,
+) {
+  const animationFrameRef = useRef(0);
+  const lastTimeRef = useRef(0);
+
+  useEffect(() => {
+    const animate = (time: number) => {
+      if (!lastTimeRef.current) lastTimeRef.current = time;
+      const deltaTime = time - lastTimeRef.current;
+      lastTimeRef.current = time;
+
+      let animating = false;
+
+      setCups((prev) =>
+        prev.map((cup) => {
+          if (cup.animationProgress < 1) {
+            const newProgress = Math.min(
+              cup.animationProgress + deltaTime / cup.animationDuration,
+              1,
+            );
+            animating = true;
+            const t = 1 - Math.pow(1 - newProgress, 2);
+
+            return {
+              ...cup,
+              x: cup.x + (cup.targetX - cup.x) * t,
+              y: cup.y + (cup.targetY - cup.y) * t,
+              animationProgress: newProgress,
+            };
+          }
+          return cup;
+        }),
+      );
+
+      if (gameState === 'showing' && ball.scale < 1) {
+        setBall((prev) => {
+          const newScale = prev.scale + (deltaTime / 300) * 0.4;
+          if (newScale <= 1.2) {
+            animating = true;
+            return { ...prev, scale: newScale };
+          } else {
+            return { ...prev, scale: 1 };
+          }
+        });
+      }
+
+      if (canvasRef.current && cupImage && ballImage) {
+        const ctx = canvasRef.current.getContext('2d');
+        if (ctx) {
+          ctx.clearRect(
+            0,
+            0,
+            canvasRef.current.width,
+            canvasRef.current.height,
+          );
+
+          if (ball.visible) {
+            drawBall(ctx, ball, ballImage);
+          }
+
+          drawCups(ctx, cups, cupImage);
+        }
+      }
+
+      if (animating) {
+        animationFrameRef.current = requestAnimationFrame(animate);
+      }
+    };
+
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [gameState, cups, ball, cupImage, ballImage]);
+}
diff --git a/src/entities/mini-game/yavarwee/ui/IdleOverlay/index.tsx b/src/entities/mini-game/yavarwee/ui/IdleOverlay/index.tsx
new file mode 100644
index 00000000..90719d06
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/ui/IdleOverlay/index.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from '@/shared/utils/cn';
+
+type Props = {
+  onStart: () => void;
+};
+
+export function IdleOverlay({ onStart }: Props) {
+  return (
+    <div
+      className={cn(
+        'absolute',
+        'inset-0',
+        'z-20',
+        'flex',
+        'items-center',
+        'justify-center',
+        'rounded-lg',
+        'bg-black/30',
+        'backdrop-blur-sm',
+      )}
+    >
+      <button
+        onClick={onStart}
+        className={cn('pad:text-h1e', 'text-white', 'text-body1e')}
+      >
+        게임하기
+      </button>
+    </div>
+  );
+}
diff --git a/src/entities/mini-game/yavarwee/ui/RoundOverlay/index.tsx b/src/entities/mini-game/yavarwee/ui/RoundOverlay/index.tsx
new file mode 100644
index 00000000..1e0ee520
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/ui/RoundOverlay/index.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { cn } from '@/shared/utils/cn';
+
+type Props = {
+  onNextRound: () => void;
+  onStopGame: () => void;
+};
+
+export function RoundOverlay({ onNextRound, onStopGame }: Props) {
+  return (
+    <div
+      className={cn(
+        'absolute',
+        'inset-0',
+        'z-20',
+        'flex',
+        'flex-col',
+        'items-center',
+        'justify-center',
+        'gap-8',
+        'rounded-lg',
+        'bg-black/30',
+        'backdrop-blur-sm',
+      )}
+    >
+      <p className={cn('pad:text-h1e', 'text-white', 'text-body2e')}>
+        다음 라운드에 도전하겠습니까?
+      </p>
+      <div className={cn('flex', 'items-center', 'gap-24')}>
+        <button
+          className={cn(
+            'rounded',
+            'px-6',
+            'py-2',
+            'pad:text-body1s',
+            'text-body3e',
+            'text-gray-300',
+            'hover:text-system-success',
+          )}
+          onClick={onNextRound}
+        >
+          YES
+        </button>
+        <button
+          className={cn(
+            'rounded',
+            'px-6',
+            'py-2',
+            'pad:text-body1s',
+            'text-body3e',
+            'text-gray-300',
+            'hover:text-system-error',
+          )}
+          onClick={onStopGame}
+        >
+          NO
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/entities/mini-game/yavarwee/ui/SelectingTimerProgress/index.tsx b/src/entities/mini-game/yavarwee/ui/SelectingTimerProgress/index.tsx
new file mode 100644
index 00000000..b0abdb6c
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/ui/SelectingTimerProgress/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { cn } from '@/shared/utils/cn';
+
+type Props = {
+  timerProgress: number;
+};
+
+export function SelectingTimerProgress({ timerProgress }: Props) {
+  const getTimerColor = () => {
+    if (timerProgress > 66) return 'bg-green-500';
+    if (timerProgress > 33) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  return (
+    <div className="mx-auto mt-2 h-10 w-full max-w-[500px] overflow-hidden rounded-sm bg-gray-600">
+      <div
+        className={cn(
+          'h-2.5',
+          'transition-all',
+          'duration-75',
+          getTimerColor(),
+        )}
+        style={{ width: `${timerProgress}%` }}
+      />
+    </div>
+  );
+}
diff --git a/src/entities/mini-game/yavarwee/ui/StatusText/index.tsx b/src/entities/mini-game/yavarwee/ui/StatusText/index.tsx
new file mode 100644
index 00000000..1a23ee0f
--- /dev/null
+++ b/src/entities/mini-game/yavarwee/ui/StatusText/index.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { GameState, Result } from '@/shared/types/mini-game/yavarwee';
+import { cn } from '@/shared/utils/cn';
+import { getStatusText } from '../../model/getStatusText';
+
+type Props = {
+  gameState: GameState;
+  result: Result;
+};
+
+export function StatusText({ gameState, result }: Props) {
+  const text = getStatusText(gameState, result);
+
+  if (!text) return null;
+
+  return (
+    <p
+      className={cn('text-body1e', 'text-gray-300')}
+      style={{ animation: 'fadeInUp 0.3s ease-out' }}
+    >
+      {gameState === 'result' ? (
+        <span
+          className={
+            result === 'correct' ? 'text-system-success' : 'text-system-error'
+          }
+        >
+          {text}
+        </span>
+      ) : (
+        text
+      )}
+    </p>
+  );
+}
diff --git a/src/entities/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx b/src/entities/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx
deleted file mode 100644
index aac1d05a..00000000
--- a/src/entities/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx
+++ /dev/null
@@ -1,504 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { cn } from '@/shared/utils/cn';
-
-type GameState =
-  | 'idle'
-  | 'betting'
-  | 'showing'
-  | 'hiding'
-  | 'shuffling'
-  | 'selecting'
-  | 'result'
-  | 'round';
-type Result = 'correct' | 'wrong' | null;
-
-type Props = {
-  gameState: GameState;
-  cupPositions: number[];
-  ballPosition: number | null;
-  userSelection: number | null;
-  result: Result;
-  startGame: () => void;
-  onNextRound: () => void;
-  onStopGame: () => void;
-  shuffleDuration: number;
-};
-
-const CANVAS_WIDTH = 900;
-const CANVAS_HEIGHT = 300;
-const CUP_WIDTH = 210;
-const CUP_HEIGHT = 210;
-const BALL_SIZE = 75;
-const CUP_SPACING = 240;
-const SELECTION_TIMER_DURATION = 3000;
-
-interface CupState {
-  x: number;
-  y: number;
-  targetX: number;
-  targetY: number;
-  zIndex: number;
-  originalId: number;
-  animationProgress: number;
-  animationDuration: number;
-}
-
-interface BallState {
-  x: number;
-  y: number;
-  visible: boolean;
-  scale: number;
-}
-
-const YavarweeAnimation = ({
-  gameState,
-  cupPositions,
-  ballPosition,
-  userSelection,
-  result,
-  startGame,
-  onNextRound,
-  onStopGame,
-  shuffleDuration,
-}: Props) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const cupImageRef = useRef<HTMLImageElement | null>(null);
-  const ballImageRef = useRef<HTMLImageElement | null>(null);
-  const animationFrameRef = useRef<number>(0);
-  const lastTimeRef = useRef<number>(0);
-  const [timerProgress, setTimerProgress] = useState<number>(100);
-  const timerStartTimeRef = useRef<number | null>(null);
-
-  const cupCoordinates = [
-    { x: CANVAS_WIDTH / 2 - CUP_SPACING },
-    { x: CANVAS_WIDTH / 2 },
-    { x: CANVAS_WIDTH / 2 + CUP_SPACING },
-  ];
-
-  const [cups, setCups] = useState<CupState[]>([
-    {
-      x: cupCoordinates[0].x,
-      y: CANVAS_HEIGHT / 2,
-      targetX: cupCoordinates[0].x,
-      targetY: CANVAS_HEIGHT / 2,
-      zIndex: 1,
-      originalId: 0,
-      animationProgress: 1,
-      animationDuration: 300,
-    },
-    {
-      x: cupCoordinates[1].x,
-      y: CANVAS_HEIGHT / 2,
-      targetX: cupCoordinates[1].x,
-      targetY: CANVAS_HEIGHT / 2,
-      zIndex: 1,
-      originalId: 1,
-      animationProgress: 1,
-      animationDuration: 300,
-    },
-    {
-      x: cupCoordinates[2].x,
-      y: CANVAS_HEIGHT / 2,
-      targetX: cupCoordinates[2].x,
-      targetY: CANVAS_HEIGHT / 2,
-      zIndex: 1,
-      originalId: 2,
-      animationProgress: 1,
-      animationDuration: 300,
-    },
-  ]);
-
-  const [ball, setBall] = useState<BallState>({
-    x: CANVAS_WIDTH / 2,
-    y: CANVAS_HEIGHT / 2 + 30,
-    visible: false,
-    scale: 1,
-  });
-
-  useEffect(() => {
-    if (gameState === 'selecting') {
-      const now = Date.now();
-      timerStartTimeRef.current = now;
-      setTimerProgress(100);
-
-      const updateInterval = 30;
-
-      const interval = setInterval(() => {
-        const elapsedTime = Date.now() - (timerStartTimeRef.current || now);
-        const remainingTime = Math.max(
-          0,
-          SELECTION_TIMER_DURATION - elapsedTime,
-        );
-        const newProgress = (remainingTime / SELECTION_TIMER_DURATION) * 100;
-
-        setTimerProgress(newProgress);
-
-        if (remainingTime <= 0) {
-          clearInterval(interval);
-        }
-      }, updateInterval);
-
-      return () => clearInterval(interval);
-    }
-  }, [gameState]);
-
-  useEffect(() => {
-    const cupImage = new Image();
-    cupImage.src = '/cup.png';
-    cupImage.onload = () => {
-      cupImageRef.current = cupImage;
-    };
-
-    const ballImage = new Image();
-    ballImage.src = '/ball.png';
-    ballImage.onload = () => {
-      ballImageRef.current = ballImage;
-    };
-
-    return () => {
-      cancelAnimationFrame(animationFrameRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    const newCups = [...cups];
-
-    cupPositions.forEach((positionId, index) => {
-      const cupIndex = cups.findIndex((cup) => cup.originalId === positionId);
-      if (cupIndex !== -1) {
-        const targetX = cupCoordinates[index].x;
-        let targetY = CANVAS_HEIGHT / 2;
-        let zIndex = 1;
-
-        const isCupRevealed = (() => {
-          if (gameState === 'showing') {
-            return index === ballPosition;
-          }
-
-          if (gameState === 'result') {
-            if (result === 'correct') {
-              return index === userSelection;
-            }
-            if (result === 'wrong') {
-              return positionId === ballPosition;
-            }
-          }
-
-          return false;
-        })();
-
-        if (isCupRevealed) {
-          targetY = CANVAS_HEIGHT / 2 - 75;
-          zIndex = 10;
-        }
-
-        newCups[cupIndex] = {
-          ...newCups[cupIndex],
-          targetX,
-          targetY,
-          zIndex,
-          animationProgress: 0,
-          animationDuration: gameState === 'shuffling' ? shuffleDuration : 300,
-        };
-      }
-    });
-
-    setCups(newCups);
-
-    if (ballPosition !== null) {
-      const cupIndex = cupPositions.indexOf(ballPosition);
-      const ballX = cupCoordinates[cupIndex].x;
-
-      setBall((prev) => ({
-        ...prev,
-        x: ballX,
-        visible: gameState === 'showing' || gameState === 'result',
-        scale: gameState === 'showing' ? 0.8 : 1,
-      }));
-    }
-  }, [gameState, cupPositions, ballPosition, userSelection, result]);
-
-  useEffect(() => {
-    const animate = (time: number) => {
-      if (!lastTimeRef.current) {
-        lastTimeRef.current = time;
-      }
-
-      const deltaTime = time - lastTimeRef.current;
-      lastTimeRef.current = time;
-
-      let animating = false;
-      setCups((prevCups) => {
-        return prevCups.map((cup) => {
-          if (cup.animationProgress < 1) {
-            const newProgress = Math.min(
-              cup.animationProgress + deltaTime / cup.animationDuration,
-              1,
-            );
-            animating = true;
-
-            const t = 1 - Math.pow(1 - newProgress, 2);
-
-            const x = cup.x + (cup.targetX - cup.x) * t;
-            const y = cup.y + (cup.targetY - cup.y) * t;
-
-            return {
-              ...cup,
-              x,
-              y,
-              animationProgress: newProgress,
-            };
-          }
-          return cup;
-        });
-      });
-
-      if (gameState === 'showing' && ball.scale < 1) {
-        setBall((prev) => {
-          const newScale = prev.scale + (deltaTime / 300) * 0.4;
-          if (newScale <= 1.2) {
-            animating = true;
-            return {
-              ...prev,
-              scale: newScale,
-            };
-          } else {
-            return {
-              ...prev,
-              scale: 1,
-            };
-          }
-        });
-      }
-
-      renderCanvas();
-
-      if (animating) {
-        animationFrameRef.current = requestAnimationFrame(animate);
-      }
-    };
-
-    animationFrameRef.current = requestAnimationFrame(animate);
-
-    return () => {
-      cancelAnimationFrame(animationFrameRef.current);
-    };
-  }, [gameState, cups, ball]);
-
-  const renderCanvas = () => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx || !cupImageRef.current || !ballImageRef.current)
-      return;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    const sortedCups = [...cups].sort((a, b) => a.zIndex - b.zIndex);
-
-    if (ball.visible) {
-      ctx.save();
-      ctx.translate(ball.x, ball.y + 30);
-      ctx.scale(ball.scale, ball.scale);
-      ctx.drawImage(
-        ballImageRef.current,
-        -BALL_SIZE / 2,
-        -BALL_SIZE / 2,
-        BALL_SIZE,
-        BALL_SIZE,
-      );
-      ctx.restore();
-    }
-
-    sortedCups.forEach((cup) => {
-      ctx.drawImage(
-        cupImageRef.current!,
-        cup.x - CUP_WIDTH / 2,
-        cup.y - CUP_HEIGHT / 2,
-        CUP_WIDTH,
-        CUP_HEIGHT,
-      );
-    });
-  };
-
-  const getStatusText = () => {
-    switch (gameState) {
-      case 'betting':
-        return '포인트를 배팅해주세요!';
-      case 'showing':
-        return '공의 위치를 확인하세요!';
-      case 'hiding':
-        return '공을 숨기는 중...';
-      case 'shuffling':
-        return '컵을 섞는 중...';
-      case 'selecting':
-        return '컵을 선택해주세요!';
-      case 'result':
-        return result === 'correct' ? '정답입니다!' : '틀렸습니다!';
-      default:
-        return '';
-    }
-  };
-
-  const getTimerColor = () => {
-    if (timerProgress > 66) return 'bg-green-500';
-    if (timerProgress > 33) return 'bg-yellow-500';
-    return 'bg-red-500';
-  };
-
-  return (
-    <div
-      className={cn(
-        'relative',
-        'flex',
-        'h-full',
-        'w-full',
-        'flex-col',
-        'items-center',
-        'justify-center',
-        'overflow-hidden',
-        'bg-gray-700',
-      )}
-    >
-      <canvas
-        ref={canvasRef}
-        width={CANVAS_WIDTH}
-        height={CANVAS_HEIGHT}
-        className={cn('max-w-full')}
-      />
-
-      <div
-        className={cn(
-          'z-10',
-          'mt-4',
-          'space-y-16',
-          'text-center',
-          'w-full',
-          'px-4',
-        )}
-      >
-        {[
-          'betting',
-          'showing',
-          'hiding',
-          'shuffling',
-          'selecting',
-          'result',
-        ].includes(gameState) && (
-          <p
-            className={cn('text-body1e', 'text-gray-300')}
-            style={{
-              animation: 'fadeInUp 0.3s ease-out',
-            }}
-          >
-            {gameState === 'result' ? (
-              <span
-                className={
-                  result === 'correct'
-                    ? 'text-system-success'
-                    : 'text-system-error'
-                }
-              >
-                {getStatusText()}
-              </span>
-            ) : (
-              getStatusText()
-            )}
-          </p>
-        )}
-
-        {gameState === 'selecting' && userSelection === null && (
-          <div className="mx-auto mt-2 h-10 w-full max-w-[500px] overflow-hidden rounded-sm bg-gray-600">
-            <div
-              className={cn(
-                'h-2.5',
-                'transition-all',
-                'duration-75',
-                getTimerColor(),
-              )}
-              style={{
-                width: `${timerProgress}%`,
-              }}
-            />
-          </div>
-        )}
-      </div>
-
-      {gameState === 'idle' && (
-        <div
-          className={cn(
-            'absolute',
-            'inset-0',
-            'z-20',
-            'flex',
-            'items-center',
-            'justify-center',
-            'rounded-lg',
-            'bg-black/30',
-            'backdrop-blur-sm',
-          )}
-        >
-          <button
-            onClick={startGame}
-            className={cn('pad:text-h1e', 'text-white', 'text-body1e')}
-          >
-            게임하기
-          </button>
-        </div>
-      )}
-
-      {gameState === 'round' && (
-        <div
-          className={cn(
-            'absolute',
-            'inset-0',
-            'z-20',
-            'flex',
-            'flex-col',
-            'items-center',
-            'justify-center',
-            'gap-8',
-            'rounded-lg',
-            'bg-black/30',
-            'backdrop-blur-sm',
-          )}
-        >
-          <p className={cn('pad:text-h1e', 'text-white', 'text-body2e')}>
-            다음 라운드에 도전하겠습니까?
-          </p>
-          <div className={cn('flex', 'items-center', 'gap-24')}>
-            <button
-              className={cn(
-                'rounded',
-                'px-6',
-                'py-2',
-                'pad:text-body1s',
-                'text-body3e',
-                'text-gray-300',
-                'hover:text-system-success',
-              )}
-              onClick={onNextRound}
-            >
-              YES
-            </button>
-            <button
-              className={cn(
-                'rounded',
-                'px-6',
-                'py-2',
-                'pad:text-body1s',
-                'text-body3e',
-                'text-gray-300',
-                'hover:text-system-error',
-              )}
-              onClick={onStopGame}
-            >
-              NO
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default YavarweeAnimation;
diff --git a/src/shared/types/mini-game/yavarwee/index.ts b/src/shared/types/mini-game/yavarwee/index.ts
index fe58bfe2..a631cb41 100644
--- a/src/shared/types/mini-game/yavarwee/index.ts
+++ b/src/shared/types/mini-game/yavarwee/index.ts
@@ -17,3 +17,33 @@ export interface YavarweeConfirmFormData {
 export interface YavarweeComfirmResponse {
   amount: number;
 }
+
+export interface CupState {
+  x: number;
+  y: number;
+  targetX: number;
+  targetY: number;
+  zIndex: number;
+  originalId: number;
+  animationProgress: number;
+  animationDuration: number;
+}
+
+export interface BallState {
+  x: number;
+  y: number;
+  visible: boolean;
+  scale: number;
+}
+
+export type GameState =
+  | 'idle'
+  | 'betting'
+  | 'showing'
+  | 'hiding'
+  | 'shuffling'
+  | 'selecting'
+  | 'result'
+  | 'round';
+
+export type Result = 'correct' | 'wrong' | null;
diff --git a/src/shared/ui/stageMatchContainer/index.tsx b/src/shared/ui/stageMatchContainer/index.tsx
index 758e1e1a..8e649bed 100644
--- a/src/shared/ui/stageMatchContainer/index.tsx
+++ b/src/shared/ui/stageMatchContainer/index.tsx
@@ -89,11 +89,15 @@ const StageMatchContainer = ({
 
           {matches?.matches
             .slice()
-            .sort(
-              (a, b) =>
-                new Date(a.startDate).getTime() -
-                new Date(b.startDate).getTime(),
-            )
+            .sort((a, b) => {
+              if (a.isEnd === b.isEnd) {
+                return (
+                  new Date(a.startDate).getTime() -
+                  new Date(b.startDate).getTime()
+                );
+              }
+              return a.isEnd ? 1 : -1;
+            })
             .map((match) => (
               <div
                 key={match.matchId}
diff --git a/src/views/coupon/ui/CouponPage/index.tsx b/src/views/coupon/ui/CouponPage/index.tsx
index 26986c32..bf7cc871 100644
--- a/src/views/coupon/ui/CouponPage/index.tsx
+++ b/src/views/coupon/ui/CouponPage/index.tsx
@@ -11,7 +11,10 @@ import { usePostMyCoupon } from '../../model/usePostMyCoupon';
 const CouponPage = () => {
   const searchParams = useSearchParams();
   const couponId = searchParams.get('couponId');
-  const { data: couponInfo } = useGetMyCouponInfo(String(couponId));
+  const { data: couponInfo, isPending } = useGetMyCouponInfo(String(couponId), {
+    enabled: !!couponId,
+    retry: false,
+  });
   const { mutate: postCoupon, data: couponData } = usePostMyCoupon(
     String(couponId),
   );
@@ -36,10 +39,15 @@ const CouponPage = () => {
   useEffect(() => {
     if (couponInfo) {
       setIsUseCoupon(couponInfo.isUsed);
-      localStorage.removeItem('couponId');
     }
   }, [couponInfo]);
 
+  useEffect(() => {
+    if (!isPending) {
+      localStorage.removeItem('couponId');
+    }
+  }, [isPending]);
+
   useEffect(() => {
     if (couponData) {
       setIsGain(couponData.isGain);
diff --git a/src/views/main/ui/MainPage/index.tsx b/src/views/main/ui/MainPage/index.tsx
index 6dc1230a..fdcd4102 100644
--- a/src/views/main/ui/MainPage/index.tsx
+++ b/src/views/main/ui/MainPage/index.tsx
@@ -154,7 +154,7 @@ const MainPage = () => {
               포인트
             </h2>
             <h2 className={cn('laptop:text-h3e', 'text-body1e', 'text-white')}>
-              {formatPoint(point)}
+              {userPointData ? formatPoint(point) : '000'}
             </h2>
             <h3
               className={cn(
@@ -164,7 +164,7 @@ const MainPage = () => {
                 'hidden',
               )}
             >
-              ({point.toLocaleString()})
+              {userPointData ? `(${point.toLocaleString()})` : '(000)'}
             </h3>
           </div>
           <DateContainer />
@@ -174,6 +174,7 @@ const MainPage = () => {
             text={isToday ? '오늘 최신 매치' : `${selectDate.slice(5)} 매치`}
             icon={<MatchClockIcon />}
             path={`/match/list/${stageId}`}
+            onClick={() => setSelectDate(selectDate)}
           >
             <StageMatchSection
               matches={searchMatchData}
diff --git a/src/views/match/ui/MatchPage/index.tsx b/src/views/match/ui/MatchPage/index.tsx
index 242045df..d56b085a 100644
--- a/src/views/match/ui/MatchPage/index.tsx
+++ b/src/views/match/ui/MatchPage/index.tsx
@@ -34,6 +34,10 @@ const MatchPage = () => {
     setSelectDate('');
   }, [stageId]);
 
+  useEffect(() => {
+    setSelectDate(selectDate);
+  }, []);
+
   const today = new Date();
 
   const [year, month, day] = selectDate
diff --git a/src/views/mini-game/coin-toss/model/useCoinTossController.ts b/src/views/mini-game/coin-toss/model/useCoinTossController.ts
new file mode 100644
index 00000000..a15f135f
--- /dev/null
+++ b/src/views/mini-game/coin-toss/model/useCoinTossController.ts
@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useForm, SubmitHandler, FieldErrors } from 'react-hook-form';
+import { toast } from 'react-toastify';
+import { handleFormErrors } from '@/shared/model/formErrorUtils';
+import { CoinTossForm } from '@/shared/types/mini-game/coin-toss';
+import { useGetBetLimit } from '@/views/mini-game/model/useGetBetLimit';
+import { useGetMyPointQuery } from '@/views/mini-game/model/useGetMyPointQuery';
+import { useGetMyTicketQuery } from '@/views/mini-game/model/useGetMyTicketQuery';
+import { useCoinTossAnimationEndHandler } from './useCoinTossResultHandler';
+import { usePostCoinToss } from './usePostCoinToss';
+
+export function useCoinTossController(stageId: string) {
+  const { register, handleSubmit, watch, setValue } = useForm<CoinTossForm>();
+
+  const { data: myPointData } = useGetMyPointQuery(stageId);
+  const { data: myTicketData } = useGetMyTicketQuery(stageId);
+  const { data: betLimitData } = useGetBetLimit(stageId);
+  const { mutate: coinToss, isPending } = usePostCoinToss(stageId);
+
+  const [videoSource, setVideoSource] = useState('/BackCoin.mp4');
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [responseAmount, setResponseAmount] = useState(0);
+
+  const [localPoint, setLocalPoint] = useState(0);
+  const [localCoinTossTicket, setLocalCoinTossTicket] = useState(0);
+
+  const serverPoint = myPointData?.point || 0;
+  const coinTossTicket = myTicketData?.coinToss || 0;
+  const minBetLimit = betLimitData?.coinToss.minBetPoint || 0;
+  const maxBetLimit = betLimitData?.coinToss.maxBetPoint || 0;
+
+  const { handleAnimationEnd } = useCoinTossAnimationEndHandler(
+    stageId,
+    videoSource,
+    watch,
+    responseAmount,
+    setIsPlaying,
+  );
+
+  useEffect(() => {
+    setLocalPoint(serverPoint);
+    setLocalCoinTossTicket(coinTossTicket);
+  }, [serverPoint, coinTossTicket]);
+
+  register('bet', { required: '동전 면을 선택해주세요' });
+
+  const onSubmit: SubmitHandler<CoinTossForm> = (data) => {
+    const formatData = {
+      amount: Number(data.amount),
+      bet: data.bet,
+    };
+
+    setLocalPoint((prev) => prev - formatData.amount);
+    setLocalCoinTossTicket((prev) => prev - 1);
+
+    coinToss(formatData, {
+      onSuccess: (response) => {
+        const { result, amount } = response;
+        const appearedSide = result
+          ? data.bet
+          : data.bet === 'FRONT'
+            ? 'BACK'
+            : 'FRONT';
+
+        setResponseAmount(amount);
+        setVideoSource(
+          appearedSide === 'FRONT' ? '/FrontCoin.mp4' : '/BackCoin.mp4',
+        );
+        setIsPlaying(true);
+      },
+      onError: (error) => {
+        setLocalPoint((prev) => prev + formatData.amount);
+        setLocalCoinTossTicket((prev) => prev + 1);
+        toast.error(error.message || '코인토스 요청 중 오류가 발생했습니다.');
+      },
+    });
+  };
+
+  const onError = (errors: FieldErrors<CoinTossForm>) => {
+    handleFormErrors(errors, toast.error);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    onSubmit,
+    onError,
+    handleAnimationEnd,
+    videoSource,
+    isPlaying,
+    isPending,
+    localPoint,
+    localCoinTossTicket,
+    minBetLimit,
+    maxBetLimit,
+  };
+}
diff --git a/src/views/mini-game/coin-toss/model/useCoinTossResultHandler.ts b/src/views/mini-game/coin-toss/model/useCoinTossResultHandler.ts
new file mode 100644
index 00000000..06652a6e
--- /dev/null
+++ b/src/views/mini-game/coin-toss/model/useCoinTossResultHandler.ts
@@ -0,0 +1,41 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { UseFormWatch } from 'react-hook-form';
+import { toast } from 'react-toastify';
+import { CoinTossForm } from '@/shared/types/mini-game/coin-toss';
+
+export function useCoinTossAnimationEndHandler(
+  stageId: string,
+  videoSource: string,
+  watch: UseFormWatch<CoinTossForm>,
+  responseAmount: number,
+  setIsPlaying: (playing: boolean) => void,
+) {
+  const queryClient = useQueryClient();
+
+  const handleAnimationEnd = useCallback(() => {
+    setIsPlaying(false);
+
+    const result = videoSource.includes('FrontCoin') ? 'FRONT' : 'BACK';
+    const bet = watch('bet');
+    const userInputAmount = Number(watch('amount'));
+    const didWin = result === bet;
+
+    if (didWin) {
+      toast.success(
+        `배팅 성공! ${responseAmount.toLocaleString()} 포인트 획득`,
+      );
+    } else {
+      toast.error(
+        `배팅 실패... ${userInputAmount.toLocaleString()} 포인트 차감`,
+      );
+    }
+
+    queryClient.invalidateQueries({ queryKey: ['getMyPoint', stageId] });
+    queryClient.invalidateQueries({ queryKey: ['getMyTicket', stageId] });
+  }, [setIsPlaying, videoSource, watch, responseAmount, queryClient, stageId]);
+
+  return { handleAnimationEnd };
+}
diff --git a/src/views/mini-game/coin-toss/ui/CoinTossPage/index.tsx b/src/views/mini-game/coin-toss/ui/CoinTossPage/index.tsx
index a9c4f378..01b2cdb0 100644
--- a/src/views/mini-game/coin-toss/ui/CoinTossPage/index.tsx
+++ b/src/views/mini-game/coin-toss/ui/CoinTossPage/index.tsx
@@ -1,115 +1,33 @@
 'use client';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useForm, SubmitHandler, FieldErrors } from 'react-hook-form';
-import { toast } from 'react-toastify';
 import { AnimationDisplayContainer } from '@/entities/mini-game';
 import { CoinTossAnimation } from '@/entities/mini-game/coin-toss';
 import CoinTossButton from '@/entities/mini-game/coin-toss/ui/CoinTossButton';
-import { handleFormErrors } from '@/shared/model/formErrorUtils';
 import { CoinTossForm } from '@/shared/types/mini-game/coin-toss';
 import BackPageButton from '@/shared/ui/backPageButton';
 import { cn } from '@/shared/utils/cn';
-import { useGetBetLimit } from '@/views/mini-game/model/useGetBetLimit';
-import { useGetMyPointQuery } from '@/views/mini-game/model/useGetMyPointQuery';
-import { useGetMyTicketQuery } from '@/views/mini-game/model/useGetMyTicketQuery';
 import { ControlForm } from '@/widgets/mini-game';
-import { usePostCoinToss } from '../../model/usePostCoinToss';
+import { useCoinTossController } from '../../model/useCoinTossController';
 
 const CoinTossPage = () => {
-  const params = useParams<{ stageId: string }>();
-  const { stageId } = params;
-  const [videoSource, setVideoSource] = useState<string>('/BackCoin.mp4');
-  const [isPlaying, setIsPlaying] = useState<boolean>(false);
-
-  const { register, handleSubmit, watch, setValue } = useForm<CoinTossForm>();
-  const queryClient = useQueryClient();
-
-  const { data: myPointData } = useGetMyPointQuery(stageId);
-  const { data: myTicketData } = useGetMyTicketQuery(stageId);
-  const { data: betLimitData } = useGetBetLimit(stageId);
-  const { mutate: coinToss, isPending } = usePostCoinToss(stageId);
-
-  const [localPoint, setLocalPoint] = useState<number>(0);
-  const [localCoinTossTicket, setLocalCoinTossTicket] = useState<number>(0);
-
-  const [responseAmount, setResponseAmount] = useState<number>(0);
-
-  const serverPoint = myPointData?.point || 0;
-  const coinTossTicket = myTicketData?.coinToss || 0;
-  const minBetLimit = betLimitData?.coinToss.minBetPoint || 0;
-  const maxBetLimit = betLimitData?.coinToss.maxBetPoint || 0;
-
-  useEffect(() => {
-    setLocalPoint(serverPoint);
-    setLocalCoinTossTicket(coinTossTicket);
-  }, [serverPoint, coinTossTicket]);
-
-  register('bet', { required: '동전 면을 선택해주세요' });
-
-  const onSubmit: SubmitHandler<CoinTossForm> = (data) => {
-    const formatData = {
-      amount: Number(data.amount),
-      bet: data.bet,
-    };
-
-    setLocalPoint((prev) => prev - formatData.amount);
-    setLocalCoinTossTicket((prev) => prev - 1);
-
-    coinToss(formatData, {
-      onSuccess: (response) => {
-        const { result, amount } = response;
-        const appearedSide = result
-          ? data.bet
-          : data.bet === 'FRONT'
-            ? 'BACK'
-            : 'FRONT';
-
-        setResponseAmount(amount);
-        setVideoSource(
-          appearedSide === 'FRONT' ? '/FrontCoin.mp4' : '/BackCoin.mp4',
-        );
-        setIsPlaying(true);
-      },
-      onError: (error) => {
-        setLocalPoint((prev) => prev + formatData.amount);
-        setLocalCoinTossTicket((prev) => prev + 1);
-        toast.error(error.message || '코인토스 요청 중 오류가 발생했습니다.');
-      },
-    });
-  };
-
-  const onError = (errors: FieldErrors<CoinTossForm>) => {
-    handleFormErrors(errors, toast.error);
-  };
-
-  const handleAnimationEnd = () => {
-    setIsPlaying(false);
-
-    const result = videoSource.includes('FrontCoin') ? 'FRONT' : 'BACK';
-    const bet = watch('bet');
-    const didWin = result === bet;
-    const userInputAmount = Number(watch('amount'));
-
-    if (didWin) {
-      toast.success(
-        `배팅 성공! ${responseAmount.toLocaleString()} 포인트 획득`,
-      );
-    } else {
-      toast.error(
-        `배팅 실패... ${userInputAmount.toLocaleString()} 포인트 차감`,
-      );
-    }
-
-    queryClient.invalidateQueries({
-      queryKey: ['getMyPoint', stageId],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ['getMyTicket', stageId],
-    });
-  };
+  const { stageId } = useParams<{ stageId: string }>();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    onSubmit,
+    onError,
+    handleAnimationEnd,
+    videoSource,
+    isPlaying,
+    isPending,
+    localPoint,
+    localCoinTossTicket,
+    minBetLimit,
+    maxBetLimit,
+  } = useCoinTossController(stageId);
 
   const selectedSide = watch('bet');
 
@@ -158,12 +76,14 @@ const CoinTossPage = () => {
               selectedSide={selectedSide}
               setValue={setValue}
               isPlaying={isPlaying}
+              isPending={isPending}
             />
             <CoinTossButton
               side="BACK"
               selectedSide={selectedSide}
               setValue={setValue}
               isPlaying={isPlaying}
+              isPending={isPending}
             />
           </div>
         </div>
diff --git a/src/views/mini-game/yavarwee/model/useYavarweeController.ts b/src/views/mini-game/yavarwee/model/useYavarweeController.ts
new file mode 100644
index 00000000..e4cbabe8
--- /dev/null
+++ b/src/views/mini-game/yavarwee/model/useYavarweeController.ts
@@ -0,0 +1,177 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useComfirmYavarweeMutation } from '../model/useComfirmYavarweeMutation';
+import {
+  getShuffleAnimationDurationForRound,
+  getShuffleCountForRound,
+} from './yavarweeShuffleConfig';
+
+export function useYavarweeController(stageId: string, reset: () => void) {
+  const [gameState, setGameState] = useState<
+    | 'idle'
+    | 'betting'
+    | 'showing'
+    | 'hiding'
+    | 'shuffling'
+    | 'selecting'
+    | 'result'
+    | 'round'
+  >('idle');
+  const [round, setRound] = useState(1);
+  const [ballPosition, setBallPosition] = useState<number | null>(null);
+  const [cupPositions, setCupPositions] = useState<number[]>([0, 1, 2]);
+  const [userSelection, setUserSelection] = useState<number | null>(null);
+  const [result, setResult] = useState<'correct' | 'wrong' | null>(null);
+  const [betUuid, setBetUuid] = useState<string | null>(null);
+
+  const { mutate: comfirmYavarwee } = useComfirmYavarweeMutation(stageId);
+
+  useEffect(() => {
+    if (gameState !== 'selecting') return;
+    const timer = setTimeout(() => {
+      if (userSelection === null && betUuid) {
+        comfirmYavarwee(
+          { uuid: betUuid, round, status: false },
+          {
+            onSuccess: () => {
+              toast.error(
+                '컵 선택 제한 시간(3초)을 지나서 야바위를 종료합니다.',
+              );
+              setRound(1);
+              reset();
+              setGameState('idle');
+            },
+          },
+        );
+      }
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [gameState, userSelection, betUuid, round, comfirmYavarwee, reset]);
+
+  const performShuffleAnimation = (currentRound: number) => {
+    const shuffleCount = getShuffleCountForRound(currentRound);
+    const shuffleDuration = getShuffleAnimationDurationForRound(currentRound);
+    const current = [...cupPositions];
+    const shuffles: [number, number][] = [];
+
+    for (let i = 0; i < shuffleCount; i++) {
+      const a = Math.floor(Math.random() * 3);
+      let b = Math.floor(Math.random() * 3);
+      while (a === b) b = Math.floor(Math.random() * 3);
+      [current[a], current[b]] = [current[b], current[a]];
+      shuffles.push([a, b]);
+    }
+
+    let delay = 0;
+    shuffles.forEach(([a, b]) => {
+      setTimeout(() => {
+        setCupPositions((prev) => {
+          const next = [...prev];
+          [next[a], next[b]] = [next[b], next[a]];
+          return next;
+        });
+      }, delay);
+      delay += shuffleDuration;
+    });
+
+    setTimeout(() => {
+      setGameState('selecting');
+    }, delay);
+  };
+
+  const startGameWithRound = (currentRound: number) => {
+    setGameState('showing');
+    setBallPosition(Math.floor(Math.random() * 3));
+    setCupPositions([0, 1, 2]);
+    setUserSelection(null);
+    setResult(null);
+
+    setTimeout(() => {
+      setGameState('hiding');
+      setTimeout(() => {
+        setGameState('shuffling');
+        performShuffleAnimation(currentRound);
+      }, 1000);
+    }, 2000);
+  };
+
+  const selectCup = (idx: number) => {
+    if (gameState !== 'selecting') return;
+    setUserSelection(idx);
+
+    const correct = cupPositions[idx] === ballPosition;
+    setResult(correct ? 'correct' : 'wrong');
+    setGameState('result');
+
+    setTimeout(() => {
+      if (correct) {
+        if (round >= 5 && betUuid) {
+          comfirmYavarwee(
+            { uuid: betUuid, round, status: true },
+            {
+              onSuccess: () => {
+                toast.success('야바위 라운드 종료 포인트를 정산합니다.');
+                setRound(1);
+                reset();
+                setGameState('idle');
+              },
+            },
+          );
+        } else {
+          setGameState('round');
+        }
+      } else if (betUuid) {
+        comfirmYavarwee(
+          { uuid: betUuid, round, status: false },
+          {
+            onSuccess: () => {
+              toast.error('야바위 배팅에 실패했습니다.');
+              setRound(1);
+              reset();
+              setGameState('idle');
+            },
+          },
+        );
+      }
+    }, 1500);
+  };
+
+  const handleNextRound = () => {
+    const next = round + 1;
+    setRound(next);
+    startGameWithRound(next);
+  };
+
+  const handleStopGame = () => {
+    if (!betUuid) return;
+    comfirmYavarwee(
+      { uuid: betUuid, round, status: true },
+      {
+        onSuccess: () => {
+          toast.success('야바위 라운드 종료 포인트를 정산합니다.');
+          setRound(1);
+          reset();
+          setGameState('idle');
+        },
+      },
+    );
+  };
+
+  return {
+    gameState,
+    round,
+    cupPositions,
+    ballPosition,
+    userSelection,
+    result,
+    betUuid,
+    setBetUuid,
+    setGameState,
+    startGameWithRound,
+    selectCup,
+    handleNextRound,
+    handleStopGame,
+  };
+}
diff --git a/src/views/mini-game/yavarwee/model/useYavarweeFormHandler.ts b/src/views/mini-game/yavarwee/model/useYavarweeFormHandler.ts
new file mode 100644
index 00000000..1b63e437
--- /dev/null
+++ b/src/views/mini-game/yavarwee/model/useYavarweeFormHandler.ts
@@ -0,0 +1,62 @@
+'use client';
+
+import { useCallback } from 'react';
+import { UseFormWatch } from 'react-hook-form';
+import { toast } from 'react-toastify';
+import { YavarweeForm } from '@/shared/types/mini-game/yavarwee';
+import { useBetYavarweeMutation } from '../model/useBetYavarweeMutation';
+
+interface Props {
+  stageId: string;
+  round: number;
+  gameState: string;
+  watch: UseFormWatch<YavarweeForm>;
+  setLocalPoint: (fn: (prev: number) => number) => void;
+  setLocalTicket: (fn: (prev: number) => number) => void;
+  setBetUuid: (uuid: string) => void;
+  startGameWithRound: (r: number) => void;
+}
+
+export function useYavarweeFormHandler({
+  stageId,
+  round,
+  gameState,
+  watch,
+  setLocalPoint,
+  setLocalTicket,
+  setBetUuid,
+  startGameWithRound,
+}: Props) {
+  const { mutate: betYavarwee, isPending } = useBetYavarweeMutation(stageId);
+
+  const onSubmit = useCallback(
+    (data: YavarweeForm) => {
+      if (gameState !== 'betting') return;
+      const payload = { ...data, amount: Number(data.amount) };
+      betYavarwee(payload, {
+        onSuccess: (res) => {
+          const amt = Number(watch('amount'));
+          setLocalPoint((prev) => prev - amt);
+          setLocalTicket((prev) => prev - 1);
+          setBetUuid(res.uuid);
+          startGameWithRound(round);
+        },
+        onError: (err) => {
+          toast.error(err.message || '베팅 중 오류가 발생했습니다.');
+        },
+      });
+    },
+    [
+      gameState,
+      round,
+      watch,
+      betYavarwee,
+      setLocalPoint,
+      setLocalTicket,
+      setBetUuid,
+      startGameWithRound,
+    ],
+  );
+
+  return { onSubmit, isPending };
+}
diff --git a/src/views/mini-game/yavarwee/model/yavarweeShuffleConfig.ts b/src/views/mini-game/yavarwee/model/yavarweeShuffleConfig.ts
new file mode 100644
index 00000000..33b0c9db
--- /dev/null
+++ b/src/views/mini-game/yavarwee/model/yavarweeShuffleConfig.ts
@@ -0,0 +1,22 @@
+export function getShuffleCountForRound(round: number): number {
+  const ranges: Record<number, [number, number]> = {
+    1: [12, 16],
+    2: [16, 20],
+    3: [20, 25],
+    4: [25, 30],
+    5: [35, 45],
+  };
+  const [min, max] = ranges[round] || [12, 16];
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function getShuffleAnimationDurationForRound(round: number): number {
+  const durations: Record<number, number> = {
+    1: 800,
+    2: 600,
+    3: 400,
+    4: 300,
+    5: 200,
+  };
+  return durations[round] ?? 1000;
+}
diff --git a/src/views/mini-game/yavarwee/ui/YavarweePage/index.tsx b/src/views/mini-game/yavarwee/ui/YavarweePage/index.tsx
index fa0044d2..220555c8 100644
--- a/src/views/mini-game/yavarwee/ui/YavarweePage/index.tsx
+++ b/src/views/mini-game/yavarwee/ui/YavarweePage/index.tsx
@@ -3,14 +3,9 @@
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 
 import { AnimationDisplayContainer } from '@/entities/mini-game';
-import {
-  YavarweeAnimation,
-  YavarweeButton,
-} from '@/entities/mini-game/yavarwee';
+import { YavarweeButton } from '@/entities/mini-game/yavarwee';
 import { YavarweeForm } from '@/shared/types/mini-game/yavarwee';
 import BackPageButton from '@/shared/ui/backPageButton';
 import { cn } from '@/shared/utils/cn';
@@ -18,263 +13,70 @@ import { useGetBetLimit } from '@/views/mini-game/model/useGetBetLimit';
 import { useGetMyPointQuery } from '@/views/mini-game/model/useGetMyPointQuery';
 import { useGetMyTicketQuery } from '@/views/mini-game/model/useGetMyTicketQuery';
 import { ControlForm } from '@/widgets/mini-game';
-import { RoundContainer } from '@/widgets/mini-game/yavarwee';
-import { useBetYavarweeMutation } from '../../model/useBetYavarweeMutation';
-import { useComfirmYavarweeMutation } from '../../model/useComfirmYavarweeMutation';
+import {
+  RoundContainer,
+  YavarweeAnimation,
+} from '@/widgets/mini-game/yavarwee';
+import { useYavarweeController } from '../../model/useYavarweeController';
+import { useYavarweeFormHandler } from '../../model/useYavarweeFormHandler';
+import { getShuffleAnimationDurationForRound } from '../../model/yavarweeShuffleConfig';
+
+export default function YavarweePage() {
+  const { stageId } = useParams<{ stageId: string }>();
+  const { data: pointData } = useGetMyPointQuery(stageId);
+  const { data: ticketData } = useGetMyTicketQuery(stageId);
+  const { data: betLimit } = useGetBetLimit(stageId);
 
-const YavarweePage = () => {
-  const params = useParams<{ stageId: string }>();
-  const { stageId } = params;
-  const { data: myPointData } = useGetMyPointQuery(stageId);
-  const { data: myTicketData } = useGetMyTicketQuery(stageId);
-  const { data: betLimitData } = useGetBetLimit(stageId);
   const { register, handleSubmit, watch, setValue, reset } =
     useForm<YavarweeForm>();
-
-  const serverPoint = myPointData?.point || 0;
-  const serverTicket = myTicketData?.yavarwee || 0;
-  const minBetLimit = betLimitData?.yavarwee.minBetPoint || 0;
-  const maxBetLimit = betLimitData?.yavarwee.maxBetPoint || 0;
-
-  const [gameState, setGameState] = useState<
-    | 'idle'
-    | 'betting'
-    | 'showing'
-    | 'hiding'
-    | 'shuffling'
-    | 'selecting'
-    | 'result'
-    | 'round'
-  >('idle');
-
-  const [ballPosition, setBallPosition] = useState<number | null>(null);
-  const [cupPositions, setCupPositions] = useState<number[]>([0, 1, 2]);
-  const [userSelection, setUserSelection] = useState<number | null>(null);
-  const [result, setResult] = useState<'correct' | 'wrong' | null>(null);
-  const [round, setRound] = useState<number>(1);
-  const [betUuid, setBetUuid] = useState<string | null>(null);
-  const [localPoint, setLocalPoint] = useState<number>(serverPoint);
-  const [localTicket, setLocalTicket] = useState<number>(serverTicket);
-
-  const { mutate: betYavarwee, isPending: betIsPending } =
-    useBetYavarweeMutation(stageId);
-  const { mutate: comfirmYavarwee, isPending: comfirmIsPending } =
-    useComfirmYavarweeMutation(stageId);
+  const [localPoint, setLocalPoint] = useState(pointData?.point || 0);
+  const [localTicket, setLocalTicket] = useState(ticketData?.yavarwee || 0);
 
   useEffect(() => {
-    setLocalPoint(serverPoint);
-  }, [serverPoint]);
-
-  useEffect(() => {
-    setLocalTicket(serverTicket);
-  }, [serverTicket]);
-
+    setLocalPoint(pointData?.point || 0);
+  }, [pointData]);
   useEffect(() => {
-    if (gameState === 'selecting') {
-      const timer = setTimeout(() => {
-        if (userSelection === null) {
-          comfirmYavarwee(
-            {
-              uuid: betUuid!,
-              round,
-              status: false,
-            },
-            {
-              onSuccess: () => {
-                toast.error(
-                  '컵 선택 제한 시간(3초)을 지나서 야바위를 종료합니다.',
-                );
-                setRound(1);
-                reset();
-                setGameState('idle');
-              },
-            },
-          );
-        }
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [gameState, userSelection, betUuid, round, reset, comfirmYavarwee]);
-
-  const startGameWithRound = (currentRound: number) => {
-    setGameState('showing');
-    const randomPosition = Math.floor(Math.random() * 3);
-    setBallPosition(randomPosition);
-    setCupPositions([0, 1, 2]);
-    setUserSelection(null);
-    setResult(null);
-
-    setTimeout(() => {
-      setGameState('hiding');
-      setTimeout(() => {
-        setGameState('shuffling');
-        performShuffleAnimation(currentRound);
-      }, 1000);
-    }, 2000);
-  };
-
-  const getShuffleCountForRound = (round: number): number => {
-    const ranges: Record<number, [number, number]> = {
-      1: [12, 16],
-      2: [16, 20],
-      3: [20, 25],
-      4: [25, 30],
-      5: [35, 45],
-    };
-
-    const [min, max] = ranges[round];
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  };
-
-  const getShuffleAnimationDurationForRound = (round: number): number => {
-    const durations: Record<number, number> = {
-      1: 800,
-      2: 600,
-      3: 400,
-      4: 300,
-      5: 200,
-    };
-
-    return durations[round] || 1000;
-  };
-
-  const performShuffleAnimation = (currentRound: number) => {
-    const current = [...cupPositions];
-    const shuffleCount = getShuffleCountForRound(currentRound);
-    const shuffleDuration = getShuffleAnimationDurationForRound(currentRound);
-    const shuffles: [number, number][] = [];
-
-    for (let i = 0; i < shuffleCount; i++) {
-      const a = Math.floor(Math.random() * 3);
-      let b = Math.floor(Math.random() * 3);
-      while (a === b) b = Math.floor(Math.random() * 3);
-      [current[a], current[b]] = [current[b], current[a]];
-      shuffles.push([a, b]);
-    }
-
-    let delay = 0;
-    shuffles.forEach(([a, b]) => {
-      setTimeout(() => {
-        setCupPositions((prev) => {
-          const next = [...prev];
-          [next[a], next[b]] = [next[b], next[a]];
-          return next;
-        });
-      }, delay);
-      delay += shuffleDuration;
-    });
-
-    setTimeout(() => {
-      setGameState('selecting');
-    }, delay);
-  };
-
-  const selectCup = (selectedIdx: number) => {
-    if (gameState !== 'selecting') return;
-
-    setUserSelection(selectedIdx);
-    const originalCupId = cupPositions[selectedIdx];
-    const correct = originalCupId === ballPosition;
-
-    setResult(correct ? 'correct' : 'wrong');
-    setGameState('result');
-
-    setTimeout(() => {
-      if (correct) {
-        if (round >= 5) {
-          comfirmYavarwee(
-            {
-              uuid: betUuid!,
-              round,
-              status: true,
-            },
-            {
-              onSuccess: () => {
-                toast.success('야바위 라운드 종료 포인트를 정산합니다.');
-                setRound(1);
-                reset();
-                setGameState('idle');
-              },
-            },
-          );
-        } else {
-          setGameState('round');
-        }
-      } else {
-        comfirmYavarwee(
-          {
-            uuid: betUuid!,
-            round,
-            status: false,
-          },
-          {
-            onSuccess: () => {
-              toast.error('야바위 배팅에 실패했습니다.');
-              setRound(1);
-              reset();
-              setGameState('idle');
-            },
-          },
-        );
-      }
-    }, 1500);
-  };
-
-  const handleNextRound = () => {
-    const nextRound = round + 1;
-    setRound(nextRound);
-    startGameWithRound(nextRound);
-  };
-
-  const handleStopGame = () => {
-    comfirmYavarwee(
-      {
-        uuid: betUuid!,
-        round,
-        status: true,
-      },
-      {
-        onSuccess: () => {
-          toast.success('야바위 라운드 종료 포인트를 정산합니다.');
-          setRound(1);
-          reset();
-          setGameState('idle');
-        },
-      },
-    );
-  };
+    setLocalTicket(ticketData?.yavarwee || 0);
+  }, [ticketData]);
+
+  const {
+    gameState,
+    round,
+    cupPositions,
+    ballPosition,
+    userSelection,
+    result,
+    setGameState,
+    selectCup,
+    startGameWithRound,
+    handleNextRound,
+    handleStopGame,
+    setBetUuid,
+  } = useYavarweeController(stageId, reset);
+
+  const { onSubmit, isPending } = useYavarweeFormHandler({
+    stageId,
+    round,
+    gameState,
+    watch,
+    setLocalPoint,
+    setLocalTicket,
+    setBetUuid,
+    startGameWithRound,
+  });
 
   return (
     <div
       className={cn(
         'flex',
         'w-full',
-        'items-center',
         'justify-center',
         'px-[1rem]',
         'py-[80px]',
       )}
     >
       <form
-        onSubmit={handleSubmit((data) => {
-          if (gameState === 'betting') {
-            const parsedData = {
-              ...data,
-              amount: Number(data.amount),
-            };
-
-            betYavarwee(parsedData, {
-              onSuccess: (res) => {
-                const amountValue = Number(watch('amount'));
-                setLocalPoint((prev) => prev - amountValue);
-                setLocalTicket((prev) => prev - 1);
-                setBetUuid(res.uuid);
-                startGameWithRound(round);
-              },
-            });
-          }
-        })}
+        onSubmit={handleSubmit(onSubmit)}
         className={cn(
           'w-full',
           'max-w-[1320px]',
@@ -284,56 +86,51 @@ const YavarweePage = () => {
       >
         <BackPageButton label="야바위" type="back" />
 
-        <div className={cn('space-y-24')}>
-          <RoundContainer currentRound={round} />
-          <AnimationDisplayContainer>
-            <YavarweeAnimation
-              gameState={gameState}
-              cupPositions={cupPositions}
-              ballPosition={ballPosition}
-              userSelection={userSelection}
-              result={result}
-              startGame={() => setGameState('betting')}
-              onNextRound={handleNextRound}
-              onStopGame={handleStopGame}
-              shuffleDuration={getShuffleAnimationDurationForRound(round)}
-            />
-          </AnimationDisplayContainer>
-        </div>
-
-        <div className={cn('flex', 'w-full', 'justify-center')}>
-          <div className={cn('flex', 'w-full', 'justify-evenly', 'gap-16')}>
-            {['1', '2', '3'].map((num, idx) => (
-              <div key={num} className={cn('w-full', 'max-w-[182px]')}>
-                <YavarweeButton
-                  number={num as '1' | '2' | '3'}
-                  onBet={(value) => {
-                    if (gameState === 'selecting') {
-                      setValue('bet', value);
-                      selectCup(idx);
-                    }
-                  }}
-                  isPending={comfirmIsPending}
-                />
-              </div>
-            ))}
-          </div>
+        <RoundContainer currentRound={round} />
+
+        <AnimationDisplayContainer>
+          <YavarweeAnimation
+            gameState={gameState}
+            cupPositions={cupPositions}
+            ballPosition={ballPosition}
+            userSelection={userSelection}
+            result={result}
+            startGame={() => setGameState('betting')}
+            onNextRound={handleNextRound}
+            onStopGame={handleStopGame}
+            shuffleDuration={getShuffleAnimationDurationForRound(round)}
+          />
+        </AnimationDisplayContainer>
+
+        <div className={cn('flex', 'w-full', 'justify-evenly', 'gap-16')}>
+          {['1', '2', '3'].map((num, idx) => (
+            <div key={num} className={cn('w-full', 'max-w-[182px]')}>
+              <YavarweeButton
+                number={num as '1' | '2' | '3'}
+                onBet={(v) => {
+                  if (gameState === 'selecting') {
+                    setValue('bet', v);
+                    selectCup(idx);
+                  }
+                }}
+                isPending={isPending}
+              />
+            </div>
+          ))}
         </div>
 
         <ControlForm
           point={localPoint}
           ticket={localTicket}
           register={register}
-          isPending={betIsPending}
           watch={watch}
+          isPending={isPending}
           isPlaying={gameState !== 'betting'}
-          minBetLimit={minBetLimit}
-          maxBetLimit={maxBetLimit}
+          minBetLimit={betLimit?.yavarwee.minBetPoint || 0}
+          maxBetLimit={betLimit?.yavarwee.maxBetPoint || 0}
           type="yavarwee"
         />
       </form>
     </div>
   );
-};
-
-export default YavarweePage;
+}
diff --git a/src/widgets/mini-game/yavarwee/index.ts b/src/widgets/mini-game/yavarwee/index.ts
index 93ba3452..6388f165 100644
--- a/src/widgets/mini-game/yavarwee/index.ts
+++ b/src/widgets/mini-game/yavarwee/index.ts
@@ -1 +1,2 @@
 export { default as RoundContainer } from './ui/RoundContainer';
+export { default as YavarweeAnimation } from './ui/YavarweeAnimation';
diff --git a/src/widgets/mini-game/yavarwee/model/useUpdateCupsAndBall.ts b/src/widgets/mini-game/yavarwee/model/useUpdateCupsAndBall.ts
new file mode 100644
index 00000000..73fa1d5e
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/model/useUpdateCupsAndBall.ts
@@ -0,0 +1,70 @@
+import {
+  CupState,
+  BallState,
+  GameState,
+  Result,
+} from '@/shared/types/mini-game/yavarwee';
+
+export function updateCupsAndBall(
+  cups: CupState[],
+  setCups: (value: CupState[]) => void,
+  ball: BallState,
+  setBall: (value: BallState) => void,
+  cupPositions: number[],
+  ballPosition: number | null,
+  userSelection: number | null,
+  result: Result,
+  gameState: GameState,
+  shuffleDuration: number,
+  cupCoordinates: { x: number }[],
+) {
+  const newCups = [...cups];
+
+  cupPositions.forEach((positionId, index) => {
+    const cupIndex = cups.findIndex((cup) => cup.originalId === positionId);
+    if (cupIndex !== -1) {
+      const targetX = cupCoordinates[index].x;
+      let targetY = 300 / 2;
+      let zIndex = 1;
+
+      const isCupRevealed = (() => {
+        if (gameState === 'showing') {
+          return index === ballPosition;
+        }
+        if (gameState === 'result') {
+          if (result === 'correct') return index === userSelection;
+          if (result === 'wrong') return positionId === ballPosition;
+        }
+        return false;
+      })();
+
+      if (isCupRevealed) {
+        targetY = 300 / 2 - 75;
+        zIndex = 10;
+      }
+
+      newCups[cupIndex] = {
+        ...newCups[cupIndex],
+        targetX,
+        targetY,
+        zIndex,
+        animationProgress: 0,
+        animationDuration: gameState === 'shuffling' ? shuffleDuration : 300,
+      };
+    }
+  });
+
+  setCups(newCups);
+
+  if (ballPosition !== null) {
+    const cupIndex = cupPositions.indexOf(ballPosition);
+    const ballX = cupCoordinates[cupIndex].x;
+
+    setBall({
+      ...ball,
+      x: ballX,
+      visible: gameState === 'showing' || gameState === 'result',
+      scale: gameState === 'showing' ? 0.8 : 1,
+    });
+  }
+}
diff --git a/src/widgets/mini-game/yavarwee/model/useYavarweeBall.ts b/src/widgets/mini-game/yavarwee/model/useYavarweeBall.ts
new file mode 100644
index 00000000..b8559c8e
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/model/useYavarweeBall.ts
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { BallState } from '@/shared/types/mini-game/yavarwee';
+
+const CANVAS_WIDTH = 900;
+const CANVAS_HEIGHT = 300;
+
+export function useYavarweeBall() {
+  const [ball, setBall] = useState<BallState>({
+    x: CANVAS_WIDTH / 2,
+    y: CANVAS_HEIGHT / 2 + 30,
+    visible: false,
+    scale: 1,
+  });
+
+  return { ball, setBall };
+}
diff --git a/src/widgets/mini-game/yavarwee/model/useYavarweeCups.ts b/src/widgets/mini-game/yavarwee/model/useYavarweeCups.ts
new file mode 100644
index 00000000..e9d184e4
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/model/useYavarweeCups.ts
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { CupState } from '@/shared/types/mini-game/yavarwee';
+
+const CANVAS_WIDTH = 900;
+const CANVAS_HEIGHT = 300;
+const CUP_SPACING = 240;
+
+export function useYavarweeCups() {
+  const cupCoordinates = [
+    { x: CANVAS_WIDTH / 2 - CUP_SPACING },
+    { x: CANVAS_WIDTH / 2 },
+    { x: CANVAS_WIDTH / 2 + CUP_SPACING },
+  ];
+
+  const [cups, setCups] = useState<CupState[]>([
+    {
+      x: cupCoordinates[0].x,
+      y: CANVAS_HEIGHT / 2,
+      targetX: cupCoordinates[0].x,
+      targetY: CANVAS_HEIGHT / 2,
+      zIndex: 1,
+      originalId: 0,
+      animationProgress: 1,
+      animationDuration: 300,
+    },
+    {
+      x: cupCoordinates[1].x,
+      y: CANVAS_HEIGHT / 2,
+      targetX: cupCoordinates[1].x,
+      targetY: CANVAS_HEIGHT / 2,
+      zIndex: 1,
+      originalId: 1,
+      animationProgress: 1,
+      animationDuration: 300,
+    },
+    {
+      x: cupCoordinates[2].x,
+      y: CANVAS_HEIGHT / 2,
+      targetX: cupCoordinates[2].x,
+      targetY: CANVAS_HEIGHT / 2,
+      zIndex: 1,
+      originalId: 2,
+      animationProgress: 1,
+      animationDuration: 300,
+    },
+  ]);
+
+  return { cups, setCups, cupCoordinates };
+}
diff --git a/src/widgets/mini-game/yavarwee/model/useYavarweeImages.ts b/src/widgets/mini-game/yavarwee/model/useYavarweeImages.ts
new file mode 100644
index 00000000..fccc43f9
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/model/useYavarweeImages.ts
@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export function useYavarweeImages() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const cupImageRef = useRef<HTMLImageElement | null>(null);
+  const ballImageRef = useRef<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    const cupImage = new Image();
+    cupImage.src = '/cup.png';
+    cupImage.onload = () => {
+      cupImageRef.current = cupImage;
+    };
+
+    const ballImage = new Image();
+    ballImage.src = '/ball.png';
+    ballImage.onload = () => {
+      ballImageRef.current = ballImage;
+    };
+  }, []);
+
+  return { canvasRef, cupImageRef, ballImageRef };
+}
diff --git a/src/widgets/mini-game/yavarwee/model/useYavarweeTimer.ts b/src/widgets/mini-game/yavarwee/model/useYavarweeTimer.ts
new file mode 100644
index 00000000..f873d786
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/model/useYavarweeTimer.ts
@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { GameState } from '@/shared/types/mini-game/yavarwee';
+
+const SELECTION_TIMER_DURATION = 3000;
+
+export function useYavarweeTimer(gameState: GameState) {
+  const [timerProgress, setTimerProgress] = useState<number>(100);
+  const timerStartTimeRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (gameState !== 'selecting') return;
+
+    const now = Date.now();
+    timerStartTimeRef.current = now;
+    setTimerProgress(100);
+
+    const updateInterval = 30;
+
+    const interval = setInterval(() => {
+      const elapsedTime = Date.now() - (timerStartTimeRef.current || now);
+      const remainingTime = Math.max(0, SELECTION_TIMER_DURATION - elapsedTime);
+      const newProgress = (remainingTime / SELECTION_TIMER_DURATION) * 100;
+
+      setTimerProgress(newProgress);
+
+      if (remainingTime <= 0) {
+        clearInterval(interval);
+      }
+    }, updateInterval);
+
+    return () => clearInterval(interval);
+  }, [gameState]);
+
+  return { timerProgress };
+}
diff --git a/src/widgets/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx b/src/widgets/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx
new file mode 100644
index 00000000..72ac86dc
--- /dev/null
+++ b/src/widgets/mini-game/yavarwee/ui/YavarweeAnimation/index.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import {
+  IdleOverlay,
+  RoundOverlay,
+  SelectingTimerProgress,
+  StatusText,
+  useCanvasAnimation,
+} from '@/entities/mini-game/yavarwee';
+import { GameState, Result } from '@/shared/types/mini-game/yavarwee';
+import { cn } from '@/shared/utils/cn';
+import { updateCupsAndBall } from '../../model/useUpdateCupsAndBall';
+import { useYavarweeBall } from '../../model/useYavarweeBall';
+import { useYavarweeCups } from '../../model/useYavarweeCups';
+import { useYavarweeImages } from '../../model/useYavarweeImages';
+import { useYavarweeTimer } from '../../model/useYavarweeTimer';
+
+type Props = {
+  gameState: GameState;
+  cupPositions: number[];
+  ballPosition: number | null;
+  userSelection: number | null;
+  result: Result;
+  startGame: () => void;
+  onNextRound: () => void;
+  onStopGame: () => void;
+  shuffleDuration: number;
+};
+
+const YavarweeAnimation = ({
+  gameState,
+  cupPositions,
+  ballPosition,
+  userSelection,
+  result,
+  startGame,
+  onNextRound,
+  onStopGame,
+  shuffleDuration,
+}: Props) => {
+  const { cups, setCups, cupCoordinates } = useYavarweeCups();
+  const { ball, setBall } = useYavarweeBall();
+  const { canvasRef, cupImageRef, ballImageRef } = useYavarweeImages();
+  const { timerProgress } = useYavarweeTimer(gameState);
+
+  useCanvasAnimation(
+    canvasRef,
+    cups,
+    ball,
+    cupImageRef.current,
+    ballImageRef.current,
+    gameState,
+    setCups,
+    setBall,
+  );
+
+  useEffect(() => {
+    updateCupsAndBall(
+      cups,
+      setCups,
+      ball,
+      setBall,
+      cupPositions,
+      ballPosition,
+      userSelection,
+      result,
+      gameState,
+      shuffleDuration,
+      cupCoordinates,
+    );
+  }, [gameState, cupPositions, ballPosition, userSelection, result]);
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-gray-700',
+      )}
+    >
+      <canvas ref={canvasRef} width={900} height={300} className="max-w-full" />
+
+      <div className="z-10 mt-4 w-full space-y-16 px-4 text-center">
+        {[
+          'betting',
+          'showing',
+          'hiding',
+          'shuffling',
+          'selecting',
+          'result',
+        ].includes(gameState) && (
+          <StatusText gameState={gameState} result={result} />
+        )}
+        {gameState === 'selecting' && userSelection === null && (
+          <SelectingTimerProgress timerProgress={timerProgress} />
+        )}
+      </div>
+
+      {gameState === 'idle' && <IdleOverlay onStart={startGame} />}
+      {gameState === 'round' && (
+        <RoundOverlay onNextRound={onNextRound} onStopGame={onStopGame} />
+      )}
+    </div>
+  );
+};
+
+export default YavarweeAnimation;