diff --git a/web/package-lock.json b/web/package-lock.json
index d6741e5..d33b37a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,7 +15,8 @@
         "next-qrcode": "^2.5.1",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^5.1.0"
+        "react-icons": "^5.1.0",
+        "usehooks-ts": "^3.1.0"
       },
       "devDependencies": {
         "@types/js-cookie": "^3.0.6",
@@ -1035,6 +1036,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1977,6 +1983,20 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index 5914bad..e6df55d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,7 +16,8 @@
     "next-qrcode": "^2.5.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.1.0"
+    "react-icons": "^5.1.0",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
diff --git a/web/src/app/(auth)/receive/Receive.tsx b/web/src/app/(auth)/receive/Receive.tsx
index 30f4d75..a82117c 100644
--- a/web/src/app/(auth)/receive/Receive.tsx
+++ b/web/src/app/(auth)/receive/Receive.tsx
@@ -2,6 +2,8 @@
 
 import { FC, useState } from 'react'
 import { useQRCode } from 'next-qrcode'
+import { useCopyToClipboard } from 'usehooks-ts'
+import { FaCopy } from 'react-icons/fa'
 
 const Receive: FC<{}> = () => {
   const { Canvas: QRCanvas } = useQRCode()
@@ -10,6 +12,10 @@ const Receive: FC<{}> = () => {
   const [description, setDescription] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [invoice, setInvoice] = useState<string>('')
+  const [copied, setCopied] = useState<boolean>(false)
+  const [openInvoice, setOpenInvoice] = useState<boolean>(false)
+
+  const [_, copy] = useCopyToClipboard()
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -64,10 +70,38 @@ const Receive: FC<{}> = () => {
 
       {invoice && (
         <div className="flex flex-col">
-          <div className="mx-auto mt-6">
+          <div className="mx-auto mt-4">
             <QRCanvas text={invoice} options={{ width: 256 }} />
           </div>
-          <p className="mt-2 break-words">{invoice}</p>
+
+          <div className="mt-3 mx-auto">
+            {!copied ? (
+              <button
+                className="flex gap-1 rounded bg-gray-700 p-2 items-center"
+                onClick={() => {
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 2000)
+                  copy(invoice)
+                }}
+              >
+                <FaCopy className="cursor-pointer w-[32px] h-[32px]" />
+                <span>Copy</span>
+              </button>
+            ) : (
+              <p>Copied</p>
+            )}
+          </div>
+
+          <button
+            className="mt-3 p-2 rounded bg-gray-700"
+            onClick={() => {
+              setOpenInvoice(!openInvoice)
+            }}
+          >
+            {openInvoice ? 'Hide invoice' : 'Show invoice'}
+          </button>
+
+          {openInvoice && <p className="mt-1 break-words">{invoice}</p>}
         </div>
       )}
     </div>
diff --git a/web/src/app/(auth)/receive/page.tsx b/web/src/app/(auth)/receive/page.tsx
index deb2dc2..a28fdbb 100644
--- a/web/src/app/(auth)/receive/page.tsx
+++ b/web/src/app/(auth)/receive/page.tsx
@@ -8,7 +8,7 @@ interface IPageProps {}
 const Page = ({}: IPageProps) => {
   return (
     <Fragment>
-      <div className="flex items-start mb-8">
+      <div className="flex items-start">
         <Link href="/">
           <button className="py-1 px-2 rounded border border-gray-700">{`<-back`}</button>
         </Link>
diff --git a/web/src/app/(auth)/send/page.tsx b/web/src/app/(auth)/send/page.tsx
index 9861331..a2f9c6b 100644
--- a/web/src/app/(auth)/send/page.tsx
+++ b/web/src/app/(auth)/send/page.tsx
@@ -8,7 +8,7 @@ interface IPageProps {}
 const Page = ({}: IPageProps) => {
   return (
     <Fragment>
-      <div className="flex items-start mb-8">
+      <div className="flex items-start">
         <Link href="/">
           <button className="py-1 px-2 rounded border border-gray-700">{`<-back`}</button>
         </Link>