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/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>