diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index d9300d2ec2..42b8b1c75e 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -303,6 +303,19 @@ header {
           color: themed("headerInputPlaceholderColor");
         }
       }
+      /** make the cancel button visible in both dark/light themes **/
+      &[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 15px;
+        width: 15px;
+        background-repeat: no-repeat;
+        mask-image: url("../images/close-button-white.svg");
+        -webkit-mask-image: url("../images/close-button-white.svg");
+        @include themify($themes) {
+          background-color: themed("headerInputColor");
+        }
+      }
     }
   }
 
@@ -450,19 +463,6 @@ main {
   main {
     bottom: 55px;
   }
-
-  [type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 15px;
-    width: 15px;
-    background-repeat: no-repeat;
-    mask-image: url("../images/close-button-white.svg");
-    -webkit-mask-image: url("../images/close-button-white.svg");
-    @include themify($themes) {
-      background-color: themed("headerInputColor");
-    }
-  }
 }
 
 .center-content,