diff --git a/src/app/match/[id]/modify/page.tsx b/src/app/match/[id]/modify/page.tsx
deleted file mode 100644
index e95f9bb..0000000
--- a/src/app/match/[id]/modify/page.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client';
-
-import { useParams, useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useState } from 'react';
-
-import { postGameScore } from '@/api/admin';
-import Input from '@/components/common/Input/Input';
-import { getUtcHours } from '@/utils/utc-times';
-
-export default function ModifyGame() {
-  const router = useRouter();
-  const params = useParams();
-  const id = Number(params.id);
-  const [scoreData, setScoreData] = useState({
-    playerName: '',
-    team: 0,
-    hour: new Date().getHours(),
-    minute: new Date().getMinutes(),
-  });
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-  ) => {
-    const { name, value } = e.target;
-
-    setScoreData(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const date = getUtcHours({
-      hour: scoreData.hour,
-      minute: scoreData.minute,
-    });
-
-    postGameScore(id, {
-      playerName: scoreData.playerName,
-      team: scoreData.team,
-      scoredAt: date,
-    }).then(() => router.push('/'));
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <label htmlFor="playerName" className="my-5">
-        선수 이름
-        <Input
-          id="playerName"
-          name="playerName"
-          value={scoreData.playerName}
-          onChange={handleChange}
-          required
-        />
-      </label>
-
-      <p>득점한 팀</p>
-
-      <label htmlFor="scoreTime">
-        득점 시간
-        <div className="flex items-center justify-center gap-1">
-          <Input
-            id="scoreTime"
-            type="number"
-            name="hour"
-            value={scoreData.hour}
-            onChange={handleChange}
-            min={0}
-            max={23}
-            maxLength={2}
-          />
-          :
-          <Input
-            type="number"
-            name="minute"
-            value={scoreData.minute}
-            onChange={handleChange}
-            min={0}
-            max={59}
-            maxLength={2}
-          />
-        </div>
-      </label>
-      <button
-        type="submit"
-        className="disabled:pointer-none w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
-      >
-        저장하기
-      </button>
-    </form>
-  );
-}
diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx
index 5ef4ff4..60e9dfd 100644
--- a/src/app/match/[id]/page.tsx
+++ b/src/app/match/[id]/page.tsx
@@ -115,7 +115,7 @@ export default function Match({ params }: { params: { id: string } }) {
                 <MatchCommentFetcher matchId={params.id}>
                   {({ commentList, matchTeams, ...data }) => (
                     <div className="max-h-[450px] overflow-y-auto p-5">
-                      <ul className="pb-8">
+                      <ul className="pb-10">
                         <CommentList
                           commentList={commentList.pages.flat()}
                           scrollToBottom={scrollToBottom}
diff --git a/src/app/rummikube/[id]/page.tsx b/src/app/rummikube/[id]/page.tsx
new file mode 100644
index 0000000..6a7a2fc
--- /dev/null
+++ b/src/app/rummikube/[id]/page.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import AsyncBoundary from '@/components/common/AsyncBoundary';
+import Loader from '@/components/common/Loader';
+import CommentForm from '@/components/match/CommentForm';
+import CommentList from '@/components/match/CommentList';
+import Lineup from '@/components/match/LineupList';
+import Panel from '@/components/match/Panel';
+import RecordList from '@/components/match/RecordList';
+import Video from '@/components/match/Video';
+import Cheer from '@/components/rummikub/Cheer';
+import RummiKubMatchBanner from '@/components/rummikub/MatchBanner';
+import useSocket from '@/hooks/useSocket';
+import MatchByIdFetcher from '@/queries/useMatchById/Fetcher';
+import MatchCheerByIdFetcher from '@/queries/useMatchCheerById/Fetcher';
+import MatchCommentFetcher from '@/queries/useMatchCommentById/Fetcher';
+import MatchLineupFetcher from '@/queries/useMatchLineupById/Fetcher';
+import MatchTimelineFetcher from '@/queries/useMatchTimelineById/Fetcher';
+import MatchVideoFetcher from '@/queries/useMatchVideoById/Fetcher';
+import useSaveCommentMutation from '@/queries/useSaveCommentMutation/query';
+import { MatchCommentType } from '@/types/match';
+
+export default function Rummikute({ params }: { params: { id: string } }) {
+  const [comments, setComments] = useState<MatchCommentType[]>([]);
+
+  const handleSocketMessage = (comment: MatchCommentType) => {
+    if (comment) {
+      setComments(prev => [...prev, comment]);
+    }
+  };
+
+  const { connect } = useSocket({
+    url: 'wss://api.hufstreaming.site/ws',
+    destination: `/topic/games/${params.id}`,
+    callback: handleSocketMessage,
+  });
+
+  connect();
+
+  const { mutate } = useSaveCommentMutation();
+  const options = [
+    { label: '라인업' },
+    { label: '응원댓글' },
+    { label: '경기영상' },
+    { label: '타임라인' },
+  ];
+
+  const scrollRef = useRef(null);
+  const scrollToBottom = () => {
+    if (!scrollRef.current) return;
+
+    (scrollRef.current as HTMLDivElement).scrollIntoView();
+  };
+
+  return (
+    <section>
+      <AsyncBoundary
+        errorFallback={props => (
+          <RummiKubMatchBanner.ErrorFallback {...props} />
+        )}
+        loadingFallback={<RummiKubMatchBanner.Skeleton />}
+      >
+        <MatchByIdFetcher matchId={params.id}>
+          {data => <RummiKubMatchBanner {...data} />}
+        </MatchByIdFetcher>
+      </AsyncBoundary>
+
+      <AsyncBoundary
+        errorFallback={props => <Cheer.ErrorFallback {...props} />}
+        loadingFallback={<Loader />}
+      >
+        <MatchCheerByIdFetcher matchId={params.id}>
+          {data => <Cheer cheers={data} />}
+        </MatchCheerByIdFetcher>
+      </AsyncBoundary>
+      <Panel options={options} defaultValue="라인업">
+        {({ selected }) => (
+          <>
+            {selected === '라인업' && (
+              <AsyncBoundary
+                errorFallback={props => <Lineup.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchLineupFetcher matchId={params.id}>
+                  {([firstTeam, secondTeam]) => (
+                    <div className="grid grid-cols-2 py-5 [&>*:first-child>ul]:before:absolute [&>*:first-child>ul]:before:right-0 [&>*:first-child>ul]:before:h-full [&>*:first-child>ul]:before:border-l-2 [&>*:first-child>ul]:before:bg-gray-2">
+                      <Lineup {...firstTeam} />
+                      <Lineup {...secondTeam} />
+                    </div>
+                  )}
+                </MatchLineupFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '타임라인' && (
+              <AsyncBoundary
+                errorFallback={props => <RecordList.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchTimelineFetcher matchId={params.id}>
+                  {([firstHalf, secondHalf]) => (
+                    <div className="overflow-y-auto p-5">
+                      <RecordList {...firstHalf} />
+                      <RecordList {...secondHalf} />
+                    </div>
+                  )}
+                </MatchTimelineFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '응원댓글' && (
+              <AsyncBoundary
+                errorFallback={props => (
+                  <CommentList.ErrorFallback {...props} />
+                )}
+                loadingFallback={<Loader />}
+              >
+                <MatchCommentFetcher matchId={params.id}>
+                  {({ commentList, matchTeams, ...data }) => (
+                    <div className="max-h-[450px] overflow-y-auto p-5">
+                      <ul className="pb-8">
+                        <CommentList
+                          commentList={commentList.pages.flat()}
+                          scrollToBottom={scrollToBottom}
+                          {...data}
+                        />
+                        <CommentList.SocketList commentList={comments} />
+                        <li ref={scrollRef}></li>
+                      </ul>
+                      <CommentForm
+                        matchTeams={matchTeams}
+                        matchId={params.id}
+                        mutate={mutate}
+                        scrollToBottom={scrollToBottom}
+                      />
+                    </div>
+                  )}
+                </MatchCommentFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '경기영상' && (
+              <AsyncBoundary
+                errorFallback={props => <Video.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchVideoFetcher matchId={params.id}>
+                  {data => (
+                    <div className="overflow-y-auto p-5">
+                      <Video {...data} />
+                    </div>
+                  )}
+                </MatchVideoFetcher>
+              </AsyncBoundary>
+            )}
+          </>
+        )}
+      </Panel>
+    </section>
+  );
+}
diff --git a/src/components/common/Icon/iconMap.ts b/src/components/common/Icon/iconMap.ts
index 400b6fc..801e72c 100644
--- a/src/components/common/Icon/iconMap.ts
+++ b/src/components/common/Icon/iconMap.ts
@@ -11,6 +11,7 @@ import { Image } from './svg/Image';
 import { PaperPlane } from './svg/PaperPlane';
 import { Pencil } from './svg/Pencil';
 import { PlusCircled } from './svg/PlusCircled';
+import { Profile } from './svg/Profile';
 import { Symbol } from './svg/Symbol';
 import { ThumbsUp } from './svg/Thumbsup';
 import { Trash } from './svg/Trash';
@@ -34,4 +35,5 @@ export const iconMap = {
   thumbsUp: ThumbsUp,
   trash: Trash,
   write: Write,
+  profile: Profile,
 };
diff --git a/src/components/common/Icon/svg/Profile.tsx b/src/components/common/Icon/svg/Profile.tsx
new file mode 100644
index 0000000..6e782ca
--- /dev/null
+++ b/src/components/common/Icon/svg/Profile.tsx
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+export const Profile = ({
+  viewBox = '0 0 20 20',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox={viewBox}
+      {...props}
+    >
+      <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
+    </svg>
+  );
+};
diff --git a/src/components/common/MatchCard/pieces/Team.tsx b/src/components/common/MatchCard/pieces/Team.tsx
index bf745fa..6c01fa8 100644
--- a/src/components/common/MatchCard/pieces/Team.tsx
+++ b/src/components/common/MatchCard/pieces/Team.tsx
@@ -3,6 +3,8 @@ import Image from 'next/image';
 import { useMatchCardContext } from '@/hooks/useMatchCardContext';
 import { $ } from '@/utils/core';
 
+import { Icon } from '../../Icon';
+
 type TeamProps = {
   teamIndex: number;
   className?: string;
@@ -14,15 +16,10 @@ export default function Team({ teamIndex, className }: TeamProps) {
   if (gameTeams.length === 0) {
     return (
       <div className={$(className)}>
-        <svg
-          className="me-4 h-16 w-16 text-gray-200 dark:text-gray-700"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
-        </svg>
+        <Icon
+          iconName="profile"
+          className="h-16 w-16 text-gray-200 dark:text-gray-700"
+        />
       </div>
     );
   }
diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx
index 0e3100e..818206d 100644
--- a/src/components/match/CommentForm/index.tsx
+++ b/src/components/match/CommentForm/index.tsx
@@ -18,7 +18,6 @@ export default function CommentForm({
 }: CommentFormProps) {
   const [inputValue, setInputValue] = useState('');
   const [selectedTeamId, setSelectedTeamId] = useState<number>(1);
-  const [isOpen, toggleOpen] = useState(false);
 
   const handleCommentSubmit = (
     e: FormEvent<HTMLFormElement>,
@@ -37,7 +36,7 @@ export default function CommentForm({
   return (
     <>
       <form
-        className="h-70px absolute -bottom-1 left-0 w-full"
+        className="h-70px absolute bottom-0 left-0 w-full translate-y-full"
         onSubmit={e =>
           handleCommentSubmit(e, {
             gameTeamId: Number(matchId),
@@ -45,22 +44,20 @@ export default function CommentForm({
           })
         }
       >
-        {isOpen && (
-          <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-start gap-2 rounded-lg bg-white px-5 py-3 shadow-md">
-            {matchTeams.map(team => (
-              <label key={team.gameTeamId} className="flex items-center">
-                <input
-                  type="radio"
-                  checked={selectedTeamId === team.gameTeamId}
-                  value={team.gameTeamId}
-                  onChange={handleRadioClick}
-                  className="dark:border-gray-6 dark:bg-gray-6 h-4 w-4 border-gray-3 bg-gray-1 text-primary focus:ring-2 focus:ring-primary dark:ring-offset-black dark:focus:ring-primary"
-                />
-                {team.gameTeamName}
-              </label>
-            ))}
-          </fieldset>
-        )}
+        <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-start gap-4 rounded-lg bg-white px-5 py-3">
+          {matchTeams.map(team => (
+            <label key={team.gameTeamId} className="flex items-center">
+              <input
+                type="radio"
+                checked={selectedTeamId === team.gameTeamId}
+                value={team.gameTeamId}
+                onChange={handleRadioClick}
+                className="dark:border-gray-6 dark:bg-gray-6 mr-1 h-4 w-4 border-gray-3 bg-gray-1 text-primary focus:ring-2 focus:ring-primary dark:ring-offset-black dark:focus:ring-primary"
+              />
+              {team.gameTeamName}
+            </label>
+          ))}
+        </fieldset>
 
         <div
           className="z-10 grid items-center rounded-lg bg-gray-2"
@@ -71,7 +68,6 @@ export default function CommentForm({
             value={inputValue}
             onChange={e => setInputValue(e.target.value)}
             placeholder="응원하는 팀에 댓글을 남겨보세요!"
-            onFocus={() => toggleOpen(true)}
           />
           <button className="rounded-xl bg-primary px-5 py-3 text-white">
             댓글
diff --git a/src/components/match/CommentItem/index.tsx b/src/components/match/CommentItem/index.tsx
index fcd98aa..a01ba94 100644
--- a/src/components/match/CommentItem/index.tsx
+++ b/src/components/match/CommentItem/index.tsx
@@ -10,6 +10,13 @@ type CommentItemProps = {
   createdAt: string;
 };
 
+const teamColor = [
+  'bg-[#ffb2b2]',
+  'bg-[#fdd3b1]',
+  'bg-[#b2c3ff]',
+  'bg-[#a6e7be]',
+] as const;
+
 export default function CommentItem({
   commentId,
   content,
@@ -25,27 +32,18 @@ export default function CommentItem({
   const isEven = order % 2 === 0;
   const { period, hours, minutes } = parseTimeString(createdAt);
 
+  if (isBlocked)
+    return (
+      <div className="rounded-xl border bg-gray-2 px-3 py-1">
+        ⚠️ 관리자에 의해 차단된 댓글입니다.
+      </div>
+    );
+
   return (
     <li className={$('mb-1 flex items-end', isEven && 'flex-row-reverse')}>
-      {isBlocked ? (
-        <div
-          className={$(
-            'rounded-xl border px-3 py-1',
-            isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]',
-          )}
-        >
-          ⚠️ 관리자에 의해 차단된 댓글입니다.
-        </div>
-      ) : (
-        <div
-          className={$(
-            'rounded-xl border px-3 py-1',
-            isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]',
-          )}
-        >
-          {content}
-        </div>
-      )}
+      <div className={$('rounded-xl border px-3 py-1', teamColor[order - 1])}>
+        {content}
+      </div>
       <div
         className={$(
           'mb-1 flex items-end justify-between text-xs',
diff --git a/src/components/match/CommentList/index.tsx b/src/components/match/CommentList/index.tsx
index a45bd64..8cad35e 100644
--- a/src/components/match/CommentList/index.tsx
+++ b/src/components/match/CommentList/index.tsx
@@ -44,7 +44,11 @@ export default function CommentList({
     <>
       <div ref={ref}></div>
       {commentList.map(comment => (
-        <CommentItem {...comment} key={comment.commentId} order={1} />
+        <CommentItem
+          {...comment}
+          key={comment.commentId}
+          order={comment.order}
+        />
       ))}
     </>
   );
@@ -56,7 +60,11 @@ CommentList.SocketList = function SocketList({
   return (
     <>
       {commentList.map(comment => (
-        <CommentItem {...comment} key={comment.commentId} order={1} />
+        <CommentItem
+          {...comment}
+          key={comment.commentId}
+          order={comment.order}
+        />
       ))}
     </>
   );
diff --git a/src/components/match/MatchList/index.tsx b/src/components/match/MatchList/index.tsx
index 411c5fc..c0e58bd 100644
--- a/src/components/match/MatchList/index.tsx
+++ b/src/components/match/MatchList/index.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import { FallbackProps } from '@/components/common/ErrorBoundary';
 import { MatchCard } from '@/components/common/MatchCard';
+import RummiKubMatchItem from '@/components/rummikub/MatchItem';
 import {
   COMMON_ERROR_MESSAGE,
   MATCH_LIST_API_ERROR_MESSAGE,
@@ -37,34 +38,48 @@ export default function MatchList({
   return (
     <>
       <ul>
-        {matchList.map(({ id, ...match }) => (
-          <li key={id} className="mb-14">
-            <Link href={`match/${id}`}>
-              <MatchCard {...match} className="flex flex-col">
-                <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
-                <div className="flex h-full min-h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
-                  <MatchCard.Background
-                    viewBox="-13 117 120 50"
-                    width={150}
-                    height={170}
-                    className="h-[180px] fill-primary"
-                  />
+        {matchList.map(({ id, sportsName, ...match }) => (
+          <>
+            {sportsName === '루미큐브' ? (
+              <li key={id} className="mb-14">
+                <Link href={`rummikube/${id}`}>
+                  <RummiKubMatchItem {...match} sportsName={sportsName} />
+                </Link>
+              </li>
+            ) : (
+              <li key={id} className="mb-14">
+                <Link href={`match/${id}`}>
+                  <MatchCard
+                    {...match}
+                    sportsName={sportsName}
+                    className="flex flex-col"
+                  >
+                    <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
+                    <div className="flex h-full min-h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+                      <MatchCard.Background
+                        viewBox="-13 117 120 50"
+                        width={150}
+                        height={170}
+                        className="h-[180px] fill-primary"
+                      />
 
-                  <MatchCard.Team
-                    teamIndex={1}
-                    className="flex flex-col items-center"
-                  />
-                  <MatchCard.Score teamIndex={1} />
-                  <MatchCard.Status />
-                  <MatchCard.Score teamIndex={2} />
-                  <MatchCard.Team
-                    teamIndex={2}
-                    className="flex flex-col items-center"
-                  />
-                </div>
-              </MatchCard>
-            </Link>
-          </li>
+                      <MatchCard.Team
+                        teamIndex={1}
+                        className="flex flex-col items-center"
+                      />
+                      <MatchCard.Score teamIndex={1} />
+                      <MatchCard.Status />
+                      <MatchCard.Score teamIndex={2} />
+                      <MatchCard.Team
+                        teamIndex={2}
+                        className="flex flex-col items-center"
+                      />
+                    </div>
+                  </MatchCard>
+                </Link>
+              </li>
+            )}
+          </>
         ))}
       </ul>
       <div ref={ref}></div>
diff --git a/src/components/rummikub/Cheer/index.tsx b/src/components/rummikub/Cheer/index.tsx
new file mode 100644
index 0000000..7f3c925
--- /dev/null
+++ b/src/components/rummikub/Cheer/index.tsx
@@ -0,0 +1,55 @@
+import { FallbackProps } from '@/components/common/ErrorBoundary';
+import CheerTeam from '@/components/match/CheerTeam';
+import { MatchCheerType } from '@/types/match';
+
+type CheerProps = {
+  cheers: MatchCheerType[];
+};
+
+export default function Cheer({ cheers }: CheerProps) {
+  const [firstTeam, secondTeam, thirdTeam, fourthTeam] = cheers;
+
+  return (
+    <div className="min-h-10 relative my-5 flex h-full w-full justify-center gap-5 p-2">
+      <div className="flex w-full flex-col gap-3">
+        <CheerTeam className="bg-cheer-left">
+          🤜
+          <span className="ml-3">{firstTeam.cheerCount}</span>
+        </CheerTeam>
+        <CheerTeam className="bg-[#fb923c] ">
+          🤜
+          <span className="ml-3">{thirdTeam.cheerCount}</span>
+        </CheerTeam>
+      </div>
+      <div className="absolute top-1/2 -translate-y-1/2 rounded-xl bg-white px-5 py-1 text-center font-bold text-gray-4">
+        VS
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <CheerTeam className="bg-cheer-right">
+          <span className="mr-3">{secondTeam.cheerCount}</span>
+          🤛
+        </CheerTeam>
+        <CheerTeam className="bg-[#22c55e]">
+          <span className="mr-3">{fourthTeam.cheerCount}</span>
+          🤛
+        </CheerTeam>
+      </div>
+    </div>
+  );
+}
+
+Cheer.ErrorFallback = function ErrorFallback({
+  resetErrorBoundary,
+}: FallbackProps) {
+  return (
+    <div className="min-h-10 relative my-5 flex h-full w-full flex-col items-center justify-center gap-5 p-2">
+      <div className="flex flex-wrap justify-center gap-x-1">
+        <span>응원하기를 불러올 수 없어요. </span>
+        <span>잠시 후 다시 시도해주세요!</span>
+      </div>
+      <button onClick={resetErrorBoundary} className="text-primary">
+        새로고침
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/rummikub/MatchBanner/index.tsx b/src/components/rummikub/MatchBanner/index.tsx
new file mode 100644
index 0000000..6875146
--- /dev/null
+++ b/src/components/rummikub/MatchBanner/index.tsx
@@ -0,0 +1,89 @@
+import { FallbackProps } from '@/components/common/ErrorBoundary';
+import { MatchCard } from '@/components/common/MatchCard';
+import { MatchType } from '@/types/match';
+
+export default function RummiKubMatchBanner(match: MatchType) {
+  return (
+    <MatchCard {...match} className="flex flex-col">
+      <MatchCard.Label className="absolute top-2 flex w-full justify-between px-2" />
+      <div className="flex h-full min-h-[200px] flex-col items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-13 117 120 50"
+          width={150}
+          height={170}
+          className="z-[0] h-[180px] fill-primary"
+        />
+        <MatchCard.Status className="mt-5 text-black" />
+        <div className="z-10 flex items-center justify-center gap-4">
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={1}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={1} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={2}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={2} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={3}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={3} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={4}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={4} />
+          </div>
+        </div>
+        <div className="flex items-center justify-center"></div>
+      </div>
+    </MatchCard>
+  );
+}
+
+RummiKubMatchBanner.ErrorFallback = function ErrorFallback({
+  resetErrorBoundary,
+}: FallbackProps) {
+  return (
+    <div className="relative my-5 flex h-full min-h-[200px] w-full flex-col items-center justify-center gap-5 rounded-xl border p-2">
+      <div className="flex flex-wrap justify-center gap-x-1">
+        <span>게임 정보를 불러올 수 없어요.</span>
+        <span>잠시 후 다시 시도해주세요!</span>
+      </div>
+      <button onClick={resetErrorBoundary} className="text-primary">
+        새로고침
+      </button>
+    </div>
+  );
+};
+
+RummiKubMatchBanner.Skeleton = function Skeleton() {
+  return (
+    <MatchCard
+      className="flex flex-col"
+      gameTeams={[]}
+      startTime={''}
+      gameQuarter={''}
+      gameName={''}
+      sportsName={''}
+    >
+      <div className="flex h-full min-h-[200px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-3 120 100 50"
+          width={150}
+          height={200}
+          className="h-[200px]"
+        />
+      </div>
+    </MatchCard>
+  );
+};
diff --git a/src/components/rummikub/MatchItem/index.tsx b/src/components/rummikub/MatchItem/index.tsx
new file mode 100644
index 0000000..b880ea9
--- /dev/null
+++ b/src/components/rummikub/MatchItem/index.tsx
@@ -0,0 +1,51 @@
+import { MatchCard } from '@/components/common/MatchCard';
+import { MatchType } from '@/types/match';
+
+export default function RummiKubMatchItem(match: MatchType) {
+  return (
+    <MatchCard {...match} className="flex flex-col">
+      <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
+      <div className="flex h-full min-h-[180px] flex-col items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-13 117 120 50"
+          width={150}
+          height={170}
+          className="z-[0] h-[180px] fill-primary"
+        />
+        <MatchCard.Status className="mt-5 text-black" />
+
+        <div className="z-10 flex items-center justify-center gap-4">
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={1}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={1} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={2}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={2} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={3}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={3} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={4}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={4} />
+          </div>
+        </div>
+        <div className="flex items-center justify-center"></div>
+      </div>
+    </MatchCard>
+  );
+}