diff --git a/.gitignore b/.gitignore
index 9500438..47f01ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,5 @@ yarn-error.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.venv
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4a4029c..93d180b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,11 +18,17 @@
         "@types/node": "^16.18.96",
         "@types/react": "^18.2.77",
         "@types/react-dom": "^18.2.25",
+        "dom-to-image-more": "^3.3.0",
+        "file-saver": "^2.0.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/dom-to-image": "^2.6.7",
+        "@types/file-saver": "^2.0.7"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4490,6 +4496,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dom-to-image": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz",
+      "integrity": "sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.9",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.9.tgz",
@@ -4535,6 +4547,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -7367,6 +7385,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-to-image-more": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.3.0.tgz",
+      "integrity": "sha512-4k0oxVfQ4Nrv4/Iva6FpsXTAtPCp5JnZNO/n/hsuOpe3ANlMiK50URZDQKzJslthQD8k76z9vHS3usIzmJoFVw=="
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -8656,6 +8679,11 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
diff --git a/package.json b/package.json
index 4707ef4..19f4014 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "@types/node": "^16.18.96",
     "@types/react": "^18.2.77",
     "@types/react-dom": "^18.2.25",
+    "dom-to-image-more": "^3.3.0",
+    "file-saver": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -42,5 +44,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/dom-to-image": "^2.6.7",
+    "@types/file-saver": "^2.0.7"
   }
 }
diff --git a/src/components/ImageGenerator.tsx b/src/components/ImageGenerator.tsx
index c6e29b7..4e0bd47 100644
--- a/src/components/ImageGenerator.tsx
+++ b/src/components/ImageGenerator.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { Button, Card, CardActions, CardContent } from "@mui/material";
+import domtoimage from "dom-to-image-more";
+import { saveAs } from "file-saver";
 
 interface ImageGeneratorProps {
   generatedImageDataUrl: string | null; // Change prop name to generatedImageDataUrl
@@ -8,26 +10,45 @@ interface ImageGeneratorProps {
 const ImageGenerator: React.FC<ImageGeneratorProps> = ({
   generatedImageDataUrl,
 }) => {
-  // Use generatedImageDataUrl prop
-  const handleDownload = () => {
+  const handleDownload = async () => {
     if (generatedImageDataUrl) {
-      const downloadLink = document.createElement("a");
-      downloadLink.href = generatedImageDataUrl;
-      downloadLink.download = "generated_image.png";
-      downloadLink.click();
+      const node = document.getElementById("avatar-img-container");
+      try {
+        const blob = await domtoimage.toBlob(node);
+        saveAs(blob, "my-node.png"); // using saveAs directly
+      } catch (error) {
+        console.error("Oops, something went wrong!", error);
+      }
     }
   };
-
   return (
     <Card sx={{ width: "100%", maxWidth: 400, height: 300, padding: "2em" }}>
-      <CardContent>
+      <CardContent style={{ position: "relative" }}>
         {generatedImageDataUrl && (
           <>
-            <img
-              src={generatedImageDataUrl}
-              alt="Generated"
-              style={{ maxWidth: "100%", height: "auto", marginBottom: "8px" }}
-            />
+            <div id="avatar-img-container">
+              <p
+                style={{
+                  position: "absolute",
+                  width: "100%",
+                  zIndex: 9,
+                  color: "black",
+                  padding: "5px",
+                }}
+              >
+                test
+              </p>
+              <img
+                src={generatedImageDataUrl}
+                alt="Generated"
+                style={{
+                  maxWidth: "100%",
+                  height: "auto",
+                  marginBottom: "8px",
+                }}
+              />
+            </div>
+
             <CardActions>
               <Button onClick={handleDownload}>Download Image</Button>
             </CardActions>
diff --git a/src/dom-to-image-more.d.ts b/src/dom-to-image-more.d.ts
new file mode 100644
index 0000000..78bcdfb
--- /dev/null
+++ b/src/dom-to-image-more.d.ts
@@ -0,0 +1,4 @@
+declare module "dom-to-image-more" {
+  import domToImage = require("dom-to-image-more");
+  export = domToImage;
+}