diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
index e6ca3351141..36351d80b6d 100644
--- a/components/user/UserProfile.js
+++ b/components/user/UserProfile.js
@@ -3,6 +3,9 @@ import { FaShare } from "react-icons/fa6";
 import { QRCodeCanvas } from "qrcode.react";
 import { saveAs } from "file-saver";
 import { useRouter } from "next/router";
+import { toPng } from "html-to-image";
+import LogoWide from "@public/logos/LogoWide";
+import logger from "@config/logger";
 
 import FallbackImage from "@components/FallbackImage";
 import UserSocial from "./UserSocials";
@@ -24,13 +27,37 @@ function UserProfile({ BASE_URL, data }) {
 
   //Declared Ref object for QR
   const qrRef = useRef(null);
+  const elementRef = useRef(null);
 
   //qrRef.current is pointing to the DOM node and firstChild to its canvas
   const downloadQR = () =>
     qrRef.current.firstChild.toBlob((blob) =>
       saveAs(blob, `biodrop-${data.username}.png`),
     );
-
+    const downloadWallpaper = () => {
+      // It removes the "hidden" class to make the element visible for rendering it.
+      elementRef.current.classList.remove("hidden");
+  
+  
+      toPng(elementRef.current, {
+        cacheBust: false,
+        backgroundColor: "#122640",
+      })
+        .then((dataUrl) => {
+          const link = document.createElement("a");
+          link.download = "biodrop-wallpaper.png";
+          link.href = dataUrl;
+          link.click();
+  
+  
+          // It adds the "hidden" class back to hide the element again.
+          elementRef.current.classList.add("hidden");
+        })
+        .catch((e) => {
+          logger.error(e);
+        });
+    };
+  
   return (
     <>
       <div className="flex justify-center items-center flex-col md:flex-row gap-x-6">
@@ -150,6 +177,13 @@ function UserProfile({ BASE_URL, data }) {
                 </Button>
               )}
             </div>
+            <div className="w-full px-2 mx-auto flex justify-center mb-4">
+              {qrShow && (
+                <Button primary={true} onClick={downloadWallpaper}>
+                  Export as Wallpaper
+                </Button>
+              )}
+            </div>
           </div>
           {qrShow && (
             <>
@@ -181,6 +215,22 @@ function UserProfile({ BASE_URL, data }) {
             </>
           )}
         </div>
+        {/* Part that gets converted into the image */}
+        <div
+          ref={elementRef}
+          className="flex flex-col items-center justify-center mt-10 px-8 hidden"
+        >
+          {qrShow && (
+            <QRCodeCanvas
+              className="border border-white"
+              value={`${BASE_URL}/${data.username}`}
+              size={fallbackImageSize * 6}
+            />
+          )}
+          <div className="flex m-20">
+            <LogoWide width={512} />
+          </div>
+        </div>
       </Modal>
     </>
   );
diff --git a/package-lock.json b/package-lock.json
index fff7373ca4c..7f7095fcc03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "biodrop",
-      "version": "2.56.0",
+      "version": "2.72.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -22,6 +22,7 @@
         "autoprefixer": "^10.4.16",
         "dotenv": "^16.3.1",
         "file-saver": "^2.0.5",
+        "html-to-image": "^1.11.11",
         "husky": "^8.0.3",
         "leaflet": "^1.9.4",
         "micro": "^10.0.1",
@@ -13750,6 +13751,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
diff --git a/package.json b/package.json
index c7e01d913e8..0c72ad5d1c0 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "autoprefixer": "^10.4.16",
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
+    "html-to-image": "^1.11.11",
     "husky": "^8.0.3",
     "leaflet": "^1.9.4",
     "micro": "^10.0.1",