diff --git a/src/components/llm/index.tsx b/src/components/llm/index.tsx
index 0f91be2..3645a97 100644
--- a/src/components/llm/index.tsx
+++ b/src/components/llm/index.tsx
@@ -625,7 +625,7 @@ export function LLM() {
         </h1>
         <Drawer>
           <DrawerTrigger asChild>
-            <Button variant="ghost" size="icon" className="md:hidden ml-2">
+            <Button variant="ghost" size="icon" className="ml-2">
               <Settings className="size-4" />
               <span className="sr-only">Settings</span>
             </Button>
@@ -911,121 +911,6 @@ export function LLM() {
                       </div>
                     </div>
                   )}
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Maximum length
-                    </Label>
-                    <Slider
-                      value={[params.maxSeqLen]}
-                      onValueChange={(v) => updateParams("maxSeqLen", v[0])}
-                      max={maxSeqLen}
-                      min={1}
-                      step={1}
-                    />
-                    <Input
-                      type="number"
-                      value={params.maxSeqLen}
-                      min={1}
-                      max={maxSeqLen}
-                      onChange={(v) =>
-                        updateParams("maxSeqLen", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Temperature
-                    </Label>
-                    <Slider
-                      value={[params.temperature]}
-                      onValueChange={(v) => updateParams("temperature", v[0])}
-                      max={2}
-                      min={0}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.temperature.toFixed(2)}
-                      min={0}
-                      max={2}
-                      onChange={(v) =>
-                        updateParams("temperature", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Top-p
-                    </Label>
-                    <Slider
-                      value={[params.topP]}
-                      onValueChange={(v) => updateParams("topP", v[0])}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.topP.toFixed(2)}
-                      min={0}
-                      max={1}
-                      onChange={(v) => updateParams("topP", v.target.value)}
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Repeat Penalty
-                    </Label>
-                    <Slider
-                      value={[params.repeatPenalty]}
-                      onValueChange={(v) => updateParams("repeatPenalty", v[0])}
-                      max={2}
-                      min={1}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.repeatPenalty.toFixed(2)}
-                      min={1}
-                      max={2}
-                      onChange={(v) =>
-                        updateParams("repeatPenalty", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Seed
-                    </Label>
-                    <Input
-                      type="number"
-                      value={params.seed}
-                      onChange={(v) => updateParams("seed", v.target.value)}
-                    />
-                    <Button onClick={() => randSeed()}>Rand</Button>
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Messages
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="system">System</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="assistant">Assistant</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea id="content" placeholder="You are a..." />
                 </div>
               </fieldset>
             </div>
@@ -1036,408 +921,8 @@ export function LLM() {
           Share
         </Button>
       </header>
-      <main className="h-1/2 grid flex-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
-        <div className="hidden h-full overflow-auto gap-8 md:block">
-          <ScrollArea className="h-full pr-2 pb-2">
-            <div className="grid w-full items-start gap-6">
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Settings
-                </legend>
-                <div className="grid gap-3 py-4">
-                  <div
-                    className={cn(
-                      "hidden grid-cols-3 items-center gap-3",
-                      currentCore?.name === "Candle" && "grid"
-                    )}
-                  >
-                    <Label htmlFor="modelBaseUrl" className="text-left">
-                      Model base url
-                    </Label>
-                    <Select
-                      name="modelBaseUrl"
-                      value={modelBaseUrl}
-                      onValueChange={(v) => setModelBaseUrl(v)}
-                    >
-                      <SelectTrigger className="col-span-2">
-                        <SelectValue placeholder="Select a model base url" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectLabel>
-                            <div className="flex items-center justify-between">
-                              <span>URL</span>
-                              {organizationId ? (
-                                <SettingBlockConfigDialog<string[]>
-                                  title={"URL Configuration"}
-                                  description={
-                                    "Configure the settings for the model base urls."
-                                  }
-                                  organizationId={organizationId}
-                                  blocks={candleUrls}
-                                  mutateBlock={mutateCandleUrls}
-                                  emptyBlock={[]}
-                                  copy={(source) => [...source]}
-                                  blockRenderer={URLBlockRenderer}
-                                >
-                                  <div className="cursor-pointer mr-2">
-                                    <Settings className="size-4" />
-                                    <span className="sr-only">Settings</span>
-                                  </div>
-                                </SettingBlockConfigDialog>
-                              ) : null}
-                            </div>
-                          </SelectLabel>
-                          {modelBaseUrls.map((url) => (
-                            <SelectItem key={url} value={url}>
-                              {url}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  {currentCore?.name === "Candle" && (
-                    <div className="grid grid-cols-3 items-center gap-3">
-                      <Label htmlFor="model" className="text-left">
-                        Model
-                      </Label>
-                      <Select
-                        name="model"
-                        value={modelId}
-                        onValueChange={(v) => setModelId(v)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a model" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectLabel>
-                              <div className="flex items-center justify-between">
-                                <span>Model</span>
-                                {organizationId ? (
-                                  <SettingBlockConfigDialog<
-                                    Record<string, XpModel>
-                                  >
-                                    title={"Model Configuration"}
-                                    description={
-                                      "Configure the settings for the Models."
-                                    }
-                                    organizationId={organizationId}
-                                    blocks={candleModels}
-                                    mutateBlock={mutateCandleModels}
-                                    emptyBlock={{}}
-                                    copy={(source) =>
-                                      Object.entries(source).reduce(
-                                        (acc, [k, v]) => ({
-                                          ...acc,
-                                          [k]: { ...v },
-                                        }),
-                                        {}
-                                      )
-                                    }
-                                    blockRenderer={ModelBlockRenderer}
-                                  >
-                                    <div className="cursor-pointer mr-2">
-                                      <Settings className="size-4" />
-                                      <span className="sr-only">Settings</span>
-                                    </div>
-                                  </SettingBlockConfigDialog>
-                                ) : null}
-                              </div>
-                            </SelectLabel>
-                            {Object.entries(models).map(([mid, m]) => (
-                              <SelectItem key={mid} value={mid}>
-                                {mid}
-                                {` (${m.size})`}
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Button
-                            variant={"ghost"}
-                            onClick={(e) => e.preventDefault()}
-                          >
-                            <FileBox className="h-4 w-4 mr-1" />
-                            {model?.size}
-                          </Button>
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-96">
-                          <div className="flex justify-between space-x-4">
-                            <div className="space-y-1">
-                              <h4 className="text-sm font-semibold">
-                                {modelId}
-                              </h4>
-                              <pre className="mt-2 rounded-md bg-slate-950 dark:bg-slate-700 p-4 whitespace-pre-wrap break-words">
-                                <code className="text-white">
-                                  {JSON.stringify(model, null, 2)}
-                                </code>
-                              </pre>
-                              <div className="flex items-center pt-2">
-                                <span className="text-xs text-muted-foreground">
-                                  {modelBaseUrl}
-                                  {model?.base_url}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-                  )}
-                  {currentCore?.name === "WebLLM" && (
-                    <div className="grid grid-cols-3 items-center gap-3">
-                      <Label htmlFor="webModel" className="text-left">
-                        Model
-                      </Label>
-                      <Select
-                        name="webModel"
-                        value={webModelId}
-                        onValueChange={(v) => setWebModelId(v)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a model" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectLabel>
-                              <div className="flex items-center justify-between">
-                                <span>Model</span>
-                                {organizationId ? (
-                                  <SettingBlockConfigDialog<ModelRecord[]>
-                                    title={"Model Configuration"}
-                                    description={
-                                      "Configure the settings for the Models."
-                                    }
-                                    organizationId={organizationId}
-                                    blocks={webllmModelList}
-                                    mutateBlock={mutateWebllmModelList}
-                                    emptyBlock={WebLLMEmptyBlock}
-                                    copy={(source) =>
-                                      source.map((m) => ({ ...m }))
-                                    }
-                                  >
-                                    <div className="cursor-pointer mr-2">
-                                      <Settings className="size-4" />
-                                      <span className="sr-only">Settings</span>
-                                    </div>
-                                  </SettingBlockConfigDialog>
-                                ) : null}
-                              </div>
-                            </SelectLabel>
-                            {webllmModels.map((m) => (
-                              <SelectItem key={m.model_id} value={m.model_id}>
-                                {m.model_id}
-                                {` (${m.vram_required_MB} MB)`}
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Button
-                            variant={"ghost"}
-                            onClick={(e) => e.preventDefault()}
-                          >
-                            <FileBox className="h-4 w-4 mr-1" />
-                            {webModel?.vram_required_MB} MB
-                          </Button>
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-96">
-                          <div className="flex justify-between space-x-4">
-                            <div className="space-y-1">
-                              <h4 className="text-sm font-semibold">
-                                {webModelId}
-                              </h4>
-                              <pre className="mt-2 rounded-md bg-slate-950 dark:bg-slate-700 p-4 whitespace-pre-wrap break-words">
-                                <code className="text-white">
-                                  {JSON.stringify(webModel, null, 2)}
-                                </code>
-                              </pre>
-                            </div>
-                          </div>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-                  )}
-                  {currentCore?.name === "API" && (
-                    <div className="grid grid-cols-2 items-center gap-3">
-                      <Label htmlFor="apiModel" className="text-left">
-                        Model
-                      </Label>
-                      <div className="flex items-center justify-end gap-4">
-                        <Select
-                          name="apiModel"
-                          value={apiModelId}
-                          onValueChange={(v) => setApiModelId(v)}
-                        >
-                          <SelectTrigger>
-                            <SelectValue
-                              className="overflow-hidden"
-                              placeholder="Select a model"
-                            />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              <SelectLabel>Model</SelectLabel>
-                              {apiModels.map((m) => (
-                                <SelectItem key={m.model_id} value={m.model_id}>
-                                  {m.model_id}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                        {organizationId ? (
-                          <SettingBlockConfigDialog<APIModel[]>
-                            title={"Model Configuration"}
-                            description={
-                              "Configure the settings for the Models."
-                            }
-                            organizationId={organizationId}
-                            blocks={apiModelList}
-                            mutateBlock={mutateApiModelList}
-                            emptyBlock={apiEmptyBlock}
-                            copy={(source) => source.map((m) => ({ ...m }))}
-                          >
-                            <div className="cursor-pointer mr-2">
-                              <Settings className="size-4" />
-                              <span className="sr-only">Settings</span>
-                            </div>
-                          </SettingBlockConfigDialog>
-                        ) : null}
-                      </div>
-                    </div>
-                  )}
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Maximum length
-                    </Label>
-                    <Slider
-                      value={[params.maxSeqLen]}
-                      onValueChange={(v) => updateParams("maxSeqLen", v[0])}
-                      max={maxSeqLen}
-                      min={1}
-                      step={1}
-                    />
-                    <Input
-                      type="number"
-                      value={params.maxSeqLen}
-                      min={1}
-                      max={maxSeqLen}
-                      onChange={(v) =>
-                        updateParams("maxSeqLen", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Temperature
-                    </Label>
-                    <Slider
-                      value={[params.temperature]}
-                      onValueChange={(v) => updateParams("temperature", v[0])}
-                      max={2}
-                      min={0}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.temperature.toFixed(2)}
-                      min={0}
-                      max={2}
-                      onChange={(v) =>
-                        updateParams("temperature", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Top-p
-                    </Label>
-                    <Slider
-                      value={[params.topP]}
-                      onValueChange={(v) => updateParams("topP", v[0])}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.topP.toFixed(2)}
-                      min={0}
-                      max={1}
-                      onChange={(v) => updateParams("topP", v.target.value)}
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Repeat Penalty
-                    </Label>
-                    <Slider
-                      value={[params.repeatPenalty]}
-                      onValueChange={(v) => updateParams("repeatPenalty", v[0])}
-                      max={2}
-                      min={1}
-                      step={0.01}
-                    />
-                    <Input
-                      type="text"
-                      value={params.repeatPenalty.toFixed(2)}
-                      min={1}
-                      max={2}
-                      onChange={(v) =>
-                        updateParams("repeatPenalty", v.target.value)
-                      }
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-3">
-                    <Label htmlFor="name" className="text-left">
-                      Seed
-                    </Label>
-                    <Input
-                      type="number"
-                      value={params.seed}
-                      onChange={(v) => updateParams("seed", v.target.value)}
-                    />
-                    <Button onClick={() => randSeed()}>Rand</Button>
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Messages
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="system">System</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="assistant">Assistant</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                    id="content"
-                    placeholder="You are a..."
-                    className="min-h-[9.5rem]"
-                  />
-                </div>
-              </fieldset>
-            </div>
-          </ScrollArea>
-        </div>
-        <div className="flex h-full flex-col rounded-xl bg-muted/50 p-4 overflow-auto lg:col-span-2">
+      <main className="h-1/2 grid flex-1 gap-4 p-4">
+        <div className="flex h-full flex-col rounded-xl bg-muted/50 p-4 overflow-auto">
           <ScrollArea
             className="flex-1 w-full p-3"
             onScroll={(e) => {