diff --git a/src/components/product/previsualization/card/index.tsx b/src/components/product/previsualization/card/index.tsx
index 041836f..24b3ee1 100644
--- a/src/components/product/previsualization/card/index.tsx
+++ b/src/components/product/previsualization/card/index.tsx
@@ -8,175 +8,176 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useMeasure } from "@/hooks/use-measure";
 
 const roboto = Roboto({
-	subsets: ["latin"],
-	weight: ["400", "500", "700"],
-	variable: "--font-roboto",
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--font-roboto",
 });
 
 type PrevisualizationCardProps = {
-	video: Video;
-	options: {
-		theme: "light" | "dark";
-		activeWidgets: Widget[];
-		display: Display;
-		textSize: number;
-		cornerRadius: number;
-		spacing: number;
-	};
+  video: Video;
+  options: {
+    theme: "light" | "dark";
+    activeWidgets: Widget[];
+    display: Display;
+    textSize: number;
+    cornerRadius: number;
+    spacing: number;
+  };
 };
 
 const PrevisualizationCard = React.forwardRef<
-	HTMLDivElement,
-	PrevisualizationCardProps
+  HTMLDivElement,
+  PrevisualizationCardProps
 >(({ video, options }: PrevisualizationCardProps) => {
-	const buildFooter = () => {
-		const viewsCount =
-			isActiveWidgets(options.activeWidgets, "videoViews") && video.viewsCount;
-		const publishedAt =
-			isActiveWidgets(options.activeWidgets, "videoPublishedAt") &&
-			video.publishedAt;
-		const hasSeparator = viewsCount && publishedAt;
+  const buildFooter = () => {
+    const viewsCount =
+      isActiveWidgets(options.activeWidgets, "videoViews") && video.viewsCount;
+    const publishedAt =
+      isActiveWidgets(options.activeWidgets, "videoPublishedAt") &&
+      video.publishedAt;
+    const hasSeparator = viewsCount && publishedAt;
 
-		return `${viewsCount ? `${viewsCount} vues` : ""}${
-			hasSeparator ? " • " : ""
-		}${publishedAt ? "Il y a 16 heures" : ""}`;
-	};
+    return `${viewsCount ? `${viewsCount} vues` : ""}${
+      hasSeparator ? " • " : ""
+    }${publishedAt ? "Il y a 16 heures" : ""}`;
+  };
 
-	return (
-		<motion.div
-			transition={{
-				type: "spring",
-				stiffness: 100,
-				damping: 10,
-				duration: 0.1,
-			}}
-			key={"container"}
-			className={cx(
-				roboto.className,
-				css({
-					display: "flex",
-					flexDirection: "column",
-					gap: "12px",
-					backgroundColor: options.theme === "light" ? "#fff" : "#000",
-					userSelect: "none",
-					overflow: "hidden",
-				}),
-			)}
-			style={{
-				maxWidth: `calc(310px + ${options.spacing * 2}px)`,
-				borderRadius: `${options.cornerRadius}px`,
-				padding: `${options.spacing}px`,
-			}}
-		>
-			<div
-				className={css({
-					position: "relative",
-					display: "flex",
-					overflow: "hidden",
-					borderRadius: "12px",
-				})}
-			>
-				<Image
-					className={css({
-						width: "310px",
-						height: "175px",
-						borderRadius: "12px",
-					})}
-					src={video.thumbnailUrl}
-					alt={"Miniature de la vidéo"}
-					width={1280}
-					height={720}
-				/>
+  return (
+    <motion.div
+      transition={{
+        type: "spring",
+        stiffness: 100,
+        damping: 10,
+        duration: 0.1,
+      }}
+      id="image-to-download"
+      key={"container"}
+      className={cx(
+        roboto.className,
+        css({
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+          backgroundColor: options.theme === "light" ? "#fff" : "#000",
+          userSelect: "none",
+          overflow: "hidden",
+        })
+      )}
+      style={{
+        maxWidth: `calc(310px + ${options.spacing * 2}px)`,
+        borderRadius: `${options.cornerRadius}px`,
+        padding: `${options.spacing}px`,
+      }}
+    >
+      <div
+        className={css({
+          position: "relative",
+          display: "flex",
+          overflow: "hidden",
+          borderRadius: "12px",
+        })}
+      >
+        <Image
+          className={css({
+            width: "310px",
+            height: "175px",
+            borderRadius: "12px",
+          })}
+          src={video.thumbnailUrl}
+          alt={"Miniature de la vidéo"}
+          width={1280}
+          height={720}
+        />
 
-				{isActiveWidgets(options.activeWidgets, "videoDuration") && (
-					<div
-						className={css({
-							position: "absolute",
-							bottom: "10px",
-							right: "10px",
-							padding: "3px 4px",
-							borderRadius: "4px",
-							backgroundColor: "rgba(0, 0, 0, 0.6)",
-							color: "#FFF",
-							fontSize: "12px",
-							fontWeight: "medium",
-						})}
-					>
-						??:??
-					</div>
-				)}
+        {isActiveWidgets(options.activeWidgets, "videoDuration") && (
+          <div
+            className={css({
+              position: "absolute",
+              bottom: "10px",
+              right: "10px",
+              padding: "3px 4px",
+              borderRadius: "4px",
+              backgroundColor: "rgba(0, 0, 0, 0.6)",
+              color: "#FFF",
+              fontSize: "12px",
+              fontWeight: "medium",
+            })}
+          >
+            ??:??
+          </div>
+        )}
 
-				{isActiveWidgets(options.activeWidgets, "videoProgressBar") && (
-					<progress
-						className={css({
-							position: "absolute",
-							bottom: 0,
-							left: 0,
-							width: "100%",
-							height: "4px",
-							"&::-webkit-progress-bar": {
-								backgroundColor: "#717171",
-							},
-							"&::-webkit-progress-value": {
-								backgroundColor: "#FF0000",
-							},
-						})}
-						value={18}
-						max={100}
-					/>
-				)}
-			</div>
+        {isActiveWidgets(options.activeWidgets, "videoProgressBar") && (
+          <progress
+            className={css({
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              width: "100%",
+              height: "4px",
+              "&::-webkit-progress-bar": {
+                backgroundColor: "#717171",
+              },
+              "&::-webkit-progress-value": {
+                backgroundColor: "#FF0000",
+              },
+            })}
+            value={18}
+            max={100}
+          />
+        )}
+      </div>
 
-			<div
-				className={css({
-					display: "flex",
-					gap: "10px",
-				})}
-			>
-				{isActiveWidgets(options.activeWidgets, "channelLogo") && (
-					<Image
-						className={css({
-							width: "38px",
-							height: "38px",
-							borderRadius: "50%",
-						})}
-						src={video.channelLogoUrl}
-						alt={`Logo de chaîne YouTube de ${video.channelName}`}
-						width={38}
-						height={38}
-					/>
-				)}
+      <div
+        className={css({
+          display: "flex",
+          gap: "10px",
+        })}
+      >
+        {isActiveWidgets(options.activeWidgets, "channelLogo") && (
+          <Image
+            className={css({
+              width: "38px",
+              height: "38px",
+              borderRadius: "50%",
+            })}
+            src={video.channelLogoUrl}
+            alt={`Logo de chaîne YouTube de ${video.channelName}`}
+            width={38}
+            height={38}
+          />
+        )}
 
-				<div
-					className={css({
-						display: "flex",
-						flexDirection: "column",
-						gap: "6px",
-						fontWeight: "normal",
-						color: options.theme === "light" ? "#606060" : "#fff",
-						flex: 1,
-						lineHeight: "normal",
-					})}
-				>
-					<div
-						className={css({
-							fontSize: `${options.textSize}px`,
-							fontWeight: "bold",
-							color: options.theme === "light" ? "#0F0F0F" : "#fff",
-						})}
-					>
-						{video.title}
-					</div>
+        <div
+          className={css({
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            fontWeight: "normal",
+            color: options.theme === "light" ? "#606060" : "#fff",
+            flex: 1,
+            lineHeight: "normal",
+          })}
+        >
+          <div
+            className={css({
+              fontSize: `${options.textSize}px`,
+              fontWeight: "bold",
+              color: options.theme === "light" ? "#0F0F0F" : "#fff",
+            })}
+          >
+            {video.title}
+          </div>
 
-					{isActiveWidgets(options.activeWidgets, "channelName") && (
-						<div>{video.channelName}</div>
-					)}
+          {isActiveWidgets(options.activeWidgets, "channelName") && (
+            <div>{video.channelName}</div>
+          )}
 
-					<div>{buildFooter()}</div>
-				</div>
-			</div>
-		</motion.div>
-	);
+          <div>{buildFooter()}</div>
+        </div>
+      </div>
+    </motion.div>
+  );
 });
 
 export default PrevisualizationCard;
diff --git a/src/components/product/previsualization/index.tsx b/src/components/product/previsualization/index.tsx
index 4df3777..f34cd65 100644
--- a/src/components/product/previsualization/index.tsx
+++ b/src/components/product/previsualization/index.tsx
@@ -1,174 +1,178 @@
+import React from "react";
+
 import Button from "@/components/ui/button";
 import Icon from "@/components/ui/icon";
+import Select from "@/components/ui/select";
+import { defaultOptions, defaultVideo } from "@/constants/default-video";
 import { css, cx } from "@styled-system/css";
+import type { ImageExtension } from "@/types/image";
+import { convertHtmlToImage } from "@/plugins/html-to-image";
+
 import PrevisualizationCard from "./card";
-import { defaultOptions, defaultVideo } from "@/constants/default-video";
 import type { Widget } from "..";
-import Select from "@/components/ui/select";
 import { useForm } from "react-hook-form";
-import React from "react";
+
+const ELEMENT_ID = "image-to-download";
 
 type ProductPrevisualizationProps = {
-	className?: string;
-	activeWidgets: Widget[];
+  className?: string;
+  activeWidgets: Widget[];
 };
 
 type FormData = {
-	format: "png" | "jpg" | "webp";
-	size: "0.5" | "0.75" | "1" | "1.5" | "2" | "3";
+  format: ImageExtension;
+  size: "0.5" | "0.75" | "1" | "1.5" | "2" | "3";
 };
 
 const ProductPrevisualization: React.FC<ProductPrevisualizationProps> = ({
-	className,
-	activeWidgets,
+  className,
+  activeWidgets,
 }: ProductPrevisualizationProps) => {
-	const ref = React.useRef<HTMLDivElement>(null);
-
-	const { register, handleSubmit } = useForm<FormData>({
-		defaultValues: {
-			format: "png",
-			size: "1",
-		},
-	});
-
-	// Un truc dans l'idée tu capte jsp j'pense bref azy
-	const onSubmit = handleSubmit(({ format, size }: FormData) => {
-		console.log("Data", format, size);
-
-		//TODO: html to image and return image
-
-		return "caca";
-	});
-
-	const handleDownload = () => {
-		const image = onSubmit();
-		console.log("Download image", image);
-		if (ref.current) {
-		}
-	};
-
-	const handleCopy = () => {
-		if (ref.current) {
-			const image = onSubmit();
-			console.log("Copy image", image);
-		}
-	};
-
-	return (
-		<div
-			className={cx(
-				css({
-					position: "relative",
-					display: "flex",
-					flexDirection: "column",
-					borderRadius: "8px",
-					overflow: "hidden",
-					minHeight: "560px",
-				}),
-				"background-png-like",
-				className,
-			)}
-		>
-			<div
-				className={css({
-					display: "flex",
-					justifyContent: "space-between",
-					padding: "15px 20px 0 20px",
-					alignItems: "center",
-					zIndex: 1,
-				})}
-			>
-				<h3
-					className={css({
-						fontSize: "22px",
-						fontWeight: "semibold",
-					})}
-				>
-					Prévisualisation
-				</h3>
-
-				<Button prefix={<Icon icon={"external"} size={16} />} />
-			</div>
-
-			<div
-				className={css({
-					position: "absolute",
-					width: "100%",
-					height: "100%",
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-				})}
-			>
-				<PrevisualizationCard
-					ref={ref}
-					video={defaultVideo}
-					options={{
-						...defaultOptions,
-						activeWidgets,
-					}}
-				/>
-			</div>
-
-			<form
-				className={css({
-					position: "absolute",
-					width: "100%",
-					left: 0,
-					bottom: 0,
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-					gap: "10px",
-					bg: "rgba(15, 15, 15, 0.15)",
-					borderBottomRadius: "8px",
-					py: "20px",
-					zIndex: 1,
-				})}
-			>
-				<Select
-					{...register("size")}
-					className={css({
-						width: "max-content",
-					})}
-				>
-					<option value={"0.5"}>0.5x</option>
-					<option value={"0.75"}>0.75x</option>
-					<option value={"1"}>1x</option>
-					<option value={"1.5"}>1.5x</option>
-					<option value={"2"}>2x</option>
-					<option value={"3"}>3x</option>
-				</Select>
-
-				<Select
-					{...register("format")}
-					className={css({
-						width: "max-content",
-					})}
-				>
-					<option value={"png"}>PNG</option>
-					<option value={"jpg"}>JPG</option>
-					<option value={"webp"}>WEBP</option>
-				</Select>
-
-				<Button
-					prefix={<Icon icon="download" size={16} />}
-					color="secondary"
-					onClick={handleDownload}
-				>
-					Télécharger
-				</Button>
-
-				<Button
-					prefix={<Icon icon="copy" size={16} />}
-					withoutBorder
-					onClick={handleCopy}
-				>
-					Copier
-				</Button>
-			</form>
-		</div>
-	);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const { register, handleSubmit } = useForm<FormData>({
+    defaultValues: {
+      format: "png",
+      size: "1",
+    },
+  });
+
+  const handleDownload = handleSubmit(async ({ format, size }: FormData) => {
+    const imageBase64 = await convertHtmlToImage(ELEMENT_ID, format);
+
+    const link = document.createElement("a");
+    link.download = `my-image-name.${format}`;
+    link.href = imageBase64;
+    link.click();
+  });
+
+  const handleCopy = handleSubmit(async ({ format, size }: FormData) => {
+    const imageBase64 = await convertHtmlToImage(ELEMENT_ID, format);
+
+    const blob = await fetch(imageBase64).then((res) => res.blob());
+
+    const clipboardItemInput = new ClipboardItem({
+      [blob.type]: blob,
+    });
+
+    await navigator.clipboard.write([clipboardItemInput]);
+  });
+
+  return (
+    <div
+      className={cx(
+        css({
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          borderRadius: "8px",
+          overflow: "hidden",
+          minHeight: "560px",
+        }),
+        "background-png-like",
+        className
+      )}
+    >
+      <div
+        className={css({
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "15px 20px 0 20px",
+          alignItems: "center",
+          zIndex: 1,
+        })}
+      >
+        <h3
+          className={css({
+            fontSize: "22px",
+            fontWeight: "semibold",
+          })}
+        >
+          Prévisualisation
+        </h3>
+
+        <Button prefix={<Icon icon={"external"} size={16} />} />
+      </div>
+
+      <div
+        className={css({
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        })}
+      >
+        <PrevisualizationCard
+          ref={ref}
+          video={defaultVideo}
+          options={{
+            ...defaultOptions,
+            activeWidgets,
+          }}
+        />
+      </div>
+
+      <form
+        className={css({
+          position: "absolute",
+          width: "100%",
+          left: 0,
+          bottom: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "10px",
+          bg: "rgba(15, 15, 15, 0.15)",
+          borderBottomRadius: "8px",
+          py: "20px",
+          zIndex: 1,
+        })}
+      >
+        <Select
+          {...register("size")}
+          className={css({
+            width: "max-content",
+          })}
+        >
+          <option value={"0.5"}>0.5x</option>
+          <option value={"0.75"}>0.75x</option>
+          <option value={"1"}>1x</option>
+          <option value={"1.5"}>1.5x</option>
+          <option value={"2"}>2x</option>
+          <option value={"3"}>3x</option>
+        </Select>
+
+        <Select
+          {...register("format")}
+          className={css({
+            width: "max-content",
+          })}
+        >
+          <option value={"png"}>PNG</option>
+          <option value={"jpg"}>JPG</option>
+          <option value={"webp"}>WEBP</option>
+        </Select>
+
+        <Button
+          prefix={<Icon icon="download" size={16} />}
+          color="secondary"
+          onClick={handleDownload}
+        >
+          Télécharger
+        </Button>
+
+        <Button
+          prefix={<Icon icon="copy" size={16} />}
+          withoutBorder
+          onClick={handleCopy}
+        >
+          Copier
+        </Button>
+      </form>
+    </div>
+  );
 };
 
 export default ProductPrevisualization;