diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
index cf24bcfbb..4fa573a5e 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
@@ -3,6 +3,7 @@
   border: none;
   text-align: left;
   cursor: pointer;
+  color: var(--theme-color-components-text-on-dark);
 }
 
 .closebutton {
@@ -13,10 +14,13 @@
   border: none;
   font-size: 1.3rem;
   cursor: pointer;
+  color: var(--theme-color-components-text-on-dark);
 }
 
 .title {
   border-bottom: none;
   font-weight: bold;
   padding-left: 5px;
+  color: var(--theme-color-components-text-on-dark);
 }
+
diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
index e1a02364b..e78a09520 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
@@ -35,6 +35,9 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
     paddingRight: '10px',
     fontSize: '16px',
   };
+  const bgColor = getComputedStyle(document.documentElement).getPropertyValue(
+    '--theme-color-palette-7',
+  );
 
   const popupClicked = e => {
     e.stopPropagation();
@@ -70,6 +73,7 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
         title={title}
         content={content}
         overlayInnerStyle={popupStyle}
+        color={bgColor}
       >
         {children}
       </Popover>