diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelForm.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelForm.tsx
deleted file mode 100644
index 7008ef6b6f..0000000000
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelForm.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import type { LlmProvider } from "@/lib/autogpt-server-api/types";
-import { createLlmModelAction } from "../actions";
-import { Button } from "@/components/atoms/Button/Button";
-
-interface Props {
-  providers: LlmProvider[];
-}
-
-export function AddModelForm({ providers }: Props) {
-  return (
-    <form action={createLlmModelAction} className="space-y-6">
-      <div className="space-y-1">
-        <h3 className="text-lg font-semibold">Add Model</h3>
-        <p className="text-sm text-gray-600">
-          Register a new model slug, metadata, and pricing.
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        {/* Basic Information */}
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              Basic Information
-            </h3>
-            <p className="text-xs text-muted-foreground">Core model details</p>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <label
-                htmlFor="slug"
-                className="text-sm font-medium text-foreground"
-              >
-                Model Slug <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="slug"
-                required
-                name="slug"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="gpt-4.1-mini-2025-04-14"
-              />
-            </div>
-            <div className="space-y-2">
-              <label
-                htmlFor="display_name"
-                className="text-sm font-medium text-foreground"
-              >
-                Display Name <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="display_name"
-                required
-                name="display_name"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="GPT 4.1 Mini"
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="description"
-              className="text-sm font-medium text-foreground"
-            >
-              Description
-            </label>
-            <textarea
-              id="description"
-              name="description"
-              rows={3}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-              placeholder="Optional description..."
-            />
-          </div>
-        </div>
-
-        {/* Model Configuration */}
-        <div className="space-y-4 border-t border-border pt-6">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              Model Configuration
-            </h3>
-            <p className="text-xs text-muted-foreground">
-              Model capabilities and limits
-            </p>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-3">
-            <div className="space-y-2">
-              <label
-                htmlFor="provider_id"
-                className="text-sm font-medium text-foreground"
-              >
-                Provider <span className="text-destructive">*</span>
-              </label>
-              <select
-                id="provider_id"
-                required
-                name="provider_id"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                defaultValue=""
-              >
-                <option value="" disabled>
-                  Select provider
-                </option>
-                {providers.map((provider) => (
-                  <option key={provider.id} value={provider.id}>
-                    {provider.display_name} ({provider.name})
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="space-y-2">
-              <label
-                htmlFor="context_window"
-                className="text-sm font-medium text-foreground"
-              >
-                Context Window <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="context_window"
-                required
-                type="number"
-                name="context_window"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="128000"
-                min={1}
-              />
-            </div>
-            <div className="space-y-2">
-              <label
-                htmlFor="max_output_tokens"
-                className="text-sm font-medium text-foreground"
-              >
-                Max Output Tokens
-              </label>
-              <input
-                id="max_output_tokens"
-                type="number"
-                name="max_output_tokens"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="16384"
-                min={1}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Pricing */}
-        <div className="space-y-4 border-t border-border pt-6">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">Pricing</h3>
-            <p className="text-xs text-muted-foreground">
-              Credit cost per run (credentials are managed via the provider)
-            </p>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-1">
-            <div className="space-y-2">
-              <label
-                htmlFor="credit_cost"
-                className="text-sm font-medium text-foreground"
-              >
-                Credit Cost <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="credit_cost"
-                required
-                type="number"
-                name="credit_cost"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="5"
-                min={0}
-              />
-            </div>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Credit cost is always in platform credits. Credentials are inherited
-            from the selected provider.
-          </p>
-        </div>
-
-        {/* Enabled Toggle */}
-        <div className="flex items-center gap-3 border-t border-border pt-6">
-          <input type="hidden" name="is_enabled" value="off" />
-          <input
-            id="is_enabled"
-            type="checkbox"
-            name="is_enabled"
-            defaultChecked
-            className="h-4 w-4 rounded border-input"
-          />
-          <label
-            htmlFor="is_enabled"
-            className="text-sm font-medium text-foreground"
-          >
-            Enabled by default
-          </label>
-        </div>
-      </div>
-
-      <div className="flex justify-end border-t border-gray-200 pt-4">
-        <Button type="submit" variant="primary" size="small">
-          Save Model
-        </Button>
-      </div>
-    </form>
-  );
-}
diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelModal.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelModal.tsx
new file mode 100644
index 0000000000..2505b1be4f
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelModal.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmProvider } from "@/lib/autogpt-server-api/types";
+import { createLlmModelAction } from "../actions";
+import { useRouter } from "next/navigation";
+
+interface Props {
+  providers: LlmProvider[];
+}
+
+export function AddModelModal({ providers }: Props) {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  return (
+    <Dialog
+      title="Add Model"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="primary" size="small">
+          Add Model
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Register a new model slug, metadata, and pricing.
+        </div>
+
+        <form
+          action={async (formData) => {
+            await createLlmModelAction(formData);
+            setOpen(false);
+            router.refresh();
+          }}
+          className="space-y-6"
+        >
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Basic Information
+              </h3>
+              <p className="text-xs text-muted-foreground">Core model details</p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="slug"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Model Slug <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="slug"
+                  required
+                  name="slug"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="gpt-4.1-mini-2025-04-14"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="display_name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Display Name <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="display_name"
+                  required
+                  name="display_name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="GPT 4.1 Mini"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="description"
+                className="text-sm font-medium text-foreground"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                rows={3}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="Optional description..."
+              />
+            </div>
+          </div>
+
+          {/* Model Configuration */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Model Configuration
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Model capabilities and limits
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-3">
+              <div className="space-y-2">
+                <label
+                  htmlFor="provider_id"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Provider <span className="text-destructive">*</span>
+                </label>
+                <select
+                  id="provider_id"
+                  required
+                  name="provider_id"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  defaultValue=""
+                >
+                  <option value="" disabled>
+                    Select provider
+                  </option>
+                  {providers.map((provider) => (
+                    <option key={provider.id} value={provider.id}>
+                      {provider.display_name} ({provider.name})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="context_window"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Context Window <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="context_window"
+                  required
+                  type="number"
+                  name="context_window"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="128000"
+                  min={1}
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="max_output_tokens"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Max Output Tokens
+                </label>
+                <input
+                  id="max_output_tokens"
+                  type="number"
+                  name="max_output_tokens"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="16384"
+                  min={1}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Pricing */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">Pricing</h3>
+              <p className="text-xs text-muted-foreground">
+                Credit cost per run (credentials are managed via the provider)
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-1">
+              <div className="space-y-2">
+                <label
+                  htmlFor="credit_cost"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Credit Cost <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="credit_cost"
+                  required
+                  type="number"
+                  name="credit_cost"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="5"
+                  min={0}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Credit cost is always in platform credits. Credentials are inherited
+              from the selected provider.
+            </p>
+          </div>
+
+          {/* Enabled Toggle */}
+          <div className="flex items-center gap-3 border-t border-border pt-6">
+            <input type="hidden" name="is_enabled" value="off" />
+            <input
+              id="is_enabled"
+              type="checkbox"
+              name="is_enabled"
+              defaultChecked
+              className="h-4 w-4 rounded border-input"
+            />
+            <label
+              htmlFor="is_enabled"
+              className="text-sm font-medium text-foreground"
+            >
+              Enabled by default
+            </label>
+          </div>
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={() => setOpen(false)}
+              type="button"
+            >
+              Cancel
+            </Button>
+            <Button variant="primary" size="small" type="submit">
+              Save Model
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderForm.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderForm.tsx
deleted file mode 100644
index f21c447263..0000000000
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderForm.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { createLlmProviderAction } from "../actions";
-import { Button } from "@/components/atoms/Button/Button";
-
-export function AddProviderForm() {
-  return (
-    <form action={createLlmProviderAction} className="space-y-6">
-      <div className="space-y-1">
-        <h3 className="text-lg font-semibold">Add Provider</h3>
-        <p className="text-sm text-gray-600">
-          Define a new upstream provider and default credential information.
-        </p>
-      </div>
-
-      {/* Setup Instructions */}
-      <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-        <div className="space-y-2">
-          <h4 className="text-sm font-semibold text-blue-900">
-            Before Adding a Provider
-          </h4>
-          <p className="text-xs text-blue-800">
-            To use a new provider, you must first configure its credentials in the
-            backend:
-          </p>
-          <ol className="list-inside list-decimal space-y-1 text-xs text-blue-800">
-            <li>
-              Add the credential to{" "}
-              <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
-                backend/integrations/credentials_store.py
-              </code>{" "}
-              with a UUID, provider name, and settings secret reference
-            </li>
-            <li>
-              Add it to the{" "}
-              <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
-                PROVIDER_CREDENTIALS
-              </code>{" "}
-              dictionary in{" "}
-              <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
-                backend/data/block_cost_config.py
-              </code>
-            </li>
-            <li>
-              Use the <strong>same provider name</strong> in the "Credential Provider"
-              field below that matches the key in{" "}
-              <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
-                PROVIDER_CREDENTIALS
-              </code>
-            </li>
-          </ol>
-        </div>
-      </div>
-
-      <div className="space-y-6">
-        {/* Basic Information */}
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              Basic Information
-            </h3>
-            <p className="text-xs text-muted-foreground">Core provider details</p>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <label
-                htmlFor="name"
-                className="text-sm font-medium text-foreground"
-              >
-                Provider Slug <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="name"
-                required
-                name="name"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="e.g. openai"
-              />
-            </div>
-            <div className="space-y-2">
-              <label
-                htmlFor="display_name"
-                className="text-sm font-medium text-foreground"
-              >
-                Display Name <span className="text-destructive">*</span>
-              </label>
-              <input
-                id="display_name"
-                required
-                name="display_name"
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                placeholder="OpenAI"
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="description"
-              className="text-sm font-medium text-foreground"
-            >
-              Description
-            </label>
-            <textarea
-              id="description"
-              name="description"
-              rows={3}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-              placeholder="Optional description..."
-            />
-          </div>
-        </div>
-
-        {/* Default Credentials */}
-        <div className="space-y-4 border-t border-border pt-6">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              Default Credentials
-            </h3>
-            <p className="text-xs text-muted-foreground">
-              Credential provider name that matches the key in{" "}
-              <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
-                PROVIDER_CREDENTIALS
-              </code>
-            </p>
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="default_credential_provider"
-              className="text-sm font-medium text-foreground"
-            >
-              Credential Provider <span className="text-destructive">*</span>
-            </label>
-            <input
-              id="default_credential_provider"
-              name="default_credential_provider"
-              required
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-              placeholder="openai"
-            />
-            <p className="text-xs text-muted-foreground">
-              <strong>Important:</strong> This must exactly match the key in the{" "}
-              <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
-                PROVIDER_CREDENTIALS
-              </code>{" "}
-              dictionary in{" "}
-              <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
-                block_cost_config.py
-              </code>
-              . Common values: "openai", "anthropic", "groq", "open_router", etc.
-            </p>
-          </div>
-        </div>
-
-        {/* Capabilities */}
-        <div className="space-y-4 border-t border-border pt-6">
-          <div className="space-y-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              Capabilities
-            </h3>
-            <p className="text-xs text-muted-foreground">Provider feature flags</p>
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2">
-            {[
-              { name: "supports_tools", label: "Supports tools" },
-              { name: "supports_json_output", label: "Supports JSON output" },
-              { name: "supports_reasoning", label: "Supports reasoning" },
-              {
-                name: "supports_parallel_tool",
-                label: "Supports parallel tool calls",
-              },
-            ].map(({ name, label }) => (
-              <div
-                key={name}
-                className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-4 py-3 transition-colors hover:bg-muted/50"
-              >
-                <input type="hidden" name={name} value="off" />
-                <input
-                  id={name}
-                  type="checkbox"
-                  name={name}
-                  defaultChecked={
-                    name !== "supports_reasoning" &&
-                    name !== "supports_parallel_tool"
-                  }
-                  className="h-4 w-4 rounded border-input"
-                />
-                <label
-                  htmlFor={name}
-                  className="text-sm font-medium text-foreground"
-                >
-                  {label}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="flex justify-end border-t border-gray-200 pt-4">
-        <Button type="submit" variant="primary" size="small">
-          Save Provider
-        </Button>
-      </div>
-    </form>
-  );
-}
diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderModal.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderModal.tsx
new file mode 100644
index 0000000000..dae07e87a7
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderModal.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import { createLlmProviderAction } from "../actions";
+import { useRouter } from "next/navigation";
+
+export function AddProviderModal() {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  return (
+    <Dialog
+      title="Add Provider"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="primary" size="small">
+          Add Provider
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Define a new upstream provider and default credential information.
+        </div>
+
+        {/* Setup Instructions */}
+        <div className="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-blue-900">
+              Before Adding a Provider
+            </h4>
+            <p className="text-xs text-blue-800">
+              To use a new provider, you must first configure its credentials in the
+              backend:
+            </p>
+            <ol className="list-inside list-decimal space-y-1 text-xs text-blue-800">
+              <li>
+                Add the credential to{" "}
+                <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
+                  backend/integrations/credentials_store.py
+                </code>{" "}
+                with a UUID, provider name, and settings secret reference
+              </li>
+              <li>
+                Add it to the{" "}
+                <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
+                  PROVIDER_CREDENTIALS
+                </code>{" "}
+                dictionary in{" "}
+                <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
+                  backend/data/block_cost_config.py
+                </code>
+              </li>
+              <li>
+                Use the <strong>same provider name</strong> in the "Credential Provider"
+                field below that matches the key in{" "}
+                <code className="rounded bg-blue-100 px-1 py-0.5 font-mono">
+                  PROVIDER_CREDENTIALS
+                </code>
+              </li>
+            </ol>
+          </div>
+        </div>
+
+        <form
+          action={async (formData) => {
+            await createLlmProviderAction(formData);
+            setOpen(false);
+            router.refresh();
+          }}
+          className="space-y-6"
+        >
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Basic Information
+              </h3>
+              <p className="text-xs text-muted-foreground">Core provider details</p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Provider Slug <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="name"
+                  required
+                  name="name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="e.g. openai"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="display_name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Display Name <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="display_name"
+                  required
+                  name="display_name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="OpenAI"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="description"
+                className="text-sm font-medium text-foreground"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                rows={3}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="Optional description..."
+              />
+            </div>
+          </div>
+
+          {/* Default Credentials */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Default Credentials
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Credential provider name that matches the key in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  PROVIDER_CREDENTIALS
+                </code>
+              </p>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="default_credential_provider"
+                className="text-sm font-medium text-foreground"
+              >
+                Credential Provider <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="default_credential_provider"
+                name="default_credential_provider"
+                required
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="openai"
+              />
+              <p className="text-xs text-muted-foreground">
+                <strong>Important:</strong> This must exactly match the key in the{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  PROVIDER_CREDENTIALS
+                </code>{" "}
+                dictionary in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  block_cost_config.py
+                </code>
+                . Common values: "openai", "anthropic", "groq", "open_router", etc.
+              </p>
+            </div>
+          </div>
+
+          {/* Capabilities */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Capabilities
+              </h3>
+              <p className="text-xs text-muted-foreground">Provider feature flags</p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {[
+                { name: "supports_tools", label: "Supports tools" },
+                { name: "supports_json_output", label: "Supports JSON output" },
+                { name: "supports_reasoning", label: "Supports reasoning" },
+                {
+                  name: "supports_parallel_tool",
+                  label: "Supports parallel tool calls",
+                },
+              ].map(({ name, label }) => (
+                <div
+                  key={name}
+                  className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-4 py-3 transition-colors hover:bg-muted/50"
+                >
+                  <input type="hidden" name={name} value="off" />
+                  <input
+                    id={name}
+                    type="checkbox"
+                    name={name}
+                    defaultChecked={
+                      name !== "supports_reasoning" &&
+                      name !== "supports_parallel_tool"
+                    }
+                    className="h-4 w-4 rounded border-input"
+                  />
+                  <label
+                    htmlFor={name}
+                    className="text-sm font-medium text-foreground"
+                  >
+                    {label}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={() => setOpen(false)}
+              type="button"
+            >
+              Cancel
+            </Button>
+            <Button variant="primary" size="small" type="submit">
+              Save Provider
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx
index b00c40beaa..d9aa55198e 100644
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx
@@ -1,17 +1,8 @@
 "use client";
 
-import { useState } from "react";
-import { CaretDown } from "@phosphor-icons/react";
 import type { LlmModel, LlmProvider } from "@/lib/autogpt-server-api/types";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/molecules/DropdownMenu/DropdownMenu";
-import { Button } from "@/components/atoms/Button/Button";
-import { AddProviderForm } from "./AddProviderForm";
-import { AddModelForm } from "./AddModelForm";
+import { AddProviderModal } from "./AddProviderModal";
+import { AddModelModal } from "./AddModelModal";
 import { ProviderList } from "./ProviderList";
 import { ModelsTable } from "./ModelsTable";
 
@@ -20,15 +11,7 @@ interface Props {
   models: LlmModel[];
 }
 
-type FormType = "model" | "provider" | null;
-
 export function LlmRegistryDashboard({ providers, models }: Props) {
-  const [activeForm, setActiveForm] = useState<FormType>(null);
-
-  function handleFormSelect(type: FormType) {
-    setActiveForm(activeForm === type ? null : type);
-  }
-
   return (
     <div className="mx-auto p-6">
       <div className="flex flex-col gap-6">
@@ -40,46 +23,11 @@ export function LlmRegistryDashboard({ providers, models }: Props) {
               Manage supported providers, models, and credit pricing
             </p>
           </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="primary" size="small" className="gap-2">
-                Add New
-                <CaretDown className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => handleFormSelect("model")}>
-                Model
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleFormSelect("provider")}>
-                Provider
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        {/* Add Forms Section */}
-        {activeForm && (
-          <div className="rounded-lg border bg-white p-6 shadow-sm">
-            <div className="mb-4 flex items-center justify-between">
-              <h2 className="text-xl font-semibold">
-                Add {activeForm === "model" ? "Model" : "Provider"}
-              </h2>
-              <button
-                type="button"
-                onClick={() => setActiveForm(null)}
-                className="text-sm text-gray-600 hover:text-gray-900"
-              >
-                Close
-              </button>
-            </div>
-            {activeForm === "model" ? (
-              <AddModelForm providers={providers} />
-            ) : (
-              <AddProviderForm />
-            )}
+          <div className="flex gap-2">
+            <AddModelModal providers={providers} />
+            <AddProviderModal />
           </div>
-        )}
+        </div>
 
         {/* Providers Section */}
         <div className="rounded-lg border bg-white p-6 shadow-sm">