diff --git a/hwe/ts/Join.vue b/hwe/ts/Join.vue
index b4984534..b04d1863 100644
--- a/hwe/ts/Join.vue
+++ b/hwe/ts/Join.vue
@@ -106,17 +106,17 @@
           능력치 조절
         </div>
         <div class="col col-md-8 col-9">
-          <CButton color="secondary" class="stat-btn" @click="randStatRandom"
-            >랜덤형</CButton
+          <b-button variant="secondary" class="stat-btn" @click="randStatRandom"
+            >랜덤형</b-button
           >
-          <CButton color="secondary" class="stat-btn" @click="randStatLeadPow"
-            >통솔무력형</CButton
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadPow"
+            >통솔무력형</b-button
           >
-          <CButton color="secondary" class="stat-btn" @click="randStatLeadInt"
-            >통솔지력형</CButton
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadInt"
+            >통솔지력형</b-button
           >
-          <CButton color="secondary" class="stat-btn" @click="randStatPowInt"
-            >무력지력형</CButton
+          <b-button variant="secondary" class="stat-btn" @click="randStatPowInt"
+            >무력지력형</b-button
           >
         </div>
       </div>
@@ -260,8 +260,8 @@
 
     <div class="row" style="border-top: solid 1px #aaa">
       <div class="col a-center" style="margin: 0.5em">
-        <CButton color="primary" @click="submitForm">장수 생성</CButton
-        >&nbsp;<CButton color="secondary" @click="resetArgs">다시 입력</CButton>
+        <b-button color="primary" @click="submitForm">장수 생성</b-button
+        >&nbsp;<b-button color="secondary" @click="resetArgs">다시 입력</b-button>
       </div>
     </div>
   </div>
@@ -273,7 +273,6 @@ import "../scss/game_bg.scss";
 import { defineComponent } from "vue";
 import TopBackBar from "./components/TopBackBar.vue";
 import {
-  CButton,
   CTable,
   CTableBody,
   CTableRow,
@@ -366,7 +365,6 @@ export default defineComponent({
   name: "Join",
   components: {
     TopBackBar,
-    CButton,
     CTable,
     CTableBody,
     CTableRow,
diff --git a/hwe/ts/NPCControl.vue b/hwe/ts/NPCControl.vue
index 5350a017..57198e2f 100644
--- a/hwe/ts/NPCControl.vue
+++ b/hwe/ts/NPCControl.vue
@@ -298,9 +298,8 @@
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
                     }}<button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-c-tooltip="actionHelpText[element.id]"
+                      v-b-tooltip.hover :title="actionHelpText[element.id]"
                     >
-                      <!-- FIXME: v-c-tooltip 동작이 조금 묘하다. 버전 문제인가? -->
                       <i class="bi bi-question-lg"></i>
                     </button>
                   </div>
@@ -320,7 +319,7 @@
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
                     }}<button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-c-tooltip="actionHelpText[element.id]"
+                      v-b-tooltip.hover :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -391,7 +390,7 @@
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
                     }}<button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-c-tooltip="actionHelpText[element.id]"
+                      v-b-tooltip.hover :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -412,7 +411,7 @@
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
                     }}<button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-c-tooltip="actionHelpText[element.id]"
+                      v-b-tooltip.hover :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -470,7 +469,6 @@ import { unwrap } from "./util/unwrap";
 import { convertFormData } from "./util/convertFormData";
 import axios from "axios";
 import { NPCPriorityBtnHelpMessage } from "./helpTexts";
-import { CTooltip } from "@coreui/vue/src/directives/CTooltip";
 import draggable from "vuedraggable";
 import MyToast from "./components/MyToast.vue";
 import TopBackBar from "./components/TopBackBar.vue";
@@ -512,9 +510,6 @@ export default defineComponent({
     draggable,
     MyToast,
   },
-  directives: {
-    "c-tooltip": CTooltip,
-  },
   methods: {
     resetPolicy() {
       if (!confirm("초기 설정으로 되돌릴까요?")) {
diff --git a/hwe/ts/v_NPCControl.ts b/hwe/ts/v_NPCControl.ts
index 000b4d58..c9b96518 100644
--- a/hwe/ts/v_NPCControl.ts
+++ b/hwe/ts/v_NPCControl.ts
@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
 import NPCControl from './NPCControl.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import "../scss/bootstrap5.scss";
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
 
 setAxiosXMLHttpRequest();
-createApp(NPCControl).mount('#app')
\ No newline at end of file
+createApp(NPCControl).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_board.ts b/hwe/ts/v_board.ts
index cc70dc00..a0ae7a1a 100644
--- a/hwe/ts/v_board.ts
+++ b/hwe/ts/v_board.ts
@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import Board from './Board.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import "../scss/bootstrap5.scss";
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
 
 declare const isSecretBoard: boolean;
@@ -8,4 +11,4 @@ declare const isSecretBoard: boolean;
 setAxiosXMLHttpRequest();
 createApp(Board, {
     isSecretBoard
-}).mount('#app')
\ No newline at end of file
+}).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_inheritPoint.ts b/hwe/ts/v_inheritPoint.ts
index 8fcab56a..cb8e5cf9 100644
--- a/hwe/ts/v_inheritPoint.ts
+++ b/hwe/ts/v_inheritPoint.ts
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import InheritPoint from './inheritPoint.vue';
-
-createApp(InheritPoint).mount('#app')
\ No newline at end of file
+import BootstrapVue3 from 'bootstrap-vue-3'
+import "../scss/bootstrap5.scss";
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+createApp(InheritPoint).use(BootstrapVue3).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_join.ts b/hwe/ts/v_join.ts
index 7cbc524c..9b9c88b6 100644
--- a/hwe/ts/v_join.ts
+++ b/hwe/ts/v_join.ts
@@ -1,4 +1,7 @@
 import { createApp } from 'vue'
 import Join from './Join.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import "../scss/bootstrap5.scss";
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 
-createApp(Join).mount('#app')
\ No newline at end of file
+createApp(Join).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/package.json b/package.json
index f5626f79..7f06e9b9 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@coreui/vue": "^4.0.0-beta.2",
     "@types/downloadjs": "^1.4.2",
     "@types/linkifyjs": "^2.1.4",
     "@types/select2": "^4.0.54",
@@ -48,6 +47,7 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-typescript": "^7.15.0",
+    "@coreui/vue": "^4.0.0-beta.2",
     "@types/bootstrap": "^5.1.4",
     "@types/jquery": "^3.5.6",
     "@types/lodash": "^4.14.172",
@@ -59,6 +59,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
+    "bootstrap-vue-3": "^0.0.3",
     "bootswatch": "^5.1.1",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.2.0",
@@ -90,4 +91,4 @@
     "not op_mini all",
     "not ie <= 11"
   ]
-}
\ No newline at end of file
+}