diff --git a/hwe/scss/common/bootstrap5.scss b/hwe/scss/common/bootstrap5.scss
index 2e82bee2..03b4fa42 100644
--- a/hwe/scss/common/bootstrap5.scss
+++ b/hwe/scss/common/bootstrap5.scss
@@ -7,6 +7,7 @@ $input-color: #303030;
 
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
 
+@import "./break_500px.scss";
 @import "./variables.scss";
 @import "./bootswatch_custom_variables.scss";
 @import "bootstrap/scss/bootstrap.scss";
diff --git a/hwe/scss/common/break_500px.scss b/hwe/scss/common/break_500px.scss
index 5279b63a..7f85be0a 100644
--- a/hwe/scss/common/break_500px.scss
+++ b/hwe/scss/common/break_500px.scss
@@ -12,4 +12,16 @@ $grid-breakpoints: (
   lg: 992px,
   xl: 1200px,
   xxl: 1400px
-);
\ No newline at end of file
+);
+
+@mixin media-1000px{
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
+    @content;
+  }
+}
+
+@mixin media-500px{
+  @media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/hwe/scss/main.scss b/hwe/scss/main.scss
index 71925dc9..da6c9cc6 100644
--- a/hwe/scss/main.scss
+++ b/hwe/scss/main.scss
@@ -1,6 +1,6 @@
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./editor_component.scss";
+@import "./util.scss";
 body {
     color: white;
     background-color: black;
@@ -10,14 +10,14 @@ body {
     background-repeat: repeat-y;
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #container {
         width: 1000px;
         margin: 0 auto;
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     body {
         overflow-x: hidden;
     }
@@ -120,7 +120,7 @@ body {
     text-overflow: ellipsis;
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #map_view {
         grid-template-columns: 500px 200px 300px;
         grid-template-rows: 520px 130px;
@@ -220,7 +220,7 @@ body {
     overflow: hidden;
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     .buttonPlate {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
@@ -396,7 +396,7 @@ body {
 
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #message_board section {
         overflow-y: auto;
         overflow-x: hidden;
@@ -412,7 +412,7 @@ body {
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
 
     #message_board .message_input_form {
         position: -webkit-sticky;
@@ -537,7 +537,7 @@ body {
 }
 
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     #mailbox_list-col {
         order: 1;
     }
@@ -588,13 +588,13 @@ body {
 }
 
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #float-tabs {
         display: none;
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     #float-tabs {
         position: fixed;
         right: -1rem;
@@ -629,17 +629,3 @@ body {
         }
     }
 }
-
-
-.s-border-t {
-    border-top: gray solid 1px;
-}
-
-.s-border-b {
-    border-bottom: gray solid 1px;
-}
-
-.s-border-tb {
-    border-top: gray solid 1px;
-    border-bottom: gray solid 1px;
-}
\ No newline at end of file
diff --git a/hwe/scss/myPage.scss b/hwe/scss/myPage.scss
index 211f9050..78b17b45 100644
--- a/hwe/scss/myPage.scss
+++ b/hwe/scss/myPage.scss
@@ -1,9 +1,7 @@
-
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./common_legacy.scss";
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
     #container {
         width: 1000px;
         margin: 0 auto;
@@ -17,10 +15,7 @@
 
     }
 }
-
-
-
-@include media-breakpoint-down(md) {
+@include media-500px{
     body {
         overflow-x: hidden;
     }
diff --git a/hwe/scss/processing.scss b/hwe/scss/processing.scss
index e61818f1..78fe2339 100644
--- a/hwe/scss/processing.scss
+++ b/hwe/scss/processing.scss
@@ -1,7 +1,7 @@
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./editor_component.scss";
 @import "./common_legacy.scss";
+@import "./util.scss";
 
 #amount {
     width: 100px;
@@ -16,15 +16,14 @@
 }
 
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
     #container {
         width: 1000px;
         margin: 0 auto;
     }
 }
 
-
-@include media-breakpoint-down(md) {
+@include media-500px{
     body {
         overflow-x: hidden;
     }
diff --git a/hwe/scss/util.scss b/hwe/scss/util.scss
new file mode 100644
index 00000000..eb044ae3
--- /dev/null
+++ b/hwe/scss/util.scss
@@ -0,0 +1,14 @@
+
+
+.s-border-t {
+    border-top: gray solid 1px;
+}
+
+.s-border-b {
+    border-bottom: gray solid 1px;
+}
+
+.s-border-tb {
+    border-top: gray solid 1px;
+    border-bottom: gray solid 1px;
+}
\ No newline at end of file
diff --git a/hwe/ts/PartialReservedCommand.vue b/hwe/ts/PartialReservedCommand.vue
index 2016de00..a62b4aa2 100644
--- a/hwe/ts/PartialReservedCommand.vue
+++ b/hwe/ts/PartialReservedCommand.vue
@@ -548,7 +548,6 @@ export default defineComponent({
 @import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
-@import "bootstrap/scss/bootstrap-utilities.scss";
 
 .commandPad {
   background-color: $gray-900;
@@ -561,7 +560,7 @@ export default defineComponent({
   //30, 70, 37.65, 160
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
   .commandPad {
     margin-left: 10px;
 
@@ -583,7 +582,7 @@ export default defineComponent({
   }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
   .dropdown-item {
     padding: 8px;
   }
diff --git a/hwe/ts/processing/GeneralSelect.vue b/hwe/ts/processing/GeneralSelect.vue
index 200475e9..fc534651 100644
--- a/hwe/ts/processing/GeneralSelect.vue
+++ b/hwe/ts/processing/GeneralSelect.vue
@@ -160,6 +160,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
 @import "bootstrap/scss/bootstrap-utilities.scss";