diff --git a/src/pages/play/mode/index.css.ts b/src/pages/play/mode/index.css.ts
index 4bf2bfe9..f2e0e6d8 100644
--- a/src/pages/play/mode/index.css.ts
+++ b/src/pages/play/mode/index.css.ts
@@ -4,8 +4,6 @@ import { COLORED_ICON_BUTTON_SIZE_PIXEL } from '@/components/button/constants';
 
 import { MYRANKINGITEMBOX_HEIGHT } from '@/pages/ranking/constants';
 
-import { flexOptions, sprinkles } from '@/shared/styles';
-
 export const wrapper = style([
   {
     display: 'grid',
@@ -26,24 +24,3 @@ export const myRank = style([
     gridColumn: '1 / 3',
   },
 ]);
-
-export const matchingModalWrapper = style([
-  flexOptions({ option: 'columnCenter' }),
-]);
-
-export const matchingMessage = style([
-  flexOptions({ option: 'row' }),
-  sprinkles({
-    textSize: '2x',
-    justifyContent: 'flexStart',
-    width: 'full',
-    marginBottom: '1x',
-    paddingLeft: '4x',
-  }),
-]);
-
-export const matchingImageWrapper = style([
-  sprinkles({
-    marginY: '2x',
-  }),
-]);
diff --git a/src/pages/play/mode/index.tsx b/src/pages/play/mode/index.tsx
index ed33f38d..40516192 100644
--- a/src/pages/play/mode/index.tsx
+++ b/src/pages/play/mode/index.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { getMatching } from './api';
 import * as styles from './index.css';
-import Matching from './Matching';
+import Matching from './ui/Matching';
 
 import ColoredIconButton from '@/components/button/ColoredIconButton';
 import Modal, { useModal } from '@/components/modal';
diff --git a/src/pages/play/mode/Matching.tsx b/src/pages/play/mode/ui/Matching.tsx
similarity index 92%
rename from src/pages/play/mode/Matching.tsx
rename to src/pages/play/mode/ui/Matching.tsx
index c530c99f..a7bcce0e 100644
--- a/src/pages/play/mode/Matching.tsx
+++ b/src/pages/play/mode/ui/Matching.tsx
@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
-import { deleteMatching } from './api';
+import { deleteMatching } from '../api';
 import * as styles from './index.css';
+import { MatchingText } from './MatchingText';
 
 import ColoredButton from '@/components/button/ColoredButton';
 import RoundCornerImageBox from '@/components/image-box';
 
-import { MatchingText } from '@/pages/play/mode/MatchingText';
-
 import { useWebSocket } from '@/features/websocket';
 import { ROUTE } from '@/shared/constants';
 
diff --git a/src/pages/play/mode/MatchingText.tsx b/src/pages/play/mode/ui/MatchingText.tsx
similarity index 93%
rename from src/pages/play/mode/MatchingText.tsx
rename to src/pages/play/mode/ui/MatchingText.tsx
index f3bda918..2651cffb 100644
--- a/src/pages/play/mode/MatchingText.tsx
+++ b/src/pages/play/mode/ui/MatchingText.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import * as styles from '@/pages/play/mode/index.css';
+import * as styles from './index.css';
 
 interface Props {
   isModalOpen: boolean;
diff --git a/src/pages/play/mode/ui/index.css.ts b/src/pages/play/mode/ui/index.css.ts
new file mode 100644
index 00000000..60cec4b4
--- /dev/null
+++ b/src/pages/play/mode/ui/index.css.ts
@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+
+import { flexOptions, sprinkles } from '@/shared/styles';
+
+export const matchingModalWrapper = style([
+  flexOptions({ option: 'columnCenter' }),
+]);
+
+export const matchingMessage = style([
+  flexOptions({ option: 'row' }),
+  sprinkles({
+    textSize: '2x',
+    justifyContent: 'flexStart',
+    width: 'full',
+    marginBottom: '1x',
+    paddingLeft: '4x',
+  }),
+]);
+
+export const matchingImageWrapper = style([
+  sprinkles({
+    marginY: '2x',
+  }),
+]);