diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 877f1165..c0161fb5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,9 @@
 				"crypto-js": "^4.2.0",
 				"dayjs": "^1.11.10",
 				"detect-touch-device": "^1.1.6",
+				"dom-to-image-more": "^3.3.0",
 				"echarts": "^5.5.0",
+				"html2canvas": "^1.4.1",
 				"jose": "^5.2.2",
 				"js-md5": "^0.8.3",
 				"lodash": "^4.17.21",
@@ -37,7 +39,7 @@
 				"vue": "^3.4.21",
 				"vue-advanced-cropper": "^2.8.8",
 				"vue-highlight-words": "^3.0.1",
-				"vue-i18n": "^9.9.1",
+				"vue-i18n": "^9.10.1",
 				"vue-router": "^4.3.0",
 				"vue-sjv": "^0.0.6",
 				"vue3-apexcharts": "^1.5.2",
@@ -56,7 +58,7 @@
 				"@types/lodash": "^4.14.202",
 				"@types/markdown-it": "^13.0.7",
 				"@types/markdown-it-highlightjs": "^3.3.4",
-				"@types/node": "^20.11.22",
+				"@types/node": "^20.11.24",
 				"@types/validator": "^13.11.9",
 				"@vitejs/plugin-vue": "^5.0.4",
 				"@vitejs/plugin-vue-jsx": "^3.1.0",
@@ -666,7 +668,6 @@
 		},
 		"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
 			"version": "1.3.0",
-			"extraneous": true,
 			"inBundle": true,
 			"license": "MIT",
 			"engines": {
@@ -1361,12 +1362,12 @@
 			}
 		},
 		"node_modules/@intlify/core-base": {
-			"version": "9.9.1",
-			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.1.tgz",
-			"integrity": "sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==",
+			"version": "9.10.1",
+			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.10.1.tgz",
+			"integrity": "sha512-0+Wtjj04GIyglh5KKiNjRwgjpHrhqqGZhaKY/QVjjogWKZq5WHROrTi84pNVsRN18QynyPmjtsVUWqFKPQ45xQ==",
 			"dependencies": {
-				"@intlify/message-compiler": "9.9.1",
-				"@intlify/shared": "9.9.1"
+				"@intlify/message-compiler": "9.10.1",
+				"@intlify/shared": "9.10.1"
 			},
 			"engines": {
 				"node": ">= 16"
@@ -1376,11 +1377,11 @@
 			}
 		},
 		"node_modules/@intlify/message-compiler": {
-			"version": "9.9.1",
-			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.1.tgz",
-			"integrity": "sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==",
+			"version": "9.10.1",
+			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.10.1.tgz",
+			"integrity": "sha512-b68UTmRhgZfswJZI7VAgW6BXZK5JOpoi5swMLGr4j6ss2XbFY13kiw+Hu+xYAfulMPSapcHzdWHnq21VGnMCnA==",
 			"dependencies": {
-				"@intlify/shared": "9.9.1",
+				"@intlify/shared": "9.10.1",
 				"source-map-js": "^1.0.2"
 			},
 			"engines": {
@@ -1391,9 +1392,9 @@
 			}
 		},
 		"node_modules/@intlify/shared": {
-			"version": "9.9.1",
-			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.1.tgz",
-			"integrity": "sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==",
+			"version": "9.10.1",
+			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.10.1.tgz",
+			"integrity": "sha512-liyH3UMoglHBUn70iCYcy9CQlInx/lp50W2aeSxqqrvmG+LDj/Jj7tBJhBoQL4fECkldGhbmW0g2ommHfL6Wmw==",
 			"engines": {
 				"node": ">= 16"
 			},
@@ -2417,9 +2418,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "20.11.23",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.23.tgz",
-			"integrity": "sha512-ZUarKKfQuRILSNYt32FuPL20HS7XwNT7/uRwSV8tiHWfyyVwDLYZNF6DZKc2bove++pgfsXn9sUwII/OsQ82cQ==",
+			"version": "20.11.24",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.24.tgz",
+			"integrity": "sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -3657,6 +3658,14 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
+		"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==",
+			"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",
@@ -4394,6 +4403,14 @@
 			"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
 			"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
 		},
+		"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==",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/css-render": {
 			"version": "0.15.12",
 			"resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.12.tgz",
@@ -5101,6 +5118,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",
@@ -6567,6 +6589,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/html2canvas": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+			"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+			"dependencies": {
+				"css-line-break": "^2.1.0",
+				"text-segmentation": "^1.0.3"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/http-assert": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
@@ -11715,6 +11749,14 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"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==",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -12305,6 +12347,14 @@
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
+		"node_modules/utrie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+			"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+			"dependencies": {
+				"base64-arraybuffer": "^1.0.2"
+			}
+		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -12835,12 +12885,12 @@
 			}
 		},
 		"node_modules/vue-i18n": {
-			"version": "9.9.1",
-			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.1.tgz",
-			"integrity": "sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==",
+			"version": "9.10.1",
+			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.10.1.tgz",
+			"integrity": "sha512-37HVJQZ/pZaRXGzFmmMomM1u1k7kndv3xCBPYHKEVfv5W3UVK67U/TpBug71ILYLNmjHLHdvTUPRF81pFT5fFg==",
 			"dependencies": {
-				"@intlify/core-base": "9.9.1",
-				"@intlify/shared": "9.9.1",
+				"@intlify/core-base": "9.10.1",
+				"@intlify/shared": "9.10.1",
 				"@vue/devtools-api": "^6.5.0"
 			},
 			"engines": {
diff --git a/frontend/package.json b/frontend/package.json
index 820234ce..1497a09e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -62,7 +62,7 @@
 		"vue": "^3.4.21",
 		"vue-advanced-cropper": "^2.8.8",
 		"vue-highlight-words": "^3.0.1",
-		"vue-i18n": "^9.9.1",
+		"vue-i18n": "^9.10.1",
 		"vue-router": "^4.3.0",
 		"vue-sjv": "^0.0.6",
 		"vue3-apexcharts": "^1.5.2",
@@ -81,7 +81,7 @@
 		"@types/lodash": "^4.14.202",
 		"@types/markdown-it": "^13.0.7",
 		"@types/markdown-it-highlightjs": "^3.3.4",
-		"@types/node": "^20.11.22",
+		"@types/node": "^20.11.24",
 		"@types/validator": "^13.11.9",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"@vitejs/plugin-vue-jsx": "^3.1.0",
diff --git a/frontend/src/components/reportCreation/Panels.vue b/frontend/src/components/reportCreation/Panels.vue
new file mode 100644
index 00000000..bdd7c673
--- /dev/null
+++ b/frontend/src/components/reportCreation/Panels.vue
@@ -0,0 +1,163 @@
+<template>
+	<div class="report-panels">
+		isDirty:{{ isDirty }},{{ linksList.length }}
+		<div class="panels-container grid grid-cols-2 gap-6" :class="{ printing }">
+			<div class="panel" v-for="panel of linksList" :key="panel.panel_id">
+				<iframe :src="panel.panel_url + '&theme=light'" v-show="panelTheme === 'light'"></iframe>
+				<iframe :src="panel.panel_url + '&theme=dark'" v-show="panelTheme === 'dark'"></iframe>
+			</div>
+		</div>
+
+		<div class="toolbar">
+			<n-button type="success" v-if="linksList.length" @click="print()">
+				<template #icon>
+					<Icon :name="PrintIcon"></Icon>
+				</template>
+				Print Report
+			</n-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { NButton } from "naive-ui"
+import type { PanelLink } from "@/types/reporting"
+import Icon from "@/components/common/Icon.vue"
+import { ref, nextTick } from "vue"
+// import html2canvas from "html2canvas"
+// @ts-ignore
+// import domtoimage from "dom-to-image-more"
+
+const isDirty = defineModel<boolean>("isDirty", { default: false })
+const printing = ref(false)
+const panelTheme = ref<"light" | "dark">("light")
+
+const { linksList } = defineProps<{
+	linksList: PanelLink[]
+}>()
+
+const PrintIcon = "carbon:printer"
+
+function print() {
+	printing.value = true
+	// panelTheme.value = "light"
+
+	nextTick(() => {
+		setTimeout(() => {
+			window.print()
+			// panelTheme.value = "dark"
+			printing.value = false
+		}, 2000)
+	})
+
+	/*
+	// @ts-ignore
+	html2canvas(document.querySelector(".page"), { allowTaint: true, useCORS: true }).then(canvas => {
+		//document.body.appendChild(canvas)
+		console.log(canvas.toDataURL("image/jpeg", 0.9))
+	})
+	var node = document.querySelector(".page")
+
+	domtoimage
+		.toPng(node)
+		// @ts-ignore
+		.then(function (dataUrl) {
+			var img = new Image()
+			img.src = dataUrl
+			console.log(dataUrl)
+			document.body.appendChild(img)
+		})
+		// @ts-ignore
+		.catch(function (error) {
+			console.error("oops, something went wrong!", error)
+		})
+		*/
+}
+</script>
+
+<style lang="scss" scoped>
+.report-panels {
+	.panels-container {
+		.panel {
+			iframe {
+				width: 100%;
+				height: 500px;
+			}
+		}
+
+		&.printing {
+			grid-template-columns: repeat(1, minmax(0, 1fr));
+			max-width: 600px;
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+@media print {
+	html,
+	body {
+		overflow: initial;
+	}
+	body {
+		#app {
+			height: initial;
+			background-color: white;
+
+			& > .n-config-provider {
+				& > .layout {
+					display: block;
+					height: initial;
+					background-color: white;
+
+					& > .header-bar {
+						display: none;
+					}
+					& > .main {
+						background-color: white;
+						overflow: initial;
+						height: initial;
+
+						header.toolbar {
+							display: none;
+						}
+						footer.footer {
+							display: none;
+						}
+
+						& > .n-scrollbar {
+							overflow: initial;
+							height: initial;
+
+							& > .n-scrollbar-container {
+								overflow: initial;
+								height: initial;
+							}
+						}
+
+						.page {
+							.report-wizard {
+								display: none;
+							}
+							.report-panels {
+								max-width: 600px;
+
+								.panels-container {
+									grid-template-columns: repeat(1, minmax(0, 1fr));
+
+									.panel {
+										border: 2px solid black;
+									}
+								}
+								.toolbar {
+									display: none;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/frontend/src/components/reportCreation/Wizard.vue b/frontend/src/components/reportCreation/Wizard.vue
index 4680ac5c..53b5219d 100644
--- a/frontend/src/components/reportCreation/Wizard.vue
+++ b/frontend/src/components/reportCreation/Wizard.vue
@@ -58,17 +58,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue"
+import { computed, onBeforeMount, ref, watchEffect, watch } from "vue"
 import { NSpin, NForm, NFormItem, NInputGroup, NInputNumber, NButton, NSelect, useMessage } from "naive-ui"
 import Api from "@/api"
 import Icon from "@/components/common/Icon.vue"
 import type { Dashboard, Org, Panel, PanelLink } from "@/types/reporting"
 import type { PanelsLinksPayload, PanelsLinksTimeUnit } from "@/api/reporting"
-import { watch } from "vue"
 import { useStorage } from "@vueuse/core"
 
+const emit = defineEmits<{
+	(e: "reset"): void
+	(e: "generated", value: PanelLink[]): void
+}>()
+
 const GenerateLinksIcon = "carbon:report-data"
-// const PrintIcon = "carbon:report-data"
 
 const message = useMessage()
 const orgsList = ref<Org[]>([])
@@ -105,6 +108,10 @@ const canSelectDashboard = computed(() => !!selectedOrgId.value)
 const canSelectPanels = computed(() => canSelectDashboard.value && !!selectedDashboardUID.value)
 const isValid = computed(() => canSelectPanels.value && selectedPanels.value.length)
 
+watch([selectedOrgId, selectedDashboardUID, selectedPanels, timeUnit, timeValue], () => {
+	emit("reset")
+})
+
 watch(selectedOrgId, val => {
 	dashboardsList.value = []
 	panelsList.value = []
@@ -215,6 +222,7 @@ function getLinks() {
 			.then(res => {
 				if (res.data.success) {
 					linksList.value = res.data?.links || []
+					emit("generated", linksList.value)
 				} else {
 					message.warning(res.data?.message || "An error occurred. Please try again later.")
 				}
diff --git a/frontend/src/views/ReportCreation.vue b/frontend/src/views/ReportCreation.vue
index 9afe8d83..a69653df 100644
--- a/frontend/src/views/ReportCreation.vue
+++ b/frontend/src/views/ReportCreation.vue
@@ -1,9 +1,21 @@
 <template>
 	<div class="page">
-		<ReportCreation />
+		<ReportWizard @generated="setLinks($event)" @reset="isDirty = true" />
+		<ReportPanels :links-list="linksList" v-model:is-dirty="isDirty" />
 	</div>
 </template>
 
 <script setup lang="ts">
-import ReportCreation from "@/components/reportCreation/Wizard.vue"
+import { ref } from "vue"
+import ReportWizard from "@/components/reportCreation/Wizard.vue"
+import ReportPanels from "@/components/reportCreation/Panels.vue"
+import type { PanelLink } from "@/types/reporting"
+
+const linksList = ref<PanelLink[]>([])
+const isDirty = ref<boolean>(false)
+
+function setLinks(links: PanelLink[]) {
+	linksList.value = links
+	isDirty.value = false
+}
 </script>