diff --git a/frontend/src/QuizCard.svelte b/frontend/src/QuizCard.svelte
index e0214ef..c299ace 100644
--- a/frontend/src/QuizCard.svelte
+++ b/frontend/src/QuizCard.svelte
@@ -13,16 +13,17 @@
     padding: 20px;
     color: #fff;
     font-family: Arial, sans-serif;
-    width: 300px;
+/*    width: 300px;*/
     margin: 10px;
+    padding: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
 
   .card:hover {
     background-color: #444;
     cursor: pointer;
-    transform: scale(1.05);
-    transition: all 0.3s ease;
+    /* transform: scale(1.05); */
+    /* transition: all 0.3s ease; */
   }
   
   .question {
diff --git a/frontend/src/QuizCardList.svelte b/frontend/src/QuizCardList.svelte
index bfc6d5d..3005b15 100644
--- a/frontend/src/QuizCardList.svelte
+++ b/frontend/src/QuizCardList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import CodeMirror from "svelte-codemirror-editor";
   import { markdown } from "@codemirror/lang-markdown";
   import QuizCard from "./QuizCard.svelte";
@@ -9,8 +10,15 @@
   
   let value: string;
   let editingIndex: number;
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  });
   
-  function editQuiz(quiz: Quiz, index: number) {
+  function editQuiz(quiz: main.Quiz, index: number) {
     Markdown(quiz).then(
       (result) => {
 	value = result;
@@ -27,7 +35,12 @@
     )
     editingIndex = -1;
   }
-  
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape" && editingIndex !== -1) {
+      editingIndex = -1;
+    }
+  }
 </script>
 
 <div>