diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 72679896b..cd05c785f 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
 import styles from '@/components/Modal/modal.module.scss';
-
+import { RxCross2 } from 'react-icons/rx';
 interface ModalType {
     children?: ReactNode;
     isOpen: boolean;
@@ -20,7 +20,7 @@ export default function Modal(props: ModalType) {
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [props]);
+    }, [props.toggle]);
 
     return (
         <>
@@ -39,7 +39,7 @@ export default function Modal(props: ModalType) {
                             className={styles.closeButton}
                             onClick={props.toggle}
                         >
-                            close
+                            <RxCross2 size={20} />
                         </button>
                         {props.children}
                     </div>
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index caeadcf01..3868ec411 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -39,10 +39,12 @@
     right: 10px;
     cursor: pointer;
     z-index: 999;
-    padding: 4px 25px;
+    padding: 4px 10px;
     border-radius: 3px;
+    background-color: $theme-primary-light;
+    color: $off-white;
     &:hover {
-        background: #041187;
-        color: white;
+        background-color: $theme-primary;
+        color: $white;
     }
 }