diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts
index 62fc536e..c74f6f96 100644
--- a/app/game-frontend/e2e/inGameMenus.spec.ts
+++ b/app/game-frontend/e2e/inGameMenus.spec.ts
@@ -802,8 +802,12 @@ test('내 정보&설정 keeps desktop density and becomes a 390px horizontal-ide
     const mobile = await page.locator('#container').evaluate((element) => {
         const rect = element.getBoundingClientRect();
         const settings = element.querySelector<HTMLElement>('.settings-column')!.getBoundingClientRect();
-        const icon = element.querySelector<HTMLElement>('[data-general-basic-card] .general-icon')!.getBoundingClientRect();
-        const name = element.querySelector<HTMLElement>('[data-general-basic-card] .general-title')!.getBoundingClientRect();
+        const icon = element
+            .querySelector<HTMLElement>('[data-general-basic-card] .general-icon')!
+            .getBoundingClientRect();
+        const name = element
+            .querySelector<HTMLElement>('[data-general-basic-card] .general-title')!
+            .getBoundingClientRect();
         return {
             width: rect.width,
             scrollWidth: document.documentElement.scrollWidth,
@@ -882,6 +886,8 @@ test('내 정보에서 사람 장수의 등록 전콘을 골라 변경한다', a
     await install(page, state);
     await page.goto('my-page');
     await expect(page.getByText('전용 아이콘 변경 (24시간에 1회)')).toBeVisible();
+    await expect(page.locator('.selected-general-icon img')).toHaveCSS('width', '64px');
+    await expect(page.locator('.selected-general-icon img')).toHaveCSS('height', '64px');
     await page.locator('.general-icon-choice input').check();
     page.once('dialog', async (dialog) => dialog.accept());
     await page.getByRole('button', { name: '아이콘 변경' }).click();
diff --git a/app/game-frontend/e2e/tournamentBracket.spec.ts b/app/game-frontend/e2e/tournamentBracket.spec.ts
index 9ae56137..d1a622d1 100644
--- a/app/game-frontend/e2e/tournamentBracket.spec.ts
+++ b/app/game-frontend/e2e/tournamentBracket.spec.ts
@@ -210,46 +210,67 @@ test('desktop bracket connects every real general slot to the next round', async
     await page.setViewportSize({ width: 1365, height: 900 });
     await openTournament(page);
 
-    await expect(page.locator('.bracket-canvas .bracket-name[data-general-id]')).toHaveCount(31);
-    await expect(page.locator('.bracket-canvas .connector-segment')).toHaveCount(15);
-    await expect(page.locator('.bracket-canvas .bracket-name.advanced', { hasText: '관우' })).toHaveCount(5);
+    await expect(page.locator('.desktop-bracket-canvas .desktop-bracket-name[data-general-id]')).toHaveCount(31);
+    await expect(page.locator('.desktop-bracket-canvas svg > g')).toHaveCount(15);
+    await expect(
+        page.locator('.desktop-bracket-canvas .desktop-bracket-name.advanced', { hasText: '관우' })
+    ).toHaveCount(5);
 
-    const geometry = await page.locator('.bracket-canvas').evaluate((canvas) => {
-        const firstConnector = canvas.querySelector<HTMLElement>('.connector-segment')!.getBoundingClientRect();
-        const champion = canvas.querySelector<HTMLElement>('.bracket-champion .bracket-name')!.getBoundingClientRect();
-        const finalists = [...canvas.querySelectorAll<HTMLElement>('.bracket-round:nth-of-type(3) .bracket-name')].map(
-            (element) => element.getBoundingClientRect()
+    const geometry = await page.locator('.desktop-bracket-canvas').evaluate((canvas) => {
+        const cards = [...canvas.querySelectorAll<HTMLElement>('.desktop-bracket-name')];
+        const firstRound = cards.slice(0, 16).map((element) => element.getBoundingClientRect());
+        const quarterFinal = cards[16]!.getBoundingClientRect();
+        const icons = cards.map((element) => element.querySelector('img')!.getBoundingClientRect());
+        const names = cards.map((element) =>
+            element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect()
         );
+        const own = canvas.getBoundingClientRect();
         return {
-            canvasWidth: canvas.getBoundingClientRect().width,
-            connectorCenter: firstConnector.x + firstConnector.width / 2,
-            championCenter: champion.x + champion.width / 2,
-            finalistCenters: finalists.map((rect) => rect.x + rect.width / 2),
-            connectorQuarters: [
-                firstConnector.x + firstConnector.width / 4,
-                firstConnector.x + (firstConnector.width * 3) / 4,
-            ],
+            canvasWidth: own.width,
+            minX: Math.min(...cards.map((card) => card.getBoundingClientRect().left - own.left)),
+            maxX: Math.max(...cards.map((card) => card.getBoundingClientRect().right - own.left)),
+            iconSizes: icons.map((icon) => [icon.width, icon.height]),
+            horizontalIdentities: icons.every((icon, index) => names[index]!.left >= icon.right - 1),
+            firstParentY: quarterFinal.y + quarterFinal.height / 2,
+            firstPairAverageY:
+                (firstRound[0]!.y + firstRound[0]!.height / 2 + firstRound[1]!.y + firstRound[1]!.height / 2) / 2,
         };
     });
-    expect(geometry.canvasWidth).toBeGreaterThanOrEqual(1000);
+    expect(geometry.canvasWidth).toBeGreaterThanOrEqual(800);
     expect(geometry.canvasWidth).toBeLessThanOrEqual(1200);
-    expect(Math.abs(geometry.connectorCenter - geometry.championCenter)).toBeLessThan(1);
-    expect(geometry.finalistCenters).toHaveLength(2);
-    expect(Math.abs(geometry.finalistCenters[0]! - geometry.connectorQuarters[0]!)).toBeLessThan(1);
-    expect(Math.abs(geometry.finalistCenters[1]! - geometry.connectorQuarters[1]!)).toBeLessThan(1);
+    expect(geometry.minX).toBeGreaterThanOrEqual(0);
+    expect(geometry.maxX).toBeLessThanOrEqual(geometry.canvasWidth);
+    expect(geometry.iconSizes.every(([width, height]) => width === 64 && height === 64)).toBe(true);
+    expect(geometry.horizontalIdentities).toBe(true);
+    expect(Math.abs(geometry.firstParentY - geometry.firstPairAverageY)).toBeLessThan(1);
 
     await persistScreenshot(page, 'tournament-desktop', testInfo.outputPath('tournament-bracket-desktop.webp'));
 });
 
-test('mobile bracket shows every round and general within the handheld width', async ({ page }, testInfo) => {
+test('mobile bracket exposes every round through tabs with standard horizontal identities', async ({
+    page,
+}, testInfo) => {
     await page.setViewportSize({ width: 390, height: 844 });
     await openTournament(page);
 
     const bracket = page.locator('.mobile-bracket');
     await expect(bracket).toBeVisible();
-    await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(31);
+    await expect(page.getByRole('tablist', { name: '토너먼트 라운드 선택' })).toBeVisible();
+    await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(16);
     await expect(bracket.locator('.mobile-bracket-name', { hasText: '방덕' })).toBeVisible();
-    await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(5);
+    await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(1);
+    for (const [label, count] of [
+        ['8강', 8],
+        ['4강', 4],
+        ['결승', 2],
+        ['우승', 1],
+    ] as const) {
+        await page.getByRole('tab', { name: label }).click();
+        await expect(page.getByRole('tab', { name: label })).toHaveAttribute('aria-selected', 'true');
+        await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(count);
+        await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(1);
+    }
+    await page.getByRole('tab', { name: '16강' }).click();
     const bounds = await bracket.evaluate((element) => {
         const names = [...element.querySelectorAll<HTMLElement>('.mobile-bracket-name')].map((name) =>
             name.getBoundingClientRect()
@@ -270,10 +291,22 @@ test('mobile bracket shows every round and general within the handheld width', a
         .evaluate((element) => {
             const icon = element.querySelector('img')!.getBoundingClientRect();
             const name = element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect();
-            return { iconRight: icon.right, nameLeft: name.left, iconY: icon.y, nameY: name.y };
+            return {
+                iconWidth: icon.width,
+                iconHeight: icon.height,
+                iconRight: icon.right,
+                nameLeft: name.left,
+                iconTop: icon.top,
+                iconBottom: icon.bottom,
+                nameTop: name.top,
+                nameBottom: name.bottom,
+            };
         });
-    expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight);
-    expect(Math.abs(identity.iconY - identity.nameY)).toBeLessThan(8);
+    expect(identity.iconWidth).toBe(64);
+    expect(identity.iconHeight).toBe(64);
+    expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight - 1);
+    expect(identity.nameTop).toBeLessThan(identity.iconBottom);
+    expect(identity.nameBottom).toBeGreaterThan(identity.iconTop);
     await expect(page.getByRole('tablist', { name: '본선 조 선택' })).toBeVisible();
     await page.getByRole('tab', { name: '二조' }).first().click();
     await expect(page.getByRole('tab', { name: '二조' }).first()).toHaveAttribute('aria-selected', 'true');
@@ -299,10 +332,11 @@ test('mobile betting rankings use tabs and keep dedicated icons beside general n
         .evaluate((element) => {
             const icon = element.querySelector('img')!.getBoundingClientRect();
             const name = element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect();
-            return { iconRight: icon.right, nameLeft: name.left, iconY: icon.y, nameY: name.y };
+            return { iconWidth: icon.width, iconHeight: icon.height, iconRight: icon.right, nameLeft: name.left };
         });
-    expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight);
-    expect(Math.abs(identity.iconY - identity.nameY)).toBeLessThan(8);
+    expect(identity.iconWidth).toBe(64);
+    expect(identity.iconHeight).toBe(64);
+    expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight - 1);
     expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
     await persistScreenshot(page, 'tournament-ranking-mobile', testInfo.outputPath('tournament-ranking-mobile.webp'));
 });
@@ -316,6 +350,8 @@ test('desktop betting presents icon-and-name cards and all four rankings without
 
     await expect(page.locator('.candidate-card')).toHaveCount(16);
     await expect(page.locator('.ranking-table:visible')).toHaveCount(4);
+    await expect(page.locator('.general-identity-icon').first()).toHaveCSS('width', '64px');
+    await expect(page.locator('.general-identity-icon').first()).toHaveCSS('height', '64px');
     const columns = await page
         .locator('.candidate-grid')
         .evaluate((element) => getComputedStyle(element).gridTemplateColumns.split(' ').length);
diff --git a/app/game-frontend/src/assets/styles/tokens.css b/app/game-frontend/src/assets/styles/tokens.css
index 4ece75b8..82b1f1cc 100644
--- a/app/game-frontend/src/assets/styles/tokens.css
+++ b/app/game-frontend/src/assets/styles/tokens.css
@@ -6,6 +6,7 @@
     --sammo-color-border: rgba(201, 164, 90, 0.4);
     --sammo-color-action-bg: rgba(16, 16, 16, 0.6);
     --sammo-color-error: #f5b7b1;
+    --sammo-general-icon-size: 64px;
     --sammo-button-base1-bg: #141c65;
     --sammo-button-base1-border: #12195b;
     --sammo-button-base1-hover-bg: #101651;
diff --git a/app/game-frontend/src/components/tournament/TournamentBracket.vue b/app/game-frontend/src/components/tournament/TournamentBracket.vue
index 680665f2..eb1da364 100644
--- a/app/game-frontend/src/components/tournament/TournamentBracket.vue
+++ b/app/game-frontend/src/components/tournament/TournamentBracket.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import GeneralIdentity from '../ui/GeneralIdentity.vue';
 import {
     buildTournamentBracket,
     type TournamentBracketMatch,
     type TournamentBracketParticipant,
-    type TournamentBracketRound,
-    type TournamentBracketSlot,
 } from '../../utils/tournamentBracket';
 
 const props = defineProps<{
@@ -15,34 +13,35 @@ const props = defineProps<{
     winnerId?: number;
     betTotals?: Record<number, number>;
     totalBet: number;
-    forceDesktop?: boolean;
     showLegend?: boolean;
 }>();
 
 const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
-
-const mobileColumns = computed(() => [
+const activeMobileRound = ref(0);
+const roundLabels = ['16강', '8강', '4강', '결승', '우승'];
+const roundColumns = computed(() => [
     bracket.value.top16.slots,
     bracket.value.quarter.slots,
     bracket.value.semi.slots,
     bracket.value.final.slots,
     [bracket.value.champion],
 ]);
-const mobileX = [38, 118, 198, 278, 352];
-const mobileY = (columnIndex: number, slotIndex: number) => {
-    const slotHeight = 32 * 2 ** columnIndex;
-    return 16 + slotHeight / 2 + slotIndex * slotHeight;
+const desktopX = [110, 355, 600, 845, 1090];
+const cardWidth = 190;
+const slotY = (columnIndex: number, slotIndex: number) => {
+    const slotHeight = 72 * 2 ** columnIndex;
+    return slotHeight / 2 + slotIndex * slotHeight;
 };
-const mobileConnections = computed(() =>
-    mobileColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
-        const sourceX = mobileX[columnIndex]! + 32;
-        const targetX = mobileX[columnIndex + 1]! - 32;
+const connections = computed(() =>
+    roundColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
+        const sourceX = desktopX[columnIndex]! + cardWidth / 2;
+        const targetX = desktopX[columnIndex + 1]! - cardWidth / 2;
         const jointX = (sourceX + targetX) / 2;
         return Array.from({ length: column.length / 2 }, (_, pairIndex) => {
-            const left = column[pairIndex * 2]!;
-            const right = column[pairIndex * 2 + 1]!;
-            const y1 = mobileY(columnIndex, pairIndex * 2);
-            const y2 = mobileY(columnIndex, pairIndex * 2 + 1);
+            const upper = column[pairIndex * 2]!;
+            const lower = column[pairIndex * 2 + 1]!;
+            const y1 = slotY(columnIndex, pairIndex * 2);
+            const y2 = slotY(columnIndex, pairIndex * 2 + 1);
             return {
                 id: `${columnIndex}-${pairIndex}`,
                 sourceX,
@@ -51,168 +50,107 @@ const mobileConnections = computed(() =>
                 y1,
                 y2,
                 parentY: (y1 + y2) / 2,
-                leftActive: left.advanced,
-                rightActive: right.advanced,
-                parentActive: left.advanced || right.advanced,
+                upperActive: upper.advanced,
+                lowerActive: lower.advanced,
+                parentActive: upper.advanced || lower.advanced,
             };
         });
     })
 );
 
-const roundStyle = (round: TournamentBracketRound) => ({ '--slot-count': round.slots.length });
-const connectorGroups = (slots: TournamentBracketSlot[]) =>
-    Array.from({ length: slots.length / 2 }, (_, index) => [slots[index * 2]!, slots[index * 2 + 1]!] as const);
 const odds = (id: number | null) => {
     if (id === null) return '0';
     const amount = props.betTotals?.[id] ?? 0;
     if (!amount) return '∞';
     return (props.totalBet / amount).toFixed(2);
 };
+const mobilePairs = computed(() => {
+    const column = roundColumns.value[activeMobileRound.value] ?? [];
+    if (activeMobileRound.value === roundColumns.value.length - 1) return column.map((slot) => [slot]);
+    return Array.from({ length: column.length / 2 }, (_, index) => [column[index * 2]!, column[index * 2 + 1]!]);
+});
 </script>
 
 <template>
-    <section
-        class="tournament-bracket"
-        :class="{ 'force-desktop': forceDesktop }"
-        aria-label="토너먼트 대진표"
-        tabindex="0"
-    >
-        <span class="legacy-connector-text">
-            ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-            ┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓
-            ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
-            ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
-        </span>
-        <div class="bracket-canvas">
-            <div class="bracket-round bracket-champion" style="--slot-count: 1">
-                <span
-                    class="bracket-name"
-                    :class="{ advanced: bracket.champion.advanced }"
-                    :data-general-id="bracket.champion.id ?? undefined"
+    <section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
+        <div class="desktop-bracket">
+            <div class="desktop-round-labels" aria-hidden="true">
+                <strong v-for="label in roundLabels" :key="label">{{ label }}</strong>
+            </div>
+            <div class="desktop-bracket-canvas">
+                <svg viewBox="0 0 1200 1152" aria-hidden="true">
+                    <g v-for="connection in connections" :key="connection.id">
+                        <path
+                            class="bracket-connector"
+                            :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.y2} M ${connection.sourceX} ${connection.y2} H ${connection.jointX} M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                        />
+                        <path
+                            v-if="connection.upperActive"
+                            class="bracket-connector active"
+                            :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
+                        />
+                        <path
+                            v-if="connection.lowerActive"
+                            class="bracket-connector active"
+                            :d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
+                        />
+                        <path
+                            v-if="connection.parentActive"
+                            class="bracket-connector active"
+                            :d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                        />
+                    </g>
+                </svg>
+                <template v-for="(column, columnIndex) in roundColumns" :key="`round-${columnIndex}`">
+                    <article
+                        v-for="(slot, slotIndex) in column"
+                        :key="`${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
+                        class="desktop-bracket-name"
+                        :class="{ advanced: slot.advanced }"
+                        :data-general-id="slot.id ?? undefined"
+                        :style="{
+                            left: `${(desktopX[columnIndex]! / 1200) * 100}%`,
+                            top: `${slotY(columnIndex, slotIndex)}px`,
+                        }"
+                    >
+                        <GeneralIdentity :name="slot.name" :picture="slot.picture" :image-server="slot.imageServer" />
+                        <small v-if="columnIndex === 0" class="bracket-odds">배당 {{ odds(slot.id) }}</small>
+                    </article>
+                </template>
+            </div>
+        </div>
+
+        <div class="mobile-bracket">
+            <div class="mobile-round-tabs" role="tablist" aria-label="토너먼트 라운드 선택">
+                <button
+                    v-for="(label, index) in roundLabels"
+                    :key="label"
+                    type="button"
+                    role="tab"
+                    :aria-selected="activeMobileRound === index"
+                    :class="{ active: activeMobileRound === index }"
+                    @click="activeMobileRound = index"
                 >
-                    <GeneralIdentity
-                        :name="bracket.champion.name"
-                        :picture="bracket.champion.picture"
-                        :image-server="bracket.champion.imageServer"
-                        :icon-size="24"
-                    />
-                </span>
+                    {{ label }}
+                </button>
             </div>
-
-            <div class="connector-row" style="--connector-count: 1">
-                <span class="connector-segment">
-                    <i class="stem" :class="{ active: bracket.champion.advanced }"></i>
-                    <i class="arm left" :class="{ active: bracket.final.slots[0]?.advanced }"></i>
-                    <i class="arm right" :class="{ active: bracket.final.slots[1]?.advanced }"></i>
-                </span>
-            </div>
-
-            <template v-for="round in [bracket.final, bracket.semi, bracket.quarter]" :key="round.stage">
-                <div class="bracket-round" :style="roundStyle(round)">
-                    <span
-                        v-for="(slot, index) in round.slots"
-                        :key="`${round.stage}-${slot.id ?? 'empty'}-${index}`"
-                        class="bracket-name"
+            <section class="mobile-round-list" role="tabpanel" :aria-label="`${roundLabels[activeMobileRound]} 대진`">
+                <article v-for="(pair, pairIndex) in mobilePairs" :key="`pair-${activeMobileRound}-${pairIndex}`">
+                    <div
+                        v-for="(slot, slotIndex) in pair"
+                        :key="`${slot.id ?? 'empty'}-${slotIndex}`"
+                        class="mobile-bracket-name"
                         :class="{ advanced: slot.advanced }"
                         :data-general-id="slot.id ?? undefined"
                     >
-                        <GeneralIdentity
-                            :name="slot.name"
-                            :picture="slot.picture"
-                            :image-server="slot.imageServer"
-                            :icon-size="22"
-                        />
-                    </span>
-                </div>
-                <div class="connector-row" :style="{ '--connector-count': round.slots.length }">
-                    <span
-                        v-for="(pair, index) in connectorGroups(
-                            round.stage === 10
-                                ? bracket.semi.slots
-                                : round.stage === 9
-                                  ? bracket.quarter.slots
-                                  : bracket.top16.slots
-                        )"
-                        :key="`${round.stage}-connector-${index}`"
-                        class="connector-segment"
-                    >
-                        <i class="stem" :class="{ active: pair[0].advanced || pair[1].advanced }"></i>
-                        <i class="arm left" :class="{ active: pair[0].advanced }"></i>
-                        <i class="arm right" :class="{ active: pair[1].advanced }"></i>
-                    </span>
-                </div>
-            </template>
+                        <GeneralIdentity :name="slot.name" :picture="slot.picture" :image-server="slot.imageServer" />
+                        <small v-if="activeMobileRound === 0" class="bracket-odds">배당 {{ odds(slot.id) }}</small>
+                    </div>
+                    <strong v-if="pair.length === 2" class="versus" aria-hidden="true">VS</strong>
+                </article>
+            </section>
+        </div>
 
-            <div class="bracket-round" :style="roundStyle(bracket.top16)">
-                <span
-                    v-for="(slot, index) in bracket.top16.slots"
-                    :key="`7-${slot.id ?? 'empty'}-${index}`"
-                    class="bracket-name"
-                    :class="{ advanced: slot.advanced }"
-                    :data-general-id="slot.id ?? undefined"
-                >
-                    <GeneralIdentity
-                        :name="slot.name"
-                        :picture="slot.picture"
-                        :image-server="slot.imageServer"
-                        :icon-size="20"
-                    />
-                </span>
-            </div>
-            <div class="bracket-round bracket-odds" :style="roundStyle(bracket.top16)">
-                <span
-                    v-for="(slot, index) in bracket.top16.slots"
-                    :key="`odds-${slot.id ?? 'empty'}-${index}`"
-                    :data-candidate="slot.name"
-                >
-                    {{ odds(slot.id) }}
-                </span>
-            </div>
-        </div>
-        <div class="mobile-bracket" aria-label="모바일 토너먼트 대진">
-            <svg viewBox="0 0 390 544" aria-hidden="true">
-                <g v-for="connection in mobileConnections" :key="connection.id">
-                    <path
-                        class="mobile-connector"
-                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.y2} M ${connection.sourceX} ${connection.y2} H ${connection.jointX} M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
-                    />
-                    <path
-                        v-if="connection.leftActive"
-                        class="mobile-connector active"
-                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
-                    />
-                    <path
-                        v-if="connection.rightActive"
-                        class="mobile-connector active"
-                        :d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
-                    />
-                    <path
-                        v-if="connection.parentActive"
-                        class="mobile-connector active"
-                        :d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
-                    />
-                </g>
-            </svg>
-            <template v-for="(column, columnIndex) in mobileColumns" :key="`mobile-column-${columnIndex}`">
-                <span
-                    v-for="(slot, slotIndex) in column"
-                    :key="`mobile-${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
-                    class="mobile-bracket-name"
-                    :class="{ advanced: slot.advanced }"
-                    :style="{
-                        left: `${(mobileX[columnIndex]! / 390) * 100}%`,
-                        top: `${mobileY(columnIndex, slotIndex)}px`,
-                    }"
-                >
-                    <GeneralIdentity
-                        :name="slot.name"
-                        :picture="slot.picture"
-                        :image-server="slot.imageServer"
-                        :icon-size="18"
-                    />
-                </span>
-            </template>
-        </div>
         <p v-if="showLegend !== false">
             배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.
         </p>
@@ -221,154 +159,141 @@ const odds = (id: number | null) => {
 
 <style scoped>
 .tournament-bracket {
-    overflow-x: auto;
+    overflow-x: hidden;
     padding: 10px 0;
-    scrollbar-color: #777 #24140e;
 }
-.legacy-connector-text {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    white-space: nowrap;
-}
-.bracket-canvas {
+.desktop-bracket {
     width: 100%;
-    min-width: 1000px;
     max-width: 1200px;
     margin: 0 auto;
 }
-.mobile-bracket {
-    position: relative;
-    display: none;
-    width: 100%;
-    max-width: 390px;
-    height: 544px;
-    margin: 0 auto;
+.desktop-round-labels {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    min-height: 30px;
+    align-items: center;
+    color: #ffd25e;
 }
-.mobile-bracket svg {
+.desktop-bracket-canvas {
+    position: relative;
+    width: 100%;
+    height: 1152px;
+}
+.desktop-bracket-canvas svg {
     position: absolute;
     inset: 0;
     width: 100%;
-    height: 544px;
+    height: 100%;
 }
-.mobile-connector {
+.bracket-connector {
     fill: none;
     stroke: #fff;
     stroke-width: 1;
     vector-effect: non-scaling-stroke;
 }
-.mobile-connector.active {
+.bracket-connector.active {
     stroke: #ff4b4b;
 }
-.mobile-bracket-name {
+.desktop-bracket-name {
     position: absolute;
     z-index: 1;
-    width: clamp(58px, 18vw, 72px);
+    display: grid;
+    box-sizing: border-box;
+    width: clamp(140px, 16vw, 190px);
+    min-height: 68px;
+    align-items: center;
     overflow: hidden;
     transform: translate(-50%, -50%);
     border: 1px solid #555;
-    background: rgb(58 33 24 / 92%);
+    background: rgb(58 33 24 / 94%);
     color: #fff;
-    min-height: 26px;
-    padding: 2px;
-    font-size: 11px;
-    line-height: 20px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    padding: 1px 3px;
 }
+.desktop-bracket-name.advanced,
 .mobile-bracket-name.advanced {
     border-color: #ff4b4b;
     color: #ff4b4b;
 }
-.bracket-round,
-.connector-row {
-    display: grid;
-    grid-template-columns: repeat(var(--slot-count, var(--connector-count)), minmax(0, 1fr));
-    align-items: center;
-}
-.bracket-round {
-    min-height: 24px;
-}
-.bracket-name {
-    overflow: hidden;
-    padding: 2px 3px;
-    color: #fff;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.bracket-name.advanced {
-    color: #ff4b4b;
-}
-.connector-row {
-    min-height: 24px;
-}
-.connector-segment {
-    position: relative;
-    display: block;
-    height: 24px;
-    color: #fff;
-}
-.connector-segment i {
-    position: absolute;
-    display: block;
-    color: inherit;
-    font-style: normal;
-}
-.connector-segment .stem {
-    top: 0;
-    left: 50%;
-    height: 13px;
-    border-left: 1px solid currentColor;
-}
-.connector-segment .arm {
-    top: 12px;
-    width: 25%;
-    height: 12px;
-    border-top: 1px solid currentColor;
-}
-.connector-segment .arm.left {
-    left: 25%;
-    border-left: 1px solid currentColor;
-}
-.connector-segment .arm.right {
-    right: 25%;
-    border-right: 1px solid currentColor;
-}
-.connector-segment .active {
-    color: #ff4b4b;
+.desktop-bracket-name :deep(.general-identity),
+.mobile-bracket-name :deep(.general-identity) {
+    width: 100%;
+    justify-content: flex-start;
 }
 .bracket-odds {
+    display: block;
     color: skyblue;
+    font-size: 11px;
+    line-height: 12px;
+    text-align: right;
 }
-.tournament-bracket p {
+.mobile-bracket {
+    display: none;
+}
+.mobile-round-tabs {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 4px;
+    padding: 6px;
+}
+.mobile-round-tabs button {
+    min-width: 0;
+    height: 34px;
     margin: 0;
+    border: 1px solid #666;
+    border-radius: 3px;
+    background: #444;
+    color: #fff;
+}
+.mobile-round-tabs button.active {
+    border-color: #f39c12;
+    background: #8a5b13;
+}
+.mobile-round-list {
+    display: grid;
+    gap: 8px;
+    padding: 8px;
+}
+.mobile-round-list > article {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 22px;
+}
+.mobile-round-list > article:has(> :only-child) {
+    grid-template-columns: minmax(0, 1fr);
+}
+.mobile-bracket-name {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 68px;
+    overflow: hidden;
+    border: 1px solid #555;
+    background: rgb(58 33 24 / 94%);
+    padding: 1px 3px;
+}
+.versus {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #ffd25e;
+    font-size: 11px;
+}
+.tournament-bracket > p {
+    margin: 8px 0 0;
     color: skyblue;
     font-size: 18px;
 }
 @media (max-width: 800px) {
-    .tournament-bracket {
-        width: 100%;
-        max-width: 100%;
-        overflow-x: hidden;
-    }
-    .bracket-canvas {
+    .desktop-bracket {
         display: none;
     }
     .mobile-bracket {
         display: block;
     }
-    .tournament-bracket.force-desktop {
-        width: auto;
-        max-width: none;
-        overflow-x: auto;
-    }
-    .tournament-bracket.force-desktop .bracket-canvas {
-        display: block;
-    }
-    .tournament-bracket.force-desktop .mobile-bracket {
-        display: none;
+    .tournament-bracket > p {
+        padding: 0 8px;
+        font-size: 13px;
     }
 }
 </style>
diff --git a/app/game-frontend/src/components/ui/GeneralIdentity.vue b/app/game-frontend/src/components/ui/GeneralIdentity.vue
index f1ad17f8..f8bf2f1a 100644
--- a/app/game-frontend/src/components/ui/GeneralIdentity.vue
+++ b/app/game-frontend/src/components/ui/GeneralIdentity.vue
@@ -7,13 +7,11 @@ const props = withDefaults(
         name: string;
         picture?: GeneralIconSource['picture'];
         imageServer?: GeneralIconSource['imageServer'];
-        iconSize?: number;
         hideIcon?: boolean;
     }>(),
     {
         picture: null,
         imageServer: 0,
-        iconSize: 28,
         hideIcon: false,
     }
 );
@@ -24,11 +22,10 @@ const iconUrl = computed(() =>
         imageServer: props.imageServer,
     })
 );
-const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props.iconSize}px` }));
 </script>
 
 <template>
-    <span class="general-identity" :style="identityStyle">
+    <span class="general-identity">
         <img
             v-if="!hideIcon && name !== '-'"
             class="general-identity-icon"
@@ -52,9 +49,9 @@ const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props
     vertical-align: middle;
 }
 .general-identity-icon {
-    width: var(--general-identity-icon-size);
-    height: var(--general-identity-icon-size);
-    flex: 0 0 var(--general-identity-icon-size);
+    width: var(--sammo-general-icon-size);
+    height: var(--sammo-general-icon-size);
+    flex: 0 0 var(--sammo-general-icon-size);
     border: 1px solid rgb(255 255 255 / 28%);
     background: #111;
     object-fit: cover;
diff --git a/app/game-frontend/src/views/BettingView.vue b/app/game-frontend/src/views/BettingView.vue
index 42dc7844..cc66ad07 100644
--- a/app/game-frontend/src/views/BettingView.vue
+++ b/app/game-frontend/src/views/BettingView.vue
@@ -149,7 +149,6 @@ const placeBet = async (targetId: number) => {
                         :name="candidate.name"
                         :picture="candidate.picture"
                         :image-server="candidate.imageServer"
-                        :icon-size="36"
                     />
                     <div class="candidate-return">
                         <span class="ratio-color">{{ ratio(candidate.id) }}</span>
@@ -241,7 +240,6 @@ const placeBet = async (targetId: number) => {
                                 :name="entry.name"
                                 :picture="entry.picture"
                                 :image-server="entry.imageServer"
-                                :icon-size="24"
                             />
                         </td>
                         <td>{{ entry.stat }}</td>
@@ -288,24 +286,6 @@ const placeBet = async (targetId: number) => {
     line-height: 1.3;
     text-align: center;
 }
-.betting-bracket :deep(.bracket-canvas) {
-    width: 100%;
-    min-width: 1000px;
-}
-.betting-bracket :deep(.bracket-round),
-.betting-bracket :deep(.connector-row) {
-    min-height: 8px;
-}
-.betting-bracket :deep(.connector-segment) {
-    height: 8px;
-}
-.betting-bracket :deep(.connector-segment .stem) {
-    height: 5px;
-}
-.betting-bracket :deep(.connector-segment .arm) {
-    top: 4px;
-    height: 4px;
-}
 .betting-footer {
     padding-top: 20px;
     text-align: left;
@@ -482,6 +462,9 @@ select:disabled {
     padding: 1px;
     border: 1px solid #555;
 }
+.ranking-table tbody tr:has(.general-identity) td {
+    height: 66px;
+}
 .ranking-table thead tr:first-child th {
     height: 18px;
     background: #000;
diff --git a/app/game-frontend/src/views/MyPageView.vue b/app/game-frontend/src/views/MyPageView.vue
index df62f27b..2e558f0a 100644
--- a/app/game-frontend/src/views/MyPageView.vue
+++ b/app/game-frontend/src/views/MyPageView.vue
@@ -498,8 +498,8 @@ onMounted(() => {
                     <div v-if="selectedIcon" class="selected-general-icon" aria-live="polite">
                         <img
                             :src="resolveGeneralIconUrl(selectedIcon)"
-                            width="48"
-                            height="48"
+                            width="64"
+                            height="64"
                             alt=""
                             @error="useDefaultGeneralIcon"
                         />
@@ -878,7 +878,9 @@ button:disabled {
     background: rgb(23 42 82 / 70%);
 }
 .selected-general-icon img {
-    flex: 0 0 48px;
+    flex: 0 0 var(--sammo-general-icon-size);
+    width: var(--sammo-general-icon-size);
+    height: var(--sammo-general-icon-size);
     object-fit: cover;
 }
 .general-icon-choice {
diff --git a/app/game-frontend/src/views/TournamentView.vue b/app/game-frontend/src/views/TournamentView.vue
index 8da42cd0..8865d5ae 100644
--- a/app/game-frontend/src/views/TournamentView.vue
+++ b/app/game-frontend/src/views/TournamentView.vue
@@ -232,7 +232,6 @@ const start = async () => {
                                 :name="group[rowIndex - 1]!.name"
                                 :picture="group[rowIndex - 1]!.picture"
                                 :image-server="group[rowIndex - 1]!.imageServer"
-                                :icon-size="24"
                             />
                         </td>
                         <td>{{ statOf(group[rowIndex - 1]) }}</td>
@@ -294,7 +293,6 @@ const start = async () => {
                                 :name="group[rowIndex - 1]!.name"
                                 :picture="group[rowIndex - 1]!.picture"
                                 :image-server="group[rowIndex - 1]!.imageServer"
-                                :icon-size="24"
                             />
                         </td>
                         <td>{{ statOf(group[rowIndex - 1]) }}</td>
@@ -370,13 +368,6 @@ const start = async () => {
     font-size: 12px;
     line-height: 14px;
 }
-.legacy-page :deep(.tournament-bracket .bracket-round),
-.legacy-page :deep(.tournament-bracket .connector-row) {
-    min-height: 20px;
-}
-.legacy-page :deep(.tournament-bracket .connector-segment) {
-    height: 20px;
-}
 .tournament-footer {
     padding-top: 10px;
 }
@@ -512,10 +503,14 @@ td {
 }
 .group-grid th:nth-child(2),
 .group-grid td:nth-child(2) {
-    width: 92px;
+    width: 130px;
 }
 .general-cell {
     overflow: hidden;
+    text-align: left;
+}
+.group-grid tbody tr:has(.general-identity) td {
+    height: 66px;
 }
 .group-tabs {
     display: none;
@@ -583,7 +578,7 @@ td {
     }
     .group-grid th:nth-child(2),
     .group-grid td:nth-child(2) {
-        width: 108px;
+        width: 138px;
     }
     .tournament-guide {
         padding: 10px;