diff --git a/hwe/sammo/Command/General/che_임관.php b/hwe/sammo/Command/General/che_임관.php
index d31ac729..156999fc 100644
--- a/hwe/sammo/Command/General/che_임관.php
+++ b/hwe/sammo/Command/General/che_임관.php
@@ -1,11 +1,15 @@
 <?php
+
 namespace sammo\Command\General;
 
 use \sammo\{
-    DB, Util, JosaUtil,
+    DB,
+    Util,
+    JosaUtil,
     General,
     ActionLogger,
-    GameConst, GameUnitConst,
+    GameConst,
+    GameUnitConst,
     LastTurn,
     Command,
     Json,
@@ -22,24 +26,26 @@ use sammo\CityConst;
 
 
 
-class che_임관 extends Command\GeneralCommand{
+class che_임관 extends Command\GeneralCommand
+{
     static protected $actionName = '임관';
     static public $reqArg = true;
 
-    protected function argTest():bool{
-        if($this->arg === null){
+    protected function argTest(): bool
+    {
+        if ($this->arg === null) {
             return false;
         }
-        $destNationID = $this->arg['destNationID']??null;
+        $destNationID = $this->arg['destNationID'] ?? null;
 
-        if($destNationID === null){
+        if ($destNationID === null) {
             return false;
         }
 
-        if(!is_int($destNationID)){
+        if (!is_int($destNationID)) {
             return false;
         }
-        if($destNationID < 1){
+        if ($destNationID < 1) {
             return false;
         }
 
@@ -50,7 +56,8 @@ class che_임관 extends Command\GeneralCommand{
         return true;
     }
 
-    protected function init(){
+    protected function init()
+    {
 
         $general = $this->generalObj;
         $env = $this->env;
@@ -60,23 +67,24 @@ class che_임관 extends Command\GeneralCommand{
 
         $relYear = $env['year'] - $env['startyear'];
 
-        $this->permissionConstraints=[
+        $this->permissionConstraints = [
             ConstraintHelper::ReqEnvValue('join_mode', '!=', 'onlyRandom', '랜덤 임관만 가능합니다')
         ];
 
-        $this->minConditionConstraints=[
+        $this->minConditionConstraints = [
             ConstraintHelper::ReqEnvValue('join_mode', '!=', 'onlyRandom', '랜덤 임관만 가능합니다'),
             ConstraintHelper::BeNeutral(),
             ConstraintHelper::AllowJoinAction()
         ];
-
     }
 
-    public function getCommandDetailTitle():string{
+    public function getCommandDetailTitle(): string
+    {
         return '지정한 국가로 임관';
     }
 
-    public function canDisplay():bool{
+    public function canDisplay(): bool
+    {
         return $this->env['join_mode'] !== 'onlyRandom';
     }
 
@@ -87,7 +95,7 @@ class che_임관 extends Command\GeneralCommand{
 
         $env = $this->env;
         $relYear = $env['year'] - $env['startyear'];
-        $this->fullConditionConstraints=[
+        $this->fullConditionConstraints = [
             ConstraintHelper::ReqEnvValue('join_mode', '!=', 'onlyRandom', '랜덤 임관만 가능합니다'),
             ConstraintHelper::BeNeutral(),
             ConstraintHelper::ExistsDestNation(),
@@ -96,27 +104,32 @@ class che_임관 extends Command\GeneralCommand{
         ];
     }
 
-    public function getCost():array{
+    public function getCost(): array
+    {
         return [0, 0];
     }
 
-    public function getPreReqTurn():int{
+    public function getPreReqTurn(): int
+    {
         return 0;
     }
 
-    public function getPostReqTurn():int{
+    public function getPostReqTurn(): int
+    {
         return 0;
     }
 
-    public function getBrief():string{
+    public function getBrief(): string
+    {
         $commandName = $this->getName();
         $destNationName = getNationStaticInfo($this->arg['destNationID'])['name'];
         $josaRo = JosaUtil::pick($destNationName, '로');
         return "【{$destNationName}】{$josaRo} {$commandName}";
     }
 
-    public function run():bool{
-        if(!$this->hasFullConditionMet()){
+    public function run(): bool
+    {
+        if (!$this->hasFullConditionMet()) {
             throw new \RuntimeException('불가능한 커맨드를 강제로 실행 시도');
         }
 
@@ -139,10 +152,9 @@ class che_임관 extends Command\GeneralCommand{
         $logger->pushGeneralHistoryLog("<D><b>{$destNationName}</b></>에 임관");
         $logger->pushGlobalActionLog("<Y>{$generalName}</>{$josaYi} <D><b>{$destNationName}</b></>에 <S>임관</>했습니다.");
 
-        if($gennum < GameConst::$initialNationGenLimit) {
+        if ($gennum < GameConst::$initialNationGenLimit) {
             $exp = 700;
-        }
-        else {
+        } else {
             $exp = 100;
         }
 
@@ -151,22 +163,21 @@ class che_임관 extends Command\GeneralCommand{
         $general->setVar('officer_city', 0);
         $general->setVar('belong', 1);
 
-        if($this->destGeneralObj !== null){
+        if ($this->destGeneralObj !== null) {
             $general->setVar('city', $this->destGeneralObj->getCityID());
-        }
-        else{
+        } else {
             $targetCityID = $db->queryFirstField('SELECT city FROM general WHERE nation = %i AND officer_level=12', $destNationID);
             $general->setVar('city', $targetCityID);
         }
 
         $db->update('nation', [
-            'gennum'=>$db->sqleval('gennum + 1')
+            'gennum' => $db->sqleval('gennum + 1')
         ], 'nation=%i', $destNationID);
         \sammo\refreshNationStaticInfo();
 
         $relYear = $env['year'] - $env['startyear'];
-        if($general->getNPCType() == 1 || $relYear >= 3){
-            $joinedNations = $general->getAuxVar('joinedNations')??[];
+        if ($general->getNPCType() == 1 || $relYear >= 3) {
+            $joinedNations = $general->getAuxVar('joinedNations') ?? [];
             $joinedNations[] = $destNationID;
             $general->setAuxVar('joinedNations', $joinedNations);
         }
@@ -181,64 +192,43 @@ class che_임관 extends Command\GeneralCommand{
         return true;
     }
 
-    public function getForm(): string
+    public function exportJSVars(): array
     {
+        $generalObj = $this->generalObj;
+        $nationID = $generalObj->getNationID();
+        $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
         $db = DB::db();
 
-        $generalObj = $this->generalObj;
-
-        $env = $this->env;
-
-        $joinedNations = $generalObj->getAuxVar('joinedNations')??[];
-
-        $nationList = $db->query('SELECT nation,`name`,color,scout,gennum FROM nation');
-        shuffle($nationList);
-        $nationList = Util::convertArrayToDict($nationList, 'nation');
-        //NOTE: join 안할것임
+        $rawNationList = Util::convertArrayToDict($db->query('SELECT nation,`name`,color,gennum,`power` FROM nation'), 'nation');
         $scoutMsgs = KVStorage::getValuesFromInterNamespace($db, 'nation_env', 'scout_msg');
-        foreach($scoutMsgs as $nationID=>$scoutMsg){
-            $nationList[$nationID]['scoutmsg'] = $scoutMsg;
+        foreach ($scoutMsgs as $nationID => $scoutMsg) {
+            $rawNationList[$nationID]['scoutmsg'] = $scoutMsg;
         }
+        foreach ($rawNationList as $destNation) {
+            $testCommand = new static($generalObj, $this->env, ['destNationID' => $destNation['nation']]);
 
-        $hiddenItems = [];
-
-        foreach($nationList as &$nation){
-            if($env['year'] < $env['startyear']+3 && $nation['gennum'] >= GameConst::$initialNationGenLimit){
-                $nation['availableJoin'] = false;
+            $nationTarget = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+                'scoutMsg' => $destNation['scoutmsg'] ?? ' ',
+            ];
+            if (!$testCommand->hasFullConditionMet()) {
+                $nationTarget['notAvailable'] = true;
             }
-            else if($nation['scout'] == 1) {
-                $nation['availableJoin'] = false;
-            }
-            else{
-                $nation['availableJoin'] = true;
+            if ($destNation['id'] == $nationID) {
+                $nationTarget['notAvailable'] = true;
             }
 
-            if(in_array($nation['nation'], $joinedNations)){
-                $nation['availableJoin'] = false;
-            }
-
-            if(Util::starts_with($nation['name'], 'ⓤ')){
-                $hiddenItems[$nation['nation']] = $nation['nation'];
-            }
+            $nationList[] = $nationTarget;
         }
-        unset($nation);
-        ob_start();
-?>
-국가에 임관합니다.<br>
-이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
-바로 군주의 위치로 이동합니다.<br>
-임관할 국가를 목록에서 선택하세요.<br>
-<select class='formInput' name="destNationID" id="destNationID" size='1' style='color:white;background-color:black;'>
-<?php foreach($nationList as $nation): ?>
-    <?php if(key_exists($nation['nation'], $hiddenItems)){ continue; } ?>
-    <option
-        value='<?=$nation['nation']?>'
-        style='<?=$nation['availableJoin']?'':'background-color:red;'?>'
-    >【<?=$nation['name']?> 】</option>
-<?php endforeach; ?>
-<input type=button id="commonSubmit" value="<?=$this->getName()?>">
-<?=getInvitationList($nationList)?>
-<?php
-        return ob_get_clean();
+        return [
+            'mapTheme' => \sammo\getMapTheme(),
+            'procRes' => [
+                'nations' => $nationList,
+                'startYear' => $this->env['startyear'],
+            ],
+        ];
     }
-}
\ No newline at end of file
+}
diff --git a/hwe/sammo/Command/Nation/che_급습.php b/hwe/sammo/Command/Nation/che_급습.php
index f7daf847..14aaf13b 100644
--- a/hwe/sammo/Command/Nation/che_급습.php
+++ b/hwe/sammo/Command/Nation/che_급습.php
@@ -203,11 +203,6 @@ class che_급습 extends Command\NationCommand
         $nationList = [];
         $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
         foreach (getAllNationStaticInfo() as $destNation) {
-            /*if ($destNation['nation'] == $nationID) {
-                continue;
-            }*/
-
-            $testTurn->setArg(['destNationID' => $destNation['nation']]);
             $testCommand = new static($generalObj, $this->env, $testTurn, ['destNationID' => $destNation['nation']]);
 
             $nationTarget = [
@@ -219,7 +214,7 @@ class che_급습 extends Command\NationCommand
             if (!$testCommand->hasFullConditionMet()) {
                 $nationTarget['notAvailable'] = true;
             }
-            if ($destNation['nation'] == $nationID) {
+            if ($destNation['id'] == $nationID) {
                 $nationTarget['notAvailable'] = true;
             }
 
diff --git a/hwe/sammo/Command/Nation/che_선전포고.php b/hwe/sammo/Command/Nation/che_선전포고.php
index 2c127767..4da60c6f 100644
--- a/hwe/sammo/Command/Nation/che_선전포고.php
+++ b/hwe/sammo/Command/Nation/che_선전포고.php
@@ -200,10 +200,6 @@ class che_선전포고 extends Command\NationCommand
         $nationList = [];
         $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
         foreach (getAllNationStaticInfo() as $destNation) {
-            /*if ($destNation['nation'] == $nationID) {
-                continue;
-            }*/
-
             $testTurn->setArg(['destNationID' => $destNation['nation']]);
             $testCommand = new static($generalObj, $this->env, $testTurn, ['destNationID' => $destNation['nation']]);
 
@@ -216,7 +212,7 @@ class che_선전포고 extends Command\NationCommand
             if (!$testCommand->hasFullConditionMet()) {
                 $nationTarget['notAvailable'] = true;
             }
-            if ($destNation['nation'] == $nationID) {
+            if ($destNation['id'] == $nationID) {
                 $nationTarget['notAvailable'] = true;
             }
 
@@ -237,44 +233,4 @@ class che_선전포고 extends Command\NationCommand
             'defaultSelectNationByMap'
         ];
     }
-
-    public function getForm(): string
-    {
-        $generalObj = $this->generalObj;
-        $nationID = $generalObj->getNationID();
-        $startYear = $this->env['startyear'];
-        $availableYear = $startYear + 1;
-        $nationList = [];
-        foreach (getAllNationStaticInfo() as $destNation) {
-            if ($destNation['nation'] == $nationID) {
-                continue;
-            }
-
-            $testCommand = new static($generalObj, $this->env, $this->getLastTurn(), ['destNationID' => $destNation['nation']]);
-            if ($testCommand->hasFullConditionMet()) {
-                $destNation['availableWar'] = true;
-            } else {
-                $destNation['availableWar'] = false;
-            }
-
-            $nationList[] = $destNation;
-        }
-
-        ob_start();
-?>
-        <?= \sammo\getMapHtml() ?><br>
-        타국에게 선전 포고합니다.<br>
-        선전 포고할 국가를 목록에서 선택하세요.<br>
-        고립되지 않은 아국 도시에서 인접한 국가에 선포 가능합니다.<br>
-        초반제한 해제 2년전부터 선포가 가능합니다. (<?= $availableYear ?>년 1월부터 가능)<br>
-        현재 선포가 불가능한 국가는 배경색이 <font color=red>붉은색</font>으로 표시됩니다.<br>
-        <select class='formInput' name="destNationID" id="destNationID" size='1' style='color:white;background-color:black;'>
-            <?php foreach ($nationList as $nation) : ?>
-                <option value='<?= $nation['nation'] ?>' style='color:<?= $nation['color'] ?>;<?= $nation['availableWar'] ? '' : 'background-color:red;' ?>'>【<?= $nation['name'] ?> 】</option>
-            <?php endforeach; ?>
-        </select>
-        <input type=button id="commonSubmit" value="<?= $this->getName() ?>">
-<?php
-        return ob_get_clean();
-    }
 }
diff --git a/hwe/ts/processing/CitySelect.vue b/hwe/ts/processing/CitySelect.vue
index 1338aac6..40d47078 100644
--- a/hwe/ts/processing/CitySelect.vue
+++ b/hwe/ts/processing/CitySelect.vue
@@ -23,11 +23,15 @@
         }"
       >
         {{ props.option.title }}
-        <span v-if="props.option.info">({{ props.option.info }})</span></span
+        <span v-if="props.option.info">({{ props.option.info }})</span> {{ props.option.notAvailable ? "(불가)" : undefined }}</span
       >
     </template>
     <template v-slot:singleLabel="props">
-      {{ props.option.simpleName }}
+      <span
+        :style="{
+          color: props.option.notAvailable ? 'red' : undefined,
+        }"
+      >{{ props.option.simpleName }} {{ props.option.notAvailable ? "(불가)" : undefined }}</span>
     </template>
   </v-multiselect>
 </template>
diff --git a/hwe/ts/processing/General/che_임관.vue b/hwe/ts/processing/General/che_임관.vue
new file mode 100644
index 00000000..1e2027ed
--- /dev/null
+++ b/hwe/ts/processing/General/che_임관.vue
@@ -0,0 +1,137 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      국가에 임관합니다.<br />
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
+      바로 군주의 위치로 이동합니다.<br />
+      임관할 국가를 목록에서 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-6 col-md-3">
+        국가 :
+        <NationSelect :nations="nations" v-model="selectedNationID" />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button @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 nations"
+        :key="nation.id"
+        class="nation-row s-border-b"
+        @click="selectedNationID = nation.id"
+      >
+        <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 NationSelect from "@/processing/NationSelect.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 { procNationItem, procNationList } from "../processingRes";
+import { isBrightColor } from "@/util/isBrightColor";
+declare const mapTheme: string;
+declare const commandName: string;
+
+declare const procRes: {
+  nations: procNationList;
+  startYear: number;
+};
+
+export default defineComponent({
+  components: {
+    NationSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const nations = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nations) {
+      nations.set(nationItem.id, nationItem);
+    }
+
+    const selectedNationID = ref(procRes.nations[0].id);
+    const selectedCityObj = ref(); //mapping용
+
+    function selectedNation(nationID: number) {
+      selectedNationID.value = nationID;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destNationID: selectedNationID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      startYear: procRes.startYear,
+      mapTheme: ref(mapTheme),
+      nations: ref(nations),
+      selectedCityObj,
+      selectedNationID,
+      commandName,
+      isBrightColor,
+      selectedNation,
+      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 5e6f76df..7782cb51 100644
--- a/hwe/ts/processing/General/index.ts
+++ b/hwe/ts/processing/General/index.ts
@@ -1,8 +1,9 @@
-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";
+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";
 
 //TODO: 자주 쓰는 녀석들은 Slot으로 변경
 
@@ -12,6 +13,7 @@ export const commandMap: Record<string, typeof CityProcess> = {
     che_건국,
     che_등용,
     che_이동: CityProcess,
+    che_임관,
     che_출병: CityProcess,
     che_징병,
     che_모병: che_징병,
diff --git a/hwe/ts/processing/NationSelect.vue b/hwe/ts/processing/NationSelect.vue
index c1664bfd..2a34da9f 100644
--- a/hwe/ts/processing/NationSelect.vue
+++ b/hwe/ts/processing/NationSelect.vue
@@ -28,7 +28,14 @@
       </span>
     </template>
     <template v-slot:singleLabel="props">
-      {{ props.option.simpleName }}
+      <span
+        :style="{
+          color: props.option.notAvailable ? 'red' : undefined,
+        }"
+      >
+        {{ props.option.simpleName }}
+        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+      >
     </template>
   </v-multiselect>
 </template>
diff --git a/hwe/ts/processing/processingRes.ts b/hwe/ts/processing/processingRes.ts
index 691ff846..9361807c 100644
--- a/hwe/ts/processing/processingRes.ts
+++ b/hwe/ts/processing/processingRes.ts
@@ -43,6 +43,7 @@ export type procNationItem = {
     name: string,
     color: string,
     power: number,
+    scoutMsg?: string,
     info?: string,
     notAvailable?: boolean,
 };
diff --git a/hwe/v_processing.php b/hwe/v_processing.php
index 1fd72a27..2365a36e 100644
--- a/hwe/v_processing.php
+++ b/hwe/v_processing.php
@@ -86,11 +86,6 @@ if (!$commandObj->hasPermissionToReserve()) {
     ])?>
     <?= WebUtil::printStaticValues($commandObj->exportJSVars(), false) ?>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
-    <?php
-    foreach ($cssList as $css) {
-        print(WebUtil::printCSS($css));
-    }
-    ?>
     <?= WebUtil::printDist('vue', ['v_processing'], true) ?>
 </head>