diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 4366c71..2bbeecc 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -239,6 +239,18 @@ input:read-only::-webkit-scrollbar-track {
 .layer-switch-list .dot-icon.color-brown{background:#A16B00;}
 .layer-switch-list .dot-icon.color-purple{background:#AB40FF;}
 .layer-switch-list .dot-icon.color-skyblue{background:#009cad;}
+.custom-control-red .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-red .custom-control-input:active ~ .custom-control-label::before{background-color:#FF3648;border-color:#FF3648;}
+.custom-control-pink .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-pink .custom-control-input:active ~ .custom-control-label::before{background-color:#FFA1AA;border-color:#FFA1AA;}
+.custom-control-orange .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-orange .custom-control-input:active ~ .custom-control-label::before{background-color:#FFA800;border-color:#FFA800;}
+.custom-control-brown .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-brown .custom-control-input:active ~ .custom-control-label::before{background-color:#A16B00;border-color:#A16B00;}
+.custom-control-purple .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-purple .custom-control-input:active ~ .custom-control-label::before{background-color:#AB40FF;border-color:#AB40FF;}
+.custom-control-skyblue .custom-control-input:checked ~ .custom-control-label::before,
+.custom-control-skyblue .custom-control-input:active ~ .custom-control-label::before{background-color:#009cad;border-color:#009cad;}
 .layer-switch-list svg{margin-right:8px;}
 .layer-switch-list .custom-switch .custom-control-label:after{top:2px;}
 .map-btn{border:1px solid #ddd;border-radius:0.358rem}
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index 60b1ef6..ea66ef1 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/src/views/control/setting/ControlSetting.js
@@ -85,7 +85,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0001')}
-                    className='custom-control-primary'
+                    className='custom-control-red'
                     type='switch'
                     id='test01'
                     name='test01'
@@ -101,7 +101,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0002')}
-                    className='custom-control-primary'
+                    className='custom-control-pink'
                     type='switch'
                     id='test02'
                     name='test02'
@@ -117,7 +117,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0003')}
-                    className='custom-control-primary'
+                    className='custom-control-orange'
                     type='switch'
                     id='test03'
                     name='test03'
@@ -133,7 +133,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0004')}
-                    className='custom-control-primary'
+                    className='custom-control-brown'
                     type='switch'
                     id='test04'
                     name='test04'
@@ -149,7 +149,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0005')}
-                    className='custom-control-primary'
+                    className='custom-control-purple'
                     type='switch'
                     id='test05'
                     name='test05'
@@ -166,7 +166,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('0006')}
-                    className='custom-control-primary'
+                    className='custom-control-skyblue'
                     type='switch'
                     id='test06'
                     name='test06'
@@ -194,7 +194,7 @@ const ControlSetting = props => {
                 <div className='list-right-txt'>
                   <CustomInput
                     onClick={e => handlerAreaClick('liner')}
-                    className='custom-control-primary'
+                    className='custom-control-skyblue'
                     type='switch'
                     id='test07'
                     name='test07'