diff --git a/src/components/match/MatchList.tsx b/src/components/match/MatchList.tsx
index 3b4b9e4..36a0762 100644
--- a/src/components/match/MatchList.tsx
+++ b/src/components/match/MatchList.tsx
@@ -3,17 +3,22 @@ import MatchItem from './MatchItem'
 import { MatchData } from './mock/index'
 import styles from './MatchList.module.scss'
 import classNames from 'classnames/bind'
+import { observer } from 'mobx-react-lite'
+import { useMatchStore } from '../../contexts'
 
 const cx = classNames.bind(styles)
 
-const MatchList = () => {
+const MatchList = observer(() => {
+  const { selectedMenu } = useMatchStore()
+  const matchData = MatchData.filter((data) => data.sports === selectedMenu)
+
   return (
     <div className={cx('container')}>
-      {MatchData.map((data) => (
+      {matchData.map((data) => (
         <MatchItem key={data.id} item={data} />
       ))}
     </div>
   )
-}
+})
 
 export default MatchList
diff --git a/src/components/match/MatchMenu.tsx b/src/components/match/MatchMenu.tsx
index 047cb7a..e52ff9c 100644
--- a/src/components/match/MatchMenu.tsx
+++ b/src/components/match/MatchMenu.tsx
@@ -1,18 +1,54 @@
 import React from 'react'
 import styles from './MatchMenu.module.scss'
 import classNames from 'classnames/bind'
+import { observer } from 'mobx-react-lite'
+import { useMatchStore } from '../../contexts'
+import { SPORTS } from '../../constants/match'
 
-const MatchMenu = () => {
+const MatchMenu = observer(() => {
   const cx = classNames.bind(styles)
+  const { selectedMenu, setSelectedMenu } = useMatchStore()
+
+  const handleClickMenu = (sports: string) => {
+    setSelectedMenu(sports)
+  }
 
   return (
     <div className={cx('container')}>
-      <div className={cx('menu-item', 'selected')}>풋살</div>
-      <div className={cx('menu-item')}>축구</div>
-      <div className={cx('menu-item')}>농구</div>
-      <div className={cx('menu-item')}>테니스</div>
+      <div
+        className={cx('menu-item', {
+          selected: selectedMenu === SPORTS.FUTSAL,
+        })}
+        onClick={() => handleClickMenu(SPORTS.FUTSAL)}
+      >
+        풋살
+      </div>
+      <div
+        className={cx('menu-item', {
+          selected: selectedMenu === SPORTS.SOCCER,
+        })}
+        onClick={() => handleClickMenu(SPORTS.SOCCER)}
+      >
+        축구
+      </div>
+      <div
+        className={cx('menu-item', {
+          selected: selectedMenu === SPORTS.BASKETBALL,
+        })}
+        onClick={() => handleClickMenu(SPORTS.BASKETBALL)}
+      >
+        농구
+      </div>
+      <div
+        className={cx('menu-item', {
+          selected: selectedMenu === SPORTS.TENNIS,
+        })}
+        onClick={() => handleClickMenu(SPORTS.TENNIS)}
+      >
+        테니스
+      </div>
     </div>
   )
-}
+})
 
 export default MatchMenu
diff --git a/src/components/match/mock/index.js b/src/components/match/mock/index.js
index ea267d2..2661b31 100644
--- a/src/components/match/mock/index.js
+++ b/src/components/match/mock/index.js
@@ -6,7 +6,7 @@ export const MatchData = [
   */
   {
     id: 0,
-    sports: 'football',
+    sports: 'FUTSAL',
     maxNumberOfParticipants: 10,
     place: '풋살경기장',
     title: '같이 풋살해요~~',
@@ -78,7 +78,7 @@ export const MatchData = [
   },
   {
     id: 2,
-    sports: 'football',
+    sports: 'FUTSAL',
     maxNumberOfParticipants: 10,
     place: '풋살경기장',
     title: '같이 풋살해요~~',
@@ -114,7 +114,7 @@ export const MatchData = [
   },
   {
     id: 3,
-    sports: 'football',
+    sports: 'FUTSAL',
     maxNumberOfParticipants: 10,
     place: '풋살경기장',
     title: '같이 풋살해요~~',
@@ -150,7 +150,7 @@ export const MatchData = [
   },
   {
     id: 4,
-    sports: 'football',
+    sports: 'FUTSAL',
     maxNumberOfParticipants: 10,
     place: '풋살경기장',
     title: '같이 풋살해요~~',
@@ -186,7 +186,7 @@ export const MatchData = [
   },
   {
     id: 1,
-    sports: 'football',
+    sports: 'FUTSAL',
     maxNumberOfParticipants: 10,
     place: '풋살경기장',
     title: '같이 풋살해요~~',
@@ -228,7 +228,7 @@ export const MatchData = [
   */
   {
     id: 5,
-    sports: 'soccer',
+    sports: 'SOCCER',
     maxNumberOfParticipants: 22,
     place: '축구경기장',
     title: '같이 축구해요~~',
@@ -300,7 +300,7 @@ export const MatchData = [
   },
   {
     id: 6,
-    sports: 'soccer',
+    sports: 'SOCCER',
     maxNumberOfParticipants: 22,
     place: '축구경기장',
     title: '같이 축구해요~~',
@@ -336,7 +336,7 @@ export const MatchData = [
   },
   {
     id: 7,
-    sports: 'soccer',
+    sports: 'SOCCER',
     maxNumberOfParticipants: 22,
     place: '축구경기장',
     title: '같이 축구해요~~',
@@ -372,7 +372,7 @@ export const MatchData = [
   },
   {
     id: 8,
-    sports: 'soccer',
+    sports: 'SOCCER',
     maxNumberOfParticipants: 22,
     place: '축구경기장',
     title: '같이 축구해요~~',
@@ -408,7 +408,7 @@ export const MatchData = [
   },
   {
     id: 9,
-    sports: 'soccer',
+    sports: 'SOCCER',
     maxNumberOfParticipants: 22,
     place: '축구경기장',
     title: '같이 축구해요~~',
@@ -450,7 +450,7 @@ export const MatchData = [
   */
   {
     id: 11,
-    sports: 'basketball',
+    sports: 'BASKETBALL',
     maxNumberOfParticipants: 10,
     place: '농구경기장',
     title: '같이 농구해요~~',
@@ -522,7 +522,7 @@ export const MatchData = [
   },
   {
     id: 12,
-    sports: 'basketball',
+    sports: 'BASKETBALL',
     maxNumberOfParticipants: 10,
     place: '농구경기장',
     title: '같이 농구해요~~',
@@ -558,7 +558,7 @@ export const MatchData = [
   },
   {
     id: 13,
-    sports: 'basketball',
+    sports: 'BASKETBALL',
     maxNumberOfParticipants: 10,
     place: '농구경기장',
     title: '같이 농구해요~~',
@@ -594,7 +594,7 @@ export const MatchData = [
   },
   {
     id: 14,
-    sports: 'basketball',
+    sports: 'BASKETBALL',
     maxNumberOfParticipants: 10,
     place: '농구경기장',
     title: '같이 농구해요~~',
@@ -630,7 +630,7 @@ export const MatchData = [
   },
   {
     id: 15,
-    sports: 'basketball',
+    sports: 'BASKETBALL',
     maxNumberOfParticipants: 10,
     place: '농구경기장',
     title: '같이 농구해요~~',
@@ -672,7 +672,7 @@ export const MatchData = [
   */
   {
     id: 16,
-    sports: 'tennis',
+    sports: 'TENNIS',
     maxNumberOfParticipants: 4,
     place: '테니스경기장',
     title: '같이 테니스해요~~',
@@ -744,7 +744,7 @@ export const MatchData = [
   },
   {
     id: 17,
-    sports: 'tennis',
+    sports: 'TENNIS',
     maxNumberOfParticipants: 4,
     place: '테니스경기장',
     title: '같이 테니스해요~~',
@@ -780,7 +780,7 @@ export const MatchData = [
   },
   {
     id: 18,
-    sports: 'tennis',
+    sports: 'TENNIS',
     maxNumberOfParticipants: 4,
     place: '테니스경기장',
     title: '같이 테니스해요~~',
@@ -816,7 +816,7 @@ export const MatchData = [
   },
   {
     id: 19,
-    sports: 'tennis',
+    sports: 'TENNIS',
     maxNumberOfParticipants: 4,
     place: '테니스경기장',
     title: '같이 테니스해요~~',
@@ -852,7 +852,7 @@ export const MatchData = [
   },
   {
     id: 20,
-    sports: 'tennis',
+    sports: 'TENNIS',
     maxNumberOfParticipants: 4,
     place: '테니스경기장',
     title: '같이 테니스해요~~',
diff --git a/src/constants/match.ts b/src/constants/match.ts
new file mode 100644
index 0000000..84f3dd5
--- /dev/null
+++ b/src/constants/match.ts
@@ -0,0 +1,6 @@
+export const SPORTS = {
+  FUTSAL: 'FUTSAL',
+  SOCCER: 'SOCCER',
+  BASKETBALL: 'BASKETBALL',
+  TENNIS: 'TENNIS',
+}
diff --git a/src/stores/match/index.ts b/src/stores/match/index.ts
index 6c3c192..24a4b16 100644
--- a/src/stores/match/index.ts
+++ b/src/stores/match/index.ts
@@ -1,5 +1,10 @@
+import { SPORTS } from '../../constants/match'
+
 export const createMatchStore = () => {
   return {
-    matchMenu: 'FUTSAL',
+    selectedMenu: SPORTS.FUTSAL,
+    setSelectedMenu(menu: string) {
+      this.selectedMenu = menu
+    },
   }
 }