diff --git a/web_app/src/components/Header.tsx b/web_app/src/components/Header.tsx
index 1f4985a..1941465 100644
--- a/web_app/src/components/Header.tsx
+++ b/web_app/src/components/Header.tsx
@@ -28,7 +28,7 @@ const Header = () => {
     enableFileManager,
     enableManualInpainting,
     enableUploadMask,
-    shouldShowPromptInput,
+    model,
     setFile,
     setCustomFile,
   ] = useStore((state) => [
@@ -38,7 +38,7 @@ const Header = () => {
     state.serverConfig.enableFileManager,
     state.settings.enableManualInpainting,
     state.settings.enableUploadMask,
-    state.showPromptInput(),
+    state.settings.model,
     state.setFile,
     state.setCustomFile,
   ])
@@ -145,18 +145,22 @@ const Header = () => {
           )}
         </div>
 
-        <IconButton
-          disabled={isInpainting}
-          tooltip="Rerun last mask"
-          onClick={handleRerunLastMask}
-          onMouseEnter={onRerunMouseEnter}
-          onMouseLeave={onRerunMouseLeave}
-        >
-          <RotateCw className={file ? "visible" : "hidden"} />
-        </IconButton>
+        {file && !model.need_prompt ? (
+          <IconButton
+            disabled={isInpainting}
+            tooltip="Rerun last mask"
+            onClick={handleRerunLastMask}
+            onMouseEnter={onRerunMouseEnter}
+            onMouseLeave={onRerunMouseLeave}
+          >
+            <RotateCw />
+          </IconButton>
+        ) : (
+          <></>
+        )}
       </div>
 
-      {shouldShowPromptInput ? <PromptInput /> : <></>}
+      {model.need_prompt ? <PromptInput /> : <></>}
 
       <div className="flex gap-1">
         {/* <CoffeeIcon /> */}
diff --git a/web_app/src/components/Settings.tsx b/web_app/src/components/Settings.tsx
index 64ff906..e6a7324 100644
--- a/web_app/src/components/Settings.tsx
+++ b/web_app/src/components/Settings.tsx
@@ -433,9 +433,9 @@ export function SettingsDialog() {
                     <></>
                   )} */}
 
-                  {/* <div className=" absolute right-">
-                  <Button type="submit">Ok</Button>
-                </div> */}
+                  <div className="absolute right-10 bottom-6">
+                    <Button onClick={() => toggleOpen()}>Ok</Button>
+                  </div>
                 </form>
               </div>
             </Form>
diff --git a/web_app/src/components/SidePanel.tsx b/web_app/src/components/SidePanel.tsx
index d78fbf9..0a708ff 100644
--- a/web_app/src/components/SidePanel.tsx
+++ b/web_app/src/components/SidePanel.tsx
@@ -1,5 +1,5 @@
 import { FormEvent, useState } from "react"
-import { useToggle } from "react-use"
+import { useToggle, useWindowSize } from "react-use"
 import { useStore } from "@/lib/states"
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
 import { Switch } from "./ui/switch"
@@ -24,7 +24,14 @@ import {
 import { Separator } from "./ui/separator"
 import { useHotkeys } from "react-hotkeys-hook"
 import { ScrollArea } from "./ui/scroll-area"
-import { Sheet, SheetContent, SheetHeader } from "./ui/sheet"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./ui/sheet"
 
 const SidePanel = () => {
   const [settings, updateSettings, showSidePanel] = useStore((state) => [
@@ -41,6 +48,8 @@ const SidePanel = () => {
     toggleOpen()
   })
 
+  const windowSize = useWindowSize()
+
   if (!showSidePanel) {
     return null
   }
@@ -65,14 +74,14 @@ const SidePanel = () => {
     return (
       <div className="flex flex-col gap-4">
         <div className="flex flex-col items-start gap-4">
-          {/* <Label htmlFor="controlnet">Controlnet</Label> */}
+          <Label htmlFor="controlnet">Controlnet</Label>
           <Select
             value={settings.controlnetMethod}
             onValueChange={(value) => {
               updateSettings({ controlnetMethod: value })
             }}
           >
-            <SelectTrigger>
+            <SelectTrigger id="controlnet">
               <SelectValue placeholder="Select control method" />
             </SelectTrigger>
             <SelectContent align="end">
@@ -202,195 +211,187 @@ const SidePanel = () => {
   }
 
   return (
-    <Popover open={open} onOpenChange={toggleOpen}>
-      <PopoverTrigger
+    <Sheet open={open} onOpenChange={toggleOpen} modal={false}>
+      <SheetTrigger
         tabIndex={-1}
         className="z-10 outline-none absolute top-[68px] right-6 px-3 py-2 rounded-lg border-solid border hover:bg-primary hover:text-primary-foreground"
       >
         Config
-      </PopoverTrigger>
-      <PopoverContent
-        align="end"
-        onEscapeKeyDown={(event) => event.preventDefault()}
+      </SheetTrigger>
+      <SheetContent
+        side="right"
+        className="w-[300px] mt-[60px] outline-none pl-4 pr-1"
         onOpenAutoFocus={(event) => event.preventDefault()}
         onPointerDownOutside={(event) => event.preventDefault()}
       >
-        <ScrollArea className="max-h-[600px]">
-          <Accordion
-            type="multiple"
-            value={expandedAccordionItems}
-            onValueChange={setExpandedAccordionItems}
-          >
-            <div className="flex flex-col gap-3">
-              <div className="flex justify-between items-center">
-                <Label htmlFor="cropper">Cropper</Label>
-                <Switch
-                  id="cropper"
-                  checked={settings.showCroper}
-                  onCheckedChange={(value) => {
-                    updateSettings({ showCroper: value })
-                  }}
-                />
-              </div>
-
-              <div className="flex justify-between items-center">
-                <Label htmlFor="steps">Steps</Label>
-                <NumberInput
-                  id="steps"
-                  className="w-14"
-                  numberValue={settings.sdSteps}
-                  allowFloat={false}
-                  onNumberValueChange={(value) => {
-                    updateSettings({ sdSteps: value })
-                  }}
-                />
-              </div>
-
-              <div className="flex justify-between items-center">
-                <Label htmlFor="guidance-scale">Guidance scale</Label>
-                <NumberInput
-                  id="guidance-scale"
-                  className="w-14"
-                  numberValue={settings.sdGuidanceScale}
-                  allowFloat
-                  onNumberValueChange={(value) => {
-                    updateSettings({ sdGuidanceScale: value })
-                  }}
-                />
-              </div>
-
-              <div className="flex justify-between items-center">
-                <Label htmlFor="strength">Strength</Label>
-                <NumberInput
-                  id="strength"
-                  className="w-14"
-                  numberValue={settings.sdStrength}
-                  allowFloat
-                  onNumberValueChange={(value) => {
-                    updateSettings({ sdStrength: value })
-                  }}
-                />
-              </div>
-
-              <div className="flex justify-between items-center">
-                <Label htmlFor="sampler">Sampler</Label>
-                <Select
-                  value={settings.sdSampler as string}
-                  onValueChange={(value) => {
-                    const sampler = value as SDSampler
-                    updateSettings({ sdSampler: sampler })
-                  }}
-                >
-                  <SelectTrigger className="w-[100px]">
-                    <SelectValue placeholder="Select sampler" />
-                  </SelectTrigger>
-                  <SelectContent align="end">
-                    <SelectGroup>
-                      {Object.values(SDSampler).map((sampler) => (
-                        <SelectItem
-                          key={sampler as string}
-                          value={sampler as string}
-                        >
-                          {sampler as string}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="flex justify-between items-center">
-                {/* 每次会从服务器返回更新该值 */}
-                <Label htmlFor="seed">Seed</Label>
-                <div className="flex gap-2 justify-center items-center">
-                  <Switch
-                    id="seed"
-                    checked={settings.seedFixed}
-                    onCheckedChange={(value) => {
-                      updateSettings({ seedFixed: value })
-                    }}
-                  />
-                  <NumberInput
-                    title="Seed"
-                    className="w-[100px]"
-                    disabled={!settings.seedFixed}
-                    numberValue={settings.seed}
-                    allowFloat={false}
-                    onNumberValueChange={(val) => {
-                      updateSettings({ seed: val })
-                    }}
-                  />
-                </div>
-              </div>
-              <Separator />
+        <SheetHeader className="mb-4">
+          <SheetTitle>Diffusion Paramers</SheetTitle>
+          <Separator />
+        </SheetHeader>
+        <ScrollArea
+          style={{ height: windowSize.height - 160 }}
+          className="pr-3"
+        >
+          <div className="flex flex-col gap-3">
+            <div className="flex justify-between items-center">
+              <Label htmlFor="cropper">Cropper</Label>
+              <Switch
+                id="cropper"
+                checked={settings.showCroper}
+                onCheckedChange={(value) => {
+                  updateSettings({ showCroper: value })
+                }}
+              />
             </div>
 
-            <AccordionItem value="item-0">
-              <AccordionTrigger>Negative prompt</AccordionTrigger>
-              <AccordionContent className="p-1">
-                <Textarea
-                  rows={4}
-                  onKeyUp={onKeyUp}
-                  className="max-h-[8rem] overflow-y-auto mb-2"
-                  placeholder=""
-                  id="negative-prompt"
-                  value={settings.negativePrompt}
-                  onInput={(evt: FormEvent<HTMLTextAreaElement>) => {
-                    evt.preventDefault()
-                    evt.stopPropagation()
-                    const target = evt.target as HTMLTextAreaElement
-                    updateSettings({ negativePrompt: target.value })
+            <div className="flex justify-between items-center">
+              <Label htmlFor="steps">Steps</Label>
+              <NumberInput
+                id="steps"
+                className="w-14"
+                numberValue={settings.sdSteps}
+                allowFloat={false}
+                onNumberValueChange={(value) => {
+                  updateSettings({ sdSteps: value })
+                }}
+              />
+            </div>
+
+            <div className="flex justify-between items-center">
+              <Label htmlFor="guidance-scale">Guidance scale</Label>
+              <NumberInput
+                id="guidance-scale"
+                className="w-14"
+                numberValue={settings.sdGuidanceScale}
+                allowFloat
+                onNumberValueChange={(value) => {
+                  updateSettings({ sdGuidanceScale: value })
+                }}
+              />
+            </div>
+
+            <div className="flex justify-between items-center">
+              <Label htmlFor="strength">Strength</Label>
+              <NumberInput
+                id="strength"
+                className="w-14"
+                numberValue={settings.sdStrength}
+                allowFloat
+                onNumberValueChange={(value) => {
+                  updateSettings({ sdStrength: value })
+                }}
+              />
+            </div>
+
+            <div className="flex justify-between items-center">
+              <Label htmlFor="sampler">Sampler</Label>
+              <Select
+                value={settings.sdSampler as string}
+                onValueChange={(value) => {
+                  const sampler = value as SDSampler
+                  updateSettings({ sdSampler: sampler })
+                }}
+              >
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue placeholder="Select sampler" />
+                </SelectTrigger>
+                <SelectContent align="end">
+                  <SelectGroup>
+                    {Object.values(SDSampler).map((sampler) => (
+                      <SelectItem
+                        key={sampler as string}
+                        value={sampler as string}
+                      >
+                        {sampler as string}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex justify-between items-center">
+              {/* 每次会从服务器返回更新该值 */}
+              <Label htmlFor="seed">Seed</Label>
+              <div className="flex gap-2 justify-center items-center">
+                <Switch
+                  id="seed"
+                  checked={settings.seedFixed}
+                  onCheckedChange={(value) => {
+                    updateSettings({ seedFixed: value })
                   }}
                 />
-              </AccordionContent>
-            </AccordionItem>
+                <NumberInput
+                  title="Seed"
+                  className="w-[100px]"
+                  disabled={!settings.seedFixed}
+                  numberValue={settings.seed}
+                  allowFloat={false}
+                  onNumberValueChange={(val) => {
+                    updateSettings({ seed: val })
+                  }}
+                />
+              </div>
+            </div>
 
-            <AccordionItem value="item-1">
-              <AccordionTrigger>ControlNet</AccordionTrigger>
-              <AccordionContent>{renderConterNetSetting()}</AccordionContent>
-            </AccordionItem>
+            <div className="flex flex-col gap-4">
+              <Label htmlFor="negative-prompt">Negative prompt</Label>
+              <Textarea
+                rows={4}
+                onKeyUp={onKeyUp}
+                className="max-h-[8rem] overflow-y-auto mb-2"
+                placeholder=""
+                id="negative-prompt"
+                value={settings.negativePrompt}
+                onInput={(evt: FormEvent<HTMLTextAreaElement>) => {
+                  evt.preventDefault()
+                  evt.stopPropagation()
+                  const target = evt.target as HTMLTextAreaElement
+                  updateSettings({ negativePrompt: target.value })
+                }}
+              />
+            </div>
 
-            <AccordionItem value="item-2">
-              <AccordionTrigger>Freeu</AccordionTrigger>
-              <AccordionContent>{renderFreeu()}</AccordionContent>
-            </AccordionItem>
+            <Separator />
 
-            <AccordionItem value="item-3">
-              <AccordionTrigger>Other</AccordionTrigger>
-              <AccordionContent>
-                <div className="flex flex-col gap-4">
-                  {renderLCMLora()}
+            <div className="flex flex-col gap-4">
+              {renderConterNetSetting()}
+            </div>
 
-                  <div className="flex justify-between items-center">
-                    <Label htmlFor="mask-blur">Mask blur</Label>
-                    <NumberInput
-                      id="mask-blur"
-                      className="w-14"
-                      numberValue={settings.sdMaskBlur}
-                      allowFloat={false}
-                      onNumberValueChange={(value) => {
-                        updateSettings({ sdMaskBlur: value })
-                      }}
-                    />
-                  </div>
+            <Separator />
+            {renderFreeu()}
 
-                  <div className="flex justify-between items-center">
-                    <Label htmlFor="match-histograms">Match histograms</Label>
-                    <Switch
-                      id="match-histograms"
-                      checked={settings.sdMatchHistograms}
-                      onCheckedChange={(value) => {
-                        updateSettings({ sdMatchHistograms: value })
-                      }}
-                    />
-                  </div>
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
+            <Separator />
+            {renderLCMLora()}
+            <Separator />
+
+            <div className="flex justify-between items-center">
+              <Label htmlFor="mask-blur">Mask blur</Label>
+              <NumberInput
+                id="mask-blur"
+                className="w-14"
+                numberValue={settings.sdMaskBlur}
+                allowFloat={false}
+                onNumberValueChange={(value) => {
+                  updateSettings({ sdMaskBlur: value })
+                }}
+              />
+            </div>
+
+            <div className="flex justify-between items-center">
+              <Label htmlFor="match-histograms">Match histograms</Label>
+              <Switch
+                id="match-histograms"
+                checked={settings.sdMatchHistograms}
+                onCheckedChange={(value) => {
+                  updateSettings({ sdMatchHistograms: value })
+                }}
+              />
+            </div>
+          </div>
         </ScrollArea>
-      </PopoverContent>
-    </Popover>
+      </SheetContent>
+    </Sheet>
   )
 }
 
diff --git a/web_app/src/components/ui/scroll-area.tsx b/web_app/src/components/ui/scroll-area.tsx
index cf253cf..019c719 100644
--- a/web_app/src/components/ui/scroll-area.tsx
+++ b/web_app/src/components/ui/scroll-area.tsx
@@ -10,6 +10,7 @@ const ScrollArea = React.forwardRef<
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
+    scrollHideDelay={400}
     {...props}
   >
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
diff --git a/web_app/src/components/ui/tooltip.tsx b/web_app/src/components/ui/tooltip.tsx
index a9c71ba..5bc6f4e 100644
--- a/web_app/src/components/ui/tooltip.tsx
+++ b/web_app/src/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 border overflow-hidden rounded-md bg-background text-foreground px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/web_app/src/lib/states.ts b/web_app/src/lib/states.ts
index 9d66705..d674131 100644
--- a/web_app/src/lib/states.ts
+++ b/web_app/src/lib/states.ts
@@ -179,6 +179,7 @@ const defaultValues: AppState = {
       support_freeu: false,
       support_lcm_lora: false,
       is_single_file_diffusers: false,
+      need_prompt: false,
     },
     showCroper: false,
     enableDownloadMask: false,
diff --git a/web_app/src/lib/types.ts b/web_app/src/lib/types.ts
index a402574..71da9d6 100644
--- a/web_app/src/lib/types.ts
+++ b/web_app/src/lib/types.ts
@@ -12,6 +12,7 @@ export interface ModelInfo {
   controlnets: string[]
   support_freeu: boolean
   support_lcm_lora: boolean
+  need_prompt: boolean
   is_single_file_diffusers: boolean
 }