diff --git a/hwe/sammo/Command/General/che_선양.php b/hwe/sammo/Command/General/che_선양.php
index b20ce2f6..14a18434 100644
--- a/hwe/sammo/Command/General/che_선양.php
+++ b/hwe/sammo/Command/General/che_선양.php
@@ -145,31 +145,17 @@ class che_선양 extends Command\GeneralCommand
         return true;
     }
 
-    public function getForm(): string
-    {
-        //TODO: 암행부처럼 보여야...
-        $db = DB::db();
 
-        $destRawGenerals = $db->query('SELECT no,name,officer_level,npc FROM general WHERE nation != 0 AND nation = %i AND no != %i ORDER BY npc,binary(name)', $this->generalObj->getNationID(), $this->generalObj->getID());
-        ob_start();
-?>
-        군주의 자리를 다른 장수에게 물려줍니다.<br>
-        장수를 선택하세요.<br>
-        <select class='formInput' name="destGeneralID" id="destGeneralID" size='1' style='color:white;background-color:black;'>
-            <?php foreach ($destRawGenerals as $destGeneral) :
-                $color = \sammo\getNameColor($destGeneral['npc']);
-                if ($color) {
-                    $color = " style='color:{$color}'";
-                }
-                $name = $destGeneral['name'];
-                if ($destGeneral['officer_level'] >= 5) {
-                    $name = "*{$name}*";
-                }
-            ?>
-                <option value='<?= $destGeneral['no'] ?>' <?= $color ?>><?= $name ?></option>
-            <?php endforeach; ?>
-        </select> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
-<?php
-        return ob_get_clean();
+    public function exportJSVars(): array
+    {
+        $db = DB::db();
+        $destRawGenerals = $db->queryAllLists('SELECT no,name,officer_level,npc,leadership,strength,intel FROM general WHERE nation != 0 AND nation = %i AND no != %i ORDER BY npc,binary(name)', $this->generalObj->getNationID(), $this->generalObj->getID());
+
+        return [
+            'procRes' => [
+                'generals' => $destRawGenerals,
+                'generalsKey' => ['no', 'name', 'officerLevel', 'npc', 'leadership', 'strength', 'intel']
+            ]
+        ];
     }
 }
diff --git a/hwe/sammo/Command/General/che_임관.php b/hwe/sammo/Command/General/che_임관.php
index 156999fc..c94cd1e7 100644
--- a/hwe/sammo/Command/General/che_임관.php
+++ b/hwe/sammo/Command/General/che_임관.php
@@ -196,7 +196,6 @@ class che_임관 extends Command\GeneralCommand
     {
         $generalObj = $this->generalObj;
         $nationID = $generalObj->getNationID();
-        $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
         $db = DB::db();
 
         $rawNationList = Util::convertArrayToDict($db->query('SELECT nation,`name`,color,gennum,`power` FROM nation'), 'nation');
@@ -226,7 +225,7 @@ class che_임관 extends Command\GeneralCommand
         return [
             'mapTheme' => \sammo\getMapTheme(),
             'procRes' => [
-                'nations' => $nationList,
+                'nationList' => $nationList,
                 'startYear' => $this->env['startyear'],
             ],
         ];
diff --git a/hwe/sammo/Command/General/che_장수대상임관.php b/hwe/sammo/Command/General/che_장수대상임관.php
index 939e40f1..69ba2c56 100644
--- a/hwe/sammo/Command/General/che_장수대상임관.php
+++ b/hwe/sammo/Command/General/che_장수대상임관.php
@@ -12,6 +12,7 @@ use \sammo\{
     KVStorage
 };
 
+use function sammo\getAllNationStaticInfo;
 use function \sammo\getColoredName;
 use function \sammo\tryUniqueItemLottery;
 use function \sammo\getInvitationList;
@@ -21,8 +22,6 @@ use \sammo\Constraint\Constraint;
 use \sammo\Constraint\ConstraintHelper;
 use sammo\CityConst;
 
-
-
 class che_장수대상임관 extends Command\GeneralCommand{
     static protected $actionName = '장수를 따라 임관';
     static public $reqArg = true;
@@ -186,65 +185,29 @@ class che_장수대상임관 extends Command\GeneralCommand{
         return true;
     }
 
-    public function getForm(): string
+    public function exportJSVars(): array
     {
         $db = DB::db();
-
-        $generalObj = $this->generalObj;
-
-        $env = $this->env;
-
-        $joinedNations = $generalObj->getAuxVar('joinedNations')??[];
-        $generalList = $db->query('SELECT no,name,nation,npc FROM general WHERE no!=%i ORDER BY name ASC', $generalObj->getID());
-
-
-        $nationList = $db->query('SELECT nation,`name`,color,scout,gennum FROM nation');
-        shuffle($nationList);
-        $nationList = Util::convertArrayToDict($nationList, 'nation');
-        //NOTE: join 안할것임
+        $destRawGenerals = $db->queryAllLists('SELECT no,name,nation,officer_level,npc,leadership,strength,intel FROM general WHERE no != %i ORDER BY npc,binary(name)', $this->generalObj->getID());
+        $nationList = [];
         $scoutMsgs = KVStorage::getValuesFromInterNamespace($db, 'nation_env', 'scout_msg');
-        foreach($scoutMsgs as $nationID=>$scoutMsg){
-            $nationList[$nationID]['scoutmsg'] = $scoutMsg;
+
+        foreach ([getNationStaticInfo(0), ...getAllNationStaticInfo()] as $destNation) {
+            $nationList[] = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+                'scoutMsg' => $scoutMsgs[$destNation['nation']]??' '
+            ];
         }
 
-        $hiddenItems = [];
-
-        foreach($nationList as &$nation){
-            $nation['hideen'] = false;
-            if($env['year'] < $env['startyear']+3 && $nation['gennum'] >= GameConst::$initialNationGenLimit){
-                $nation['availableJoin'] = false;
-            }
-            else if($nation['scout'] == 1) {
-                $nation['availableJoin'] = false;
-            }
-            else{
-                $nation['availableJoin'] = true;
-            }
-
-            if(in_array($nation['nation'], $joinedNations)){
-                $nation['availableJoin'] = false;
-            }
-
-            if(Util::starts_with($nation['name'], 'ⓤ')){
-                $hiddenItems[$nation['nation']] = $nation['nation'];
-            }
-        }
-        unset($nation);
-        ob_start();
-?>
-장수를 따라 임관합니다.<br>
-이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
-바로 군주의 위치로 이동합니다.<br>
-임관할 국가를 목록에서 선택하세요.<br>
-<select class='formInput' name="destGeneralID" id="destGeneralID" size='1' style='color:white;background-color:black;'>
-<?php foreach($generalList as $targetGeneral): ?>
-    <?php if(key_exists($targetGeneral['nation'], $hiddenItems)){ continue; } ?>
-            <option value='<?=$targetGeneral['no']?>'><?=getColoredName($targetGeneral['name'],$targetGeneral['npc'])?>【<?=getNationStaticInfo($targetGeneral['nation'])['name']??'재야'?>】</option>
-<?php endforeach; ?>
-</select>
-<input type=button id="commonSubmit" value="<?=$this->getName()?>">
-<?=getInvitationList($nationList)?>
-<?php
-        return ob_get_clean();
+        return [
+            'procRes' => [
+                'nationList' => $nationList,
+                'generals' => $destRawGenerals,
+                'generalsKey' => ['no', 'name', 'nationID', 'officerLevel', 'npc', 'leadership', 'strength', 'intel']
+            ]
+        ];
     }
 }
\ No newline at end of file
diff --git a/hwe/ts/processing/General/che_등용.vue b/hwe/ts/processing/General/che_등용.vue
index f16c9407..192ea2eb 100644
--- a/hwe/ts/processing/General/che_등용.vue
+++ b/hwe/ts/processing/General/che_등용.vue
@@ -40,13 +40,12 @@ import {
   procNationList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const mapTheme: string;
 declare const commandName: string;
 
 declare const procRes: {
   generals: procGeneralRawItemList;
   generalsKey: procGeneralKey[];
-  nationList: procNationList,
+  nationList: procNationList;
 };
 
 export default defineComponent({
@@ -81,12 +80,11 @@ export default defineComponent({
     }
 
     const nationList = new Map<number, procNationItem>();
-    for(const nationItem of procRes.nationList){
+    for (const nationItem of procRes.nationList) {
       nationList.set(nationItem.id, nationItem);
     }
 
     return {
-      mapTheme: ref(mapTheme),
       selectedGeneralID,
       generalList,
       nationList,
diff --git a/hwe/ts/processing/General/che_선양.vue b/hwe/ts/processing/General/che_선양.vue
new file mode 100644
index 00000000..e493576c
--- /dev/null
+++ b/hwe/ts/processing/General/che_선양.vue
@@ -0,0 +1,91 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div v-if="commandName == '등용'">
+      재야나 타국의 장수를 등용합니다.<br />
+      서신은 개인 메세지로 전달됩니다.<br />
+      등용할 장수를 목록에서 선택하세요.<br />
+    </div>
+    <div v-if="commandName == '선양'">
+      군주의 자리를 다른 장수에게 물려줍니다.<br />
+      장수를 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        장수 :
+        <GeneralSelect
+          :generals="generalList"
+          :textHelper="textHelpGeneral"
+          v-model="selectedGeneralID"
+        />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import GeneralSelect from "@/processing/GeneralSelect.vue";
+import { defineComponent, ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import {
+  convertGeneralList,
+  procGeneralItem,
+  procGeneralKey,
+  procGeneralRawItemList,
+} from "../processingRes";
+import { getNpcColor } from "@/common_legacy";
+declare const commandName: string;
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+};
+
+export default defineComponent({
+  components: {
+    GeneralSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const generalList = convertGeneralList(
+      procRes.generalsKey,
+      procRes.generals
+    );
+
+    const selectedGeneralID = ref(generalList[0].no);
+
+    function textHelpGeneral(gen: procGeneralItem): string {
+      const nameColor = getNpcColor(gen.npc);
+      const name = nameColor
+        ? `<span style="color:${nameColor}">${gen.name}</span>`
+        : gen.name;
+      return `${name} (${gen.leadership}/${gen.strength}/${gen.leadership})`;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destGeneralID: selectedGeneralID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      selectedGeneralID,
+      generalList,
+      commandName,
+      textHelpGeneral,
+      submit,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/General/che_임관.vue b/hwe/ts/processing/General/che_임관.vue
index 1e2027ed..66aff13a 100644
--- a/hwe/ts/processing/General/che_임관.vue
+++ b/hwe/ts/processing/General/che_임관.vue
@@ -55,12 +55,10 @@ import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import { procNationItem, procNationList } from "../processingRes";
 import { isBrightColor } from "@/util/isBrightColor";
-declare const mapTheme: string;
 declare const commandName: string;
 
 declare const procRes: {
-  nations: procNationList;
-  startYear: number;
+  nationList: procNationList;
 };
 
 export default defineComponent({
@@ -71,12 +69,11 @@ export default defineComponent({
   },
   setup() {
     const nations = new Map<number, procNationItem>();
-    for (const nationItem of procRes.nations) {
+    for (const nationItem of procRes.nationList) {
       nations.set(nationItem.id, nationItem);
     }
 
-    const selectedNationID = ref(procRes.nations[0].id);
-    const selectedCityObj = ref(); //mapping용
+    const selectedNationID = ref(procRes.nationList[0].id);
 
     function selectedNation(nationID: number) {
       selectedNationID.value = nationID;
@@ -92,10 +89,7 @@ export default defineComponent({
     }
 
     return {
-      startYear: procRes.startYear,
-      mapTheme: ref(mapTheme),
       nations: ref(nations),
-      selectedCityObj,
       selectedNationID,
       commandName,
       isBrightColor,
diff --git a/hwe/ts/processing/General/che_장수대상임관.vue b/hwe/ts/processing/General/che_장수대상임관.vue
new file mode 100644
index 00000000..d902fa36
--- /dev/null
+++ b/hwe/ts/processing/General/che_장수대상임관.vue
@@ -0,0 +1,161 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      장수를 따라 임관합니다.<br />
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
+      바로 군주의 위치로 이동합니다.<br />
+      임관할 국가를 목록에서 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        장수 :
+        <GeneralSelect
+          :generals="generalList"
+          :groupByNation="nationList"
+          :textHelper="textHelpGeneral"
+          v-model="selectedGeneralID"
+        />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+    <div class="nation-list">
+      <div class="nation-header nation-row bg1 center">
+        <div>국가명</div>
+        <div>임관권유문</div>
+      </div>
+      <div
+        v-for="[, nation] in nationList"
+        :key="nation.id"
+        class="nation-row s-border-b"
+      >
+        <div
+          :style="{
+            backgroundColor: nation.color,
+            color: isBrightColor(nation.color) ? 'black' : 'white',
+            fontSize: '1.3em',
+          }"
+          class="d-grid"
+        >
+          <div class="align-self-center center">{{ nation.name }}</div>
+        </div>
+        <div class="nation-scout-plate align-self-center">
+          <div class="nation-scout-msg" v-html="nation.scoutMsg" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import GeneralSelect from "@/processing/GeneralSelect.vue";
+import { defineComponent, ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import {
+  convertGeneralList,
+  procGeneralItem,
+  procGeneralKey,
+  procGeneralRawItemList,
+  procNationItem,
+  procNationList,
+} from "../processingRes";
+import { getNpcColor } from "@/common_legacy";
+import { isBrightColor } from "@/util/isBrightColor";
+declare const commandName: string;
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  nationList: procNationList;
+};
+
+export default defineComponent({
+  components: {
+    GeneralSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const generalList = convertGeneralList(
+      procRes.generalsKey,
+      procRes.generals
+    );
+
+    const selectedGeneralID = ref(generalList[0].no);
+
+    function textHelpGeneral(gen: procGeneralItem): string {
+      const nameColor = getNpcColor(gen.npc);
+      const name = nameColor
+        ? `<span style="color:${nameColor}">${gen.name}</span>`
+        : gen.name;
+      return name;
+    }
+
+    const nations = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nationList) {
+      nations.set(nationItem.id, nationItem);
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destGeneralID: selectedGeneralID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    const nationList = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nationList) {
+      nationList.set(nationItem.id, nationItem);
+    }
+
+    return {
+      nations: ref(nations),
+      selectedGeneralID,
+      generalList,
+      nationList,
+      commandName,
+      isBrightColor,
+      textHelpGeneral,
+      submit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+@include media-1000px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 130px 870px;
+  }
+}
+
+@include media-500px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
+  }
+
+  .nation-scout-plate {
+    max-height: calc(200px * 500 / 870);
+    overflow: hidden;
+  }
+
+  .nation-scout-msg {
+    width: 870px;
+    transform-origin: 0px 0px;
+    transform: scale(calc(500 / 870));
+  }
+}
+</style>
\ No newline at end of file
diff --git a/hwe/ts/processing/General/index.ts b/hwe/ts/processing/General/index.ts
index 7782cb51..70d4d7a6 100644
--- a/hwe/ts/processing/General/index.ts
+++ b/hwe/ts/processing/General/index.ts
@@ -1,8 +1,11 @@
 import { default as che_건국 } from "./che_건국.vue";
 import { default as che_군량매매 } from "./che_군량매매.vue";
 import { default as che_등용 } from "./che_등용.vue";
+import { default as che_선양 } from "./che_선양.vue";
+
 import { default as CityProcess } from "./che_이동.vue";
 import { default as che_임관 } from "./che_임관.vue";
+import { default as che_장수대상임관 } from "./che_장수대상임관.vue";
 import { default as che_징병 } from "./che_징병.vue";
 
 //TODO: 자주 쓰는 녀석들은 Slot으로 변경
@@ -12,18 +15,18 @@ export const commandMap: Record<string, typeof CityProcess> = {
     che_군량매매,
     che_건국,
     che_등용,
+    che_선양,
     che_이동: CityProcess,
     che_임관,
     che_출병: CityProcess,
+    che_장수대상임관,
     che_징병,
     che_모병: che_징병,
 }
 
 /*
 - 항목들
-장수 - 선양,
 장수+ - 장수대상임관
-국가+ - 임관
 장수/금쌀/분량 - 증여(포상 이식)
 금쌀/분량 - 헌납(군량매매 또는 포상 수정)
 도시 - 첩보, 계략(화계 등)
diff --git a/hwe/ts/processing/GeneralSelect.vue b/hwe/ts/processing/GeneralSelect.vue
index fc534651..a1d6e756 100644
--- a/hwe/ts/processing/GeneralSelect.vue
+++ b/hwe/ts/processing/GeneralSelect.vue
@@ -37,7 +37,7 @@
       </div>
     </template>
     <template v-slot:singleLabel="props">
-      {{ props.option.simpleName }}
+      {{ props.option.simpleName }} {{groupByNation?`[${groupByNation.get(props.option.obj.nationID).name}]`:undefined}}
     </template>
   </v-multiselect>
 </template>