diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 127fe00..7ec7538 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -563,22 +563,30 @@ function SettingsTab({ user }) {
         </div>
         <div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
           <h3 className="text-lg font-semibold text-gray-900 mb-4">Modelo de IA</h3>
-          <div className="space-y-3">
-            {filteredModels.map((model) => (
-              <label key={model.model_name} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${formData.model_name === model.model_name ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
-                <input
-                  type="radio"
-                  name="model_name"
-                  value={model.model_name}
-                  checked={formData.model_name === model.model_name}
-                  onChange={() => setFormData({ ...formData, model_name: model.model_name })}
-                  className="form-radio text-indigo-600"
-                />
-                <span className="font-semibold">{model.model_name}</span>
-                <span className="text-xs text-gray-500">{model.description}</span>
-              </label>
-            ))}
-          </div>
+          {loading ? (
+            <div className="text-gray-500">Cargando modelos...</div>
+          ) : filteredModels.length === 0 ? (
+            <div className="text-gray-500">No hay modelos disponibles para {formData.provider}</div>
+          ) : (
+            <div className="space-y-3">
+              {filteredModels.map((model) => (
+                <label key={model.id} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${formData.model_name === model.id ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
+                  <input
+                    type="radio"
+                    name="model_name"
+                    value={model.id}
+                    checked={formData.model_name === model.id}
+                    onChange={() => setFormData({ ...formData, model_name: model.id })}
+                    className="form-radio text-indigo-600"
+                  />
+                  <div className="flex-1">
+                    <div className="font-semibold text-gray-900">{model.name}</div>
+                    <div className="text-xs text-gray-500 mt-1">{model.description}</div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
         </div>
         <div className="flex gap-3">
           <button