diff --git a/frontend/app/src/api/llms.ts b/frontend/app/src/api/llms.ts
new file mode 100644
index 00000000..d8efdf34
--- /dev/null
+++ b/frontend/app/src/api/llms.ts
@@ -0,0 +1,116 @@
+import { BASE_URL, buildUrlParams, handleErrors, handleResponse, opaqueCookieHeader, type Page, type PageParams, zodPage } from '@/lib/request';
+import { zodJsonDate } from '@/lib/zod';
+import { z, type ZodType, type ZodTypeDef } from 'zod';
+
+export interface LLM {
+  id: number;
+  name: string;
+  provider: string;
+  model: string;
+  config?: any;
+  is_default: boolean;
+  created_at: Date | null;
+  updated_at: Date | null;
+}
+
+export interface LlmOption {
+  provider: string;
+  default_model: string;
+  model_description: string;
+  credentials_display_name: string;
+  credentials_description: string;
+  credentials_type: 'str' | 'dict';
+  default_credentials: any;
+}
+
+export interface CreateLLM {
+  name: string;
+  provider: string;
+  model: string;
+  config?: any;
+  is_default?: boolean;
+  credentials: string | object;
+}
+
+const llmSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  provider: z.string(),
+  model: z.string(),
+  config: z.any(),
+  is_default: z.boolean(),
+  created_at: zodJsonDate().nullable(),
+  updated_at: zodJsonDate().nullable(),
+}) satisfies ZodType<LLM, ZodTypeDef, any>;
+
+const llmOptionSchema = z.object({
+  provider: z.string(),
+  default_model: z.string(),
+  model_description: z.string(),
+  credentials_display_name: z.string(),
+  credentials_description: z.string(),
+}).and(z.discriminatedUnion('credentials_type', [
+  z.object({
+    credentials_type: z.literal('str'),
+    default_credentials: z.string(),
+  }),
+  z.object({
+    credentials_type: z.literal('dict'),
+    default_credentials: z.object({}).passthrough(),
+  }),
+])) satisfies ZodType<LlmOption>;
+
+export async function listLlmOptions () {
+  return await fetch(`${BASE_URL}/api/v1/admin/llm-options`, {
+    headers: {
+      ...await opaqueCookieHeader(),
+    },
+  })
+    .then(handleResponse(llmOptionSchema.array()));
+}
+
+export async function listLlms ({ page = 1, size = 10 }: PageParams = {}): Promise<Page<LLM>> {
+  return await fetch(BASE_URL + '/api/v1/admin/llms' + '?' + buildUrlParams({ page, size }), {
+    headers: await opaqueCookieHeader(),
+  })
+    .then(handleResponse(zodPage(llmSchema)));
+}
+
+export async function getLlm (id: number): Promise<LLM> {
+  return await fetch(BASE_URL + `/api/v1/admin/llms/${id}`, {
+    headers: await opaqueCookieHeader(),
+  }).then(handleResponse(llmSchema));
+}
+
+export async function createLlm (create: CreateLLM) {
+  return await fetch(BASE_URL + `/api/v1/admin/llms`, {
+    method: 'POST',
+    body: JSON.stringify(create),
+    headers: {
+      'Content-Type': 'application/json',
+      ...await opaqueCookieHeader(),
+    },
+  }).then(handleResponse(llmSchema));
+}
+
+export async function deleteLlm (id: number) {
+  await fetch(BASE_URL + `/api/v1/admin/llms/${id}`, {
+    method: 'DELETE',
+    headers: await opaqueCookieHeader(),
+  }).then(handleErrors);
+}
+
+export async function testLlm (createLLM: CreateLLM) {
+  return await fetch(`${BASE_URL}/api/v1/admin/llms/test`, {
+    method: 'POST',
+    body: JSON.stringify(createLLM),
+    headers: {
+      'Content-Type': 'application/json',
+      ...await opaqueCookieHeader(),
+    },
+  })
+    .then(handleResponse(z.object({
+      success: z.boolean(),
+      error: z.string().optional(),
+    })));
+}
diff --git a/frontend/app/src/app/(main)/(admin)/llms/[id]/page.tsx b/frontend/app/src/app/(main)/(admin)/llms/[id]/page.tsx
new file mode 100644
index 00000000..20ba1b9a
--- /dev/null
+++ b/frontend/app/src/app/(main)/(admin)/llms/[id]/page.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { deleteLlm, getLlm } from '@/api/llms';
+import { AdminPageHeading } from '@/components/admin-page-heading';
+import { DangerousActionButton } from '@/components/dangerous-action-button';
+import { DateFormat } from '@/components/date-format';
+import { OptionDetail } from '@/components/option-detail';
+import { Loader2Icon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+import useSWR from 'swr';
+
+export default function Page ({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const { data } = useSWR(`api.llms.get?id=${params.id}`, () => getLlm(parseInt(params.id)));
+  const [transitioning, startTransition] = useTransition();
+
+  return (
+    <>
+      <AdminPageHeading
+        breadcrumbs={[
+          { title: 'LLMs', url: '/llms' },
+          { title: data ? data.name : <Loader2Icon className="size-4 animate-spin repeat-infinite" /> },
+        ]}
+      />
+      <div className="max-w-screen-sm space-y-4">
+        <div className="space-y-2 text-sm rounded p-4 border">
+          <OptionDetail title="ID" value={data?.id} />
+          <OptionDetail title="Name" value={data?.name} />
+          <OptionDetail title="Provider" value={data?.provider} />
+          <OptionDetail title="Model" value={data?.model} />
+          <OptionDetail title="Is Default" value={data?.is_default ? 'Yes' : 'No'} valueClassName={data?.is_default ? 'text-green-500' : 'text-muted-foreground'} />
+          <OptionDetail title="Created At" value={<DateFormat date={data?.created_at} />} />
+          <OptionDetail title="Updated At" value={<DateFormat date={data?.updated_at} />} />
+        </div>
+        <div>
+          <DangerousActionButton
+            variant="destructive"
+            disabled={transitioning}
+            action={async () => {
+              await deleteLlm(parseInt(params.id));
+              startTransition(() => {
+                router.push('/llms');
+              });
+            }}
+          >
+            Delete
+          </DangerousActionButton>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/src/app/(main)/(admin)/llms/create/page.tsx b/frontend/app/src/app/(main)/(admin)/llms/create/page.tsx
new file mode 100644
index 00000000..3eb5cdac
--- /dev/null
+++ b/frontend/app/src/app/(main)/(admin)/llms/create/page.tsx
@@ -0,0 +1,294 @@
+'use client';
+
+import { createLlm, listLlmOptions, type LlmOption, testLlm } from '@/api/llms';
+import { AdminPageHeading } from '@/components/admin-page-heading';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2Icon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useEffect, useState, useTransition } from 'react';
+import { useForm, useFormContext, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+const unsetForm = z.object({
+  name: z.string().min(1, 'Must not empty'),
+  provider: z.string().min(1, 'Must not empty'),
+  config: z.object({}).passthrough().optional(),
+  is_default: z.boolean().optional(),
+});
+
+const strCredentialForm = unsetForm.extend({
+  model: z.string().min(1, 'Must not empty'),
+  credentials: z.string().min(1, 'Must not empty'),
+});
+
+const dictCredentialForm = unsetForm.extend({
+  model: z.string().min(1, 'Must not empty'),
+  credentials: z.object({}).passthrough(),
+});
+
+export default function Page () {
+  const router = useRouter();
+  const [transitioning, startTransition] = useTransition();
+  const [provider, setProvider] = useState<LlmOption>();
+
+  const form = useForm<any>({
+    resolver: zodResolver(
+      provider
+        ? provider.credentials_type === 'str'
+          ? strCredentialForm
+          : provider.credentials_type === 'dict'
+            ? dictCredentialForm
+            : unsetForm
+        : unsetForm),
+    defaultValues: {
+      name: '',
+      provider: '',
+      model: '',
+      credentials: '',
+      is_default: false,
+    },
+  });
+
+  useEffect(() => {
+    if (provider) {
+      form.reset({
+        ...form.getValues(),
+        model: provider.default_model,
+        credentials: provider.credentials_type === 'dict' ? undefined : '',
+      });
+    } else {
+      const { name, is_default } = form.getValues();
+      form.reset({
+        name,
+        is_default,
+        provider: '',
+        credentials: '',
+        model: '',
+      });
+    }
+  }, [provider]);
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const { error, success } = await testLlm(values);
+    if (!success) {
+      form.setError('root', { message: error || 'Unknown error' });
+      return;
+    }
+    const llm = await createLlm(values);
+    toast('LLM successfully created.');
+    startTransition(() => {
+      router.push(`/llms/${llm.id}`);
+    });
+  });
+
+  const error = form.formState.errors.root;
+
+  return (
+    <>
+      <AdminPageHeading
+        breadcrumbs={[
+          { title: 'LLMs', url: '/llms' },
+          { title: 'Create' },
+        ]}
+      />
+      <Form {...form}>
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <FormField
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <LlmFields onSelectProvider={setProvider} />
+          <FormField
+            name="is_default"
+            render={({ field }) => (
+              <FormItem className="rounded-lg border p-4 flex items-center justify-between text-sky-500 bg-sky-500/5 border-sky-500/30">
+                <div className="space-y-2">
+                  <FormLabel>Default LLM</FormLabel>
+                  <FormDescription className="text-sky-500/70">
+                    Enable will unset original default LLM.
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch {...field} onChange={undefined} checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {error && <Alert variant="destructive">
+            <AlertTitle>Failed to create LLM</AlertTitle>
+            <AlertDescription>{error.message}</AlertDescription>
+          </Alert>}
+          <Button disabled={form.formState.disabled || !provider || form.formState.isSubmitting || transitioning}>
+            {(form.formState.isSubmitting || transitioning) && <Loader2Icon className="size-4 mr-1 animate-spin repeat-infinite" />}
+            Create
+          </Button>
+        </form>
+      </Form>
+    </>
+  );
+}
+
+function useLlmOptions () {
+  const { data: options } = useSWR('api.llms.list-options', listLlmOptions);
+
+  return options;
+}
+
+function LlmFields ({ onSelectProvider }: { onSelectProvider: (llmOption: LlmOption | undefined) => void }) {
+  const providerOptions = useLlmOptions();
+  const provider = useWatch<{ provider: string }>({ name: 'provider' });
+
+  const providerOption = providerOptions?.find(o => o.provider === provider);
+
+  let fields: ReactNode;
+
+  const form = useFormContext();
+
+  if (!providerOption) {
+    fields = <div className="border rounded-lg bg-muted p-8 text-muted-foreground font-bold text-center text-lg">Select provider...</div>;
+  } else {
+    fields = (
+      <>
+        <FormField
+          name="model"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Model</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+              <FormDescription>
+                {providerOption.model_description}
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="credentials"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{providerOption.credentials_display_name}</FormLabel>
+              <FormControl>
+                {providerOption.credentials_type === 'str'
+                  ? <Input {...field} placeholder={providerOption.default_credentials} />
+                  : <Textarea
+                    {...field}
+                    value={undefined}
+                    onChange={event => {
+                      try {
+                        field.onChange(JSON.parse(event.target.value));
+                        form.clearErrors('credentials');
+                      } catch {
+                        form.setError('credentials', {
+                          message: 'Invalid JSON',
+                        });
+                        form.setValue('credentials', undefined, { shouldTouch: true, shouldDirty: true, shouldValidate: false });
+                      }
+                    }}
+                    placeholder={JSON.stringify(providerOption.default_credentials, undefined, 2)}
+                  />
+                }
+              </FormControl>
+              <FormMessage />
+              <FormDescription>
+                {providerOption.credentials_description}
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+        <Accordion type="multiple">
+          <AccordionItem value="advanced-settings">
+            <AccordionTrigger>
+              Advanced Settings
+            </AccordionTrigger>
+            <AccordionContent className="px-4">
+              <FormField
+                name="config"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Config</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        value={undefined}
+                        onChange={event => {
+                          try {
+                            field.onChange(JSON.parse(event.target.value));
+                            form.clearErrors('config');
+                          } catch {
+                            form.setError('config', {
+                              message: 'Invalid JSON',
+                            });
+                            form.setValue('config', undefined, { shouldTouch: true, shouldDirty: true, shouldValidate: false });
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FormField
+        name="provider"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Provider</FormLabel>
+            <FormControl>
+              <Select
+                value={field.value}
+                onValueChange={value => {
+                  field.onChange(value);
+                  onSelectProvider(providerOptions?.find(o => o.provider === value));
+                }}
+                name={field.name}
+                disabled={!providerOptions || field.disabled}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {providerOptions?.map(option => (
+                    <SelectItem key={option.provider} value={option.provider}>
+                      {option.provider}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {fields}
+    </>
+  );
+}
diff --git a/frontend/app/src/app/(main)/(admin)/llms/page.tsx b/frontend/app/src/app/(main)/(admin)/llms/page.tsx
new file mode 100644
index 00000000..7cfbe7b1
--- /dev/null
+++ b/frontend/app/src/app/(main)/(admin)/llms/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { listLlms, type LLM } from '@/api/llms';
+import { AdminPageHeading } from '@/components/admin-page-heading';
+import { DataTableHeading } from '@/components/data-table-heading';
+import { DataTableRemote } from '@/components/data-table-remote';
+import { Badge } from '@/components/ui/badge';
+import { buttonVariants } from '@/components/ui/button';
+import type { ColumnDef } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/table-core';
+import { PlusIcon } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Page () {
+  return (
+    <>
+      <AdminPageHeading title="LLMs" />
+      <DataTableRemote
+        before={(
+          <DataTableHeading>
+            <span className="ml-auto" />
+            <Link className={buttonVariants({ variant: 'default', className: 'gap-2' })} href="/llms/create">
+              <PlusIcon className="size-4" />
+              New
+            </Link>
+          </DataTableHeading>
+        )}
+        columns={columns}
+        apiKey="api.llms.list"
+        api={listLlms}
+        idColumn="id"
+      />
+    </>
+  );
+}
+const helper = createColumnHelper<LLM>();
+const columns: ColumnDef<LLM, any>[] = [
+  helper.accessor('name', {
+    header: 'Name',
+    cell: ({ row }) => {
+      const { id, name, is_default } = row.original;
+      return (
+        <Link className="flex gap-1 items-center underline" href={`/llms/${id}`}>
+          {is_default && <Badge>default</Badge>}
+          {name}
+        </Link>
+      );
+    },
+  }),
+  helper.display({
+    header: 'Provider / Model',
+    cell: ({ row }) => {
+      const { model, provider } = row.original;
+      return (
+        <span className="flex gap-1 items-center">
+          <Badge variant="secondary">{provider}</Badge>
+          <Badge variant="outline">{model}</Badge>
+        </span>
+      );
+    },
+  }),
+];
diff --git a/frontend/app/src/app/(main)/nav.tsx b/frontend/app/src/app/(main)/nav.tsx
index 7c44b210..cdda330a 100644
--- a/frontend/app/src/app/(main)/nav.tsx
+++ b/frontend/app/src/app/(main)/nav.tsx
@@ -14,7 +14,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useHref } from '@/components/use-href';
 import { cn } from '@/lib/utils';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { BotMessageSquareIcon, CogIcon, CommandIcon, FilesIcon, GaugeIcon, HomeIcon, LibraryIcon, MenuIcon, MessageCircleQuestionIcon, MessagesSquareIcon, PlusIcon, WaypointsIcon } from 'lucide-react';
+import { BotMessageSquareIcon, BrainCircuitIcon, CogIcon, CommandIcon, FilesIcon, GaugeIcon, HomeIcon, LibraryIcon, MenuIcon, MessageCircleQuestionIcon, MessagesSquareIcon, PlusIcon, WaypointsIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
@@ -94,6 +94,7 @@ export function Nav () {
           { href: '/documents', title: 'Documents', icon: FilesIcon },
           { href: '/datasources', title: 'Datasources', icon: LibraryIcon },
           { href: '/chat-engines', title: 'Chat Engines', icon: BotMessageSquareIcon },
+          { href: '/llms', title: 'LLMs', icon: BrainCircuitIcon },
           { href: '/index-progress', title: 'Index Progress', icon: GaugeIcon },
           { href: '/knowledge-graph', title: 'Knowledge Graph', icon: WaypointsIcon },
           { href: '/site-settings', title: 'Settings', icon: CogIcon },
diff --git a/frontend/app/src/components/dangerous-action-button.tsx b/frontend/app/src/components/dangerous-action-button.tsx
new file mode 100644
index 00000000..a78bf8a2
--- /dev/null
+++ b/frontend/app/src/components/dangerous-action-button.tsx
@@ -0,0 +1,52 @@
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import { Button, type ButtonProps } from '@/components/ui/button';
+import { Loader2Icon } from 'lucide-react';
+import { forwardRef, MouseEvent, type ReactNode, useState } from 'react';
+
+export interface DangerousActionButtonProps extends ButtonProps {
+  action: () => Promise<void>;
+  dialogTitle?: ReactNode;
+  dialogDescription?: ReactNode;
+}
+
+export const DangerousActionButton = forwardRef<HTMLButtonElement, DangerousActionButtonProps>(({ action, dialogDescription, dialogTitle, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+  const [acting, setActing] = useState(false);
+  const [error, setError] = useState<unknown>();
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setActing(true);
+    action()
+      .then(() => {
+        setOpen(false);
+      })
+      .catch(error => setError(error))
+      .finally(() => setActing(false));
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button {...props} disabled={props.disabled || acting} />
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{dialogTitle ?? 'Are you absolutely sure?'}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {dialogDescription ?? 'This action cannot be undone.'}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={acting} onClick={handleClick}>
+            {acting && <Loader2Icon className="size-4 mr-1 animate-spin repeat-infinite" />}
+            Continue
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+});
+
+DangerousActionButton.displayName = 'DangerousActionButton';