diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index c20bc08..8c74627 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -342,16 +342,19 @@ button:focus-visible,
 	display: flex;
 	flex-direction: row;
 	margin-right: 20px;
+	align-items: center;
 }
 #report .report-header div span {
 	background-color: var(--color-bg0);
 	color: var(--color-text0);
 	padding: 2px 10px;
+	align-items: center;
 }
 #report .report-header div strong {
 	background-color: var(--color-bg1);
 	color: var(--color-text0);
 	padding: 2px 10px;
+	align-items: center;
 }
 #report .description {
 	background-color: var(--color-bg2);
diff --git a/webapp/src/views/Report.vue b/webapp/src/views/Report.vue
index 71f9bb0..9027c39 100644
--- a/webapp/src/views/Report.vue
+++ b/webapp/src/views/Report.vue
@@ -1,4 +1,6 @@
 <template>
+	<FullScreenLoader v-if="loading" />
+
 	<div id="report">
 		<div class="report-header">
 			<div>
@@ -21,6 +23,9 @@
 				<span>Skupina</span>
 				<strong>{{ report.report_group }}</strong>
 			</div>
+			<div>
+				<button @click="reportDelete"><font-awesome-icon :icon="['fas', 'trash-can']" />  Zmazať</button>
+			</div>
 		</div>
 		<h1 contenteditable="true" @blur="onTitleChange" ref="reportTitle">
 			{{ report.report_title }}
@@ -31,10 +36,14 @@
 
 <script>
 import { backend } from "../backend";
+import FullScreenLoader from "../components/FullScreenLoader.vue";
+
 export default {
 	name: "Report",
+	components: { FullScreenLoader },
 	data() {
 		return {
+			loading: false,
 			report_id: this.$route.params.id,
 			report: {
 				report_id: 0,
@@ -65,6 +74,13 @@ export default {
 		onDescriptionChange(event) {
 			backend.update(this.report_id, { report_description: event.target.innerText });
 		},
+		reportDelete() {
+			if (!confirm("Naozaj chcete report zmazať?")) return;
+			this.loading = true;
+			backend.delete(this.report_id).then(() => {
+				this.$router.push("/");
+			});
+		},
 	},
 	components: {},
 	watch: {},