diff --git a/src/components/room/RoomSettingsPanel.tsx b/src/components/room/RoomSettingsPanel.tsx
index 8363532..9008cb6 100644
--- a/src/components/room/RoomSettingsPanel.tsx
+++ b/src/components/room/RoomSettingsPanel.tsx
@@ -1,5 +1,5 @@
 import { memo, useState, useEffect, useCallback } from 'react';
-import type { RoomResponse } from '@/client';
+import type { ModelResponse, RoomResponse } from '@/client';
 import { aiList, aiUpsert, aiDelete, modelList } from '@/client';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -79,6 +79,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
 
   useEffect(() => {
     loadAiConfigs();
+    loadModels();
   }, [loadAiConfigs]);
 
   // Load available models
@@ -215,8 +216,8 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
                 >
                   <div className="flex items-center gap-2 min-w-0">
                     <Bot className="h-4 w-4 text-muted-foreground shrink-0" />
-                    <span className="text-sm truncate font-mono text-foreground">
-                      {config.model}
+                    <span className="text-sm truncate text-foreground">
+                      {availableModels.find((m) => m.id === config.model)?.name ?? config.model}
                     </span>
                     {config.stream && (
                       <span className="rounded bg-green-500/10 px-1 py-0.5 text-[10px] text-green-600 dark:text-green-400 shrink-0">
@@ -266,7 +267,11 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
               ) : (
                 <Select value={selectedModelId} onValueChange={(v) => { if (v !== null) setSelectedModelId(v); }}>
                   <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select a model..." />
+                    <SelectValue placeholder="Select a model...">
+                      {selectedModelId
+                        ? availableModels.find((m) => m.id === selectedModelId)?.name ?? selectedModelId
+                        : null}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     {availableModels.map((model) => (