diff --git a/apps/web/src/Game.tsx b/apps/web/src/Game.tsx
index 2439e15..0968c30 100644
--- a/apps/web/src/Game.tsx
+++ b/apps/web/src/Game.tsx
@@ -4,7 +4,7 @@ import { useStep, Step } from '@remake/hooks'
 import Home from '@/containers/Home'
 import Mode from '@/containers/Mode'
 import Chara from '@/containers/Chara'
-import Pick from '@/containers/TalentPick'
+import Pick from '@/containers/Pick'
 import Alloc from '@/containers/Alloc'
 import Play from '@/containers/Play'
 import Summary from '@/containers/Summary'
diff --git a/apps/web/src/components/Replaced.tsx b/apps/web/src/components/Replaced.tsx
index 933112f..650dfa7 100644
--- a/apps/web/src/components/Replaced.tsx
+++ b/apps/web/src/components/Replaced.tsx
@@ -1,23 +1,23 @@
-import { type Talent, talents } from '@remake/data'
-import TalentComponent from './Talent'
+import { type Talent as T, talents } from '@remake/data'
+import Talent from './Talent'
 import './Replaced.css'
 
 export interface TalentProps {
-    id: Talent['id']
-    chains?: Talent['id'][]
+    id: T['id']
+    chains?: T['id'][]
 }
 export function Replaced({ id, chains }: TalentProps) {
     return (
         <ul className="replaced">
             <li>
-                <TalentComponent id={id} selected={true} />
+                <Talent id={id} selected={true} />
             </li>
             {chains?.map(id => {
                 const talent = talents.get(id)
                 if (!talent) return null
                 return (
                     <li key={id}>
-                        <TalentComponent id={id} selected={false} />
+                        <Talent id={id} selected={false} />
                     </li>
                 )
             })}
diff --git a/apps/web/src/components/Talent.tsx b/apps/web/src/components/Talent.tsx
index 95ef8e3..3c831fb 100644
--- a/apps/web/src/components/Talent.tsx
+++ b/apps/web/src/components/Talent.tsx
@@ -1,11 +1,11 @@
-import { type Talent, talents } from '@remake/data'
+import { type Talent as T, talents } from '@remake/data'
 import './Talent.css'
 
 export interface TalentProps {
-    id: Talent['id']
+    id: T['id']
     selected?: boolean
 }
-export function TalentComponent({ id, selected }: TalentProps) {
+export function Talent({ id, selected }: TalentProps) {
     const talent = talents.get(id)
     if (!talent) return null
     const grade = talent?.grade ?? 0
@@ -17,4 +17,4 @@ export function TalentComponent({ id, selected }: TalentProps) {
     )
 }
 
-export default TalentComponent
+export default Talent
diff --git a/apps/web/src/containers/Chara.css b/apps/web/src/containers/Chara.css
index 491022b..32ab947 100644
--- a/apps/web/src/containers/Chara.css
+++ b/apps/web/src/containers/Chara.css
@@ -3,7 +3,7 @@
     > .chara-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         > .character {
             display: flex;
             flex-direction: column;
diff --git a/apps/web/src/containers/Chara.tsx b/apps/web/src/containers/Chara.tsx
index c6ed45d..64dde0e 100644
--- a/apps/web/src/containers/Chara.tsx
+++ b/apps/web/src/containers/Chara.tsx
@@ -1,11 +1,11 @@
 import { useCharaPuller, useCharaPicker, useCharaSubmit } from '@remake/hooks'
 import { useUnique, useUniqueGenerator, convertProps } from '@remake/hooks'
 import type { BaseChara } from '@remake/hooks'
-import { TalentComponent } from '@/components/Talent'
 import { judgeGradeByValue } from '@/config'
 import { characters } from '@remake/data'
 import { properties } from '@/display'
 import { keys } from '@remake/vitex'
+import Talent from '@/components/Talent'
 import './Chara.css'
 
 function Details({ detail }: { detail: BaseChara }) {
@@ -26,7 +26,7 @@ function Details({ detail }: { detail: BaseChara }) {
             <ul className="talent-list">
                 {detail.talent.map(id => (
                     <li key={id}>
-                        <TalentComponent id={id} />
+                        <Talent id={id} />
                     </li>
                 ))}
             </ul>
diff --git a/apps/web/src/containers/Home.tsx b/apps/web/src/containers/Home.tsx
index 9c49cea..02738d1 100644
--- a/apps/web/src/containers/Home.tsx
+++ b/apps/web/src/containers/Home.tsx
@@ -1,6 +1,6 @@
 import { useRemake, useFeatures, useGoAchv, useGoThanks } from '@remake/hooks'
 import { TextSvg } from '@/components/TextSvg'
-import { ThemeToggle } from '@/components/ThemeToggle'
+import ThemeToggle from '@/components/ThemeToggle'
 import './Home.css'
 
 export default function Home() {
diff --git a/apps/web/src/containers/TalentPick.css b/apps/web/src/containers/Pick.css
similarity index 100%
rename from apps/web/src/containers/TalentPick.css
rename to apps/web/src/containers/Pick.css
diff --git a/apps/web/src/containers/TalentPick.tsx b/apps/web/src/containers/Pick.tsx
similarity index 86%
rename from apps/web/src/containers/TalentPick.tsx
rename to apps/web/src/containers/Pick.tsx
index e7e936c..51e4fee 100644
--- a/apps/web/src/containers/TalentPick.tsx
+++ b/apps/web/src/containers/Pick.tsx
@@ -1,11 +1,10 @@
-// import { useEffect } from 'react'
 import { useTalentPuller, useTalentPicker } from '@remake/hooks'
 import { useTalentSubmit, useSubmitIsEnable } from '@remake/hooks'
 import { PullCount, dev } from '@/config'
-import TalentComponent from '@/components/Talent'
-import './TalentPick.css'
+import Talent from '@/components/Talent'
+import './Pick.css'
 
-export default function TalentPick() {
+export function Pick() {
     const [pulled, puller] = useTalentPuller()
     const [talents, picker] = useTalentPicker()
     const { enabled, min, max } = useSubmitIsEnable()
@@ -30,7 +29,7 @@ export default function TalentPick() {
             <ul className="talent-list">
                 {ps.map(id => (
                     <li key={id} onClick={() => picker(id)}>
-                        <TalentComponent id={id} selected={talents.has(id)} />
+                        <Talent id={id} selected={talents.has(id)} />
                     </li>
                 ))}
             </ul>
@@ -46,3 +45,4 @@ export default function TalentPick() {
         </div>
     )
 }
+export default Pick
diff --git a/apps/web/src/containers/Summary.tsx b/apps/web/src/containers/Summary.tsx
index 6f9e79d..d2f402d 100644
--- a/apps/web/src/containers/Summary.tsx
+++ b/apps/web/src/containers/Summary.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import { usePicked, useEnd, useProfile, useIsClassic } from '@remake/hooks'
 import { useEndJudge } from '@/hooks/judge'
 import { properties, judgeDisplay } from '@/display'
-import TalentComponent from '@/components/Talent'
+import Talent from '@/components/Talent'
 import './Summary.css'
 
 function Judges() {
@@ -44,7 +44,7 @@ function TalentList({ picked, picker }: TalentListProps) {
         <ul className="talent-list">
             {Array.from(talents, id => (
                 <li key={id} onClick={() => picker(id)}>
-                    <TalentComponent id={id} selected={picked.has(id)} />
+                    <Talent id={id} selected={picked.has(id)} />
                 </li>
             ))}
         </ul>