diff --git a/hwe/scss/bootstrap.scss b/hwe/scss/bootstrap.scss
new file mode 100644
index 00000000..4f17c13b
--- /dev/null
+++ b/hwe/scss/bootstrap.scss
@@ -0,0 +1,16 @@
+@import "./common/pretendard.scss";
+
+$body-bg:  #000;
+
+$input-bg: #ddd;
+$input-color: #303030;
+
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
+
+@import "./common/break_500px.scss";
+@import "./common/variables.scss";
+@import "./common/bootswatch_custom_variables.scss";
+@import "bootstrap/scss/bootstrap.scss";
+@import "./common/bootswatch_custom.scss";
+@import "./common/bootstrap_sammo.scss";
+@import "./common/vue-multiselect.scss";
diff --git a/hwe/scss/common/bootswatch_custom.scss b/hwe/scss/common/bootswatch_custom.scss
index ba6a64e8..faadcf21 100644
--- a/hwe/scss/common/bootswatch_custom.scss
+++ b/hwe/scss/common/bootswatch_custom.scss
@@ -1,4 +1,4 @@
-// Lumen 5.1.3
+// Lumen 5.2.0
 // Bootswatch
 
 
@@ -88,7 +88,6 @@
 
 // Forms
 
-
 .form-control {
   box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
 }
@@ -120,8 +119,8 @@
     &:not(.disabled):focus,
     &.active {
       padding-bottom: add(.5rem, 6px);
-      border-bottom-color: transparent;
       margin-top: 0;
+      border-bottom-color: transparent;
     }
   }
 
@@ -154,16 +153,16 @@
   > li > span {
     position: relative;
     top: 0;
-    @include shadow();
-    color: $pagination-color;
     font-weight: 700;
+    color: $pagination-color;
     text-transform: uppercase;
+    @include shadow();
 
     &:hover,
     &:focus {
       top: 1px;
-      border-bottom-width: 3px;
       text-decoration: none;
+      border-bottom-width: 3px;
     }
 
     &:active {
@@ -194,8 +193,8 @@
     &,
     &:hover,
     &:active {
-      border-left-width: 2px;
       border-right-width: 2px;
+      border-left-width: 2px;
     }
   }
 }
@@ -317,8 +316,9 @@ a.list-group-item {
 }
 
 .modal,
-.toast {
+.toast,
+.offcanvas {
   .btn-close {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
   }
 }
diff --git a/webpack.config.cjs b/webpack.config.cjs
index 30344ea2..ae6fa800 100644
--- a/webpack.config.cjs
+++ b/webpack.config.cjs
@@ -12,6 +12,7 @@ module.exports = (env, argv) => {
     const target = (rawTarget == 'gateway') ? 'hwe' : rawTarget;
     const mode = argv.mode ?? 'production';
     const tsDir = resolve(__dirname, `${target}/ts/`);
+    const scssDir = resolve(__dirname, `${target}/scss/`);
     const build_exports = require(`${tsDir}/build_exports.json`);
 
     const versionGitPath = resolve(__dirname, target, 'd_setting', 'VersionGit.json');
@@ -59,6 +60,7 @@ module.exports = (env, argv) => {
     for (const [entry, filePath] of Object.entries(build_exports.ingame) ?? []) {
         entryIngame[entry] = `${tsDir}/${filePath}`;
     }
+    entryIngameVue['bootstrap'] = `${scssDir}/bootstrap.scss`;
     const cacheDirectory = path.resolve(__dirname, 'node_modules/.cache/webpack');
 
     const devtool = mode != 'production' ? 'eval-source-map' : (env.WEBPACK_WATCH ? 'source-map' : undefined);