diff --git a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
index 04979d75..ce125c70 100644
--- a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
@@ -61,7 +61,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import ModelsDialog from '@/app/home/components/models-dialog/ModelsDialog';
+import SettingsDialog, {
+  SettingsSection,
+} from '@/app/home/components/settings-dialog/SettingsDialog';
 
 export default function DynamicFormItemComponent({
   config,
@@ -87,6 +89,8 @@ export default function DynamicFormItemComponent({
   );
   const { t } = useTranslation();
   const [modelsDialogOpen, setModelsDialogOpen] = useState(false);
+  const [settingsSection, setSettingsSection] =
+    useState<SettingsSection>('models');
 
   const fetchLlmModels = () => {
     httpClient
@@ -561,9 +565,11 @@ export default function DynamicFormItemComponent({
             </TooltipTrigger>
             <TooltipContent side="right">{t('models.title')}</TooltipContent>
           </Tooltip>
-          <ModelsDialog
+          <SettingsDialog
             open={modelsDialogOpen}
             onOpenChange={handleModelsDialogChange}
+            section={settingsSection}
+            onSectionChange={setSettingsSection}
           />
         </div>
       );
@@ -913,9 +919,11 @@ export default function DynamicFormItemComponent({
                   {t('models.title')}
                 </TooltipContent>
               </Tooltip>
-              <ModelsDialog
+              <SettingsDialog
                 open={modelsDialogOpen}
                 onOpenChange={handleModelsDialogChange}
+                section={settingsSection}
+                onSectionChange={setSettingsSection}
               />
             </div>
           </div>
diff --git a/web/src/app/home/components/models-dialog/ModelsDialog.tsx b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
deleted file mode 100644
index dc27f317..00000000
--- a/web/src/app/home/components/models-dialog/ModelsDialog.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useTranslation } from 'react-i18next';
-import ModelsPanel from './ModelsPanel';
-
-interface ModelsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-// Standalone Models dialog. The unified Settings dialog renders <ModelsPanel />
-// directly; this wrapper is kept for places that open Models on its own
-// (e.g. the model picker inside dynamic forms).
-export default function ModelsDialog({
-  open,
-  onOpenChange,
-}: ModelsDialogProps) {
-  const { t } = useTranslation();
-  const [blocking, setBlocking] = useState(false);
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(newOpen) => {
-        if (!newOpen && blocking) return;
-        onOpenChange(newOpen);
-      }}
-    >
-      <DialogContent className="overflow-hidden p-0 h-[80vh] flex flex-col !max-w-[37rem]">
-        <DialogHeader className="px-6 pt-6 pb-0 flex-shrink-0">
-          <DialogTitle>{t('models.title')}</DialogTitle>
-        </DialogHeader>
-        <ModelsPanel active={open} onBlockingChange={setBlocking} />
-      </DialogContent>
-    </Dialog>
-  );
-}