diff --git a/apps/renderer/src/components/ui/modal/helper/use-async-modal.tsx b/apps/renderer/src/components/ui/modal/helper/use-async-modal.tsx
index 83832380b..36c78a6f5 100644
--- a/apps/renderer/src/components/ui/modal/helper/use-async-modal.tsx
+++ b/apps/renderer/src/components/ui/modal/helper/use-async-modal.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import { useTypeScriptHappyCallback } from "@follow/hooks"
-import { useSingleton } from "foxact/use-singleton"
+import { useOnce, useTypeScriptHappyCallback } from "@follow/hooks"
 import type { FC } from "react"
 import { createContext, createElement, useContext } from "react"
 import { useEventCallback } from "usehooks-ts"
@@ -20,6 +19,7 @@ export type AsyncModalOptions<T> = {
 
   // Modal options
   overlay?: boolean
+  clickOutsideToDismiss?: boolean
 }
 const AsyncModalContext = createContext<AsyncModalOptions<any>>(null!)
 export const useAsyncModal = () => {
@@ -63,13 +63,14 @@ const Presentable: FC<{
   const { present, dismissTop } = useModalStack()
   const ctx = useContext(AsyncModalContext)
 
-  useSingleton(() => {
+  useOnce(() => {
     dismissTop()
     present({
       id: `presentable-${ctx.id}`,
       content: (props) => createElement(ctx.content, { data, ...props }),
       title: typeof ctx.title === "function" ? ctx.title(data) : ctx.title,
       icon: ctx.icon?.(data),
+      clickOutsideToDismiss: ctx.clickOutsideToDismiss,
     })
   })
   return null
diff --git a/apps/renderer/src/modules/boost/hooks.tsx b/apps/renderer/src/modules/boost/hooks.tsx
index fcf9f7cbd..5c40e8a30 100644
--- a/apps/renderer/src/modules/boost/hooks.tsx
+++ b/apps/renderer/src/modules/boost/hooks.tsx
@@ -24,6 +24,7 @@ export const useBoostModal = () => {
         content: () => <BoostModalContent feedId={feedId} />,
         overlay: true,
         useDataFetcher,
+        clickOutsideToDismiss: true,
       })
     },
     [present, t],
diff --git a/apps/renderer/src/modules/power/my-wallet-section/reward-description-modal.tsx b/apps/renderer/src/modules/power/my-wallet-section/reward-description-modal.tsx
index 64c7d4a7a..2086712fa 100644
--- a/apps/renderer/src/modules/power/my-wallet-section/reward-description-modal.tsx
+++ b/apps/renderer/src/modules/power/my-wallet-section/reward-description-modal.tsx
@@ -68,11 +68,7 @@ export const useRewardDescriptionModal = () => {
         </div>
       ),
       title: t("wallet.rewardDescription.title"),
-      overlay: true,
-      overlayOptions: {
-        blur: true,
-        className: "bg-black/80",
-      },
+
       clickOutsideToDismiss: true,
     })
   }, [serverConfigs, present, t])
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 2fe2e34b6..a6188977f 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -5,6 +5,7 @@ export * from "./useInputComposition"
 export * from "./useInterval"
 export * from "./useIsOnline"
 export * from "./useMeasure"
+export * from "./useOnce"
 export * from "./usePageVisibility"
 export * from "./usePrevious"
 export * from "./useRefValue"
diff --git a/packages/hooks/src/useOnce.ts b/packages/hooks/src/useOnce.ts
new file mode 100644
index 000000000..a4ecb245d
--- /dev/null
+++ b/packages/hooks/src/useOnce.ts
@@ -0,0 +1,8 @@
+import { useSingleton } from "foxact/use-singleton"
+
+export const useOnce = (fn: () => any) => {
+  useSingleton(async () => {
+    await fn()
+    return true
+  })
+}