diff --git a/src/components/ui/float-popover/FloatPopover.tsx b/src/components/ui/float-popover/FloatPopover.tsx
index 7947297809..97c85e871f 100644
--- a/src/components/ui/float-popover/FloatPopover.tsx
+++ b/src/components/ui/float-popover/FloatPopover.tsx
@@ -234,7 +234,8 @@ export const FloatPopover: FC<
                 aria-modal="true"
                 className={clsxm(
                   '!shadow-out-sm focus:!shadow-out-sm focus-visible:!shadow-out-sm',
-                  'bg-base-100/98 rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
+                  'rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
+                  'bg-slate-50/80 dark:bg-neutral-900/80',
 
                   headless && styles['headless'],
                   animate && styles['animate'],
diff --git a/src/components/widgets/xlog/XLogInfo.tsx b/src/components/widgets/xlog/XLogInfo.tsx
index 7f629d81a6..3f278ce6c3 100644
--- a/src/components/widgets/xlog/XLogInfo.tsx
+++ b/src/components/widgets/xlog/XLogInfo.tsx
@@ -94,7 +94,10 @@ const XLogInfoBase: FC<{
       <div
         role="button"
         tabIndex={0}
-        className="-mx-2 flex w-[100%+0.5rem] items-center justify-between rounded-lg p-2 text-left transition-colors duration-300 hover:bg-zinc-100 dark:hover:bg-slate-800 md:rounded-xl"
+        className={clsx(
+          '-mx-2 flex w-[100%+0.5rem] items-center justify-between rounded-lg p-2 text-left transition-colors duration-300 md:rounded-xl',
+          'hover:bg-zinc-100 dark:hover:bg-neutral-800',
+        )}
         onClick={() => {
           setCollapse((c) => !c)
         }}