diff --git a/.pnp.cjs b/.pnp.cjs
index 07fd8e7..87ce5e9 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -62,6 +62,7 @@ const RAW_RUNTIME_STATE =
           ["lint-staged", "npm:15.4.1"],\
           ["prettier", "npm:3.4.2"],\
           ["react", "npm:18.3.1"],\
+          ["react-canvas-confetti", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:2.0.7"],\
           ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\
           ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\
           ["sass", "npm:1.83.4"],\
@@ -3874,6 +3875,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["@types/canvas-confetti", [\
+      ["npm:1.9.0", {\
+        "packageLocation": "./.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip/node_modules/@types/canvas-confetti/",\
+        "packageDependencies": [\
+          ["@types/canvas-confetti", "npm:1.9.0"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["@types/conventional-commits-parser", [\
       ["npm:5.0.1", {\
         "packageLocation": "./.yarn/cache/@types-conventional-commits-parser-npm-5.0.1-3f074d40bc-4b7b561f19.zip/node_modules/@types/conventional-commits-parser/",\
@@ -5290,6 +5300,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["canvas-confetti", [\
+      ["npm:1.9.3", {\
+        "packageLocation": "./.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip/node_modules/canvas-confetti/",\
+        "packageDependencies": [\
+          ["canvas-confetti", "npm:1.9.3"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["caseless", [\
       ["npm:0.12.0", {\
         "packageLocation": "./.yarn/cache/caseless-npm-0.12.0-e83bc5df83-ccf64bcb6c.zip/node_modules/caseless/",\
@@ -10139,6 +10158,7 @@ const RAW_RUNTIME_STATE =
           ["lint-staged", "npm:15.4.1"],\
           ["prettier", "npm:3.4.2"],\
           ["react", "npm:18.3.1"],\
+          ["react-canvas-confetti", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:2.0.7"],\
           ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\
           ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\
           ["sass", "npm:1.83.4"],\
@@ -11107,6 +11127,30 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["react-canvas-confetti", [\
+      ["npm:2.0.7", {\
+        "packageLocation": "./.yarn/cache/react-canvas-confetti-npm-2.0.7-566ef1fc5e-709a0f3c41.zip/node_modules/react-canvas-confetti/",\
+        "packageDependencies": [\
+          ["react-canvas-confetti", "npm:2.0.7"]\
+        ],\
+        "linkType": "SOFT"\
+      }],\
+      ["virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:2.0.7", {\
+        "packageLocation": "./.yarn/__virtual__/react-canvas-confetti-virtual-ba580d0809/0/cache/react-canvas-confetti-npm-2.0.7-566ef1fc5e-709a0f3c41.zip/node_modules/react-canvas-confetti/",\
+        "packageDependencies": [\
+          ["react-canvas-confetti", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:2.0.7"],\
+          ["@types/canvas-confetti", "npm:1.9.0"],\
+          ["@types/react", "npm:18.3.18"],\
+          ["canvas-confetti", "npm:1.9.3"],\
+          ["react", "npm:18.3.1"]\
+        ],\
+        "packagePeers": [\
+          "@types/react",\
+          "react"\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["react-docgen", [\
       ["npm:7.1.0", {\
         "packageLocation": "./.yarn/cache/react-docgen-npm-7.1.0-9284320212-59f8b26b29.zip/node_modules/react-docgen/",\
diff --git a/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip b/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip
new file mode 100644
index 0000000..c5f2c83
Binary files /dev/null and b/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip differ
diff --git a/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip b/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip
new file mode 100644
index 0000000..8247225
Binary files /dev/null and b/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip differ
diff --git a/.yarn/cache/react-canvas-confetti-npm-2.0.7-566ef1fc5e-709a0f3c41.zip b/.yarn/cache/react-canvas-confetti-npm-2.0.7-566ef1fc5e-709a0f3c41.zip
new file mode 100644
index 0000000..43f2763
Binary files /dev/null and b/.yarn/cache/react-canvas-confetti-npm-2.0.7-566ef1fc5e-709a0f3c41.zip differ
diff --git a/package.json b/package.json
index 3b91d21..8080163 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.64.2",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
+    "react-canvas-confetti": "^2.0.7",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3"
   },
diff --git a/src/assets/img/img-grahic-receipt.png b/src/assets/img/img-grahic-receipt.png
new file mode 100644
index 0000000..162f66b
Binary files /dev/null and b/src/assets/img/img-grahic-receipt.png differ
diff --git a/src/components/ReceiptResult/Confetti.tsx b/src/components/ReceiptResult/Confetti.tsx
new file mode 100644
index 0000000..1aa0c66
--- /dev/null
+++ b/src/components/ReceiptResult/Confetti.tsx
@@ -0,0 +1,17 @@
+import confetti from "canvas-confetti";
+
+import type { Options as ConfettiOptions } from "canvas-confetti";
+
+export const handleConfetti = () => {
+  const setting: ConfettiOptions = {
+    particleCount: 100,
+    spread: 100,
+    origin: { y: 0.2 },
+    colors: ["#f4abfe", "#cd90f2", "#eff0ff", "#6f91ff"],
+    ticks: 50,
+  };
+
+  confetti({
+    ...setting,
+  });
+};
diff --git a/src/pages/ReceiptResultPage.tsx b/src/pages/ReceiptResultPage.tsx
index 9b73d7c..af5a09d 100644
--- a/src/pages/ReceiptResultPage.tsx
+++ b/src/pages/ReceiptResultPage.tsx
@@ -1,7 +1,3 @@
-import React from "react";
-
-import { handleConfetti } from "../components/ReceiptResult/Confetti";
-
 import ReceiptResult from "@/components/ReceiptResult/ReceiptResult";
 // import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar";
 
diff --git a/src/types/canvas-confetti.d.ts b/src/types/canvas-confetti.d.ts
new file mode 100644
index 0000000..f47a3f9
--- /dev/null
+++ b/src/types/canvas-confetti.d.ts
@@ -0,0 +1,22 @@
+declare module "canvas-confetti" {
+  export interface Options {
+    particleCount?: number;
+    angle?: number;
+    spread?: number;
+    startVelocity?: number;
+    decay?: number;
+    gravity?: number;
+    drift?: number;
+    ticks?: number;
+    origin?: {
+      x?: number;
+      y?: number;
+    };
+    colors?: string[];
+    shapes?: Array<"square" | "circle">;
+    scalar?: number;
+    zIndex?: number;
+  }
+
+  export default function confetti(options?: Options): Promise<null>;
+}
diff --git a/yarn.lock b/yarn.lock
index 242d8f2..efb58b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2455,6 +2455,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-confetti@npm:^1.6.4":
+  version: 1.9.0
+  resolution: "@types/canvas-confetti@npm:1.9.0"
+  checksum: 10c0/ffe2c674d466b8e13472c81ab2a97056f3433fd40a3513dbc1bb76764e4e7c3ff0a2a58d37b16ea6a245c831077c553db321b069dda6572eab59f2be61137b2e
+  languageName: node
+  linkType: hard
+
 "@types/conventional-commits-parser@npm:^5.0.0":
   version: 5.0.1
   resolution: "@types/conventional-commits-parser@npm:5.0.1"
@@ -3571,6 +3578,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-confetti@npm:^1.9.2":
+  version: 1.9.3
+  resolution: "canvas-confetti@npm:1.9.3"
+  checksum: 10c0/94c6f16591660d5ed4a48afb8da65902826ce6b38edc7644d62521aa9bf9ef5b950aa4396e980e7fe0a38e5f41a991a6d984721412a54c9fba4de3682c1eead0
+  languageName: node
+  linkType: hard
+
 "caseless@npm:~0.12.0":
   version: 0.12.0
   resolution: "caseless@npm:0.12.0"
@@ -7826,6 +7840,7 @@ __metadata:
     lint-staged: "npm:^15.4.1"
     prettier: "npm:^3.4.2"
     react: "npm:^18.3.1"
+    react-canvas-confetti: "npm:^2.0.7"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^7.1.3"
     sass: "npm:^1.83.4"
@@ -8642,6 +8657,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-canvas-confetti@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "react-canvas-confetti@npm:2.0.7"
+  dependencies:
+    "@types/canvas-confetti": "npm:^1.6.4"
+    canvas-confetti: "npm:^1.9.2"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/709a0f3c41748018e4c128f2c60db1360b8c5d973d7532d99554adf7bd4b3b377d271b4feab4f7cd9018c9e7baf54138fc324fa1cca2322b89e2d2784f2b06be
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"