diff --git a/hwe/ts/PageJoin.vue b/hwe/ts/PageJoin.vue
index dd79678a..9d3c00be 100644
--- a/hwe/ts/PageJoin.vue
+++ b/hwe/ts/PageJoin.vue
@@ -2,58 +2,67 @@
   <top-back-bar title="장수 생성" />
 
   <div id="container" class="bg0">
-    <div class="row bg1">
-      <div class="col col-md-11 col-9 center align-self-center">
-        임관 권유 메시지
+    <div class="nation-list">
+      <div class="nation-header nation-row bg1 center">
+        <div>국가명</div>
+        <div>임관권유문</div>
+        <div class="display-toggle d-grid">
+          <b-button
+            :pressed="displayTable"
+            :variant="displayTable ? 'info' : 'secondary'"
+            v-model="displayTable"
+            @click="displayTable = !displayTable"
+          >{{ displayTable ? "숨기기" : "보이기" }}</b-button>
+        </div>
+        <div class="zoom-toggle d-grid">
+          <b-button
+            :pressed="toggleZoom"
+            :variant="toggleZoom ? 'info' : 'secondary'"
+            v-model="toggleZoom"
+            @click="toggleZoom = !toggleZoom"
+            :disabled="!displayTable"
+          >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button>
+        </div>
       </div>
-      <div class="col col-md-1 col-3">
-        <label
-          ><input type="checkbox" v-model="displayTable" />{{
-            displayTable ? "숨기기" : "보이기"
-          }}</label
-        >
-      </div>
-    </div>
-    <CTable responsive v-if="displayTable">
-      <CTableBody>
-        <CTableRow
-          class="nation-row"
+      <template v-if="displayTable">
+        <div
           v-for="nation in nationList"
           :key="nation.nation"
+          :class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
         >
-          <CTableHeaderCell
-            scope="row"
-            class="a-center p-0"
+          <div
             :style="{
               backgroundColor: nation.color,
               color: isBrightColor(nation.color) ? 'black' : 'white',
+              fontSize: '1.3em',
             }"
-            ><div class="nation-name">
-              {{ nation.name }}
-            </div>
-          </CTableHeaderCell>
-          <CTableDataCell class="p-0">
-            <div
-              class="nation-info"
-              v-html="nation.scoutmsg ?? '-'"
-            ></div></CTableDataCell></CTableRow
-      ></CTableBody>
-    </CTable>
+            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>
+      </template>
+    </div>
+
     <!-- 국가 설명 -->
-    <div class="row bg1"><div class="col center">장수 생성</div></div>
+    <div class="row bg1">
+      <div class="col center">장수 생성</div>
+    </div>
     <div class="forms">
       <div class="row">
         <div class="col col-md-4 col-3 a-right align-self-center">장수명</div>
         <div class="col col-md-3 col-9 align-self-center">
           <input v-model="args.name" class="form-control" />
         </div>
-        <div class="col col-md-1 col-3 a-right align-self-center">
-          전콘 사용
-        </div>
+        <div class="col col-md-1 col-3 a-right align-self-center">전콘 사용</div>
         <div class="col col-md-4 col-9 align-self-center">
-          <img style="height: 64px; width: 64px" :src="iconPath" /><label
-            ><input type="checkbox" v-model="args.pic" /> 사용</label
-          >
+          <img style="height: 64px; width: 64px" :src="iconPath" />
+          <label>
+            <input type="checkbox" v-model="args.pic" /> 사용
+          </label>
         </div>
         <div class="col col-md-4 col-3 align-self-center a-right">성격</div>
 
@@ -69,15 +78,15 @@
                   v-for="(personalityObj, key) in availablePersonality"
                   :key="key"
                   :value="key"
-                >
-                  {{ personalityObj.name }}
-                </option>
+                >{{ personalityObj.name }}</option>
               </select>
             </div>
             <div class="col col-md-9 col-8 align-self-center">
-              <small class="text-muted">{{
-                availablePersonality[args.character].info
-              }}</small>
+              <small class="text-muted">
+                {{
+                  availablePersonality[args.character].info
+                }}
+              </small>
             </div>
           </div>
         </div>
@@ -86,10 +95,12 @@
       <div class="col">
         계정관리에서 자신만을 표현할 수 있는 아이콘을 업로드 해보세요!
       </div>
-    </div>-->
+      </div>-->
       <div class="row" style="margin-top: 1em">
         <div class="col col-md-4 col-3 a-right align-self-center">
-          능력치<br /><small class="text-muted">통/무/지</small>
+          능력치
+          <br />
+          <small class="text-muted">통/무/지</small>
         </div>
         <div class="col col-md-2 col-3 align-self-center">
           <input type="number" class="form-control" v-model="args.leadership" />
@@ -102,73 +113,48 @@
         </div>
       </div>
       <div class="row" style="margin-top: 1em">
-        <div class="col col-md-4 col-3 a-right align-self-center">
-          능력치 조절
-        </div>
+        <div class="col col-md-4 col-3 a-right align-self-center">능력치 조절</div>
         <div class="col col-md-8 col-9">
-          <b-button variant="secondary" class="stat-btn" @click="randStatRandom"
-            >랜덤형</b-button
-          >
-          <b-button
-            variant="secondary"
-            class="stat-btn"
-            @click="randStatLeadPow"
-            >통솔무력형</b-button
-          >
-          <b-button
-            variant="secondary"
-            class="stat-btn"
-            @click="randStatLeadInt"
-            >통솔지력형</b-button
-          >
-          <b-button variant="secondary" class="stat-btn" @click="randStatPowInt"
-            >무력지력형</b-button
-          >
+          <b-button variant="secondary" class="stat-btn" @click="randStatRandom">랜덤형</b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadPow">통솔무력형</b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadInt">통솔지력형</b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatPowInt">무력지력형</b-button>
         </div>
       </div>
     </div>
     <div class="row" style="border-top: solid 1px #aaa; margin-top: 0.5em">
       <div class="col a-center" style="color: orange">
         모든 능력치는 ( {{ stats.min }} &lt;= 능력치 &lt;= {{ stats.max }} )
-        사이로 잡으셔야 합니다.<br />
-        그 외의 능력치는 가입되지 않습니다.
+        사이로 잡으셔야 합니다.
+        <br />그 외의 능력치는 가입되지 않습니다.
       </div>
     </div>
     <div class="row">
       <div class="col a-center">
         능력치의 총합은 {{ stats.total }} 입니다. 가입후 {{ stats.bonusMin }} ~
-        {{ stats.bonusMax }} 의 능력치 보너스를 받게 됩니다.<br />
-        임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
+        {{ stats.bonusMax }} 의 능력치 보너스를 받게 됩니다.
+        <br />임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
       </div>
     </div>
 
     <div class="row bg1">
-      <div class="col col-md-11 col-9 center align-self-center">
-        유산 포인트 사용
-      </div>
+      <div class="col col-md-11 col-9 center align-self-center">유산 포인트 사용</div>
       <div class="col col-md-1 col-3">
-        <label
-          ><input type="checkbox" v-model="displayInherit" />{{
+        <label>
+          <input type="checkbox" v-model="displayInherit" />
+          {{
             displayInherit ? "숨기기" : "보이기"
-          }}</label
-        >
+          }}
+        </label>
       </div>
     </div>
     <div class="inherit-block" v-if="displayInherit">
       <div class="row">
         <div class="col">
-          <NumberInputWithInfo
-            title="보유한 유산 포인트"
-            v-model="inheritTotalPoint"
-            :readonly="true"
-          />
+          <NumberInputWithInfo title="보유한 유산 포인트" v-model="inheritTotalPoint" :readonly="true" />
         </div>
         <div class="col">
-          <NumberInputWithInfo
-            title="필요 유산 포인트"
-            v-model="inheritRequiredPoint"
-            :readonly="true"
-          />
+          <NumberInputWithInfo title="필요 유산 포인트" v-model="inheritRequiredPoint" :readonly="true" />
         </div>
       </div>
       <hr />
@@ -187,9 +173,7 @@
                   v-for="(inheritSpecial, key) in availableInheritSpecial"
                   :key="key"
                   :value="key"
-                >
-                  {{ inheritSpecial.name }}
-                </option>
+                >{{ inheritSpecial.name }}</option>
               </select>
             </div>
           </div>
@@ -197,7 +181,7 @@
             <small
               class="text-muted"
               v-html="
-                (availableInheritSpecial[args.inheritSpecial??''] ?? { info: '' })
+                (availableInheritSpecial[args.inheritSpecial ?? ''] ?? { info: '' })
                   .info
               "
             />
@@ -218,9 +202,7 @@
                   v-for="city in availableInheritCity"
                   :key="city[0]"
                   :value="city[0]"
-                >
-                  {{ `[${city[1]}] ${city[2]}` }}
-                </option>
+                >{{ `[${city[1]}] ${city[2]}` }}</option>
               </select>
             </div>
           </div>
@@ -228,10 +210,10 @@
 
         <div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
           <div class="a-center">
-            <label
-              ><input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
-              고정</label
-            >
+            <label>
+              <input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
+              고정
+            </label>
           </div>
           <div class="row turn_time_pad">
             <div class="col col-md-4 offset-md-3 col-4 offset-3">
@@ -261,22 +243,13 @@
           <div class="a-center">추가 능력치 고정</div>
           <div class="row">
             <div class="col">
-              <NumberInputWithInfo
-                title="통솔"
-                v-model="(args.inheritBonusStat??[0,0,0])[0]"
-              />
+              <NumberInputWithInfo title="통솔" v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]" />
             </div>
             <div class="col">
-              <NumberInputWithInfo
-                title="무력"
-                v-model="(args.inheritBonusStat??[0,0,0])[1]"
-              />
+              <NumberInputWithInfo title="무력" v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]" />
             </div>
             <div class="col">
-              <NumberInputWithInfo
-                title="지력"
-                v-model="(args.inheritBonusStat??[0,0,0])[2]"
-              />
+              <NumberInputWithInfo title="지력" v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]" />
             </div>
           </div>
         </div>
@@ -285,10 +258,8 @@
 
     <div class="row" style="border-top: solid 1px #aaa">
       <div class="col a-center" style="margin: 0.5em">
-        <b-button color="primary" @click="submitForm">장수 생성</b-button
-        >&nbsp;<b-button color="secondary" @click="resetArgs"
-          >다시 입력</b-button
-        >
+        <b-button color="primary" @click="submitForm">장수 생성</b-button>&nbsp;
+        <b-button color="secondary" @click="resetArgs">다시 입력</b-button>
       </div>
     </div>
   </div>
@@ -299,13 +270,6 @@ import "@scss/game_bg.scss";
 
 import { defineComponent } from "vue";
 import TopBackBar from "@/components/TopBackBar.vue";
-import {
-  CTable,
-  CTableBody,
-  CTableRow,
-  CTableHeaderCell,
-  CTableDataCell,
-} from "@coreui/vue/src/components/table";
 import { getIconPath } from "@util/getIconPath";
 import { isBrightColor } from "@util/isBrightColor";
 import {
@@ -391,11 +355,6 @@ export default defineComponent({
   name: "PageJoin",
   components: {
     TopBackBar,
-    CTable,
-    CTableBody,
-    CTableRow,
-    CTableHeaderCell,
-    CTableDataCell,
     NumberInputWithInfo,
   },
   data() {
@@ -440,6 +399,7 @@ export default defineComponent({
       inheritTurnTimeMinute: 0,
       inheritTurnTimeSecond: 0,
       turnterm,
+      toggleZoom: true,
     };
   },
   watch: {
@@ -535,8 +495,8 @@ export default defineComponent({
       const args = clone(this.args);
       const totalStat = args.leadership + args.strength + args.intel;
 
-      if(totalStat < stats.total){
-        if(!confirm(`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${stats.total}보다 적습니다.\r\n그래도 진행할까요?`)){
+      if (totalStat < stats.total) {
+        if (!confirm(`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${stats.total}보다 적습니다.\r\n그래도 진행할까요?`)) {
           return false;
         }
       }
@@ -559,6 +519,7 @@ export default defineComponent({
 <style lang="scss">
 @import "@scss/common/bootstrap5.scss";
 @import "@scss/editor_component.scss";
+
 #container {
   width: 100%;
   max-width: 1000px;
@@ -577,25 +538,78 @@ export default defineComponent({
   margin-bottom: 1px;
 }
 
-.nation-row {
-  max-height: 200px;
-}
-
-.nation-name {
-  width: 128px;
-}
-
-.nation-info {
-  max-height: 200px;
-  overflow-y: hidden;
-  width: 870px;
-}
-
 .col-form-label {
   text-align: right;
 }
 
-.turn_time_pad .col-form-label{
+.turn_time_pad .col-form-label {
   text-align: left;
 }
+</style>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+@include media-1000px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 130px 870px;
+  }
+
+  .zoom-toggle {
+    display: none;
+  }
+
+  .zoom-toggle > * {
+    display: none;
+  }
+}
+
+@include media-500px {
+  .nation-list .nation-row.nation-header {
+    display: grid;
+    grid-template-columns: 3fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    .display-toggle {
+      grid-column: 2/3;
+      grid-row: 1/3;
+    }
+    .zoom-toggle {
+      grid-column: 3/4;
+      grid-row: 1/3;
+    }
+  }
+
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
+  }
+
+  .on-fit {
+    .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));
+    }
+  }
+
+  .on-zoom {
+    .nation-scout-plate {
+      max-height: 200px;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+
+    .nation-scout-msg {
+      max-width: 870px;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/package.json b/package.json
index fa05d382..886ebbc7 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@coreui/vue": "^4.1.2",
     "@types/jquery": "^3.5.13",
     "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.18",