diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
index cf24bcfbb..f4fc74b8c 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
@@ -1,8 +1,13 @@
+:export {
+  popupBackgroundColor: var(--theme-color-palette-7);
+}
+
 .contentbutton {
   background-color: transparent;
   border: none;
   text-align: left;
   cursor: pointer;
+  color: var(--theme-color-components-text-on-dark);
 }
 
 .closebutton {
@@ -13,10 +18,12 @@
   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..7f48138b8 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
@@ -70,6 +70,7 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
         title={title}
         content={content}
         overlayInnerStyle={popupStyle}
+        color={styles.popupBackgroundColor}
       >
         {children}
       </Popover>