diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 1e1b5dbefee..b6380add323 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -414,8 +414,12 @@ export function ChatActions(props: {
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
   const models = useMemo(
-    () => config.models.filter((m) => m.available).map((m) => m.name),
-    [config.models],
+    () =>
+      config
+        .allModels()
+        .filter((m) => m.available)
+        .map((m) => m.name),
+    [config],
   );
   const [showModelSelector, setShowModelSelector] = useState(false);
 
diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index 8e353401804..9603eea0b46 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -9,10 +9,6 @@ export function ModelConfigList(props: {
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
   const config = useAppConfig();
-  const customModels = config.customModels
-    .split(",")
-    .map((m) => ({ name: m, available: true }));
-  const models = config.models.concat(customModels);
 
   return (
     <>
@@ -28,7 +24,7 @@ export function ModelConfigList(props: {
             );
           }}
         >
-          {models.map((v, i) => (
+          {config.allModels().map((v, i) => (
             <option value={v.name} key={i} disabled={!v.available}>
               {v.name}
             </option>
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 67faabbe3a6..7742e9d0d9d 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -286,7 +286,9 @@
 
   &-content {
     .list {
-      overflow: hidden;
+      max-height: 90vh;
+      overflow-x: hidden;
+      overflow-y: auto;
 
       .list-item {
         cursor: pointer;
diff --git a/app/store/config.ts b/app/store/config.ts
index ff346871031..a4ac45e7216 100644
--- a/app/store/config.ts
+++ b/app/store/config.ts
@@ -57,6 +57,7 @@ export type ChatConfigStore = ChatConfig & {
   reset: () => void;
   update: (updater: (config: ChatConfig) => void) => void;
   mergeModels: (newModels: LLMModel[]) => void;
+  allModels: () => LLMModel[];
 };
 
 export type ModelConfig = ChatConfig["modelConfig"];
@@ -74,16 +75,9 @@ export function limitNumber(
   return Math.min(max, Math.max(min, x));
 }
 
-export function limitModel(name: string) {
-  const allModels = useAppConfig.getState().models;
-  return allModels.some((m) => m.name === name && m.available)
-    ? name
-    : "gpt-3.5-turbo";
-}
-
 export const ModalConfigValidator = {
   model(x: string) {
-    return limitModel(x) as ModelType;
+    return x as ModelType;
   },
   max_tokens(x: number) {
     return limitNumber(x, 0, 32000, 2000);
@@ -139,6 +133,16 @@ export const useAppConfig = create<ChatConfigStore>()(
           models: Object.values(modelMap),
         }));
       },
+
+      allModels() {
+        const customModels = get()
+          .customModels.split(",")
+          .filter((v) => !!v && v.length > 0)
+          .map((m) => ({ name: m, available: true }));
+
+        const models = get().models.concat(customModels);
+        return models;
+      },
     }),
     {
       name: StoreKey.Config,