diff --git a/src/common/modal/index.jsx b/src/common/modal/index.jsx
index 1e78052f28..aa729c690f 100644
--- a/src/common/modal/index.jsx
+++ b/src/common/modal/index.jsx
@@ -14,7 +14,7 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
           { children }
         </div>
         <div className={`modal-${cname}-footer`}>
-          <button className="btn-default" onClick={ onClose }><GoX size="16px" /> Cancel</button>
+          <button className="btn-default-light" onClick={ onClose }><GoX size="16px" /> Cancel</button>
           { onSubmit && <button className="btn-primary" onClick={ onSubmit }><GoCheck size="16px" /> Apply</button> }
         </div>
      </div>
diff --git a/src/common/search/search.css b/src/common/search/search.css
index c331c24c2f..a6caee382a 100644
--- a/src/common/search/search.css
+++ b/src/common/search/search.css
@@ -200,7 +200,7 @@
   font-size: var(--fs-rg);
 }
 
-.btn-default {
+.btn-default-light {
   border: 0;
   display: inline-flex;
   align-items: center;
@@ -214,8 +214,8 @@
   transition: all 0.16s ease-in-out;
 }
 
-.btn-default:hover,
-.btn-default:focus {
+.btn-default-light:hover,
+.btn-default-light:focus {
   background-color: rgba(var(--color-neutral-90-rgb),0.2);
   color: var(--color-neutral-90);
 }