diff --git a/src/app/Globals.css b/src/app/Globals.css
index 346e519..6cc6297 100644
--- a/src/app/Globals.css
+++ b/src/app/Globals.css
@@ -147,7 +147,7 @@ body {
 }
 
 .close-button {
-  @apply flex justify-center items-center absolute bg-(--col3) hover:bg-(--col4) text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-lg left-2 top-2 transition-colors border border-(--col4) hover:border-(--col5);
+  @apply flex justify-center items-center absolute text-2xl text-gray-200 hover:text-white cursor-pointer h-12 w-12 p-3 rounded-lg left-2 top-2 transition-colors border;
 }
 
 *:focus {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 891fdca..d9d9e6a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -449,7 +449,7 @@ export default function RootLayout ({
                   >
                     <div className='popup-box'>
                       <button
-                        className='close-button'
+                        className='close-button btntheme1'
                         onClick={() => closePopup()}
                       >
                         <FontAwesomeIcon