diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 4a14a77..cabd57f 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { exportComponentAsPNG } from "react-component-export-image";
+// import { exportComponentAsPNG } from "react-component-export-image";
 import "./CoverImage.css";
 import { ImgContext } from "../utils/ImgContext";
 import unsplash from "../utils/unsplashConfig";
@@ -10,17 +10,29 @@ const ComponentToImg = (props) => {
 	const { unsplashImage } = useContext(ImgContext);
 	const componentRef = React.createRef();
 
-	// download image and trigger download on unsplash api
-	const downloadImage = () => {
+
+
+
+	async function saveImage(data) {
+		var a = document.createElement("A");
+		a.href = data;
+		a.download = `cover.png`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+
+	const downloadImage = async () => {
 		// exportComponentAsPNG(componentRef, 'cover')
-		//  unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
 		// console.log(unsplashImage.downloadLink)
+
+		unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
 		const element = componentRef.current; // You can use element's ID or Class here
 
-		console.log(element)
-		console.log(element.offsetHeight)
+		// console.log(element)
+		// console.log(element.offsetHeight)
 
-		domtoimage.toPng(componentRef.current, {
+		let data = await domtoimage.toPng(componentRef.current, {
 			height: element.offsetHeight * 2,
 			width: element.offsetWidth * 2,
 			style: {
@@ -30,14 +42,9 @@ const ComponentToImg = (props) => {
 				height: element.offsetHeight + "px",
 			}
 		})
-			.then(async (data) => {
-				var a = document.createElement("A");
-				a.href = data;
-				a.download = `cover.png`;
-				document.body.appendChild(a);
-				a.click();
-				document.body.removeChild(a);
-			});
+		await saveImage(data)
+
+
 	}
 
 
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index 6265be1..676dbbd 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -1,12 +1,12 @@
 import React from 'react';
 const OutlineTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
+    const { title, bgColor, author, icon, font, customIcon, platform } = config;
 
     return (
         <div className="p-4 bg-white ">
 
 
-            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10  ${pattern} ${platform} `}
+            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10  ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >
 
@@ -23,15 +23,15 @@ const OutlineTheme = ({ config }) => {
                             </div>
                     }
                     <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">{title}</h1>
-                
-                     <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
-                    
-                    <h2 className="text-xl text-white font-semibold">{author}</h2>
 
-                </div>
+                    <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
+
+                        <h2 className="text-2xl text-white font-semibold">{author}</h2>
+
+                    </div>
                 </div>
 
-           
+
 
             </div>