diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 69c686420..8e5a39723 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -329,4 +329,5 @@
 
 .cus-modal-container {
   max-width: none !important;
+  width: 80vw !important;
 }
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 9ed711e29..02c4fe513 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -114,6 +114,7 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
+  maskClosable?: boolean;
   is_cus?: boolean;
 }
 export function Modal(props: ModalProps) {
@@ -534,6 +535,7 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
         onClose={() => props.onClose?.()}
         footer={null}
         is_cus={true}
+        maskClosable={true}
       >
         <AntList grid={{ gutter: 16 }}>
           <CheckCard.Group
@@ -541,8 +543,13 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
             defaultValue={props.defaultSelectedValue}
           >
             <Row
-              gutter={[16, 16]}
-              style={{ marginLeft: "-8px", marginRight: "-8px" }}
+              gutter={[16, 8]}
+              style={{
+                marginLeft: "-8px",
+                marginRight: "-8px",
+                display: "flex",
+                justifyContent: "center",
+              }}
             >
               {props.items.map((item, i) => {
                 const selected = props.defaultSelectedValue === item.value;
@@ -557,6 +564,7 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
                         props.onClose?.();
                       }}
                       avatar={getCheckCardAvatar(item.value?.toString() ?? "")}
+                      style={{ marginBottom: "8px", width: "250px" }}
                     />
                   </Col>
                 );