diff --git a/hwe/sammo/Command/Nation/che_국기변경.php b/hwe/sammo/Command/Nation/che_국기변경.php
index 4a4777dc..50d045ac 100644
--- a/hwe/sammo/Command/Nation/che_국기변경.php
+++ b/hwe/sammo/Command/Nation/che_국기변경.php
@@ -152,32 +152,12 @@ class che_국기변경 extends Command\NationCommand
         return true;
     }
 
-    public function getJSPlugins(): array
+    public function exportJSVars(): array
     {
         return [
-            'colorSelect'
+            'procRes' => [
+                'colors' => GetNationColors(),
+            ],
         ];
     }
-
-
-    public function getForm(): string
-    {
-        ob_start();
-?>
-        국기를 변경합니다. 단 1회 가능합니다.<br>
-        색상 : <select class='formInput' name='colorType' id='colorType' size='1'>
-
-            <?php foreach (GetNationColors() as $idx => $color) :
-                /*
-            if($colorUsed[$color] > 0){
-                continue;
-            }
-            */
-            ?>
-                <option value="<?= $idx ?>" data-color=<?=$color?> data-font-color="<?=newColor($color)?>" style='background-color:<?= $color ?>;color:<?= newColor($color) ?>;'>국가명(<?=$color?>)</option>
-            <?php endforeach; ?> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
-        <br>
-<?php
-        return ob_get_clean();
-    }
 }
diff --git a/hwe/ts/processing/ColorSelect.vue b/hwe/ts/processing/ColorSelect.vue
new file mode 100644
index 00000000..cf255893
--- /dev/null
+++ b/hwe/ts/processing/ColorSelect.vue
@@ -0,0 +1,111 @@
+<template>
+  <v-multiselect
+    v-model="selectedColor"
+    :allow-empty="false"
+    :options="forFind"
+    :group-select="false"
+    label="searchText"
+    track-by="value"
+    :show-labels="false"
+    selectLabel="선택(엔터)"
+    selectGroupLabel=""
+    selectedLabel="선택됨"
+    deselectLabel="해제(엔터)"
+    deselectGroupLabel=""
+    placeholder="색상 선택"
+    :maxHeight="400"
+    :searchable="false"
+  >
+    <template v-slot:option="props">
+      <div
+        :class="`sam-color-${props.option.title.slice(1)}`"
+        :style="{
+          margin: '-0.375rem -0.75rem',
+        }"
+      >
+        <div
+          class="sam-nation-own-bgcolor"
+          :style="{
+            padding: '0.375rem 0.75rem',
+          }"
+        >
+          {{ props.option.title }}
+        </div>
+      </div>
+    </template>
+    <template v-slot:singleLabel="props">
+      <div
+        :class="`sam-color-${props.option.title.slice(1)}`"
+        :style="{
+          margin: '-0.375rem -0.75rem',
+        }"
+        ><div
+          class="sam-nation-own-bgcolor"
+          :style="{
+            padding: '0.375rem 0.75rem',
+          }"
+          >{{ props.option.title }}</div
+        ></div
+      >
+    </template>
+  </v-multiselect>
+</template>
+<script lang="ts">
+import { unwrap } from "@/util/unwrap";
+import { defineComponent, PropType } from "vue";
+
+type SelectedColor = {
+  value: number;
+  title: string;
+};
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    colors: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  watch: {
+    modelValue(val: number) {
+      const target = unwrap(this.targets.get(val));
+      this.selectedColor = target;
+    },
+    selectedColor(val: SelectedColor) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
+  data() {
+    const forFind = [];
+    const targets = new Map<number, SelectedColor>();
+    for (const [value, title] of this.colors.entries()) {
+      const obj: SelectedColor = {
+        value,
+        title,
+      };
+      console.log(obj);
+      forFind.push(obj);
+      targets.set(value, obj);
+    }
+    let selectedColor = forFind[0];
+
+    return {
+      selectedColor,
+      searchMode: false,
+      forFind,
+      targets,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.multiselect__option {
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/hwe/ts/processing/Nation/che_국기변경.vue b/hwe/ts/processing/Nation/che_국기변경.vue
new file mode 100644
index 00000000..14d5f05b
--- /dev/null
+++ b/hwe/ts/processing/Nation/che_국기변경.vue
@@ -0,0 +1,61 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      국기를 변경합니다. 단 1회 가능합니다.<br>
+      색상 : <br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <ColorSelect :colors="colors" v-model="selectedColorID" />
+      </div>
+      <div class="col-12 col-md-6">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import ColorSelect from "@/processing/ColorSelect.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";
+
+declare const commandName: string;
+
+declare const procRes: {
+  colors: string[],
+};
+
+export default defineComponent({
+  components: {
+    ColorSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+
+    const selectedColorID = ref(0);
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          colorType: selectedColorID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      selectedColorID,
+      colors: procRes.colors,
+      commandName,
+      submit,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/Nation/index.ts b/hwe/ts/processing/Nation/index.ts
index a3e3ca23..f192048a 100644
--- a/hwe/ts/processing/Nation/index.ts
+++ b/hwe/ts/processing/Nation/index.ts
@@ -1,2 +1,3 @@
+export { default as che_국기변경 } from "./che_국기변경.vue";
 export { default as che_발령 } from "./che_발령.vue";
 export { default as che_포상 } from "./che_포상.vue";
\ No newline at end of file