diff --git a/service.js b/service.js
index 845a723..83e68b6 100644
--- a/service.js
+++ b/service.js
@@ -2786,11 +2786,14 @@ class BesPopup extends HTMLElement {
         .bes-close-btn svg {
           width: 100%;
           height: 100%;
-          fill: #333;
         }
+        :host{
+          --bes-close-icon: #485362;
+          --hover-bg-clr: #dee3ed;
+          }
         .bes-close-btn:hover {
-          background: #dee3ed;
-          border-radius: 8px
+          background: var(--hover-bg-clr);
+          border-radius: 4px
         }
         :host(.show) .bes-popup-container {
           visibility: visible;
@@ -2819,13 +2822,17 @@ class BesPopup extends HTMLElement {
             background-color: #111213;
             border: 1px solid #2e3036;
           }
+          :host{
+            --bes-close-icon: #a4b5c7;
+            --hover-bg-clr:rgba(189, 189, 189, 0.28);
+            }
         }
       </style>
       <div class="bes-popup-container">
         <div class="bes-toolbar">
           <div class="bes-popup-title">Besana</div>
           <button class="bes-close-btn" onclick="BesPopup.dismiss()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="var(--bes-close-icon)" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
           </button>
         </div>
       </div>