diff --git a/hwe/css/common.css b/hwe/css/common.css
index f69d03c5..ad82078f 100644
--- a/hwe/css/common.css
+++ b/hwe/css/common.css
@@ -247,3 +247,11 @@ div.bar_out div.bar_in{
 .select2-dropdown.simple-select2-align-center li.select2-results__option{
     text-align: center;
 }
+
+.select2-container--bootstrap4 .select2-selection--single.text-secondary .select2-selection__rendered{
+    color:white;
+}
+
+.select2-container--bootstrap4 .text-secondary .select2-results__option[aria-selected=false]{
+    color:white;
+}
diff --git a/hwe/js/currentCity.js b/hwe/js/currentCity.js
index 33d8541b..68e7876e 100644
--- a/hwe/js/currentCity.js
+++ b/hwe/js/currentCity.js
@@ -5,10 +5,11 @@ $(function() {
         allowClear: false,
         language: "ko",
         containerCss: {
-            display: "inline-block !important"
+            display: "inline-block !important",
+            color: 'white !important'
         },
-        containerCssClass: 'simple-select2-align-center',
-        dropdownCssClass: 'simple-select2-align-center',
+        containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
     });
     $('#citySelector').on('select2:select', function(e){
         var data = e.params.data;