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..a65f669e3 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -513,7 +513,7 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
   onClose?: () => void;
   multiple?: boolean;
 }) {
-  console.log("-----", props);
+  // console.log("-----", props);
 
   const getCheckCardAvatar = (value: string): React.ReactNode => {
     if (value.startsWith("gpt")) {
@@ -525,8 +525,18 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
     return <></>;
   };
 
+  const clickMaskEvent = (event: React.MouseEvent) => {
+    const div = document.getElementById("modal-mask");
+    // console.log('-----', event.target)
+    if (event.target === div) {
+      props.onClose?.();
+    }
+  };
+
   return (
     <div
+      onClick={(event) => clickMaskEvent(event)}
+      id="modal-mask"
       className={styles["modal-mask"] + " " + styles["modal-mask-container"]}
     >
       <Modal
@@ -541,8 +551,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 +572,7 @@ export function ModalSelector<T extends CheckGroupValueType>(props: {
                         props.onClose?.();
                       }}
                       avatar={getCheckCardAvatar(item.value?.toString() ?? "")}
+                      style={{ marginBottom: "8px", width: "250px" }}
                     />
                   </Col>
                 );
diff --git a/app/constant.ts b/app/constant.ts
index 77d83c378..6a51cae9d 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -161,6 +161,7 @@ const openaiModels = [
 const googleModels = [
   "gemini-1.0-pro",
   "gemini-1.5-pro-latest",
+  "gemini-1.5-flash-latest",
   "gemini-pro-vision",
 ];
 
diff --git a/app/utils.ts b/app/utils.ts
index b509c3f0d..0b01b91f1 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -296,13 +296,12 @@ export function isVisionModel(model: string) {
     "vision",
     "claude-3",
     "gemini-1.5-pro",
-    "gpt-4-turbo",
-    "gpt-4o",
+    "gemini-1.5-flash",
   ];
-  const isGpt4TurboPreview = model === "gpt-4-turbo-preview";
+  const isGpt4Turbo =
+    model.includes("gpt-4-turbo") && !model.includes("preview");
 
   return (
-    visionKeywords.some((keyword) => model.includes(keyword)) &&
-    !isGpt4TurboPreview
+    visionKeywords.some((keyword) => model.includes(keyword)) || isGpt4Turbo
   );
 }