diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx
index 55ed96b9..42b3b211 100644
--- a/src/renderer/components/modal/modal.component.tsx
+++ b/src/renderer/components/modal/modal.component.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useEffect } from "react";
+import { BsmIcon } from "../svgs/bsm-icon.component";
 
 export function Modal() {
 
@@ -46,6 +47,9 @@ export function Modal() {
                      <div className="absolute top-0 w-full left-0 h-1 rounded-t-md overflow-hidden">
                         <span className="block w-full h-full" style={{backgroundImage: `linear-gradient(to right, ${firstColor}, ${secondColor})`}}/>
                      </div>
+                     <div className="w-2.5 h-2.5 absolute top-2.5 right-1.5 cursor-pointer" onClick={(e) => {e.stopPropagation(); resolver(ModalExitCode.CLOSED)}}>
+                        <BsmIcon className="w-full h-full" icon="cross"/>
+                     </div>
                      <ModalComponent resolver={resolver} data={modalData}/>
                   </div>
                </motion.div>