diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
index bad1f6694..f0528ed2c 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
@@ -13,13 +13,8 @@ import Surprises from "../Surprises"
 
 import styles from "./current.module.css"
 
-type CurrentRewardsClientProps = {
-  initialCurrentRewards: {
-    rewards: Reward[]
-    apiRewards: ApiReward[]
-    nextCursor: number | undefined
-  }
-}
+import type { CurrentRewardsClientProps } from "@/types/components/blocks/currentRewards"
+
 export default function ClientCurrentRewards({
   initialCurrentRewards,
 }: CurrentRewardsClientProps) {
diff --git a/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx b/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
index 486b0423b..917b835f5 100644
--- a/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 
 import { benefits } from "@/constants/routes/myPages"
 import { trpc } from "@/lib/trpc/client"
-import { ApiReward } from "@/server/routers/contentstack/reward/output"
 
 import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel"
@@ -20,9 +20,7 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./surprises.module.css"
 
-interface SurprisesProps {
-  surprises: ApiReward[]
-}
+import type { SurprisesProps } from "@/types/components/blocks/surprises"
 
 export default function Surprises({ surprises }: SurprisesProps) {
   const lang = useLang()
@@ -32,17 +30,38 @@ export default function Surprises({ surprises }: SurprisesProps) {
   const update = trpc.contentstack.rewards.update.useMutation()
   const intl = useIntl()
 
-  if (!surprises.length) return null
+  if (!surprises.length) {
+    return null
+  }
 
   function showSurprise(n: number) {
     setSelectedSurprise((surprise) => surprise + n)
   }
 
   function viewRewards(id?: string) {
-    if (!id) return
+    if (!id) {
+      return
+    }
     update.mutate({ id })
   }
 
+  function closeModal(close: VoidFunction) {
+    viewRewards()
+    toast.success(
+      <>
+        {intl.formatMessage(
+          { id: "Gift(s) added to your benefits" },
+          { amount: surprises.length }
+        )}
+        <br />
+        <Link href={benefits[lang]}>
+          {intl.formatMessage({ id: "Go to My Benefits" })}
+        </Link>
+      </>
+    )
+    close()
+  }
+
   const surprise = surprises[selectedSurprise]
 
   return (
@@ -69,22 +88,7 @@ export default function Surprises({ surprises }: SurprisesProps) {
                     </CaptionLabel>
                   )}
                   <button
-                    onClick={() => {
-                      viewRewards()
-                      toast.success(
-                        <>
-                          {intl.formatMessage(
-                            { id: "Gift(s) added to your benefits" },
-                            { amount: surprises.length }
-                          )}
-                          <br />
-                          <a href={benefits[lang]}>
-                            {intl.formatMessage({ id: "Go to My Benefits" })}
-                          </a>
-                        </>
-                      )
-                      close()
-                    }}
+                    onClick={() => closeModal(close)}
                     type="button"
                     className={styles.close}
                   >
@@ -113,7 +117,7 @@ export default function Surprises({ surprises }: SurprisesProps) {
                             variant="icon"
                             intent="tertiary"
                             disabled={selectedSurprise === 0}
-                            onClick={() => showSurprise(-1)}
+                            onPress={() => showSurprise(-1)}
                             size="small"
                           >
                             <ChevronRightSmallIcon
@@ -128,7 +132,7 @@ export default function Surprises({ surprises }: SurprisesProps) {
                             variant="icon"
                             intent="tertiary"
                             disabled={selectedSurprise === surprises.length - 1}
-                            onClick={() => showSurprise(1)}
+                            onPress={() => showSurprise(1)}
                             size="small"
                           >
                             {intl.formatMessage({ id: "Next" })}
diff --git a/types/components/blocks/currentRewards.ts b/types/components/blocks/currentRewards.ts
new file mode 100644
index 000000000..f596647a9
--- /dev/null
+++ b/types/components/blocks/currentRewards.ts
@@ -0,0 +1,9 @@
+import { ApiReward, Reward } from "@/server/routers/contentstack/reward/output"
+
+export type CurrentRewardsClientProps = {
+  initialCurrentRewards: {
+    rewards: Reward[]
+    apiRewards: ApiReward[]
+    nextCursor: number | undefined
+  }
+}
diff --git a/types/components/blocks/surprises.ts b/types/components/blocks/surprises.ts
new file mode 100644
index 000000000..ff23d595e
--- /dev/null
+++ b/types/components/blocks/surprises.ts
@@ -0,0 +1,5 @@
+import { ApiReward } from "@/server/routers/contentstack/reward/output"
+
+export interface SurprisesProps {
+  surprises: ApiReward[]
+}