diff --git a/.vscode/settings.json b/.vscode/settings.json
index df0e4db..c156790 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,8 +16,11 @@
     "lucide",
     "nocheck",
     "pino",
+    "pngs",
     "rawcwe",
     "smartimation",
+    "splide",
+    "splidejs",
     "tailwindcss",
     "Typecheck",
     "UNSUB",
diff --git a/package-lock.json b/package-lock.json
index b8af766..86a4c2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.6",
       "devDependencies": {
         "@crxjs/vite-plugin": "2.0.0-beta.23",
+        "@splidejs/svelte-splide": "^0.2.9",
         "@sveltejs/vite-plugin-svelte": "^3.1.0",
         "@total-typescript/ts-reset": "^0.5.1",
         "@tsconfig/svelte": "5.0.4",
@@ -22,6 +23,7 @@
         "csv-iter-parse": "^0.1.3",
         "daisyui": "^4.10.2",
         "detect-browser": "^5.3.0",
+        "fast-shuffle": "^6.1.0",
         "lucide-svelte": "^0.373.0",
         "pino": "^9.0.0",
         "pino-pretty": "^11.0.0",
@@ -31,6 +33,7 @@
         "qs": "^6.12.1",
         "svelte": "^4.2.15",
         "svelte-check": "3.6.9",
+        "svelte-confetti": "^1.4.0",
         "svelte-french-toast": "^1.2.0",
         "svelte-preprocess": "5.1.4",
         "tailwind-modern-scroll": "^0.0.7",
@@ -789,6 +792,21 @@
         "win32"
       ]
     },
+    "node_modules/@splidejs/splide": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz",
+      "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==",
+      "dev": true
+    },
+    "node_modules/@splidejs/svelte-splide": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@splidejs/svelte-splide/-/svelte-splide-0.2.9.tgz",
+      "integrity": "sha512-04ekJnDIJKEAhklKQMhkg4Yx0Ihtkk18eA9JeHPON0lDTngQxlOYdEYTJWH2UON45VxmVqoLHv04I++JphO36w==",
+      "dev": true,
+      "dependencies": {
+        "@splidejs/splide": "^4.1.3"
+      }
+    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.0.tgz",
@@ -1909,6 +1927,15 @@
       "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
       "dev": true
     },
+    "node_modules/fast-shuffle": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/fast-shuffle/-/fast-shuffle-6.1.0.tgz",
+      "integrity": "sha512-3aj8oO6bvZFKYDGvXNmmEuxyOjre8trCpIbtFSM/DSKd+o3iSbQQPb5BZQeJ7SPYVivn9EeW3gKh0QdnD027MQ==",
+      "dev": true,
+      "dependencies": {
+        "pcg": "1.0.0"
+      }
+    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -2404,6 +2431,12 @@
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
       "dev": true
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==",
+      "dev": true
+    },
     "node_modules/lru-cache": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
@@ -2742,6 +2775,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/pcg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pcg/-/pcg-1.0.0.tgz",
+      "integrity": "sha512-6wjoSJZ4TEJhI0rLDOKd5mOu6TwS4svn9oBaRsD1PCrhlDNLWAaTimWJgBABmIGJxzkI+RbaHJYRLGVf9QFE5Q==",
+      "dev": true,
+      "dependencies": {
+        "long": "5.2.3",
+        "ramda": "0.29.0"
+      }
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -3181,6 +3224,16 @@
       "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
       "dev": true
     },
+    "node_modules/ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz",
@@ -3772,6 +3825,15 @@
         "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
       }
     },
+    "node_modules/svelte-confetti": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.4.0.tgz",
+      "integrity": "sha512-B0woNwpsFGwhkEoP48BIDQgvW0bMxPhavLVD+E+tsTWevlpr1aiz1S2wA8ArIXX957BiaZWHRHKmI5/pFRDbdg==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^4.0.0"
+      }
+    },
     "node_modules/svelte-french-toast": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
diff --git a/package.json b/package.json
index b939b4e..677225e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.23",
+    "@splidejs/svelte-splide": "^0.2.9",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@tsconfig/svelte": "5.0.4",
@@ -35,6 +36,7 @@
     "qs": "^6.12.1",
     "svelte": "^4.2.15",
     "svelte-check": "3.6.9",
+    "svelte-confetti": "^1.4.0",
     "svelte-french-toast": "^1.2.0",
     "svelte-preprocess": "5.1.4",
     "tailwind-modern-scroll": "^0.0.7",
diff --git a/src/components/Done.svelte b/src/components/Done.svelte
new file mode 100644
index 0000000..c38d5bd
--- /dev/null
+++ b/src/components/Done.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { blur } from "svelte/transition";
+  import Confetti from "svelte-confetti";
+  import SliderTips from "./tips/Slider_Tips.svelte";
+  import { XIcon } from "lucide-svelte";
+
+  let open = true;
+</script>
+
+{#if open}
+  <div
+    style="
+position: fixed;
+top: -50px;
+left: 0;
+height: 100vh;
+width: 100vw;
+display: flex;
+justify-content: center;
+overflow: hidden;
+pointer-events: none;
+z-index: 1000;
+"
+  >
+    <Confetti
+      x={[-5, 5]}
+      y={[0, 0.1]}
+      delay={[0, 1000]}
+      duration={3000}
+      amount={1000}
+      fallDistance="100vh"
+    />
+  </div>
+  <div
+    transition:blur
+    class="backdrop-blur-[2px] absolute w-full h-full z-10 rounded-md"
+  >
+    <div
+      class="flex justify-center items-center h-full w-full flex-col gap-1 -mt-4"
+    >
+      <div class="flex justify-end w-full">
+        <button on:click={() => (open = false)} class="btn btn-sm btn-circle"
+          ><XIcon class="w-4 h-4" /></button
+        >
+      </div>
+      <SliderTips />
+    </div>
+  </div>
+{/if}
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index f5369ac..9767ee4 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -5,6 +5,7 @@
   import GithubMarkWhite from "src/assets/icons/github-mark-white.png";
   import { docs } from "src/utils/docs";
   import ExternalLink from "./External_Link.svelte";
+    import { BMC_LINK } from "src/utils/constants";
 </script>
 
 <div class="my-2 gap-2 flex justify-center items-center mb-3">
@@ -28,7 +29,7 @@
       class="btn btn-xs normal-case"
       target="_blank"
       rel="noreferrer"
-      href="https://www.buymeacoffee.com/biplobsd"
+      href={BMC_LINK}
     >
       <CoffeeIcon />
       Buy me a coffee</a
diff --git a/src/components/Main.svelte b/src/components/Main.svelte
index e20067f..91341ec 100644
--- a/src/components/Main.svelte
+++ b/src/components/Main.svelte
@@ -29,7 +29,7 @@
       >About
     </button>
   </div>
-  <div class="my-2 w-full">
+  <div class="my-2 w-full relative">
     {#if tabName === "Home"}
       <div in:blur out:slide>
         {#if $workingModeWritable === "xpath"}
diff --git a/src/components/icons/Coffee_Icon.svelte b/src/components/icons/Coffee_Icon.svelte
index 2c2857f..a196b34 100644
--- a/src/components/icons/Coffee_Icon.svelte
+++ b/src/components/icons/Coffee_Icon.svelte
@@ -1,6 +1,11 @@
+<script lang="ts">
+  export let width: string = "15px";
+  export let height: string = "15px";
+</script>
+
 <svg
-  width="15px"
-  height="15px"
+  {width}
+  {height}
   viewBox="0 0 884 1279"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/pages/Home.svelte b/src/components/pages/Home.svelte
index 1d81056..c845ecc 100644
--- a/src/components/pages/Home.svelte
+++ b/src/components/pages/Home.svelte
@@ -18,6 +18,7 @@
   import { docs } from "src/utils/docs";
   import { ExternalLinkIcon, CopyIcon } from "lucide-svelte";
   import { channelIDsSchema } from "src/utils/schema";
+  import Done from "../Done.svelte";
 
   let lastStatusData: RuntimeMessage | undefined = undefined;
   let isRunning = true;
@@ -413,8 +414,12 @@
   });
 </script>
 
+{#if status.msg === "Done"}
+  <Done />
+{/if}
+
 {#if isRightSiteNow}
-  <div class="space-y-2">
+  <div class="space-y-2 relative">
     <div class="font-bold flex gap-1 items-center">
       Data <DocsLink href={docs.dataSection} />
     </div>
diff --git a/src/components/tips/Item.svelte b/src/components/tips/Item.svelte
new file mode 100644
index 0000000..3d7b41c
--- /dev/null
+++ b/src/components/tips/Item.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let text: string;
+  export let href: string;
+</script>
+
+<a
+target="_blank"
+rel="noreferrer"
+{href}
+  class="mx-1 flex justify-center flex-row h-32 w-[16.3rem] btn gap-3 p-3 btn-info"
+>
+  <slot />
+  <div class="text-center space-y-2">
+    <p>
+      {text}
+    </p>
+  </div>
+</a>
diff --git a/src/components/tips/Slider_Tips.svelte b/src/components/tips/Slider_Tips.svelte
new file mode 100644
index 0000000..abfe6a2
--- /dev/null
+++ b/src/components/tips/Slider_Tips.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import "@splidejs/svelte-splide/css";
+  import { Splide, SplideSlide } from "@splidejs/svelte-splide";
+  import Item from "./Item.svelte";
+  import CoffeeIcon from "src/components/icons/Coffee_Icon.svelte";
+    import { StarIcon } from "lucide-svelte";
+    import { BMC_LINK, STORE_LINK } from "src/utils/constants";
+
+</script>
+
+<Splide
+  class="h-40 w-[18.3rem] px-2"
+  options={{
+    type: "loop",
+    autoplay: true,
+    arrows: false,
+  }}
+  aria-label="Tips"
+>
+<SplideSlide>
+  <Item href={BMC_LINK} text={"If you enjoy this extension, consider buying me a coffee."}>
+    <div class="animate-bounce">
+    <CoffeeIcon width="40px" height="40px" />
+    </div>
+    </Item>
+</SplideSlide>
+<SplideSlide>
+  <Item href={STORE_LINK} text={"Give 5 star review if you like this extension."} >
+    <div class="flex gap-2">
+      <StarIcon class="h-5 w-5 animate-[bounce_1s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.8s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.6s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.4s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.6s_ease-in-out_infinite]" />
+    </div>
+    </Item>
+</SplideSlide>
+</Splide>
diff --git a/src/content/client.ts b/src/content/client.ts
index 938001f..bdc8f92 100644
--- a/src/content/client.ts
+++ b/src/content/client.ts
@@ -271,7 +271,7 @@ export async function readySignalSend() {
   await runtime.send({
     to: "option",
     status: {
-      msg: "Ready for accept request?",
+      msg: "Ready for accept request...",
       code: "ready",
     },
   });
@@ -281,7 +281,7 @@ async function acceptSignalSend() {
   await runtime.send({
     to: "option",
     status: {
-      msg: "Accepting request...",
+      msg: "Ready for accept request...",
       code: "accept",
     },
   });
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 95fa900..18b22c3 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -24,3 +24,5 @@ export const API_KEY = import.meta.env.VITE_API_KEY;
 export const USERINFO_API_URL = "https://www.googleapis.com/oauth2/v3/userinfo";
 export const PRIMARY_CHANNEL = "primaryChannelKey";
 export const API_REQ_DELAY = "apiReqDelay";
+export const BMC_LINK = "https://www.buymeacoffee.com/biplobsd";
+export const STORE_LINK = "https://chrome.google.com/webstore/detail/fanknehiohibiphenfaigbmefncbheaa";
diff --git a/src/utils/interface.ts b/src/utils/interface.ts
new file mode 100644
index 0000000..03f2fa1
--- /dev/null
+++ b/src/utils/interface.ts
@@ -0,0 +1,5 @@
+export interface TooltipItem {
+  text: string;
+  img: string;
+  imgAlt: string;
+}