diff --git a/package-lock.json b/package-lock.json
index dd44e844..cd2a3a79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@radixdlt/radix-dapp-toolkit": "^2.0.0",
         "@reduxjs/toolkit": "^2.0.1",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@tippyjs/react": "^4.2.6",
         "@types/mdx": "^2.0.10",
         "@types/node": "20.3.3",
         "@types/react": "18.2.14",
@@ -1396,6 +1397,16 @@
         "fsevents": "2.3.2"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radixdlt/babylon-gateway-api-sdk": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@radixdlt/babylon-gateway-api-sdk/-/babylon-gateway-api-sdk-1.6.1.tgz",
@@ -1746,6 +1757,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@tippyjs/react": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -9097,6 +9121,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4ad74a9c..41d88b91 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@radixdlt/radix-dapp-toolkit": "^2.0.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tippyjs/react": "^4.2.6",
     "@types/mdx": "^2.0.10",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
diff --git a/src/app/components/CopyIcon.tsx b/src/app/components/CopyIcon.tsx
index ef4da8b2..a89d5880 100644
--- a/src/app/components/CopyIcon.tsx
+++ b/src/app/components/CopyIcon.tsx
@@ -1,8 +1,11 @@
+import { useState } from "react";
+import { useAppDispatch } from "../hooks";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { MdContentCopy } from "react-icons/md";
 import { setCopied } from "../state/priceChartSlice";
-import { DexterToast } from "components/DexterToaster";
-import { useAppDispatch } from "../hooks";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/dist/svg-arrow.css";
 
 interface CopyIconProps {
   targetUrl: string;
@@ -10,24 +13,37 @@ interface CopyIconProps {
 
 export function CopyIcon({ targetUrl }: CopyIconProps) {
   const dispatch = useAppDispatch();
+  const [visible, setVisible] = useState(false);
 
   const handleCopy = () => {
     dispatch(setCopied(true));
-    DexterToast.success("Copied!");
+    setVisible(true);
 
     setTimeout(() => {
+      setVisible(false);
       dispatch(setCopied(false));
-    }, 2000);
+    }, 700);
   };
 
   return (
     <>
-      <CopyToClipboard text={targetUrl} onCopy={handleCopy}>
-        <MdContentCopy
-          className="cursor-pointer text-base"
-          title="Copy to clipboard"
-        />
-      </CopyToClipboard>
+      <Tippy
+        content={<span>Copied!</span>}
+        visible={visible}
+        onClickOutside={() => setVisible(false)}
+        arrow={true}
+        theme="custom"
+      >
+        <div>
+          <CopyToClipboard text={targetUrl} onCopy={handleCopy}>
+            <MdContentCopy
+              className="cursor-pointer text-base"
+              title="Copy to clipboard"
+              onClick={() => setVisible(true)}
+            />
+          </CopyToClipboard>
+        </div>
+      </Tippy>
     </>
   );
 }
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index 57dac249..4d213d45 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -122,9 +122,9 @@ input[type="number"]::-ms-clear {
 
 /**
  * GRID AREA CSS: Utilizes global CSS classes for grid areas.
- * Justification: TailwindCSS lacks a readable method for implementing 
- * grid-template-areas. Therefore, all grid area-related styles are 
- * centralized in global CSS to maintain separation from 
+ * Justification: TailwindCSS lacks a readable method for implementing
+ * grid-template-areas. Therefore, all grid area-related styles are
+ * centralized in global CSS to maintain separation from
  * component-specific styles.
  */
 .grid-container {
@@ -239,3 +239,8 @@ input[type="number"]::-ms-clear {
 .account-history table thead tr th:last-child {
   padding-right: 16px;
 }
+
+/* css for tooltip */
+.tippy-box[data-theme~="custom"] {
+  @apply text-dexter-green bg-base-100;
+}