diff --git a/src/components/Settings/Sections/Models/Section.tsx b/src/components/Settings/Sections/Models/Section.tsx
index 1ae39b7..9ba2e2f 100644
--- a/src/components/Settings/Sections/Models/Section.tsx
+++ b/src/components/Settings/Sections/Models/Section.tsx
@@ -20,14 +20,25 @@ const Models = ({
   return (
     <div className="flex-1 space-y-6 overflow-y-auto py-6">
       <div className="flex flex-col px-6 gap-y-4">
-        <h3 className="text-sm text-black/70 dark:text-white/70">
+        <h3 className="text-xs lg:text-sm text-black/70 dark:text-white/70">
           Select models
         </h3>
-        <ModelSelect providers={values} type="embedding" />
+        <ModelSelect
+          providers={values.filter((p) =>
+            p.chatModels.some((m) => m.key != 'error'),
+          )}
+          type="chat"
+        />
+        <ModelSelect
+          providers={values.filter((p) =>
+            p.embeddingModels.some((m) => m.key != 'error'),
+          )}
+          type="embedding"
+        />
       </div>
       <div className="border-t border-light-200 dark:border-dark-200" />
       <div className="flex flex-row justify-between items-center px-6 ">
-        <p className="text-sm text-black/70 dark:text-white/70">
+        <p className="text-xs lg:text-sm text-black/70 dark:text-white/70">
           Manage model provider
         </p>
         <AddProvider modelProviders={fields} setProviders={setProviders} />