diff --git a/components/admin/tournament/TournamentList.tsx b/components/admin/tournament/TournamentList.tsx
index cabf147db..cfb11a9d4 100644
--- a/components/admin/tournament/TournamentList.tsx
+++ b/components/admin/tournament/TournamentList.tsx
@@ -1,5 +1,6 @@
 import dynamic from 'next/dynamic';
 import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 import {
   Paper,
   Table,
@@ -12,6 +13,8 @@ import {
   ITournament,
   ITournamentTable,
 } from 'types/admin/adminTournamentTypes';
+import { TournamentInfo } from 'types/tournamentTypes';
+import { modalState } from 'utils/recoil/modal';
 import { tableFormat } from 'constants/admin/table';
 import {
   AdminEmptyItem,
@@ -28,7 +31,8 @@ const Quill = dynamic(() => import('react-quill'), {
 });
 
 const tableTitle: { [key: string]: string } = {
-  tournamentName: '토너먼트 이름',
+  title: '토너먼트 이름',
+  content: '토너먼트 내용',
   startTime: '시작 시간',
   endTime: '종료 시간',
   tournamentType: '토너먼트 타입',
@@ -45,6 +49,7 @@ const smapleTournamentList: ITournament[] = Array.from({ length: 10 }, () => ({
 }));
 
 export default function TournamentList() {
+  const setModal = useSetRecoilState(modalState);
   const [tournamentInfo, setTournamentInfo] = useState<ITournamentTable>({
     tournamentList: [],
     totalPage: 0,
@@ -93,27 +98,32 @@ export default function TournamentList() {
                             key={index}
                           >
                             {columnName === 'startTime' ||
-                            columnName === 'endTime'
-                              ? tournament[
-                                  columnName as keyof ITournament
-                                ]?.toLocaleString()
-                              : tournament[
-                                  columnName as keyof ITournament
-                                ]?.toString()}
+                            columnName === 'endTime' ? (
+                              tournament[
+                                columnName as keyof ITournament
+                              ]?.toLocaleString()
+                            ) : columnName === 'edit' ? (
+                              <div>
+                                <button
+                                  className={styles.editBtn}
+                                  onClick={() => {
+                                    setModal({
+                                      modalName: 'ADMIN-TOURNAMENT_BRAKET_EDIT',
+                                    });
+                                  }}
+                                >
+                                  수정
+                                </button>
+                              </div>
+                            ) : (
+                              tournament[
+                                columnName as keyof ITournament
+                              ]?.toString()
+                            )}
                           </TableCell>
                         );
                       }
                     )}
-                    <TableCell>
-                      <div>
-                        <button
-                          className={styles.editBtn}
-                          // onClick={() => deleteHandler(seasonL.seasonId)}
-                        >
-                          삭제
-                        </button>
-                      </div>
-                    </TableCell>
                   </TableRow>
                 )
               )
diff --git a/components/modal/admin/AdminEditTournamentBraket.tsx b/components/modal/admin/AdminEditTournamentBraket.tsx
new file mode 100644
index 000000000..b30b6c81b
--- /dev/null
+++ b/components/modal/admin/AdminEditTournamentBraket.tsx
@@ -0,0 +1,131 @@
+import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import TournamentBraket from 'components/tournament/TournamentBraket';
+import styles from 'styles/admin/modal/AdminEditTournamentBraket.module.scss';
+
+export const simpleSmallBracket: Match[] = [
+  {
+    id: 19753,
+    nextMatchId: null,
+    tournamentRoundText: '3',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [],
+  },
+  {
+    id: 19754,
+    nextMatchId: 19753,
+    tournamentRoundText: '2',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '14754a1a-932c-4992-8dec-f7f94a339960',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'CoKe BoYz',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19755,
+    nextMatchId: 19754,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCORE_DONE',
+    participants: [
+      {
+        id: '14754a1a-932c-4992-8dec-f7f94a339960',
+        resultText: 'Won',
+        isWinner: true,
+        status: 'PLAYED',
+        name: 'CoKe BoYz',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+      {
+        id: 'd16315d4-7f2d-427b-ae75-63a1ae82c0a8',
+        resultText: 'Lost',
+        isWinner: false,
+        status: 'PLAYED',
+        name: 'Aids Team',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19756,
+    nextMatchId: 19754,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'RUNNING',
+    participants: [
+      {
+        id: 'd8b9f00a-0ffa-4527-8316-da701894768e',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Art of kill',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19757,
+    nextMatchId: 19753,
+    tournamentRoundText: '2',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [],
+  },
+  {
+    id: 19758,
+    nextMatchId: 19757,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '9397971f-4b2f-44eb-a094-722eb286c59b',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Crazy Pepes',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19759,
+    nextMatchId: 19757,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '42fecd89-dc83-4821-80d3-718acb50a30c',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'BLUEJAYS',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+      {
+        id: 'df01fe2c-18db-4190-9f9e-aa63364128fe',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Bosphorus',
+        picture: 'teamlogos/r7zn4gr8eajivapvjyzd',
+      },
+    ],
+  },
+];
+
+export default function AdminEditTournamentBraket() {
+  return (
+    <div className={styles['whole']}>
+      <TournamentBraket singleEliminationBracketMatchs={simpleSmallBracket} />
+    </div>
+  );
+}
diff --git a/components/modal/modalType/AdminModal.tsx b/components/modal/modalType/AdminModal.tsx
index 148590a3a..0c8432432 100644
--- a/components/modal/modalType/AdminModal.tsx
+++ b/components/modal/modalType/AdminModal.tsx
@@ -15,6 +15,7 @@ import AdminUserCoinModal from 'components/modal/admin/AdminUserCoinModal';
 import DeletePenaltyModal from 'components/modal/admin/DeletePenaltyModal';
 import DetailModal from 'components/modal/admin/DetailModal';
 import AdminSeasonEdit from 'components/modal/admin/SeasonEdit';
+import AdminEditTournamentBraket from '../admin/AdminEditTournamentBraket';
 
 export default function AdminModal() {
   const {
@@ -30,6 +31,7 @@ export default function AdminModal() {
     profile,
     item,
     coinPolicy,
+    tournamentInfo,
   } = useRecoilValue(modalState);
 
   const content: { [key: string]: JSX.Element | null } = {
@@ -76,6 +78,7 @@ export default function AdminModal() {
     'ADMIN-COINPOLICY_EDIT': coinPolicy ? (
       <AdminEditCoinPolicyModal {...coinPolicy} />
     ) : null,
+    'ADMIN-TOURNAMENT_BRAKET_EDIT': <AdminEditTournamentBraket />,
   };
 
   if (!modalName) return null;
diff --git a/components/tournament/TournamentBraket.tsx b/components/tournament/TournamentBraket.tsx
new file mode 100644
index 000000000..a8bd81e6a
--- /dev/null
+++ b/components/tournament/TournamentBraket.tsx
@@ -0,0 +1,74 @@
+import dynamic from 'next/dynamic';
+import {
+  SVGViewer as StaticSVGViewer,
+  SingleEliminationBracket as StaticSingleEliminationBracket,
+} from '@g-loot/react-tournament-brackets';
+import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import React from 'react';
+import TournamentMatch from 'components/tournament/TournamentMatch';
+
+if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
+  import('@g-loot/react-tournament-brackets');
+}
+
+const SingleEliminationBracket = dynamic<
+  React.ComponentProps<typeof StaticSingleEliminationBracket>
+>(
+  () => {
+    return import('@g-loot/react-tournament-brackets').then(
+      (mod) => mod.SingleEliminationBracket
+    );
+  },
+  { ssr: false }
+);
+
+const SVGViewer = dynamic<React.ComponentProps<typeof StaticSVGViewer>>(
+  () => {
+    return import('@g-loot/react-tournament-brackets').then(
+      (mod) => mod.SVGViewer
+    );
+  },
+  { ssr: false }
+);
+
+interface TournamentBraketProps {
+  singleEliminationBracketMatchs: Match[];
+}
+
+export default function TournamentBraket({
+  singleEliminationBracketMatchs,
+}: TournamentBraketProps) {
+  // const [width, height] = useWindowSize();
+  const finalWidth = 500; //Math.max(width - 50, 500);
+  const finalHeight = 500; //Math.max(height - 100, 500);
+
+  return (
+    <SingleEliminationBracket
+      matches={singleEliminationBracketMatchs}
+      matchComponent={TournamentMatch}
+      options={{
+        style: {
+          width: 230,
+          boxHeight: 120,
+          roundHeader: {
+            isShown: false,
+            fontColor: '#FFFFFF',
+          },
+          connectorColor: '#FFFFFF',
+          connectorColorHighlight: '#da96c6',
+        },
+      }}
+      svgWrapper={({ children, ...props }) => (
+        <SVGViewer
+          background={'rgba(0, 0, 0, 0)'}
+          SVGBackground={'rgba(0, 0, 0, 0)'}
+          width={finalWidth}
+          height={finalHeight}
+          {...props}
+        >
+          {children}
+        </SVGViewer>
+      )}
+    />
+  );
+}
diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx
new file mode 100644
index 000000000..79e8da3d4
--- /dev/null
+++ b/components/tournament/TournamentMatch.tsx
@@ -0,0 +1,76 @@
+import {
+  MatchComponentProps,
+  Participant,
+} from '@g-loot/react-tournament-brackets/dist/src/types';
+import PlayerImage from 'components/PlayerImage';
+import styles from 'styles/tournament/TournamentMatch.module.scss';
+
+interface TournamentMatchPartyProps {
+  party: Participant;
+  teamNameFallback: string;
+  resultFallback: (participant: Participant) => string;
+  onMouseEnter: (partyId: string | number) => void;
+}
+
+function TournamentMatchParty({
+  party,
+  teamNameFallback,
+  onMouseEnter,
+  resultFallback,
+}: TournamentMatchPartyProps) {
+  return (
+    <div
+      className={styles.tournamentPartyWrapper}
+      onMouseEnter={() => onMouseEnter(party.id)}
+    >
+      <PlayerImage
+        src={party.picture ?? '/image/match_qustion.png'}
+        styleName={`tournament`}
+        size={1}
+      />
+
+      <div className={styles.partyName}>{party.name || teamNameFallback}</div>
+      <div className={styles.score}>
+        {party.resultText ?? resultFallback(party)}
+        {/* <input value={topParty.resultText ?? resultFallback(topParty)} /> */}
+      </div>
+    </div>
+  );
+}
+
+export default function TournamentMatch({
+  match,
+  onMatchClick,
+  onPartyClick,
+  onMouseEnter,
+  onMouseLeave,
+  topParty,
+  bottomParty,
+  topWon,
+  bottomWon,
+  topHovered,
+  bottomHovered,
+  topText,
+  bottomText,
+  connectorColor,
+  computedStyles,
+  teamNameFallback,
+  resultFallback,
+}: MatchComponentProps) {
+  return (
+    <div className={styles.tournamentMatchContainer}>
+      <TournamentMatchParty
+        party={topParty}
+        teamNameFallback={teamNameFallback}
+        onMouseEnter={onMouseEnter}
+        resultFallback={resultFallback}
+      ></TournamentMatchParty>
+      <TournamentMatchParty
+        party={bottomParty}
+        teamNameFallback={teamNameFallback}
+        onMouseEnter={onMouseEnter}
+        resultFallback={resultFallback}
+      ></TournamentMatchParty>
+    </div>
+  );
+}
diff --git a/constants/admin/table.ts b/constants/admin/table.ts
index 9b0330b4f..748ccc5a2 100644
--- a/constants/admin/table.ts
+++ b/constants/admin/table.ts
@@ -153,7 +153,7 @@ export const tableFormat: TableFormat = {
   tournament: {
     name: '토너먼트',
     columns: [
-      'tournamentName',
+      'title',
       'content',
       'startTime',
       'endTime',
diff --git a/package-lock.json b/package-lock.json
index 9d3ca91bb..627a3ff87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
+        "@g-loot/react-tournament-brackets": "^1.0.30",
         "@mui/material": "^5.11.7",
         "@react-icons/all-files": "^4.1.0",
         "@types/react-js-pagination": "^3.0.4",
@@ -197,7 +198,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
       "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -3261,6 +3261,17 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "node_modules/@g-loot/react-tournament-brackets": {
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/@g-loot/react-tournament-brackets/-/react-tournament-brackets-1.0.30.tgz",
+      "integrity": "sha512-vbLjBtoOaZzxGpGM7J/XVHV8XY+1oktxgVTDv1orL+GolfIH8nueuEBZ/bt/m5wSZSFCFypmzVpVDPhmJGjKgA==",
+      "peerDependencies": {
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "react-svg-pan-zoom": "^3.10.0",
+        "styled-components": "^4.1.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -8358,6 +8369,22 @@
         "react-docgen": "^5.0.0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
+      "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -8962,6 +8989,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001449",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
@@ -9683,6 +9719,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-functions-list": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
@@ -9734,6 +9779,23 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-to-react-native": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+      "peer": true,
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/css-to-react-native/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "peer": true
+    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -13936,6 +13998,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "peer": true
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -15012,6 +15080,12 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "peer": true
+    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -15121,6 +15195,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge-anything": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
+      "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
+      "peer": true,
+      "dependencies": {
+        "is-what": "^3.3.1"
+      }
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -16222,7 +16305,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -17285,6 +17367,19 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-svg-pan-zoom": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/react-svg-pan-zoom/-/react-svg-pan-zoom-3.12.1.tgz",
+      "integrity": "sha512-ug1LHCN5qed56C64xFypr/ClajuMFkig1OKvwJrIgGeSyHOjWM7XGgSgeP3IfHAkNw8QEc6a31ggZRpTijWYRw==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "transformation-matrix": "^2.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/chrvadala"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -18847,6 +18942,89 @@
       "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
       "dev": true
     },
+    "node_modules/styled-components": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
+      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.8.1",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "merge-anything": "^2.2.4",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
+      "peer": true,
+      "peerDependencies": {
+        "stylis": "^3.5.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -19671,6 +19849,15 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "node_modules/transformation-matrix": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-2.15.0.tgz",
+      "integrity": "sha512-HN3kCvvH4ug3Xm/ycOfCFQOOktg5htxlC4Ih1Z7Wb6BMtQho+q+irOdGo10ARRKpqkRBXgBzQFw/AVmR0oIf0g==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/chrvadala"
+      }
+    },
     "node_modules/trim-newlines": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
diff --git a/package.json b/package.json
index 86c70361e..8f605391b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@g-loot/react-tournament-brackets": "^1.0.30",
     "@mui/material": "^5.11.7",
     "@react-icons/all-files": "^4.1.0",
     "@types/react-js-pagination": "^3.0.4",
diff --git a/public/image/match_qustion.png b/public/image/match_qustion.png
new file mode 100644
index 000000000..44b2cec29
Binary files /dev/null and b/public/image/match_qustion.png differ
diff --git a/styles/PlayerImage.module.scss b/styles/PlayerImage.module.scss
index 820a3d4dd..28722f17c 100644
--- a/styles/PlayerImage.module.scss
+++ b/styles/PlayerImage.module.scss
@@ -129,3 +129,11 @@
     }
   }
 }
+
+.tournament {
+  @include imageWrap;
+  div {
+    @include userImage(2.2rem);
+    cursor: pointer;
+  }
+}
diff --git a/styles/admin/modal/AdminEditTournamentBraket.module.scss b/styles/admin/modal/AdminEditTournamentBraket.module.scss
new file mode 100644
index 000000000..364003780
--- /dev/null
+++ b/styles/admin/modal/AdminEditTournamentBraket.module.scss
@@ -0,0 +1,10 @@
+@import 'styles/common.scss';
+
+.whole {
+  display: flex;
+  width: 510px;
+  height: 569px;
+  flex-direction: column;
+  background: rgb(38, 38, 38);
+  border-radius: 9px;
+}
diff --git a/styles/tournament/TournamentMatch.module.scss b/styles/tournament/TournamentMatch.module.scss
new file mode 100644
index 000000000..5a897168d
--- /dev/null
+++ b/styles/tournament/TournamentMatch.module.scss
@@ -0,0 +1,29 @@
+@import 'styles/common.scss';
+
+.tournamentPartyWrapper {
+  display: flex;
+  height: 45%;
+  padding: 0.5rem;
+  color: white;
+  background-color: $rank-purple;
+  border: 0.1rem solid black;
+  border-radius: 0.6rem;
+  justify-content: space-between;
+  align-items: center;
+  .partyName {
+    margin-left: 1rem;
+  }
+
+  .score {
+    margin-left: auto;
+  }
+}
+
+.tournamentMatchContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  color: #000000;
+  justify-content: space-around;
+}
diff --git a/types/modalTypes.ts b/types/modalTypes.ts
index 1cc1b9dc7..1c406f024 100644
--- a/types/modalTypes.ts
+++ b/types/modalTypes.ts
@@ -48,7 +48,8 @@ type AdminModal =
   | 'ITEM_EDIT'
   | 'ITEM_DELETE'
   | 'COINPOLICY_EDIT'
-  | 'CHECK_SEND_NOTI';
+  | 'CHECK_SEND_NOTI'
+  | 'TOURNAMENT_BRAKET_EDIT';
 
 type ModalName =
   | null