diff --git a/apps/beeai-sdk-py/examples/settings_agent.py b/apps/beeai-sdk-py/examples/settings_agent.py
index a76188aaf..55cd499e1 100644
--- a/apps/beeai-sdk-py/examples/settings_agent.py
+++ b/apps/beeai-sdk-py/examples/settings_agent.py
@@ -10,9 +10,11 @@
 from beeai_sdk.a2a.extensions.ui.settings import (
     CheckboxField,
     CheckboxGroupField,
+    OptionItem,
     SettingsExtensionServer,
     SettingsExtensionSpec,
     SettingsRender,
+    SingleSelectField,
 )
 from beeai_sdk.a2a.types import RunYield
 from beeai_sdk.server import Server
@@ -39,7 +41,17 @@ async def settings_agent(
                                 default_value=True,
                             )
                         ],
-                    )
+                    ),
+                    SingleSelectField(
+                        id="response_style",
+                        label="Response Style",
+                        options=[
+                            OptionItem(value="concise", label="Concise"),
+                            OptionItem(value="detailed", label="Detailed"),
+                            OptionItem(value="humorous", label="Humorous"),
+                        ],
+                        default_value="concise",
+                    ),
                 ],
             ),
         ),
diff --git a/apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.module.scss b/apps/beeai-ui/src/components/RadioSelect/RadioSelect.module.scss
similarity index 100%
rename from apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.module.scss
rename to apps/beeai-ui/src/components/RadioSelect/RadioSelect.module.scss
diff --git a/apps/beeai-ui/src/components/RadioSelect/RadioSelect.tsx b/apps/beeai-ui/src/components/RadioSelect/RadioSelect.tsx
new file mode 100644
index 000000000..24bb35318
--- /dev/null
+++ b/apps/beeai-ui/src/components/RadioSelect/RadioSelect.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Checkmark } from '@carbon/icons-react';
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import classes from './RadioSelect.module.scss';
+
+interface Props {
+  name: string;
+  label: string;
+  value?: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+}
+
+export function RadioSelect({ name, label, value, options, onChange }: Props) {
+  const htmlId = useId();
+
+  return (
+    <RadioButtonGroup
+      legendText={label}
+      name={name}
+      valueSelected={value}
+      orientation="vertical"
+      className={classes.root}
+    >
+      {options.map(({ value: optionValue, label }) => {
+        const isSelected = optionValue === value;
+        return (
+          <div className={clsx(classes.option, { [classes.selected]: isSelected })} key={optionValue}>
+            <RadioButton
+              id={`${htmlId}:${optionValue}`}
+              value={optionValue}
+              labelText={label}
+              onClick={() => onChange(optionValue)}
+            />
+            {optionValue === value && <Checkmark size={16} />}
+          </div>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+}
diff --git a/apps/beeai-ui/src/modules/form/components/FormActionBar.module.scss b/apps/beeai-ui/src/modules/form/components/FormActionBar.module.scss
new file mode 100644
index 000000000..536407541
--- /dev/null
+++ b/apps/beeai-ui/src/modules/form/components/FormActionBar.module.scss
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.root {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: center;
+}
+
+.settings {
+  display: flex;
+  gap: $spacing-03;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  text-align: end;
+  gap: $spacing-04;
+}
diff --git a/apps/beeai-ui/src/modules/form/components/FormActionBar.tsx b/apps/beeai-ui/src/modules/form/components/FormActionBar.tsx
new file mode 100644
index 000000000..e8b0bc4ef
--- /dev/null
+++ b/apps/beeai-ui/src/modules/form/components/FormActionBar.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Button } from '@carbon/react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { useApp } from '#contexts/App/index.ts';
+import { RunModels } from '#modules/runs/settings/RunModels.tsx';
+import { RunSettings } from '#modules/runs/settings/RunSettings.tsx';
+import { useRunSettingsDialog } from '#modules/runs/settings/useRunSettingsDialog.ts';
+
+import classes from './FormActionBar.module.scss';
+
+interface Props {
+  showSubmitButton?: boolean;
+  submitLabel: string;
+  showRunSettings?: boolean;
+}
+
+export function FormActionBar({ showSubmitButton = true, submitLabel, showRunSettings }: Props) {
+  const {
+    config: { featureFlags },
+  } = useApp();
+
+  const modelsDialog = useRunSettingsDialog({ blockOffset: 8 });
+  const settingsDialog = useRunSettingsDialog({ blockOffset: 8 });
+  const formRefs = useMergeRefs([modelsDialog.refs.setPositionReference, settingsDialog.refs.setPositionReference]);
+
+  return (
+    <div className={classes.root} ref={formRefs}>
+      {showRunSettings && (
+        <div className={classes.settings}>
+          <RunSettings dialog={settingsDialog} iconOnly={false} />
+          {featureFlags.ModelProviders && <RunModels dialog={modelsDialog} iconOnly={false} />}
+        </div>
+      )}
+      {showSubmitButton && (
+        <div className={classes.buttons}>
+          <Button type="submit" size="md">
+            {submitLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/beeai-ui/src/modules/form/components/FormRenderer.module.scss b/apps/beeai-ui/src/modules/form/components/FormRenderer.module.scss
index 5e3dbac5c..33a309309 100644
--- a/apps/beeai-ui/src/modules/form/components/FormRenderer.module.scss
+++ b/apps/beeai-ui/src/modules/form/components/FormRenderer.module.scss
@@ -8,17 +8,3 @@
   flex-direction: column;
   row-gap: $spacing-06;
 }
-
-.fields {
-  display: grid;
-  column-gap: $spacing-04;
-  row-gap: $spacing-06;
-  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  text-align: end;
-  gap: $spacing-04;
-}
diff --git a/apps/beeai-ui/src/modules/form/components/FormRenderer.tsx b/apps/beeai-ui/src/modules/form/components/FormRenderer.tsx
index 4483d8ace..febdd2a58 100644
--- a/apps/beeai-ui/src/modules/form/components/FormRenderer.tsx
+++ b/apps/beeai-ui/src/modules/form/components/FormRenderer.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Button } from '@carbon/react';
 import type { FormRender } from 'beeai-sdk';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -13,6 +12,7 @@ import { isNotNull } from '#utils/helpers.ts';
 
 import type { RunFormValues } from '../types';
 import { getDefaultValues } from '../utils';
+import { FormActionBar } from './FormActionBar';
 import { FormFields } from './FormFields';
 import classes from './FormRenderer.module.scss';
 
@@ -21,6 +21,7 @@ interface Props {
   defaultHeading?: string | null;
   showHeading?: boolean;
   isDisabled?: boolean;
+  showRunSettings?: boolean;
   onSubmit: (values: RunFormValues) => void;
 }
 
@@ -28,6 +29,7 @@ export function FormRenderer({
   definition,
   defaultHeading,
   showHeading: showHeadingProp = true,
+  showRunSettings,
   isDisabled,
   onSubmit,
 }: Props) {
@@ -52,15 +54,11 @@ export function FormRenderer({
 
           <FormFields fields={fields} columns={columns} />
 
-          {!isDisabled && (
-            <>
-              <div className={classes.buttons}>
-                <Button type="submit" size="md">
-                  {submit_label ?? 'Submit'}
-                </Button>
-              </div>
-            </>
-          )}
+          <FormActionBar
+            submitLabel={submit_label ?? 'Submit'}
+            showRunSettings={showRunSettings}
+            showSubmitButton={!isDisabled}
+          />
         </fieldset>
       </form>
     </FormProvider>
diff --git a/apps/beeai-ui/src/modules/runs/components/FormRenderView.tsx b/apps/beeai-ui/src/modules/runs/components/FormRenderView.tsx
index 1b19f48b9..869eac777 100644
--- a/apps/beeai-ui/src/modules/runs/components/FormRenderView.tsx
+++ b/apps/beeai-ui/src/modules/runs/components/FormRenderView.tsx
@@ -27,6 +27,7 @@ export function FormRenderView({ formRender }: Props) {
     <Container size="sm" className={classes.root}>
       <FormRenderer
         definition={formRender}
+        showRunSettings
         onSubmit={(values: RunFormValues) => {
           const form = {
             request: formRender,
diff --git a/apps/beeai-ui/src/modules/runs/components/MCPConfig.tsx b/apps/beeai-ui/src/modules/runs/components/MCPConfig.tsx
index df0938989..456dd6465 100644
--- a/apps/beeai-ui/src/modules/runs/components/MCPConfig.tsx
+++ b/apps/beeai-ui/src/modules/runs/components/MCPConfig.tsx
@@ -16,9 +16,14 @@ export function MCPConfig() {
   const id = useId();
   const { selectedMCPServers, selectMCPServer } = useAgentDemands();
 
+  const entries = Object.entries(selectedMCPServers);
+  if (!entries.length) {
+    return null;
+  }
+
   return (
     <div className={classes.root}>
-      {Object.entries(selectedMCPServers).map(([key, value]) => (
+      {entries.map(([key, value]) => (
         <TextInput
           value={value}
           onChange={(e) => selectMCPServer(key, e.target.value)}
diff --git a/apps/beeai-ui/src/modules/runs/components/ModelProviders.tsx b/apps/beeai-ui/src/modules/runs/components/ModelProviders.tsx
deleted file mode 100644
index b34ef57d7..000000000
--- a/apps/beeai-ui/src/modules/runs/components/ModelProviders.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2025 © BeeAI a Series of LF Projects, LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { ModelAlt } from '@carbon/icons-react';
-import { Select, SelectItem } from '@carbon/react';
-import type { ChangeEvent } from 'react';
-import { useId, useMemo } from 'react';
-
-import { Tooltip } from '#components/Tooltip/Tooltip.tsx';
-
-import { useAgentDemands } from '../contexts/agent-demands';
-import classes from './ModelProviders.module.scss';
-
-export function ModelProviders() {
-  const {
-    matchedLLMProviders,
-    selectedLLMProviders,
-    selectLLMProvider,
-    matchedEmbeddingProviders,
-    selectedEmbeddingProviders,
-    selectEmbeddingProvider,
-  } = useAgentDemands();
-
-  const htmlId = useId();
-
-  const llmProviderList = useMemo(
-    () => Object.entries(matchedLLMProviders || {}).map(([key, items]) => ({ key, items })),
-    [matchedLLMProviders],
-  );
-
-  const embeddingProviderList = useMemo(
-    () => Object.entries(matchedEmbeddingProviders || {}).map(([key, items]) => ({ key, items })),
-    [matchedEmbeddingProviders],
-  );
-
-  return (
-    <div className={classes.root}>
-      {llmProviderList.map(({ key, items }) => (
-        <div key={key} className={classes.item}>
-          <Tooltip content="LLM Model" asChild size="sm">
-            <ModelAlt size={20} className={classes.icon} />
-          </Tooltip>
-          <Select
-            size="sm"
-            id={`${htmlId}:${key}`}
-            labelText={`LLM:${llmProviderList.length > 1 ? key : ''}`}
-            inline
-            value={selectedLLMProviders[key] || ''}
-            onChange={(event: ChangeEvent<HTMLSelectElement>) => {
-              selectLLMProvider(key, event.target.value);
-            }}
-          >
-            {items.map((item) => (
-              <SelectItem key={item} text={item} value={item} />
-            ))}
-          </Select>
-        </div>
-      ))}
-      {embeddingProviderList.map(({ key, items }) => (
-        <div key={key} className={classes.item}>
-          <Tooltip content="Embedding Model" asChild size="sm">
-            <ModelAlt size={20} className={classes.icon} />
-          </Tooltip>
-          <Select
-            size="sm"
-            id={`${htmlId}:${key}`}
-            labelText={`Embedding:${embeddingProviderList.length > 1 ? key : ''}`}
-            inline
-            value={selectedEmbeddingProviders[key] || ''}
-            onChange={(event: ChangeEvent<HTMLSelectElement>) => {
-              selectEmbeddingProvider(key, event.target.value);
-            }}
-          >
-            {items.map((item) => (
-              <SelectItem key={item} text={item} value={item} />
-            ))}
-          </Select>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/beeai-ui/src/modules/runs/components/RunInput.module.scss b/apps/beeai-ui/src/modules/runs/components/RunInput.module.scss
index f23c36a77..6575b34e2 100644
--- a/apps/beeai-ui/src/modules/runs/components/RunInput.module.scss
+++ b/apps/beeai-ui/src/modules/runs/components/RunInput.module.scss
@@ -43,7 +43,7 @@
 .actionBarStart {
   display: flex;
   align-items: center;
-  gap: $spacing-03;
+  column-gap: $spacing-01;
 }
 
 .submit {
diff --git a/apps/beeai-ui/src/modules/runs/components/RunInput.tsx b/apps/beeai-ui/src/modules/runs/components/RunInput.tsx
index 11a6356b0..de738020a 100644
--- a/apps/beeai-ui/src/modules/runs/components/RunInput.tsx
+++ b/apps/beeai-ui/src/modules/runs/components/RunInput.tsx
@@ -4,6 +4,7 @@
  */
 
 import { InlineLoading } from '@carbon/react';
+import { useMergeRefs } from '@floating-ui/react';
 import { useCallback, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { mergeRefs } from 'react-merge-refs';
@@ -17,10 +18,11 @@ import { dispatchInputEventOnTextarea, submitFormOnEnter } from '#utils/form-uti
 
 import { ChatDefaultTools } from '../chat/constants';
 import { useAgentRun } from '../contexts/agent-run';
+import { RunModels } from '../settings/RunModels';
 import { RunSettings } from '../settings/RunSettings';
+import { useRunSettingsDialog } from '../settings/useRunSettingsDialog';
 import type { RunRunFormValues } from '../types';
 import { MCPConfig } from './MCPConfig';
-import { ModelProviders } from './ModelProviders';
 import { PromptExamples } from './PromptExamples';
 import { RunFiles } from './RunFiles';
 import classes from './RunInput.module.scss';
@@ -42,6 +44,8 @@ export function RunInput({ promptExamples, onMessageSent }: Props) {
     config: { featureFlags },
   } = useApp();
 
+  const { hasMessages } = useAgentRun();
+
   const {
     agent: {
       ui: { interaction_mode, input_placeholder },
@@ -96,11 +100,21 @@ export function RunInput({ promptExamples, onMessageSent }: Props) {
     [setValue, dispatchInputEventAndFocus],
   );
 
+  const modelsDialog = useRunSettingsDialog({
+    maxWidth: hasMessages ? undefined : MODELS_DIALOG_MAX_WIDTH,
+  });
+  const settingsDialog = useRunSettingsDialog();
+  const formRefs = useMergeRefs([
+    hasMessages ? modelsDialog.refs.setPositionReference : null,
+    settingsDialog.refs.setPositionReference,
+    formRef,
+  ]);
+
   return (
     <FormProvider {...form}>
       <form
         className={classes.root}
-        ref={formRef}
+        ref={formRefs}
         onSubmit={(event) => {
           event.preventDefault();
 
@@ -132,13 +146,13 @@ export function RunInput({ promptExamples, onMessageSent }: Props) {
 
         <div className={classes.actionBar}>
           <div className={classes.actionBarStart}>
-            <RunSettings containerRef={formRef} />
+            <RunSettings dialog={settingsDialog} iconOnly />
 
             {!isFileUploadDisabled && <FileUploadButton />}
 
             {featureFlags.MCP && <MCPConfig />}
 
-            {featureFlags.ModelProviders && <ModelProviders />}
+            {featureFlags.ModelProviders && <RunModels dialog={modelsDialog} iconOnly />}
           </div>
 
           <div className={classes.submit}>
@@ -168,3 +182,5 @@ export function RunInput({ promptExamples, onMessageSent }: Props) {
     </FormProvider>
   );
 }
+
+const MODELS_DIALOG_MAX_WIDTH = 482;
diff --git a/apps/beeai-ui/src/modules/runs/contexts/agent-run/AgentRunProvider.tsx b/apps/beeai-ui/src/modules/runs/contexts/agent-run/AgentRunProvider.tsx
index 3505cd9cf..0d4f07870 100644
--- a/apps/beeai-ui/src/modules/runs/contexts/agent-run/AgentRunProvider.tsx
+++ b/apps/beeai-ui/src/modules/runs/contexts/agent-run/AgentRunProvider.tsx
@@ -376,7 +376,7 @@ function AgentRunProvider({ agent, agentClient, children }: PropsWithChildren<Ag
       isInitializing: status === AgentRunStatus.Initializing,
       isReady: status === AgentRunStatus.Ready,
       isPending: status === AgentRunStatus.Pending,
-      hasMessages: Boolean(getMessages().length),
+      hasMessages: messages.length > 0,
       input,
       stats,
       settingsRender: agentClient?.settingsDemands ?? null,
@@ -395,8 +395,8 @@ function AgentRunProvider({ agent, agentClient, children }: PropsWithChildren<Ag
     cancel,
     chat,
     clear,
-    getMessages,
     input,
+    messages.length,
     onUpdateSettings,
     startAuth,
     stats,
diff --git a/apps/beeai-ui/src/modules/runs/components/ModelProviders.module.scss b/apps/beeai-ui/src/modules/runs/settings/ModelProviders.module.scss
similarity index 94%
rename from apps/beeai-ui/src/modules/runs/components/ModelProviders.module.scss
rename to apps/beeai-ui/src/modules/runs/settings/ModelProviders.module.scss
index 4b7ee7638..4a5be4785 100644
--- a/apps/beeai-ui/src/modules/runs/components/ModelProviders.module.scss
+++ b/apps/beeai-ui/src/modules/runs/settings/ModelProviders.module.scss
@@ -6,6 +6,7 @@
 .root {
   display: flex;
   flex-direction: column;
+  row-gap: $spacing-05;
 }
 
 .item {
diff --git a/apps/beeai-ui/src/modules/runs/settings/ModelProviders.tsx b/apps/beeai-ui/src/modules/runs/settings/ModelProviders.tsx
new file mode 100644
index 000000000..9ecb0fcd5
--- /dev/null
+++ b/apps/beeai-ui/src/modules/runs/settings/ModelProviders.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useMemo } from 'react';
+
+import { RadioSelect } from '#components/RadioSelect/RadioSelect.tsx';
+
+import { useAgentDemands } from '../contexts/agent-demands';
+import classes from './ModelProviders.module.scss';
+
+export function ModelProviders() {
+  const {
+    matchedLLMProviders,
+    selectedLLMProviders,
+    selectLLMProvider,
+    matchedEmbeddingProviders,
+    selectedEmbeddingProviders,
+    selectEmbeddingProvider,
+  } = useAgentDemands();
+
+  const llmProviderList = useMemo(
+    () => Object.entries(matchedLLMProviders || {}).map(([key, items]) => ({ key, items })),
+    [matchedLLMProviders],
+  );
+
+  const embeddingProviderList = useMemo(
+    () => Object.entries(matchedEmbeddingProviders || {}).map(([key, items]) => ({ key, items })),
+    [matchedEmbeddingProviders],
+  );
+
+  return (
+    <div className={classes.root}>
+      {llmProviderList.map(({ key, items }) => (
+        <RadioSelect
+          key={key}
+          name={key}
+          label={llmProviderList.length == 1 ? 'LLM' : `LLM: ${key}`}
+          value={selectedLLMProviders[key]}
+          options={items.map((item) => ({ label: item, value: item }))}
+          onChange={(value) => selectLLMProvider(key, value)}
+        />
+      ))}
+      {embeddingProviderList.map(({ key, items }) => (
+        <RadioSelect
+          key={key}
+          name={key}
+          label={embeddingProviderList.length == 1 ? 'Embedding' : `Embedding: ${key}`}
+          value={selectedEmbeddingProviders[key]}
+          options={items.map((item) => ({ label: item, value: item }))}
+          onChange={(value) => selectEmbeddingProvider(key, value)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/beeai-ui/src/modules/runs/settings/RunSettings.module.scss b/apps/beeai-ui/src/modules/runs/settings/RunDialogButton.module.scss
similarity index 66%
rename from apps/beeai-ui/src/modules/runs/settings/RunSettings.module.scss
rename to apps/beeai-ui/src/modules/runs/settings/RunDialogButton.module.scss
index 585694440..2bdbf8cdd 100644
--- a/apps/beeai-ui/src/modules/runs/settings/RunSettings.module.scss
+++ b/apps/beeai-ui/src/modules/runs/settings/RunDialogButton.module.scss
@@ -5,6 +5,7 @@
 
 .root {
   display: flex;
+  align-items: center;
   :global(.#{$prefix}--btn) {
     &:hover,
     &:active,
@@ -31,9 +32,24 @@
   background-color: $background;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
-  padding: $spacing-03;
-  display: flex;
-  flex-direction: column;
-  row-gap: $spacing-06;
+  padding-inline: $spacing-03;
+  padding-block: $spacing-05;
+  inline-size: 100%;
   max-block-size: rem(294px);
 }
+
+.button {
+  padding-inline: $spacing-03;
+  display: flex;
+  gap: $spacing-03;
+  align-items: center;
+  block-size: rem(28px);
+}
+
+.statusIcon {
+  transition: transform $duration-fast-01 ease-in-out;
+
+  .isOpen & {
+    transform: rotate(180deg);
+  }
+}
diff --git a/apps/beeai-ui/src/modules/runs/settings/RunDialogButton.tsx b/apps/beeai-ui/src/modules/runs/settings/RunDialogButton.tsx
new file mode 100644
index 000000000..437b4005f
--- /dev/null
+++ b/apps/beeai-ui/src/modules/runs/settings/RunDialogButton.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChevronDown } from '@carbon/icons-react';
+import { Button, IconButton } from '@carbon/react';
+import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentType, PropsWithChildren } from 'react';
+
+import { fadeProps } from '#utils/fadeProps.ts';
+
+import { useAgentRun } from '../contexts/agent-run';
+import classes from './RunDialogButton.module.scss';
+import type { RunSettingsDialogReturn } from './useRunSettingsDialog';
+
+interface Props {
+  dialog: RunSettingsDialogReturn;
+  useButtonReference?: boolean;
+  label: string;
+  icon: ComponentType;
+  iconOnly?: boolean;
+}
+
+export function RunDialogButton({
+  dialog,
+  useButtonReference,
+  children,
+  label,
+  icon: Icon,
+  iconOnly,
+}: PropsWithChildren<Props>) {
+  const { hasMessages } = useAgentRun();
+
+  const { isOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps } = dialog;
+
+  return (
+    <div className={classes.root}>
+      {iconOnly ? (
+        <IconButton
+          kind="ghost"
+          size="sm"
+          label={label}
+          autoAlign
+          align="top"
+          ref={useButtonReference ? refs.setPositionReference : null}
+          {...getReferenceProps()}
+        >
+          <Icon />
+        </IconButton>
+      ) : (
+        <Button
+          kind="ghost"
+          size="xs"
+          className={clsx(classes.button, { [classes.isOpen]: isOpen })}
+          {...getReferenceProps()}
+          ref={useButtonReference ? refs.setPositionReference : null}
+        >
+          <Icon />
+          {label}
+          <ChevronDown className={classes.statusIcon} />
+        </Button>
+      )}
+
+      <AnimatePresence>
+        {isOpen && (
+          <FloatingPortal>
+            <FloatingFocusManager context={context}>
+              <div ref={refs.setFloating} style={floatingStyles} className={classes.modal} {...getFloatingProps()}>
+                <motion.div
+                  {...fadeProps({
+                    hidden: {
+                      transform: `translateY(${hasMessages ? '1' : '-1'}rem)`,
+                    },
+                    visible: {
+                      transform: 'translateY(0)',
+                    },
+                  })}
+                  className={classes.content}
+                >
+                  {children}
+                </motion.div>
+              </div>
+            </FloatingFocusManager>
+          </FloatingPortal>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/apps/beeai-ui/src/modules/runs/settings/RunModels.tsx b/apps/beeai-ui/src/modules/runs/settings/RunModels.tsx
new file mode 100644
index 000000000..512976ee7
--- /dev/null
+++ b/apps/beeai-ui/src/modules/runs/settings/RunModels.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Cube } from '@carbon/icons-react';
+import isEmpty from 'lodash/isEmpty';
+
+import { useAgentDemands } from '../contexts/agent-demands';
+import { useAgentRun } from '../contexts/agent-run';
+import { ModelProviders } from './ModelProviders';
+import { RunDialogButton } from './RunDialogButton';
+import type { RunSettingsDialogReturn } from './useRunSettingsDialog';
+
+interface Props {
+  dialog: RunSettingsDialogReturn;
+  iconOnly?: boolean;
+}
+
+export function RunModels({ dialog, iconOnly = true }: Props) {
+  const { hasMessages } = useAgentRun();
+  const { matchedLLMProviders, matchedEmbeddingProviders } = useAgentDemands();
+
+  if (isEmpty(matchedLLMProviders) && isEmpty(matchedEmbeddingProviders)) {
+    return null;
+  }
+
+  return (
+    <RunDialogButton
+      dialog={dialog}
+      label="Models"
+      icon={Cube}
+      useButtonReference={iconOnly && !hasMessages}
+      iconOnly={iconOnly}
+    >
+      <ModelProviders />
+    </RunDialogButton>
+  );
+}
diff --git a/apps/beeai-ui/src/modules/runs/settings/RunSettings.tsx b/apps/beeai-ui/src/modules/runs/settings/RunSettings.tsx
index 8f6173c76..45db11ba2 100644
--- a/apps/beeai-ui/src/modules/runs/settings/RunSettings.tsx
+++ b/apps/beeai-ui/src/modules/runs/settings/RunSettings.tsx
@@ -3,70 +3,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Settings } from '@carbon/icons-react';
-import { IconButton } from '@carbon/react';
-import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { RefObject } from 'react';
-
-import { fadeProps } from '#utils/fadeProps.ts';
+import { SettingsAdjust } from '@carbon/icons-react';
 
 import { useAgentRun } from '../contexts/agent-run';
-import classes from './RunSettings.module.scss';
+import { RunDialogButton } from './RunDialogButton';
 import { RunSettingsForm } from './RunSettingsForm';
-import { useRunSettingsDialog } from './useRunSettingsDialog';
+import type { RunSettingsDialogReturn } from './useRunSettingsDialog';
 
 interface Props {
-  containerRef: RefObject<HTMLElement | null>;
+  dialog: RunSettingsDialogReturn;
+  iconOnly?: boolean;
 }
 
-export function RunSettings({ containerRef }: Props) {
-  const { settingsRender, hasMessages } = useAgentRun();
-
-  const { isOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps } = useRunSettingsDialog({
-    containerRef,
-  });
+export function RunSettings({ dialog, iconOnly }: Props) {
+  const { settingsRender } = useAgentRun();
 
   if (!settingsRender?.fields.length) {
     return null;
   }
 
   return (
-    <div className={classes.root}>
-      <IconButton
-        kind="ghost"
-        size="sm"
-        label="Agent settings"
-        autoAlign
-        ref={refs.setReference}
-        {...getReferenceProps()}
-      >
-        <Settings />
-      </IconButton>
-
-      <AnimatePresence>
-        {isOpen && (
-          <FloatingPortal>
-            <FloatingFocusManager context={context}>
-              <div ref={refs.setFloating} style={floatingStyles} className={classes.modal} {...getFloatingProps()}>
-                <motion.div
-                  {...fadeProps({
-                    hidden: {
-                      transform: `translateY(${hasMessages ? '1' : '-1'}rem)`,
-                    },
-                    visible: {
-                      transform: 'translateY(0)',
-                    },
-                  })}
-                  className={classes.content}
-                >
-                  <RunSettingsForm settingsRender={settingsRender} />
-                </motion.div>
-              </div>
-            </FloatingFocusManager>
-          </FloatingPortal>
-        )}
-      </AnimatePresence>
-    </div>
+    <RunDialogButton dialog={dialog} label="Settings" icon={SettingsAdjust} iconOnly={iconOnly}>
+      <RunSettingsForm settingsRender={settingsRender} />
+    </RunDialogButton>
   );
 }
diff --git a/apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.tsx b/apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.tsx
index 67ccc6904..48d090cf0 100644
--- a/apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.tsx
+++ b/apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.tsx
@@ -3,21 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Checkmark } from '@carbon/icons-react';
-import { RadioButton, RadioButtonGroup } from '@carbon/react';
 import type { SettingsSingleSelectFieldValue } from 'beeai-sdk';
-import clsx from 'clsx';
-import { useId } from 'react';
 import { useController } from 'react-hook-form';
 
-import classes from './SingleSelectSettingsField.module.scss';
+import { RadioSelect } from '#components/RadioSelect/RadioSelect.tsx';
 
 export function SingleSelectSettingsField({
   field,
 }: {
   field: { id: string; label: string; options: { value: string; label: string }[] };
 }) {
-  const htmlId = useId();
   const { id, label } = field;
 
   const {
@@ -27,27 +22,12 @@ export function SingleSelectSettingsField({
   });
 
   return (
-    <RadioButtonGroup
-      legendText={label}
+    <RadioSelect
       name="radio-button-vertical-group"
-      valueSelected={value}
-      orientation="vertical"
-      className={classes.root}
-    >
-      {field.options.map(({ value: optionValue, label }) => {
-        const isSelected = optionValue === value;
-        return (
-          <div className={clsx(classes.option, { [classes.selected]: isSelected })} key={optionValue}>
-            <RadioButton
-              id={`${htmlId}:${optionValue}`}
-              value={optionValue}
-              labelText={label}
-              onClick={() => onChange(optionValue)}
-            />
-            {optionValue === value && <Checkmark size={16} />}
-          </div>
-        );
-      })}
-    </RadioButtonGroup>
+      label={label}
+      value={value}
+      options={field.options}
+      onChange={onChange}
+    />
   );
 }
diff --git a/apps/beeai-ui/src/modules/runs/settings/useRunSettingsDialog.ts b/apps/beeai-ui/src/modules/runs/settings/useRunSettingsDialog.ts
index f3507004b..bb55a2adb 100644
--- a/apps/beeai-ui/src/modules/runs/settings/useRunSettingsDialog.ts
+++ b/apps/beeai-ui/src/modules/runs/settings/useRunSettingsDialog.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { rem } from '@carbon/layout';
 import {
   autoUpdate,
   offset,
@@ -13,37 +14,51 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react';
-import type { RefObject } from 'react';
 import { useState } from 'react';
 
 import { useAgentRun } from '../contexts/agent-run';
 
 interface Props {
-  containerRef: RefObject<HTMLElement | null>;
+  maxWidth?: number;
+  blockOffset?: number;
 }
 
-export function useRunSettingsDialog({ containerRef }: Props) {
-  const { hasMessages } = useAgentRun();
+export function useRunSettingsDialog({ maxWidth, blockOffset }: Props = {}) {
   const [isOpen, setIsOpen] = useState(false);
+  const { hasMessages } = useAgentRun();
+
+  const align = hasMessages ? 'top' : 'bottom';
+  const alignWithContainer = !maxWidth;
 
   const { refs, floatingStyles, context } = useFloating({
-    placement: hasMessages ? 'top-start' : 'bottom-start',
+    placement: `${align}-start`,
     open: isOpen,
     onOpenChange: setIsOpen,
     whileElementsMounted: autoUpdate,
     middleware: [
-      offset(hasMessages ? OFFSET_CHAT : OFFSET_LANDING),
-      size({
-        apply({ elements }) {
-          const container = containerRef.current;
+      offset(() => {
+        const offsets =
+          align === 'top' ? OFFSET_ALIGN_TOP : alignWithContainer ? OFFSET_ALIGN_BOTTOM_CONTAINER : OFFSET_ALIGN_BOTTOM;
+        if (blockOffset) {
+          offsets.mainAxis = blockOffset;
+        }
 
-          if (container) {
-            Object.assign(elements.floating.style, {
-              maxWidth: `${container.offsetWidth}px`,
-            });
-          }
+        return offsets;
+      }, [align, alignWithContainer, blockOffset]),
+      size(
+        {
+          apply({ elements }) {
+            const container = elements.reference;
+            const widthValue = !maxWidth ? container?.getBoundingClientRect().width : maxWidth;
+            if (widthValue) {
+              Object.assign(elements.floating.style, {
+                maxWidth: rem(widthValue),
+              });
+            }
+          },
         },
-      }),
+        [maxWidth],
+      ),
     ],
   });
 
@@ -63,11 +78,17 @@ export function useRunSettingsDialog({ containerRef }: Props) {
   };
 }
 
-const OFFSET_LANDING = {
-  mainAxis: 20,
+export type RunSettingsDialogReturn = ReturnType<typeof useRunSettingsDialog>;
+
+const OFFSET_ALIGN_BOTTOM = {
+  mainAxis: 7,
   crossAxis: -12,
 };
-const OFFSET_CHAT = {
-  mainAxis: 56,
-  crossAxis: -12,
+const OFFSET_ALIGN_BOTTOM_CONTAINER = {
+  mainAxis: -3,
+  crossAxis: 0,
+};
+const OFFSET_ALIGN_TOP = {
+  mainAxis: 8,
+  crossAxis: 0,
 };
diff --git a/mise.lock b/mise.lock
index 3b423b096..7d06ba9d4 100644
--- a/mise.lock
+++ b/mise.lock
@@ -1,93 +1,50 @@
-[[tools."asdf:CrouchingMuppet/asdf-lima"]]
+[tools."asdf:CrouchingMuppet/asdf-lima"]
 version = "1.2.1"
 backend = "asdf:CrouchingMuppet/asdf-lima"
 
-[[tools.fd]]
+[tools.fd]
 version = "10.3.0"
 backend = "aqua:sharkdp/fd"
 
-[tools.fd.platforms.macos-arm64]
-checksum = "blake3:e7a554aed4fea189f2aa297e82087ceaebb844eac55a2503e5321cce88fbb636"
-size = 1337349
-url = "https://github.com/sharkdp/fd/releases/download/v10.3.0/fd-v10.3.0-aarch64-apple-darwin.tar.gz"
-
-[[tools.gum]]
+[tools.gum]
 version = "0.17.0"
 backend = "aqua:charmbracelet/gum"
 
-[tools.gum.platforms.macos-arm64]
-checksum = "sha256:e2a4b8596efa05821d8c58d0c1afbcd7ad1699ba69c689cc3ff23a4a99c8b237"
-size = 4395909
-url = "https://github.com/charmbracelet/gum/releases/download/v0.17.0/gum_0.17.0_Darwin_arm64.tar.gz"
-
-[[tools.helm]]
+[tools.helm]
 version = "3.19.0"
 backend = "aqua:helm/helm"
 
-[tools.helm.platforms.macos-arm64]
-checksum = "sha256:31513e1193da4eb4ae042eb5f98ef9aca7890cfa136f4707c8d4f70e2115bef6"
-size = 17058141
-url = "https://get.helm.sh/helm-v3.19.0-darwin-arm64.tar.gz"
-
-[[tools.kubeconform]]
+[tools.kubeconform]
 version = "0.7.0"
 backend = "aqua:yannh/kubeconform"
 
-[tools.kubeconform.platforms.macos-arm64]
-checksum = "sha256:b5d32b2cb77f9c781c976b20a85e2d0bc8f9184d5d1cfe665a2f31a19f99eeb9"
-size = 7031569
-url = "https://github.com/yannh/kubeconform/releases/download/v0.7.0/kubeconform-darwin-arm64.tar.gz"
-
-[[tools.node]]
+[tools.node]
 version = "22.19.0"
 backend = "core:node"
 
-[tools.node.platforms.macos-arm64]
-checksum = "sha256:c59006db713c770d6ec63ae16cb3edc11f49ee093b5c415d667bb4f436c6526d"
-size = 47739366
-url = "https://nodejs.org/dist/v22.19.0/node-v22.19.0-darwin-arm64.tar.gz"
-
-[[tools."pipx:toml-cli"]]
+[tools."pipx:toml-cli"]
 version = "0.8.2"
 backend = "pipx:toml-cli"
 
-[[tools.pnpm]]
+[tools.pnpm]
 version = "10.15.1"
 backend = "aqua:pnpm/pnpm"
 
-[tools.pnpm.platforms.macos-arm64]
-checksum = "blake3:502db5ea7eeeccf6307a8af184d2a63acdf88cdb3346d7fb0d55617e807d1c5a"
-size = 62649648
-url = "https://github.com/pnpm/pnpm/releases/download/v10.15.1/pnpm-macos-arm64"
-
-[[tools."ubi:google/addlicense"]]
+[tools."ubi:google/addlicense"]
 version = "1.2.0"
 backend = "ubi:google/addlicense"
 
-[tools."ubi:google/addlicense".platforms.macos-arm64-addlicense]
-checksum = "blake3:29c4b12b602b33cf8b88b2f947741bdbd60516afd72d9585abc95912fbeca47a"
-
-[[tools."ubi:telepresenceio/telepresence"]]
+[tools."ubi:telepresenceio/telepresence"]
 version = "2.24.1"
 backend = "ubi:telepresenceio/telepresence"
 
-[tools."ubi:telepresenceio/telepresence".platforms.macos-arm64-telepresence]
-checksum = "blake3:1d8fc5495ba38b306e2b7b01da21446312eb6fe2111c83d520a56fa5a0b69cb5"
-
-[[tools.uv]]
+[tools.uv]
 version = "0.9.5"
 backend = "aqua:astral-sh/uv"
 
-[tools.uv.platforms.macos-arm64]
-checksum = "sha256:dc098ff224d78ed418e121fd374f655949d2c7031a70f6f6604eaf016a130433"
-size = 18341942
-url = "https://github.com/astral-sh/uv/releases/download/0.9.5/uv-aarch64-apple-darwin.tar.gz"
+[tools.uv.checksums]
+"uv-aarch64-apple-darwin.tar.gz" = "sha256:dc098ff224d78ed418e121fd374f655949d2c7031a70f6f6604eaf016a130433"
 
-[[tools.yq]]
+[tools.yq]
 version = "4.47.2"
 backend = "aqua:mikefarah/yq"
-
-[tools.yq.platforms.macos-arm64]
-checksum = "blake3:28c623201e07c86d5082e88384af61ed40af8b8f71d22758e8b0690d424fc3c2"
-size = 10980754
-url = "https://github.com/mikefarah/yq/releases/download/v4.47.2/yq_darwin_arm64"