diff --git a/app/components/DownloadCanvas.tsx b/app/components/DownloadCanvas.tsx
new file mode 100644
index 0000000..5db0091
--- /dev/null
+++ b/app/components/DownloadCanvas.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { FC, useEffect, useRef, useState } from "react";
+import html2canvas from "html2canvas";
+import { download } from "@/utils/download";
+import useTweetStore from "../store/tweetStore";
+import Streak from "../dashboard/Streak";
+import ContributionGraph from "../dashboard/ContributionGraph";
+import Logo from "./Logo";
+
+const DownloadCanvas: FC = ({}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null!);
+  const componentRef = useRef<HTMLDivElement>(null!);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const updateSize = () => {
+      setWidth(componentRef.current.offsetWidth);
+      setHeight(componentRef.current.offsetHeight);
+    };
+
+    updateSize();
+
+    html2canvas(componentRef.current).then((canvas) => {
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+        ctx.drawImage(canvas, 0, 0);
+      }
+    });
+
+    window.addEventListener("resize", updateSize);
+
+    return () => {
+      window.removeEventListener("resize", updateSize);
+    };
+  }, []);
+
+  const onDownload = (e: any) => {
+    e.preventDefault();
+    download(canvasRef.current);
+  };
+  const { tweets, dates, username, loading } = useTweetStore((state) => ({
+    tweets: state.tweets,
+    dates: state.dates,
+    username: state.username,
+    loading: state.loading,
+  }));
+
+  return (
+    <div>
+      <div ref={componentRef} className="border-[1px] rounded-lg mt-4 p-4">
+        <div className="flex flex-col gap-6">
+          <div className="w-1/3">
+            <Logo />
+          </div>
+          <div>
+            <p className="text-lg font-bold text-gray-700 mb-4">Streaks</p>
+            <Streak dates={dates} />
+          </div>
+          <div>
+            <p className="text-lg font-bold text-gray-700 mb-4">
+              Contribution Graph
+            </p>
+            <ContributionGraph
+              dates={dates}
+              tweets={tweets}
+              username={username}
+            />
+          </div>
+        </div>
+      </div>
+      <canvas
+        className="hidden"
+        ref={canvasRef}
+        width={width}
+        height={height}
+      />
+      <button
+        className="bg-red-400 p-4 mt-10 text-lg rounded-lg"
+        onClick={onDownload}
+      >
+        download
+      </button>
+    </div>
+  );
+};
+
+export default DownloadCanvas;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 7fb4311..ce95225 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -9,6 +9,10 @@ import Streak from "./Streak";
 import Loading from "../components/Loading";
 import Navbar from "../components/Navbar";
 import { Poppins } from "@next/font/google";
+import DownloadCanvas from "../components/DownloadCanvas";
+import { download } from "@/utils/download";
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -17,6 +21,11 @@ const poppins = Poppins({
 });
 
 const dashboardPage = () => {
+  const [isDownloadModalOpen, setIsDownloadModalOpen] =
+    useState<boolean>(false);
+
+  const openDownloadModal = () => setIsDownloadModalOpen(true);
+
   const { tweets, dates, username, loading } = useTweetStore((state) => ({
     tweets: state.tweets,
     dates: state.dates,
@@ -30,7 +39,9 @@ const dashboardPage = () => {
       <div className="md:flex w-full bg-white">
         <Sidebar />
         <div className="w-full md:w-5/6 p-9">
-          <div className="md:flex mb-5 md:space-x-5 space-y-5 md:space-y-0">
+          {/* top */}
+          <div className="md:flex mb-5 md:space-x-5">
+            {/* streaks */}
             <div className="w-full md:w-2/3 p-8 rounded-md shadow-md shadow-[#bcbcbc29] border-[#bcbcbc20] border-[1px] bg-white">
               <p className="text-[#5f6577] text-base font-bold">
                 Saturday, Jan 21
@@ -39,19 +50,39 @@ const dashboardPage = () => {
                 Hello, {username}
               </h2>
 
-              <div
-                className=" md:flex
-            "
-              >
+              <div className="md:flex">
                 <Streak dates={dates} />
               </div>
             </div>
 
-            <div className="w-full md:w-1/3 p-8 rounded-md shadow-md shadow-[#bcbcbc21] border-[#bcbcbc40] border-[1px] bg-white">
-              <p className="text-lg font-bold text-gray-700">Badges</p>
-              {/* <Badges /> */}
-            </div>
+            <button
+              className="border-[1px] p-4 text-lg rounded-lg h-fit"
+              onClick={openDownloadModal}
+            >
+              Share your progress
+            </button>
+
+            {/* canvas */}
+            {isDownloadModalOpen && (
+              <Dialog
+                open={isDownloadModalOpen}
+                onClose={() => setIsDownloadModalOpen(false)}
+                className="relative z-50"
+              >
+                <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
+
+                <div className="fixed inset-0 flex items-center justify-center p-4">
+                  <Dialog.Panel className="relative w-full max-w-4xl">
+                    <div className="w-full p-8 rounded-md shadow-md shadow-[#bcbcbc21] border-[#bcbcbc40] border-[1px] bg-white">
+                      <DownloadCanvas />
+                    </div>
+                  </Dialog.Panel>
+                </div>
+              </Dialog>
+            )}
           </div>
+
+          {/* bottom */}
           <div className="p-8 rounded-md shadow-md shadow-[#bcbcbc20] border-[#bcbcbc32] border-[1px] bg-white flex flex-col gap-12">
             <p className="text-lg font-bold text-gray-700">
               Contribution Graph
diff --git a/package.json b/package.json
index 67ac881..475d495 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@headlessui/react": "^1.7.13",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.6",
     "@next/font": "^13.1.3",
@@ -29,6 +30,7 @@
     "framer-motion": "^8.5.0",
     "frappe-charts": "^1.6.2",
     "github-contributions-canvas": "^0.6.0",
+    "html2canvas": "^1.4.1",
     "moment": "^2.29.4",
     "next": "13.1.3",
     "node-fetch": "^2.6.1",
diff --git a/utils/download.ts b/utils/download.ts
new file mode 100644
index 0000000..63ca264
--- /dev/null
+++ b/utils/download.ts
@@ -0,0 +1,13 @@
+export function download(canvas: any) {
+  try {
+    const dataUrl = canvas.toDataURL();
+    const a = document.createElement("a");
+    document.body.insertAdjacentElement("beforeend", a);
+    a.download = "contributions.png";
+    a.href = dataUrl;
+    a.click();
+    document.body.removeChild(a);
+  } catch (err) {
+    console.error(err);
+  }
+}