diff --git a/api.php b/api.php
index 18db979..7931f39 100644
--- a/api.php
+++ b/api.php
@@ -16,7 +16,7 @@ switch ($action) {
 		$result = array('report_id' => $report_id);
 		break;
 	case 'update':
-		$suc = reportUpdate($_REQUEST['report_id'], $_REQUEST['title'], $_REQUEST['description'], $_REQUEST['status'], $_REQUEST['group'], $_REQUEST['priority']);
+		$suc = reportUpdate($_REQUEST['report_id'], json_decode($_REQUEST['report_data'], true));
 		if ($suc === false) $error = 'Update failed';
 		$result = array('processed' => $suc);
 		break;
@@ -84,11 +84,13 @@ function help()
 				'description' => 'Update report',
 				'params' => [
 					'report_id' => 'Report id',
-					'title' => 'Report title',
-					'description' => 'Report description',
-					'status' => 'Report status',
-					'group' => 'Report group',
-					'priority' => 'Report priority',
+					'report_data' => [
+						'title' => 'Report title',
+						'description' => 'Report description',
+						'status' => 'Report status',
+						'group' => 'Report group',
+						'priority' => 'Report priority',
+					]
 				]
 			],
 			'delete' => [
diff --git a/data/README.md b/data/README.md
new file mode 100644
index 0000000..ee3a7d0
--- /dev/null
+++ b/data/README.md
@@ -0,0 +1 @@
+# Directory for files of report: database, images, etc.
\ No newline at end of file
diff --git a/lib/functions.inc.php b/lib/functions.inc.php
index f823d77..a5bb514 100644
--- a/lib/functions.inc.php
+++ b/lib/functions.inc.php
@@ -151,15 +151,9 @@ function reportAdd($title, $description, $status = 0, $group = null, $priority =
 	return $db->id();
 }
 
-function reportUpdate($report_id, $title, $description, $status = 0, $group = null, $priority = 0) {
+function reportUpdate($report_id, $report_data) {
 	global $db;
-	$stm = $db->update('reports', [
-		'report_title' => $title,
-		'report_description' => $description,
-		'report_status' => $status,
-		'report_group' => $group,
-		'report_priority' => $priority,
-	], [
+	$stm = $db->update('reports', $report_data, [
 		'report_id' => $report_id
 	]);
 	return ($stm->rowCount() > 0);
diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index 0801cd0..6cdfc06 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -12,6 +12,7 @@
 	05 - ARCHIVE
 	06 - API
 	07 - ABOUT
+	08 - REPORT
 	80 - FORM
 	99 - LIGHT MODE
 
@@ -289,6 +290,41 @@ button:focus-visible,
 	filter: brightness(1.2);
 }
 
+/* ----------------------------------------------------
+   08 - REPORT
+   */
+#report {
+	margin: 0 auto;
+	padding: 10px;
+}
+#report .report-header {
+	display: flex;
+	flex-direction: row;
+	/* justify-content: space-between; */
+}
+#report .report-header div {
+	display: flex;
+	flex-direction: row;
+	margin-right: 20px;
+}
+#report .report-header div span {
+	background-color: var(--color-bg0);
+	color: var(--color-text0);
+	padding: 2px 10px;
+}
+#report .report-header div strong {
+	background-color: var(--color-bg1);
+	color: var(--color-text0);
+	padding: 2px 10px;
+}
+#report .description {
+	background-color: var(--color-bg2);
+	padding: 10px;
+	text-align: justify;
+	white-space: pre-line
+}
+
+
 /* ----------------------------------------------------
    80 - FORM
    */
diff --git a/webapp/src/backend.js b/webapp/src/backend.js
index 001f47b..846cf02 100644
--- a/webapp/src/backend.js
+++ b/webapp/src/backend.js
@@ -57,14 +57,8 @@ export const backend = {
 			priority: priority});
 	},
 
-	update(id, title, description, status, group, priority) {
-		return this.callPromise('update', {
-			report_id: id,
-			title: title,
-			description: description,
-			status: status,
-			group: group,
-			priority: priority});
+	update(id, report_data) {
+		return this.callPromise('update', {report_id: id, report_data: report_data});
 	},
 
 	delete(id) {
diff --git a/webapp/src/components/Report.vue b/webapp/src/components/ReportBox.vue
similarity index 67%
rename from webapp/src/components/Report.vue
rename to webapp/src/components/ReportBox.vue
index 949ce67..e66d229 100644
--- a/webapp/src/components/Report.vue
+++ b/webapp/src/components/ReportBox.vue
@@ -1,12 +1,13 @@
 <script setup>
 defineProps({
+	report_id: Number,
 	title: String,
 	description: String,
 	date: String,
 });
 </script>
 <template>
-	<div class="report">
+	<div class="report" @click="goToReport(report_id)">
 		<div class="report-header">
 			<div class="report-title">
 				<h3><font-awesome-icon :icon="['fas', 'bug']" /> {{ title }}</h3>
@@ -20,3 +21,13 @@ defineProps({
 		<div class="report-date"><font-awesome-icon :icon="['fas', 'calendar-days']" /> {{ date }}</div>
 	</div>
 </template>
+<script>
+export default {
+	name: "ReportBox",
+	methods: {
+		goToReport(report_id) {
+			this.$router.push("/report/" + report_id);
+		},
+	},
+};
+</script>
\ No newline at end of file
diff --git a/webapp/src/router.js b/webapp/src/router.js
index 1396228..3fe0214 100644
--- a/webapp/src/router.js
+++ b/webapp/src/router.js
@@ -5,6 +5,7 @@ import About from "./views/About.vue";
 import BugAdd from "./views/BugAdd.vue";
 import Archive from "./views/Archive.vue";
 import API from "./views/API.vue";
+import Report from "./views/Report.vue";
 
 const routes = [
 	{ path: "/", component: Dashboard },
@@ -12,6 +13,7 @@ const routes = [
 	{ path: "/add", component: BugAdd },
 	{ path: "/archive", component: Archive },
 	{ path: "/api", component: API },
+	{ path: "/report/:id", component: Report },
 ];
 
 export const router = createRouter({
diff --git a/webapp/src/views/Dashboard.vue b/webapp/src/views/Dashboard.vue
index 8fed5b6..e598aba 100644
--- a/webapp/src/views/Dashboard.vue
+++ b/webapp/src/views/Dashboard.vue
@@ -17,7 +17,8 @@
 							dragging: isDragable(element),
 						}"
 					>
-						<Report
+						<ReportBox
+							:report_id="element.report_id"
 							:title="element.report_title"
 							:description="element.report_description"
 							:date="element.created_dt"
@@ -43,7 +44,8 @@
 							dragging: isDragable(element),
 						}"
 					>
-						<Report
+						<ReportBox
+							:report_id="element.report_id"
 							:title="element.report_title"
 							:description="element.report_description"
 							:date="element.created_dt"
@@ -69,7 +71,8 @@
 							dragging: isDragable(element),
 						}"
 					>
-						<Report
+						<ReportBox
+							:report_id="element.report_id"
 							:title="element.report_title"
 							:description="element.report_description"
 							:date="element.created_dt"
@@ -95,7 +98,8 @@
 							dragging: isDragable(element),
 						}"
 					>
-						<Report
+						<ReportBox
+							:report_id="element.report_id"
 							:title="element.report_title"
 							:description="element.report_description"
 							:date="element.created_dt"
@@ -125,13 +129,13 @@ function isDragable(element) {
 </script>
 
 <script>
-import Report from "../components/Report.vue";
+import ReportBox from "../components/ReportBox.vue";
 import draggable from "vuedraggable";
 import { backend } from "../backend";
 
 export default {
 	components: {
-		Report,
+		ReportBox,
 		draggable,
 	},
 	data() {
diff --git a/webapp/src/views/Report.vue b/webapp/src/views/Report.vue
new file mode 100644
index 0000000..71f9bb0
--- /dev/null
+++ b/webapp/src/views/Report.vue
@@ -0,0 +1,72 @@
+<template>
+	<div id="report">
+		<div class="report-header">
+			<div>
+				<span>Report</span>
+				<strong>{{ report_id }}</strong>
+			</div>
+			<div>
+				<span>Vytvorene</span>
+				<strong>{{ report.created_dt }}</strong>
+			</div>
+			<div>
+				<span>Stav</span>
+				<strong>{{ report.report_status }}</strong>
+			</div>
+			<div>
+				<span>Priorita</span>
+				<strong>{{ report.report_priority }}</strong>
+			</div>
+			<div>
+				<span>Skupina</span>
+				<strong>{{ report.report_group }}</strong>
+			</div>
+		</div>
+		<h1 contenteditable="true" @blur="onTitleChange" ref="reportTitle">
+			{{ report.report_title }}
+		</h1>
+		<p class="description" contenteditable="true" @blur="onDescriptionChange" ref="reportDescription">{{ report.report_description }}</p>
+	</div>
+</template>
+
+<script>
+import { backend } from "../backend";
+export default {
+	name: "Report",
+	data() {
+		return {
+			report_id: this.$route.params.id,
+			report: {
+				report_id: 0,
+				report_title: "Nacitavam report",
+				report_description: "...",
+				report_status: 0,
+				report_group: "--",
+				report_priority: 1,
+				created_dt: "--",
+				ordnum: 0,
+			},
+		};
+	},
+	mounted() {
+		console.log(this.report_id);
+		this.loadReportData();
+	},
+	methods: {
+		loadReportData() {
+			backend.get(this.report_id).then((report) => {
+				this.report = report;
+				console.log(this.report);
+			});
+		},
+		onTitleChange(event) {
+			backend.update(this.report_id, { report_title: event.target.innerText });
+		},
+		onDescriptionChange(event) {
+			backend.update(this.report_id, { report_description: event.target.innerText });
+		},
+	},
+	components: {},
+	watch: {},
+};
+</script>