diff --git a/hwe/ts/battle_simulator.ts b/hwe/ts/battle_simulator.ts
index 7e247bb8..4770988b 100644
--- a/hwe/ts/battle_simulator.ts
+++ b/hwe/ts/battle_simulator.ts
@@ -9,6 +9,7 @@ import { numberWithCommas } from "@util/numberWithCommas";
 import { unwrap_any } from '@util/unwrap_any';
 import { BasicGeneralListResponse, InvalidResponse } from '@/defs';
 import { formatTime } from '@util/formatTime';
+import { Modal } from 'bootstrap';
 
 type CityAttackerInfo = {
     level: number,
@@ -222,7 +223,7 @@ $(function ($) {
 
             const $modal = $('#importModal');
             $modal.data('target', $card);
-            $modal.modal('show');
+            new Modal($modal[0]).show();
         });
 
         $('.btn-general-save').on('click', function () {
@@ -959,7 +960,7 @@ $(function ($) {
             const $card = $modal.data('target');
             importGeneralInfo($card, data.general);
 
-            $modal.modal('hide');
+            new Modal($modal[0]).hide();
         }, errUnknown);
 
 
@@ -1008,7 +1009,7 @@ $(function ($) {
             }).then(function (data: BasicGeneralListResponse | InvalidResponse) {
                 if (!data.result) {
                     alert(data.reason);
-                    $('#importModal').modal('hide');
+                    new Modal(unwrap(document.querySelector('#importModal'))).hide();
                     return false;
                 }
 
diff --git a/hwe/ts/gateway/login.ts b/hwe/ts/gateway/login.ts
index b9ab39a6..3e01b8c8 100644
--- a/hwe/ts/gateway/login.ts
+++ b/hwe/ts/gateway/login.ts
@@ -54,7 +54,7 @@ declare global {
 declare const kakao_oauth_client_id: string;
 declare const kakao_oauth_redirect_uri: string;
 
-let modalOTP: Modal|undefined = undefined;
+let modalOTP: Modal | undefined = undefined;
 
 let oauthMode: string | null = null;
 
@@ -79,7 +79,7 @@ function getToken(): [number, string] | undefined {
     return token;
 }
 
-function resetToken(){
+function resetToken() {
     localStorage.removeItem(LOGIN_TOKEN_KEY);
 }
 
@@ -96,12 +96,12 @@ async function tryAutoLogin() {
             path: ["Login", "ReqNonce"]
         });
 
-        if(!result){
+        if (!result) {
             //api 에러.
             return;
         }
 
-        if(!result.data.result){
+        if (!result.data.result) {
             resetToken();
             return;
         }
@@ -112,31 +112,31 @@ async function tryAutoLogin() {
         const _loginResult = await axios.post<AutoLoginResponse>('api.php', {
             path: ["Login", "LoginByToken"],
             args: {
-                'hashedToken':hashedToken,
-                'token_id':tokenID,
+                'hashedToken': hashedToken,
+                'token_id': tokenID,
             }
         });
 
-        if(!_loginResult){
+        if (!_loginResult) {
             return;
         }
 
         const loginResult = _loginResult.data;
-        if(!loginResult.result){
-            if(!loginResult.silent){
+        if (!loginResult.result) {
+            if (!loginResult.silent) {
                 alert(loginResult.reason);
             }
             console.error(loginResult.reason);
             return;
         }
 
-        if(loginResult.nextToken){
+        if (loginResult.nextToken) {
             regNextToken(loginResult.nextToken);
         }
         window.location.href = "./";
 
     }
-    catch(e){
+    catch (e) {
         console.error(e);
         return;
     }
@@ -231,10 +231,12 @@ async function doLoginUsingOAuth() {
     }
 
     const modalEl = unwrap(document.querySelector('#modalOTP'))
-    modalOTP = new Modal(modalEl);
-    modalEl.addEventListener('shown.bs.modal', function(){
-        $('#otp_code').trigger('focus');
-    });
+    if (!modalOTP) {
+        modalOTP = new Modal(modalEl);
+        modalEl.addEventListener('shown.bs.modal', function () {
+            unwrap(document.querySelector<HTMLElement>('#otp_code')).focus();
+        });
+    }
     modalOTP.show();
 }
 
@@ -268,7 +270,7 @@ $(async function ($) {
     setAxiosXMLHttpRequest();
 
     //로그인 먼저 해볼 것
-    if(getToken()){
+    if (getToken()) {
         void tryAutoLogin();
         await delay(100);
     }
@@ -342,10 +344,14 @@ $(async function ($) {
             return;
         }
 
-        const $modal = $('#modalOTP').modal() as unknown as JQuery;
-        $modal.on('shown.bs.modal', function () {
-            $('#otp_code').trigger('focus');
-        });
+        const modalEl = unwrap(document.querySelector('#modalOTP'))
+        if (!modalOTP) {
+            modalOTP = new Modal(modalEl);
+            modalEl.addEventListener('shown.bs.modal', function () {
+                unwrap(document.querySelector<HTMLElement>('#otp_code')).focus();
+            });
+        }
+        modalOTP.show();
     });
 
     $('#otp_form').on('submit', async function (e) {
@@ -379,7 +385,7 @@ $(async function ($) {
         alert(result.reason);
 
         if (result.reset) {
-            if(modalOTP){
+            if (modalOTP) {
                 modalOTP.hide();
             }
             return;
diff --git a/hwe/ts/gateway/user_info.ts b/hwe/ts/gateway/user_info.ts
index 1e152266..7603f51e 100644
--- a/hwe/ts/gateway/user_info.ts
+++ b/hwe/ts/gateway/user_info.ts
@@ -10,6 +10,7 @@ import { unwrap } from '@util/unwrap';
 import { parseTime } from '@util/parseTime';
 import { formatTime } from '@util/formatTime';
 import '@/gateway/common';
+import { Modal } from 'bootstrap';
 
 type ResultUserInfo = {
     result: true,
@@ -128,14 +129,14 @@ function showAdjustServerModal(serverList: [string, string][]) {
         $form.append($item);
     }
 
-    const $modal = $('#chooseServer');
-    $modal.modal({
+    const modalEl = unwrap(document.querySelector('#chooseServer'));
+     new Modal(modalEl, {
         backdrop: 'static'
     });
-    $modal.on('hidden.bs.modal', function () {
+    modalEl.addEventListener('hidden.bs.modal', function () {
         location.reload();
         return;
-    });
+    })
 
     $("#modal-apply").off("click").on("click", async function () {
         const events: Promise<unknown>[] = [];