diff --git a/frontend/src/lib/components/grades/GradesRow.svelte b/frontend/src/lib/components/grades/GradesRow.svelte
index 9341c45..af51ac3 100644
--- a/frontend/src/lib/components/grades/GradesRow.svelte
+++ b/frontend/src/lib/components/grades/GradesRow.svelte
@@ -9,8 +9,15 @@
 </script>
 
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
 	export let grade: Grade;
 	const SEMESTERS: Semester[] = ['1/8', '2/8', '1/9', '2/9'];
+
+	const deleteRow = () => {
+		dispatch('delete');
+	}
 </script>
 
 <div class="flex">
@@ -25,6 +32,23 @@
 			<option value="5">5</option>
 		</select>
 	{/each}
+	<!-- delete button with 'x' icon -->
+	<button on:click={deleteRow} class="ml-0.5 h-6 w-6">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-6 w-6 stroke-red-700"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M6 18L18 6M6 6l12 12"
+			/>
+		</svg>
+	</button>
 </div>
 
 <style lang="postcss">
diff --git a/frontend/src/lib/components/grades/GradesTable.svelte b/frontend/src/lib/components/grades/GradesTable.svelte
index 0628d1e..84eb8dc 100644
--- a/frontend/src/lib/components/grades/GradesTable.svelte
+++ b/frontend/src/lib/components/grades/GradesTable.svelte
@@ -78,7 +78,7 @@
 	};
 </script>
 
-<div class="mx-auto mt-8 flex text-gray-400 lg:w-4/5">
+<div class="mx-auto mt-8 flex pr-6 text-gray-400 lg:w-4/5">
 	<span class="w-1/2 text-center">Známky</span>
 	<span class="ml-0.5 w-1/6 text-center">1/8</span>
 	<span class="ml-0.5 w-1/6 text-center">2/8</span>
@@ -92,6 +92,9 @@
 				on:keyup={convertGradeToGradeBackend}
 				on:change={convertGradeToGradeBackend}
 				bind:grade={gradesLocal[i]}
+				on:delete={() => {
+					gradesLocal = gradesLocal.filter((_, index) => index !== i);
+				}}
 			/>
 		</div>
 	{/each}