diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index d114882eb..12cc9f09a 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -326,3 +326,10 @@
   align-items: center;
   justify-content: center;
 }
+
+.modal-mask-container {
+  //min-width: 80vw;
+  .ant-card .ant-card-body {
+    padding: 12px;
+  }
+}
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index c9e43b036..1810ef0bc 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -15,7 +15,8 @@ import Locale from "../locales";
 import { createRoot } from "react-dom/client";
 import React, { HTMLProps, useEffect, useState } from "react";
 import { IconButton } from "./button";
-import { Card as AntCard, List as AntList, Row, Col, Grid } from "antd";
+import { Card as AntCard, List as AntList, Row, Col, Grid, Avatar } from "antd";
+const { Meta } = AntCard;
 
 export function Popover(props: {
   children: JSX.Element;
@@ -501,20 +502,79 @@ export function ModalSelector<T>(props: {
   console.log("-----", props);
 
   return (
-    <div className={styles["modal-mask"]}>
-      <Modal title="test" onClose={() => props.onClose?.()}>
-        <AntList grid={{ gutter: 16, column: 3 }}>
-          <Row gutter={[16, 16]}>
-            <Col span={8}>
-              <AntList.Item>
-                <AntCard title="你好">Card</AntCard>
-              </AntList.Item>
-            </Col>
-            <Col span={8}>
-              <AntList.Item>
-                <AntCard title="你好">Card</AntCard>
-              </AntList.Item>
-            </Col>
+    <div
+      className={styles["modal-mask"] + " " + styles["modal-mask-container"]}
+    >
+      <Modal title="选择模型" onClose={() => props.onClose?.()}>
+        <AntList grid={{ gutter: 16 }}>
+          <Row
+            gutter={[16, 16]}
+            style={{ marginLeft: "-8px", marginRight: "-8px" }}
+          >
+            {props.items.map((item, i) => {
+              const selected = props.defaultSelectedValue === item.value;
+              return (
+                <Col
+                  key={i}
+                  xs={{ flex: "100%" }}
+                  sm={{ flex: "50%" }}
+                  md={{ flex: "33%" }}
+                  lg={{ flex: "33%" }}
+                  xl={{ flex: "33%" }}
+                >
+                  <AntCard>
+                    <AntList.Item
+                      onClick={() => {
+                        props.onSelection?.([item.value]);
+                        props.onClose?.();
+                      }}
+                    >
+                      <Meta title={item.title} description={item.subTitle} />
+                      {selected ? (
+                        <div
+                          style={{
+                            height: 10,
+                            width: 10,
+                            backgroundColor: "var(--primary)",
+                            borderRadius: 10,
+                          }}
+                        ></div>
+                      ) : (
+                        <></>
+                      )}
+                    </AntList.Item>
+                  </AntCard>
+                </Col>
+              );
+            })}
+
+            {/*<Col xs={{ flex: '100%' }}*/}
+            {/*     sm={{ flex: '50%' }}*/}
+            {/*     md={{ flex: '33%' }}*/}
+            {/*     lg={{ flex: '33%' }}*/}
+            {/*     xl={{ flex: '33%' }}>*/}
+            {/*  <AntList.Item>*/}
+            {/*    <AntCard title="你好">Card</AntCard>*/}
+            {/*  </AntList.Item>*/}
+            {/*</Col>*/}
+            {/*<Col xs={{ flex: '100%' }}*/}
+            {/*     sm={{ flex: '50%' }}*/}
+            {/*     md={{ flex: '33%' }}*/}
+            {/*     lg={{ flex: '33%' }}*/}
+            {/*     xl={{ flex: '33%' }}>*/}
+            {/*  <AntList.Item>*/}
+            {/*    <AntCard title="你好">Card</AntCard>*/}
+            {/*  </AntList.Item>*/}
+            {/*</Col>*/}
+            {/*<Col xs={{ flex: '100%' }}*/}
+            {/*     sm={{ flex: '50%' }}*/}
+            {/*     md={{ flex: '33%' }}*/}
+            {/*     lg={{ flex: '33%' }}*/}
+            {/*     xl={{ flex: '33%' }}>*/}
+            {/*  <AntList.Item>*/}
+            {/*    <AntCard title="你好">Card</AntCard>*/}
+            {/*  </AntList.Item>*/}
+            {/*</Col>*/}
           </Row>
         </AntList>
       </Modal>
diff --git a/app/constant.ts b/app/constant.ts
index 1a4e244dd..77d83c378 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -134,7 +134,6 @@ export const KnowledgeCutOffDate: Record<string, string> = {
   "gpt-4-turbo": "2023-12",
   "gpt-4-turbo-2024-04-09": "2023-12",
   "gpt-4-turbo-preview": "2023-12",
-  "gpt-4o": "2023-10",
   "gpt-4o-2024-05-13": "2023-10",
   "gpt-4-vision-preview": "2023-04",
   // After improvements,