diff --git a/src/components/common/Game/index.ts b/src/components/common/Game/index.ts
index 40da32f..232fc4a 100644
--- a/src/components/common/Game/index.ts
+++ b/src/components/common/Game/index.ts
@@ -1,10 +1,10 @@
-import GameWrapper from './GameWrapper';
-import Label from './Label';
-import Score from './Score';
-import Status from './Status';
-import Team from './Team';
+import GameWrapper from './pieces/GameWrapper';
+import Label from './pieces/Label';
+import Score from './pieces/Score';
+import Status from './pieces/Status';
+import Team from './pieces/Team';
 
-export const Game = Object.assign(GameWrapper, {
+export const GameBanner = Object.assign(GameWrapper, {
   Label,
   Score,
   Status,
diff --git a/src/components/common/Game/GameWrapper.tsx b/src/components/common/Game/pieces/GameWrapper.tsx
similarity index 59%
rename from src/components/common/Game/GameWrapper.tsx
rename to src/components/common/Game/pieces/GameWrapper.tsx
index 34ab8cc..dcd2408 100644
--- a/src/components/common/Game/GameWrapper.tsx
+++ b/src/components/common/Game/pieces/GameWrapper.tsx
@@ -8,9 +8,7 @@ type GameProps = GameDetailType & {
   className?: string;
 };
 
-export const GameContext = createContext<null | GameDetailType>(
-  {} as GameDetailType,
-);
+export const GameContext = createContext<GameDetailType>({} as GameDetailType);
 
 export default function GameWrapper({
   className,
@@ -19,7 +17,14 @@ export default function GameWrapper({
 }: GameProps) {
   return (
     <GameContext.Provider value={props}>
-      <div className={$(className)}>{children}</div>
+      <div
+        className={$(
+          'relative h-full min-h-[200px] justify-center rounded-xl bg-gray-1 shadow-lg',
+          className,
+        )}
+      >
+        {children}
+      </div>
     </GameContext.Provider>
   );
 }
diff --git a/src/components/common/Game/Label.tsx b/src/components/common/Game/pieces/Label.tsx
similarity index 67%
rename from src/components/common/Game/Label.tsx
rename to src/components/common/Game/pieces/Label.tsx
index d463ff8..25f1ce7 100644
--- a/src/components/common/Game/Label.tsx
+++ b/src/components/common/Game/pieces/Label.tsx
@@ -6,7 +6,7 @@ type LabelProps = {
 };
 
 export default function Label({ className }: LabelProps) {
-  const { name } = useGameContext();
+  const { gameName } = useGameContext();
 
-  return <div className={$(className)}>{name}</div>;
+  return <div className={$(className)}>{gameName}</div>;
 }
diff --git a/src/components/common/Game/Score.tsx b/src/components/common/Game/pieces/Score.tsx
similarity index 53%
rename from src/components/common/Game/Score.tsx
rename to src/components/common/Game/pieces/Score.tsx
index dff2e63..e46a412 100644
--- a/src/components/common/Game/Score.tsx
+++ b/src/components/common/Game/pieces/Score.tsx
@@ -7,11 +7,9 @@ type ScoreProps = {
 };
 
 export default function Score({ teamIndex, className }: ScoreProps) {
-  const { firstTeamScore, secondTeamScore } = useGameContext();
+  const { gameTeams } = useGameContext();
 
-  return (
-    <span className={$(className)}>
-      {teamIndex === 1 ? firstTeamScore : secondTeamScore}
-    </span>
-  );
+  const [targetTeam] = gameTeams.filter(team => team.gameTeamId === teamIndex);
+
+  return <span className={$('text-3xl', className)}>{targetTeam.score}</span>;
 }
diff --git a/src/components/common/Game/Status.tsx b/src/components/common/Game/pieces/Status.tsx
similarity index 54%
rename from src/components/common/Game/Status.tsx
rename to src/components/common/Game/pieces/Status.tsx
index 3e0fcff..a3c1739 100644
--- a/src/components/common/Game/Status.tsx
+++ b/src/components/common/Game/pieces/Status.tsx
@@ -1,4 +1,3 @@
-import { GAME_STATUS } from '@/constants/gameStatus';
 import { useGameContext } from '@/hooks/useGameContext';
 import { $ } from '@/utils/core';
 
@@ -7,7 +6,7 @@ type StatusProps = {
 };
 
 export default function Status({ className }: StatusProps) {
-  const { gameStatus } = useGameContext();
+  const { gameQuarter } = useGameContext();
 
-  return <div className={$(className)}>{GAME_STATUS[gameStatus]}</div>;
+  return <div className={$('px-5', className)}>{gameQuarter}</div>;
 }
diff --git a/src/components/common/Game/Team.tsx b/src/components/common/Game/pieces/Team.tsx
similarity index 59%
rename from src/components/common/Game/Team.tsx
rename to src/components/common/Game/pieces/Team.tsx
index 0faad5f..c5ff67f 100644
--- a/src/components/common/Game/Team.tsx
+++ b/src/components/common/Game/pieces/Team.tsx
@@ -9,19 +9,20 @@ type TeamProps = {
 };
 
 export default function Team({ teamIndex, className }: TeamProps) {
-  const { firstTeam, secondTeam } = useGameContext();
+  const { gameTeams } = useGameContext();
 
-  const targetTeamInfo = teamIndex === 1 ? firstTeam : secondTeam;
+  const targetTeamInfo = gameTeams[teamIndex - 1];
 
   return (
     <div className={$(className)}>
       <Image
-        width="100"
-        height="100"
+        width="65"
+        height="65"
         src={targetTeamInfo.logoImageUrl}
-        alt={`${targetTeamInfo.name}팀 로고`}
+        alt={`${targetTeamInfo.gameTeamName}팀 로고`}
+        className="my-5"
       />
-      <span>{targetTeamInfo.name}</span>
+      <span>{targetTeamInfo.gameTeamName}</span>
     </div>
   );
 }
diff --git a/src/hooks/useGameContext.ts b/src/hooks/useGameContext.ts
index 75498d6..f7ca8fa 100644
--- a/src/hooks/useGameContext.ts
+++ b/src/hooks/useGameContext.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { GameContext } from '@/components/common/Game/GameWrapper';
+import { GameContext } from '@/components/common/Game/pieces/GameWrapper';
 import { GameDetailType } from '@/types/game';
 
 type GameContextType = () => GameDetailType;
diff --git a/src/types/game.ts b/src/types/game.ts
index 6bad6d6..05a1b3a 100644
--- a/src/types/game.ts
+++ b/src/types/game.ts
@@ -5,21 +5,25 @@ export type GameType = {
   startTime: string;
   firstTeamScore: number;
   secondTeamScore: number;
-  gameStatus: GameStatusType;
+  gameStatus: GameQuarterType;
   statusChangedAt: string;
   firstTeam: GameTeamType;
   secondTeam: GameTeamType;
 };
 
-export interface GameDetailType extends GameType {
-  records: GameRecordType[];
-  videoId: string;
-}
+export type GameDetailType = {
+  gameTeams: GameTeamType[];
+  startTime: string;
+  videoId: number;
+  gameQuarter: GameQuarterType;
+  gameName: string;
+};
 
 export type GameTeamType = {
-  id: number;
-  name: string;
+  gameTeamId: number;
+  gameTeamName: string;
   logoImageUrl: string;
+  score: number;
 };
 
 export type GameRecordType = {
@@ -37,7 +41,7 @@ export type GameCommentType = {
   isBlocked: boolean;
 };
 
-export type GameStatusType =
+export type GameQuarterType =
   | 'BEFORE'
   | 'FIRST_HALF'
   | 'BREAK_TIME'