diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
index 1f65e1c81..b6d0ff995 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
@@ -33,7 +33,7 @@ function CustomMetricOverviewChart(props: Props) {
                 <AreaChart
                     data={ data.chart }
                     margin={ {
-                        top: 50, right: 0, left: 0, bottom: 5,
+                        top: 50, right: 0, left: 0, bottom: 1,
                     } }
                 >
                     {gradientDef}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index e1af351ee..47e47e12e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -47,7 +47,7 @@ function ResponseTime(props: Props) {
               /> */}
               <AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
             </div>
-            <ResponsiveContainer height={ 200 } width="100%">
+            <ResponsiveContainer height={ 207 } width="100%">
               <AreaChart
                   data={ data.chart }
                   margin={ Styles.chartMargins }
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 16803e34c..2392a2b75 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { observer, useObserver } from 'mobx-react-lite';
+import { useObserver } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { Button, PageTitle, Link, Loader, NoContent, ItemMenu } from 'UI';
-import { withSiteId, dashboardMetricCreate, dashboardSelected, dashboard } from 'App/routes';
+import { Button, PageTitle, Loader, NoContent, ItemMenu } from 'UI';
+import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
 import { confirm } from 'UI/Confirmation';
@@ -13,12 +13,14 @@ import DashboardEditModal from '../DashboardEditModal';
 import DateRange from 'Shared/DateRange';
 import AlertFormModal from 'App/components/Alerts/AlertFormModal';
 import withPageTitle from 'HOCs/withPageTitle';
+import withReport from 'App/components/hocs/withReport';
 
 interface Props {
     siteId: number;
     history: any
     match: any
     dashboardId: any
+    renderReport?: any
 }
 function DashboardView(props: Props) {
     const { siteId, dashboardId } = props;
@@ -104,8 +106,9 @@ function DashboardView(props: Props) {
                                 <ItemMenu
                                     label="Options"
                                     items={[
-                                        { text: 'Rename', onClick: onEdit },
-                                        { text: 'Delete', onClick: onDelete },
+                                        { icon: 'filetype-pdf', text: 'Download Report', onClick: props.renderReport },
+                                        { icon: 'pencil', text: 'Rename', onClick: onEdit },
+                                        { icon: 'trash', text: 'Delete', onClick: onDelete },
                                     ]}
                                 />
                             </div>
@@ -115,6 +118,7 @@ function DashboardView(props: Props) {
                         siteId={siteId}
                         dashboardId={dashboardId}
                         onEditHandler={onAddWidgets}
+                        id="report"
                     />
                     <AlertFormModal
                         showModal={showAlertModal}
@@ -126,4 +130,6 @@ function DashboardView(props: Props) {
     ));
 }
 
-export default withPageTitle('Dashboards - OpenReplay')(withRouter(withModal(DashboardView)));
\ No newline at end of file
+export default withPageTitle('Dashboards - OpenReplay')(
+    withReport(withRouter(withModal(DashboardView)))
+);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index 7c5d82d69..8df4bd488 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -8,13 +8,14 @@ interface Props {
     siteId: string,
     dashboardId: string;
     onEditHandler: () => void;
+    id?: string;
 }
 function DashboardWidgetGrid(props) {
     const { dashboardId, siteId } = props;
     const { dashboardStore } = useStore();
     const loading = useObserver(() => dashboardStore.isLoading);
-    const dashbaord: any = dashboardStore.selectedDashboard;
-    const list: any = useObserver(() => dashbaord?.widgets);
+    const dashboard: any = dashboardStore.selectedDashboard;
+    const list: any = useObserver(() => dashboard?.widgets);
 
     return useObserver(() => (
         <Loader loading={loading}>
@@ -29,13 +30,13 @@ function DashboardWidgetGrid(props) {
                     </div>
                 }
             >
-                <div className="grid gap-4 grid-cols-4 items-start pb-10">
+                <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
                     {list && list.map((item, index) => (
                         <WidgetWrapper
                             index={index}
                             widget={item}
                             key={item.widgetId}
-                            moveListItem={(dragIndex, hoverIndex) => dashbaord.swapWidgetPosition(dragIndex, hoverIndex)}
+                            moveListItem={(dragIndex, hoverIndex) => dashboard.swapWidgetPosition(dragIndex, hoverIndex)}
                             dashboardId={dashboardId}
                             siteId={siteId}
                             isWidget={true}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index b29ab800c..8f2d5b051 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -86,14 +86,15 @@ function WidgetWrapper(props: Props) {
             }}
             ref={dragDropRef}
             onClick={props.onClick ? props.onClick : () => {}}
+            id={`widget-${widget.widgetId}`}
         >
             {isTemplate && <TemplateOverlay />}
             <div
                 className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate })}
             >
-                <h3 className="capitalize">{widget.name}</h3>
+                <div className="capitalize w-full font-medium">{widget.name}</div>
                 {isWidget && (
-                    <div className="flex items-center">
+                    <div className="flex items-center" id="no-print">
                         {!isPredefined && (
                             <>
                                 <AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
@@ -118,11 +119,11 @@ function WidgetWrapper(props: Props) {
                 )}
             </div>
 
-            <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} >
+            {/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
                 <div className="px-4" onClick={onChartClick}>
                     <WidgetChart metric={widget} isWidget={isWidget} />
                 </div>
-            </LazyLoad>
+            {/* </LazyLoad> */}
         </div>
     ));
 }
diff --git a/frontend/app/components/hocs/withReport.tsx b/frontend/app/components/hocs/withReport.tsx
new file mode 100644
index 000000000..d5f77adc9
--- /dev/null
+++ b/frontend/app/components/hocs/withReport.tsx
@@ -0,0 +1,142 @@
+import React, { useEffect } from 'react';
+import { convertElementToImage } from 'App/utils';
+import { jsPDF } from "jspdf";
+import { useStore } from 'App/mstore';
+import { observer, useObserver } from 'mobx-react-lite';
+import { connect } from 'react-redux';
+interface Props {
+    site: any
+}
+export default function withReport<P extends Props>(
+    WrappedComponent: React.ComponentType<P>,
+) {
+    const ComponentWithReport = (props: P) => {
+        const [rendering, setRendering] = React.useState(false);
+        const { site } = props;
+        const { dashboardStore } = useStore();
+        const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
+        const widgets: any = useObserver(() => dashboard?.widgets);
+        const period = useObserver(() => dashboardStore.period);
+        console.log('site', site)
+        
+        const addFooters = (doc) => {
+            const pageCount = doc.internal.getNumberOfPages();
+            for(var i = 1; i <= pageCount; i++) {
+                doc.setPage(i);
+                doc.setFontSize(10);
+                doc.setTextColor(136,136,136);
+                doc.text('Page ' + String(i) + ' of ' + String(pageCount), 196,285,null,null,"right");
+            }
+        }
+    
+        const renderReport = async () => {
+            document.body.scrollIntoView();
+            const doc = new jsPDF('p', 'mm', 'a4');
+            
+            doc.addMetadata('Author', 'OpenReplay');
+            doc.addMetadata('Title', 'OpenReplay Report');
+            doc.addMetadata('Subject', 'OpenReplay Report');
+            doc.addMetadata('Keywords', 'OpenReplay Report');
+            doc.addMetadata('Creator', 'OpenReplay');
+            doc.addMetadata('Producer', 'OpenReplay');
+            doc.addMetadata('CreationDate', new Date().toISOString());
+    
+    
+            const parentElement = document.getElementById('report') as HTMLElement;
+            const pageHeight = 1200;
+            const pagesCount = parentElement.offsetHeight / pageHeight;
+            const pages: Array<any> = [];
+            for(let i = 0; i < pagesCount; i++) {
+                const page = document.createElement('div');
+                page.classList.add('page');
+                page.style.height = `${pageHeight}px`;
+                page.style.whiteSpace = 'no-wrap !important';
+                
+                const childrens = Array.from(parentElement.children).filter((child) => {
+                    const rect = child.getBoundingClientRect();
+                    const parentRect = parentElement.getBoundingClientRect();
+                    const top = rect.top - parentRect.top;
+                    return top >= i * pageHeight && top < (i + 1) * pageHeight;
+                });
+                if (childrens.length > 0) {
+                    pages.push(childrens);
+                }
+            }
+    
+            const rportLayer = document.getElementById("report-layer");
+    
+            pages.forEach(async (page, index) => {
+                const pageDiv = document.createElement('div');
+                pageDiv.classList.add('grid', 'gap-4', 'grid-cols-4', 'items-start', 'pb-10', 'auto-rows-min', 'printable-report');
+                pageDiv.id = `page-${index}`;
+                pageDiv.style.backgroundColor = '#f6f6f6';
+                pageDiv.style.gridAutoRows = 'min-content';
+                pageDiv.style.padding = '30px';
+                pageDiv.style.height = '490mm';
+    
+                if (index === 0) {
+                    const header = document.getElementById('report-header')?.cloneNode(true) as HTMLElement;
+                    header.classList.add('col-span-4');
+                    header.style.display = 'block';
+                    pageDiv.appendChild(header);
+                }
+                page.forEach((child) => {
+                    pageDiv.appendChild(child.cloneNode(true));
+                })
+                rportLayer?.appendChild(pageDiv);
+            })
+    
+            setTimeout(async () => {
+                for (let i = 0; i < pages.length; i++) {
+                    const pageDiv = document.getElementById(`page-${i}`) as HTMLElement;
+                    const pageImage = await convertElementToImage(pageDiv);
+                    doc.addImage(pageImage, 'PNG', 0, 0, 210, 0);
+                    if (i === pages.length - 1) {
+                        addFooters(doc);
+                        doc.save('report.pdf');
+                        rportLayer!.innerHTML = '';
+                    } else {
+                        doc.addPage();
+                    }
+                }
+            }, 100)
+        }
+        
+        return (
+            <>
+                <div className="mb-2" id="report-header" style={{ display: 'none' }}>
+                    <div className="flex items-end justify-between" style={{ margin: '-30px', padding: '25px 30px', backgroundColor: 'white' }}>
+                        <div className="">
+                            <img src="/logo.svg" style={{ height: '30px' }} />
+                        </div>
+                        <div style={{ whiteSpace: 'nowrap' }}>
+                            Project: <span className="font-medium">{site && site.name}</span>
+                        </div>
+                    </div>
+                    <div className="flex items-end mt-16 justify-between">
+                        <div className="text-2xl font-medium">{dashboard && dashboard.name}</div>
+                        <div className="font-medium">
+                            {period && (period.range.start.format('MMM Do YY') + ' - ' + period.range.end.format('MMM Do YY'))}
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    id="report-layer"
+                    style={{ 
+                        position: 'fixed',
+                        top: '0',
+                        left: '0',
+                        zIndex: '-1',
+                        opacity: '0',
+                    }}
+                ></div>
+                <WrappedComponent {...props} renderReport={renderReport} rendering={rendering} />
+            </>
+        )
+    }
+
+    return connect(state => ({
+        site: state.getIn(['site', 'instance']),
+    }))(ComponentWithReport);
+}
\ No newline at end of file
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 7e99468ad..245158049 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -260,8 +260,6 @@ p {
   }
 }
 
-
-
 .tippy-tooltip.openreplay-theme {
   background-color: $tealx;
   color: white;
@@ -273,4 +271,29 @@ p {
 
 .tippy-tooltip.openreplay-theme .tippy-backdrop {
   background-color: $tealx;
+}
+
+@media print {
+  .no-print {
+    display:none !important;
+  }
+}
+
+.printable-report * {
+  white-space: nowrap !important;
+}
+.recharts-default-legend {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.recharts-legend-item {
+  display: flex !important;
+  align-items: center !important;
+  white-space: nowrap !important;
+}
+
+.recharts-legend-item-text {
+  white-space: nowrap !important;
 }
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filetype-pdf.svg b/frontend/app/svg/icons/filetype-pdf.svg
new file mode 100644
index 000000000..e1fc9b698
--- /dev/null
+++ b/frontend/app/svg/icons/filetype-pdf.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-pdf" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.238.241.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.14 1.14 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/report.pdf b/frontend/app/svg/icons/report.pdf
new file mode 100644
index 000000000..33eab9271
Binary files /dev/null and b/frontend/app/svg/icons/report.pdf differ
diff --git a/frontend/app/utils.js b/frontend/app/utils.js
index 5f7e446fa..f7ae27b5b 100644
--- a/frontend/app/utils.js
+++ b/frontend/app/utils.js
@@ -1,5 +1,6 @@
 import JSBI from 'jsbi';
 import chroma from "chroma-js";
+import * as htmlToImage from 'html-to-image';
 
 export function debounce(callback, wait, context = this) {
   let timeout = null;
@@ -246,4 +247,16 @@ export const positionOfTheNumber = (min, max, value, length) => {
   const interval = (max - min) / length;
   const position = Math.round((value - min) / interval);
   return position;
+}
+
+export const convertElementToImage = async (el) => {
+  const fontEmbedCss = await htmlToImage.getFontEmbedCSS(el);
+  const image = await htmlToImage.toJpeg(el, { 
+    pixelRatio: 2,
+    fontEmbedCss,
+    filter: function (node) {
+      return node.id !== 'no-print';
+    },
+  });
+  return image;
 }
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 75fcde026..294de4294 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,9 +15,11 @@
         "codemirror": "^5.62.3",
         "copy-to-clipboard": "^3.3.1",
         "deep-diff": "^1.0.2",
+        "html-to-image": "^1.9.0",
         "immutable": "^4.0.0-rc.12",
         "jsbi": "^4.1.0",
         "jshint": "^2.11.1",
+        "jspdf": "^2.5.1",
         "luxon": "^1.24.1",
         "mobx": "^6.3.8",
         "mobx-react-lite": "^3.1.6",
@@ -4679,7 +4681,7 @@
       "version": "14.18.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.13.tgz",
       "integrity": "sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.1",
@@ -4731,7 +4733,7 @@
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -4745,11 +4747,17 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz",
       "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -4769,7 +4777,7 @@
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
       "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/resize-observer-browser": {
       "version": "0.1.7",
@@ -4780,7 +4788,7 @@
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
@@ -5625,7 +5633,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true,
       "bin": {
         "atob": "bin/atob.js"
       },
@@ -6139,6 +6146,15 @@
       "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
       "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -6623,6 +6639,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -6908,6 +6935,25 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -7834,7 +7880,7 @@
       "version": "3.22.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.2.tgz",
       "integrity": "sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -8333,6 +8379,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -9385,6 +9440,12 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.6.tgz",
+      "integrity": "sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -10858,6 +10919,11 @@
       "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
       "dev": true
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -12655,6 +12721,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.9.0.tgz",
+      "integrity": "sha512-9gaDCIYg62Ek07F2pBk76AHgYZ2gxq2YALU7rK3gNCqXuhu6cWzsOQqM7qGbjZiOzxGzrU1deDqZpAod2NEwbA=="
+    },
     "node_modules/html-void-elements": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
@@ -12726,6 +12797,19 @@
         "object-assign": "^4.0.1"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
@@ -14098,6 +14182,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz",
@@ -19986,6 +20087,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -20986,6 +21096,15 @@
         "node": "*"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
@@ -21487,6 +21606,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -22128,6 +22256,15 @@
       "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
       "dev": true
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/throttle-debounce": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
@@ -23299,6 +23436,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
@@ -29063,7 +29209,7 @@
       "version": "14.18.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.13.tgz",
       "integrity": "sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==",
-      "dev": true
+      "devOptional": true
     },
     "@types/node-fetch": {
       "version": "2.6.1",
@@ -29115,7 +29261,7 @@
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "devOptional": true
     },
     "@types/q": {
       "version": "1.5.5",
@@ -29129,11 +29275,17 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@types/react": {
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz",
       "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -29144,7 +29296,7 @@
           "version": "3.0.11",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
           "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -29166,7 +29318,7 @@
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "devOptional": true
     },
     "@types/source-list-map": {
       "version": "0.1.2",
@@ -29891,8 +30043,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "autoprefixer": {
       "version": "7.2.6",
@@ -30304,6 +30455,12 @@
       "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
       "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -30683,6 +30840,11 @@
         "picocolors": "^1.0.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -30911,6 +31073,22 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
       "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw=="
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -31656,7 +31834,7 @@
       "version": "3.22.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.2.tgz",
       "integrity": "sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA==",
-      "dev": true
+      "devOptional": true
     },
     "core-js-compat": {
       "version": "3.22.2",
@@ -32073,6 +32251,15 @@
       "dev": true,
       "requires": {}
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -32946,6 +33133,12 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.6.tgz",
+      "integrity": "sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==",
+      "optional": true
+    },
     "domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -34167,6 +34360,11 @@
       "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
       "dev": true
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -35585,6 +35783,11 @@
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
       "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg=="
     },
+    "html-to-image": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.9.0.tgz",
+      "integrity": "sha512-9gaDCIYg62Ek07F2pBk76AHgYZ2gxq2YALU7rK3gNCqXuhu6cWzsOQqM7qGbjZiOzxGzrU1deDqZpAod2NEwbA=="
+    },
     "html-void-elements": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
@@ -35638,6 +35841,16 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
@@ -36669,6 +36882,21 @@
         "universalify": "^2.0.0"
       }
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz",
@@ -41376,6 +41604,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true
+    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -42227,6 +42461,12 @@
       "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
@@ -42639,6 +42879,12 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -43125,6 +43371,15 @@
       "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
       "dev": true
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "throttle-debounce": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
@@ -44005,6 +44260,15 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7f51ba174..6e683ad27 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,9 +22,11 @@
     "codemirror": "^5.62.3",
     "copy-to-clipboard": "^3.3.1",
     "deep-diff": "^1.0.2",
+    "html-to-image": "^1.9.0",
     "immutable": "^4.0.0-rc.12",
     "jsbi": "^4.1.0",
     "jshint": "^2.11.1",
+    "jspdf": "^2.5.1",
     "luxon": "^1.24.1",
     "mobx": "^6.3.8",
     "mobx-react-lite": "^3.1.6",