diff --git a/.gitignore b/.gitignore
index 3f5521ff..f3538edd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,4 +32,5 @@ AutoRelease
 .venv
 .env.dev
 .env.prod
-._*
\ No newline at end of file
+._*
+openapi
\ No newline at end of file
diff --git a/frontend/src/style/char-face.scss b/frontend/src/style/char-face.scss
new file mode 100644
index 00000000..4ba7ae09
--- /dev/null
+++ b/frontend/src/style/char-face.scss
@@ -0,0 +1,399 @@
+// 极诣·剑魂
+.weapon_master {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_01_01.png);
+  background-position: -526 -102;
+}
+
+// 极诣·鬼泣
+.soul_bender {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_01_02.png);
+  background-position: -516 -110;
+}
+
+// 极诣·狂战士
+.berserker {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_01_03.png);
+  background-position: -294 -340;
+}
+
+// 极诣·阿修罗
+.asura {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_01_04.png);
+  background-position: -608 -372;
+}
+
+// 极诣·剑影
+.ghostblade {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_01_05.png);
+  background-position: -654 -302;
+}
+
+// 极诣·驭剑士
+.sword_master {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_01.png);
+  background-position: -440 -160;
+}
+
+// 极诣·暗殿骑士
+.dark_templar {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_04.png);
+  background-position: -573 -242;
+}
+
+// 极诣·契魔者
+.demon_slayer {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_02.png);
+  background-position: -640 -134;
+}
+
+// 极诣·流浪武士
+.vegabond {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_03.png);
+  background-position: -575 -193;
+}
+
+// 极诣·刃影
+.spectre {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_05.png);
+  background-position: -567 -82;
+}
+
+// 归元·气功师
+.nenmaster_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_03_01.png);
+  background-position: -554 -116;
+}
+
+// 归元·散打
+.striker_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_03_02.png);
+  background-position: -429 -96;
+}
+
+// 归元·街霸
+.brawler_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_03_03.png);
+  background-position: -602 -46;
+}
+
+// 归元·柔道家
+.grappler_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_03_04.png);
+  background-position: -482 -95;
+}
+
+// 归元·气功师
+.nenmaster_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_04_01.png);
+  background-position: -557 -219;
+}
+
+// 归元·散打
+.striker_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_04_02.png);
+  background-position: -584 -127;
+}
+
+// 归元·街霸
+.brawler_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_04_03.png);
+  background-position: -527 -215;
+}
+
+// 归元·柔道家
+.grappler_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_04_04.png);
+  background-position: -561 -240;
+}
+
+// 重霄·漫游枪手
+.ranger_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_05_01.png);
+  background-position: -670 -56;
+}
+
+// 重霄·枪炮师
+.launcher_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_05_02.png);
+  background-position: -671 -74;
+}
+
+// 重霄·机械师
+.mechanic_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_05_03.png);
+  background-position: -610 -93;
+}
+
+// 重霄·弹药专家
+.spitfire_male {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_05_04.png);
+  background-position: -547 -234;
+}
+
+// 重霄·合金战士
+.assault {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_05_05.png);
+  background-position: -537 -148;
+}
+
+// 重霄·漫游枪手
+.ranger_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_06_01.png);
+  background-position: -626 -202;
+}
+
+// 重霄·枪炮师
+.launcher_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_06_02.png);
+  background-position: -723 -296;
+}
+
+// 重霄·机械师
+.mechanic_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_06_03.png);
+  background-position: -414 -242;
+}
+
+// 重霄·弹药专家
+.spitfire_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_06_04.png);
+  background-position: -647 -261;
+}
+
+// 知源·元素爆破师
+.elemental_bomber {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_07_01.png);
+  background-position: -384 -96;
+}
+
+// 知源·冰结师
+.glacial_master {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_07_02.png);
+  background-position: -424 -220;
+}
+
+// 知源·血法师
+.blood_mage {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_07_03.png);
+  background-position: -658 -340;
+}
+
+// 知源·逐风者
+.swift_master {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_07_04.png);
+  background-position: -533 -560;
+}
+
+// 知源·次元行者
+.dimension_walker {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_07_05.png);
+  background-position: -238 -68;
+}
+
+// 知源·元素师
+.elementalist {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_08_01.png);
+  background-position: -591 -226;
+}
+
+// 知源·召唤师
+.summoner {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_08_02.png);
+  background-position: -582 -341;
+}
+
+// 知源·战斗法师
+.battle_mage {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_08_03.png);
+  background-position: -499 -97;
+}
+
+// 知源·魔道学者
+.witch {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_08_04.png);
+  background-position: -625 -176;
+}
+
+// 知源·小魔女
+.enchantress,
+.enchantress_carry {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_08_05.png);
+  background-position: -593 -334;
+}
+
+// 神启·圣骑士
+.crusader_male,
+.crusader_male_carry {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_09_01.png);
+  background-position: -575 -245;
+}
+
+// 神启·蓝拳圣使
+.infighter {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_09_02.png);
+  background-position: -583 -193;
+}
+
+// 神启·驱魔师
+.exorcist {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_09_03.png);
+  background-position: -549 -192;
+}
+
+// 神启·复仇者
+.avenger {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_09_04.png);
+  background-position: -489 -400;
+}
+
+// 神启·圣骑士
+.crusader_female {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_10_01.png);
+  background-position: -560 -352;
+}
+
+// 神启·异端审判者
+.inquistor {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_10_02.png);
+  background-position: -573 -293;
+}
+
+// 神启·巫女
+.sorceress {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_10_03.png);
+  background-position: -407 -260;
+}
+
+// 神启·诱魔者
+.mistress {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_10_04.png);
+  background-position: -646 -499;
+}
+
+// 隐夜·刺客
+.rogue {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_11_01.png);
+  background-position: -344 -337;
+}
+
+// 隐夜·死灵术士
+.necro {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_11_02.png);
+  background-position: -576 -352;
+}
+
+// 隐夜·忍者
+.kunoichi {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_11_03.png);
+  background-position: -487 -229;
+}
+
+// 隐夜·影舞者
+.shadow_dancer {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_11_04.png);
+  background-position: -758 -181;
+}
+
+// 皓曦·精灵骑士
+.elven_knight {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_12_01.png);
+  background-position: -585 -280;
+}
+
+// 皓曦·混沌魔灵
+.chaos {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_12_02.png);
+  background-position: -627 -379;
+}
+
+// 皓曦·帕拉丁
+.paladin {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_12_03.png);
+  background-position: -545- 265;
+}
+
+// 皓曦·龙骑士
+.dragon_knight {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_12_04.png);
+  background-position: -625 -335;
+}
+
+// 千魂·征战者
+.vanguard {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_13_01.png);
+  background-position: -607 -186;
+}
+
+// 千魂·决战者
+.skirmisher {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_13_02.png);
+  background-position: -452 -321;
+}
+
+// 千魂·狩猎者
+.dragoon {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_13_03.png);
+  background-position: -564 -351;
+}
+
+// 千魂·暗枪士
+.impaler {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_13_04.png);
+  background-position: -542 -289;
+}
+
+// 苍暮·暗刃
+.hitman {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_14_03.png);
+  background-position: -533 -116;
+}
+
+// 苍暮·特工
+.agent {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_14_01.png);
+  background-position: -575 -158;
+}
+
+// 苍暮·战线佣兵
+.trouble_shooter {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_14_02.png);
+  background-position: -472 -234;
+}
+
+// 苍暮·源能专家
+.specialist {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_14_04.png);
+  background-position: -662 -90;
+}
+
+// 极诣·黑暗武士
+.dark_knight {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_15_01.png);
+  background-position: -502 -180;
+}
+
+// 知源·缔造者
+.creator {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_16_01.png);
+  background-position: -571 -294;
+}
+
+// 聆风·缪斯
+.muse {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_17_01.png);
+  background-position: -498 -94;}
+
+// 聆风·旅人
+.traveler {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_17_02.png);
+  background-position: -607 -102;}
+
+// 聆风·猎人
+.hunter {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_17_03.png);
+  background-position: -615 -126;}
+
+// 聆风·妖护使
+.vigilante {
+  background-image: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_17_04.png);
+  background-position: -422 -265;}
diff --git a/images b/images
index ccfebd86..450be3a8 160000
--- a/images
+++ b/images
@@ -1 +1 @@
-Subproject commit ccfebd86cb5ce411b66c82d2f702ec86b078ee21
+Subproject commit 450be3a8fc8e6c5413b96149cc3582b47e1a05d7