diff --git a/src/lang/en.ts b/src/lang/en.ts
index 6947c95e..53fca401 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -677,4 +677,6 @@ export const languageEnglish = {
     doYouWantToUnbindCurrentPersona: "Do you want to unbind the persona from this chat?",
     personaBindedSuccess: "Persona is successfully binded",
     personaUnbindedSuccess: "Persona is successfully unbinded",
+    parameters: "Parameters",
+    sizeAndSpeed: "Size and Speed",
 }
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index db6c50b9..b715ba34 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -24,6 +24,7 @@
     import Arcodion from "src/lib/UI/Arcodion.svelte";
     import OpenrouterSettings from "./OpenrouterSettings.svelte";
     import ChatFormatSettings from "./ChatFormatSettings.svelte";
+  import PromptSettings from "./PromptSettings.svelte";
 
     let tokens = {
         mainPrompt: 0,
@@ -40,284 +41,250 @@
         tokens.globalNote = await tokenizeAccurate($DataBase.globalNote, true)
     }
 
-    let advancedBotSettings = false
-    const unsub = DataBase.subscribe(db => {
-        if(db.advancedBotSettings !== advancedBotSettings){
-            advancedBotSettings = db.advancedBotSettings
-        }
-        loadTokenize()
-    })
-
-    onDestroy(() => {
-        unsub()
-    })
-
     $: if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
         $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
     }
-</script>
 
+    let submenu = 0
+</script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2>
-<div class="flex w-full mb-4">
+
+<div class="flex w-full rounded-md border border-darkborderc mb-4">
     <button on:click={() => {
-        $DataBase.advancedBotSettings = false
-    }} class="flex-1 border-solid  p-2 flex justify-center cursor-pointer rounded-l-lg bg-darkbg" class:bg-darkbutton={!$DataBase.advancedBotSettings}>
-        <span>{language.simple}</span>
+        submenu = 0
+    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
+        <span>{language.model}</span>
     </button>
     <button on:click={() => {
-        $DataBase.advancedBotSettings = true
-    }} class="flex-1 border-solid border-l-transparent p-2 flex justify-center cursor-pointer rounded-r-lg bg-darkbg" class:bg-darkbutton={$DataBase.advancedBotSettings}>
-        <span>{language.advanced}</span>
+        submenu = 1
+    }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
+        <span>{language.parameters}</span>
+    </button>
+    <button on:click={() => {
+        submenu = 2
+    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
+        <span>{language.prompt}</span>
+    </button>
+    <button on:click={() => {
+        submenu = 3
+    }} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
+        <span>{language.others}</span>
     </button>
 </div>
-{#if advancedBotSettings}
+
+{#if submenu === 0 || submenu === -1}
     <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
     <ModelList bind:value={$DataBase.aiModel}/>
 
     <span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
     <ModelList bind:value={$DataBase.subModel}/>
-{:else}
-    <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
-    <ModelList bind:value={$DataBase.aiModel} onChange={(v) => {
-        $DataBase.subModel = v
-        if(v.startsWith('gpt') || v.startsWith('palm2')){
-            $DataBase.maxContext = 4000
-            $DataBase.maxResponse = 500
-        }
-        else if(v.startsWith('claude')){
-            $DataBase.maxContext = 7500
-            $DataBase.maxResponse = 500
-            if(v.endsWith('100k')){
-                $DataBase.maxContext = 99000
-            }
-        }
-        else{
-            $DataBase.maxContext = 1500
-            $DataBase.maxResponse = 200
-            if(v.startsWith('horde')){
-                $DataBase.maxResponse = 100
-            }
-        }
-        setRecommended(v, 'force')
-    }}/>
-
-{/if}
-
-{#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
-    <span class="text-textcolor">
-        {#if $DataBase.google.projectId === 'aigoogle'}
-            GoogleAI API Key
-        {:else}
-            Google Bearer Token
-        {/if}
-    </span>
-    <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.accessToken}/>
-
-    {#if $DataBase.google.projectId !== 'aigoogle'}
-        <span class="text-textcolor">Google Project ID</span>
-        <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.projectId}/>
-    {/if}
-{/if}
-{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
-    <span class="text-textcolor">NovelList {language.apiKey}</span>
-    <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
-    <span class="text-textcolor">Mancer {language.apiKey}</span>
-    <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
-    <span class="text-textcolor">Claude {language.apiKey}</span>
-    <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
-    <span class="text-textcolor">Mistral {language.apiKey}</span>
-    <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
-    <span class="text-textcolor">NovelAI Bearer Token</span>
-    <TextInput bind:value={$DataBase.novelai.token}/>
-{/if}
-{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
-    <span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span>
-    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
-    <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
-    <TextInput hideText marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
-    <span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.proxyRequestModel}>
-        <OptionInput value="">None</OptionInput>
-        <OptionInput value="gpt35">GPT 3.5</OptionInput>
-        <OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
-        <OptionInput value="gpt4">GPT-4</OptionInput>
-        <OptionInput value="gpt4o">GPT-4o</OptionInput>
-        <OptionInput value="gpt4_32k">GPT-4 32k</OptionInput>
-        <OptionInput value="gpt4_turbo">GPT-4 Turbo</OptionInput>
-        <OptionInput value="gpt4_1106">GPT-4 Turbo 1106</OptionInput>
-        <OptionInput value="gptvi4_1106">GPT-4 Turbo 1106 Vision</OptionInput>
-        <OptionInput value="gpt35_0301">GPT-3.5 0301</OptionInput>
-        <OptionInput value="gpt4_0301">GPT-4 0301</OptionInput>
-        <OptionInput value="gpt35_0613">GPT-3.5 0613</OptionInput>
-        <OptionInput value="gpt4_0613">GPT-4 0613</OptionInput>
-        <OptionInput value="claude-2.1">claude-2.1</OptionInput>
-        <OptionInput value="claude-2.0">claude-2.0</OptionInput>
-        <OptionInput value="claude-2">claude-2</OptionInput>
-        <OptionInput value="claude-v1.3">claude-v1.3</OptionInput>
-        <OptionInput value="claude-v1.3-100k">claude-v1.3-100k</OptionInput>
-        <OptionInput value="claude-v1.2">claude-v1.2</OptionInput>
-        <OptionInput value="claude-instant-v1.1">claude-instant-v1.1</OptionInput>
-        <OptionInput value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</OptionInput>
-        <OptionInput value="claude-3-opus-20240229">claude-3-opus-20240229</OptionInput>
-        <OptionInput value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</OptionInput>
-        <OptionInput value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</OptionInput>
-        <OptionInput value="custom">Custom</OptionInput>
-    </SelectInput>
-    {#if $DataBase.proxyRequestModel === 'custom'}
-        <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.customProxyRequestModel} placeholder="Name" />
-    {:else}
-        <div class="mb-4"></div>
-    {/if}
-{/if}
-{#if $DataBase.aiModel.startsWith('risullm')}
-    <span class="text-textcolor mt-4">Risu {language.apiKey}</span>
-    <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
-{/if}
-{#if $DataBase.aiModel.startsWith('cohere')}
-    <span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
-    <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
-{/if}
-{#if $DataBase.aiModel === 'ollama-hosted'}
-    <span class="text-textcolor mt-4">Ollama URL</span>
-    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
-
-    <span class="text-textcolor mt-4">Ollama Model</span>
-    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} />
-{/if}
-{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
-    <span class="text-textcolor mt-4">Openrouter Key</span>
-    <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
-
-    <span class="text-textcolor mt-4">Openrouter Model</span>
-    {#await openRouterModels()}
-        <SelectInput className="mt-2 mb-4" value="">
-            <OptionInput value="">Loading..</OptionInput>
-        </SelectInput>
-    {:then m}
-        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
-            {#if (!m) || (m.length === 0)}
-                <OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
-                <OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
-                <OptionInput value="openai/gpt-4">GPT-4</OptionInput>
-                <OptionInput value="openai/gpt-4-32k">GPT-4 32k</OptionInput>
-                <OptionInput value="anthropic/claude-2">Claude 2</OptionInput>
-                <OptionInput value="anthropic/claude-instant-v1">Claude Instant v1</OptionInput>
-                <OptionInput value="anthropic/claude-instant-v1-100k">Claude Instant v1 100k</OptionInput>
-                <OptionInput value="anthropic/claude-v1">Claude v1</OptionInput>
-                <OptionInput value="anthropic/claude-v1-100k">Claude v1 100k</OptionInput>
-                <OptionInput value="anthropic/claude-1.2">Claude v1.2</OptionInput>
-            {:else}
-                <OptionInput value={"risu/free"}>Free Auto</OptionInput>
-                <OptionInput value={"openrouter/auto"}>Openrouter Auto</OptionInput>
-                {#each m as model}
-                    <OptionInput value={model.id}>{model.name}</OptionInput>
-                {/each}
-            {/if}
-        </SelectInput>
-    {/await}
-{/if}
-{#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
-    <span class="text-textcolor">{language.tokenizer}</span>
-    <SelectInput bind:value={$DataBase.customTokenizer}>
-        {#each tokenizerList as entry}
-            <OptionInput value={entry[0]}>{entry[1]}</OptionInput>
-        {/each}
-    </SelectInput>
-{/if}
-{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
-    || $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')}
-    <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
-    <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
-
-{/if}
-
-<div class="py-2 flex flex-col gap-2 mb-4">
-    {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter' || $DataBase.aiModel.startsWith('claude-3')}
-        <Check bind:check={$DataBase.useStreaming} name={`Response ${language.streaming}`}/>
-    {/if}
 
     {#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
-        <Check check={$DataBase.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => {
-            if(!v){
-                $DataBase.google.projectId = 'aigoogle'
-            }
-            else{
-                $DataBase.google.projectId = ''
-            }
-        }}/>
+        <span class="text-textcolor">
+            {#if $DataBase.google.projectId === 'aigoogle'}
+                GoogleAI API Key
+            {:else}
+                Google Bearer Token
+            {/if}
+        </span>
+        <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.accessToken}/>
+
+        {#if $DataBase.google.projectId !== 'aigoogle'}
+            <span class="text-textcolor">Google Project ID</span>
+            <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.projectId}/>
+        {/if}
+    {/if}
+    {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
+        <span class="text-textcolor">NovelList {language.apiKey}</span>
+        <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
+        <span class="text-textcolor">Mancer {language.apiKey}</span>
+        <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/>
     {/if}
     {#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
-        <Check name="AWS Claude" bind:check={$DataBase.claudeAws}></Check>
+        <span class="text-textcolor">Claude {language.apiKey}</span>
+        <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
+        <span class="text-textcolor">Mistral {language.apiKey}</span>
+        <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
+        <span class="text-textcolor">NovelAI Bearer Token</span>
+        <TextInput bind:value={$DataBase.novelai.token}/>
     {/if}
     {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
-        <Check bind:check={$DataBase.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/>
+        <span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span>
+        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
+        <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
+        <TextInput hideText marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
+        <span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
+        <SelectInput className="mt-2" bind:value={$DataBase.proxyRequestModel}>
+            <OptionInput value="">None</OptionInput>
+            <OptionInput value="gpt35">GPT 3.5</OptionInput>
+            <OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
+            <OptionInput value="gpt4">GPT-4</OptionInput>
+            <OptionInput value="gpt4o">GPT-4o</OptionInput>
+            <OptionInput value="gpt4_32k">GPT-4 32k</OptionInput>
+            <OptionInput value="gpt4_turbo">GPT-4 Turbo</OptionInput>
+            <OptionInput value="gpt4_1106">GPT-4 Turbo 1106</OptionInput>
+            <OptionInput value="gptvi4_1106">GPT-4 Turbo 1106 Vision</OptionInput>
+            <OptionInput value="gpt35_0301">GPT-3.5 0301</OptionInput>
+            <OptionInput value="gpt4_0301">GPT-4 0301</OptionInput>
+            <OptionInput value="gpt35_0613">GPT-3.5 0613</OptionInput>
+            <OptionInput value="gpt4_0613">GPT-4 0613</OptionInput>
+            <OptionInput value="claude-2.1">claude-2.1</OptionInput>
+            <OptionInput value="claude-2.0">claude-2.0</OptionInput>
+            <OptionInput value="claude-2">claude-2</OptionInput>
+            <OptionInput value="claude-v1.3">claude-v1.3</OptionInput>
+            <OptionInput value="claude-v1.3-100k">claude-v1.3-100k</OptionInput>
+            <OptionInput value="claude-v1.2">claude-v1.2</OptionInput>
+            <OptionInput value="claude-instant-v1.1">claude-instant-v1.1</OptionInput>
+            <OptionInput value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</OptionInput>
+            <OptionInput value="claude-3-opus-20240229">claude-3-opus-20240229</OptionInput>
+            <OptionInput value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</OptionInput>
+            <OptionInput value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</OptionInput>
+            <OptionInput value="custom">Custom</OptionInput>
+        </SelectInput>
+        {#if $DataBase.proxyRequestModel === 'custom'}
+            <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.customProxyRequestModel} placeholder="Name" />
+        {:else}
+            <div class="mb-4"></div>
+        {/if}
     {/if}
-    {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
-        <Check bind:check={$DataBase.NAIadventure} name={language.textAdventureNAI}/>
-
-        <Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
+    {#if $DataBase.aiModel.startsWith('risullm')}
+        <span class="text-textcolor mt-4">Risu {language.apiKey}</span>
+        <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
     {/if}
-</div>
-
-{#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'}
-    <span class="text-textcolor mt-2">{language.plugin}</span>
-    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
-        <OptionInput value="">None</OptionInput>
-        {#each $customProviderStore as plugin}
-            <OptionInput value={plugin}>{plugin}</OptionInput>
-        {/each}
-    </SelectInput>
-{/if}
-
-{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
-    <span class="text-textcolor">Kobold URL</span>
-    <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
-
-{/if}
-
-
-{#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
-    <span class="text-textcolor">Horde {language.apiKey}</span>
-    <TextInput hideText marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
-
-{/if}
-{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
-    || $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'}
-    <span class="text-textcolor mt-2">Blocking {language.providerURL}</span>
-    <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
-    <span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
-    <span class="text-textcolor mt-2">Stream {language.providerURL}</span>
-    <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
-    {#if !isTauri}
-        <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
+    {#if $DataBase.aiModel.startsWith('cohere')}
+        <span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
+        <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
     {/if}
-    <span class="text-draculared text-xs mb-2">Warning: For Ooba version over 1.7, use "Ooba" as model, and use url like http://127.0.0.1:5000/v1/chat/completions</span>
-{/if}
-{#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
-    <span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
-    <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
-{/if}
-{#if advancedBotSettings}
-    {#if !$DataBase.promptTemplate}
-        <span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
-        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
-        <span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
-        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
-        <span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
-        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
-    {/if}    
+    {#if $DataBase.aiModel === 'ollama-hosted'}
+        <span class="text-textcolor mt-4">Ollama URL</span>
+        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
 
+        <span class="text-textcolor mt-4">Ollama Model</span>
+        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} />
+    {/if}
+    {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
+        <span class="text-textcolor mt-4">Openrouter Key</span>
+        <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
+
+        <span class="text-textcolor mt-4">Openrouter Model</span>
+        {#await openRouterModels()}
+            <SelectInput className="mt-2 mb-4" value="">
+                <OptionInput value="">Loading..</OptionInput>
+            </SelectInput>
+        {:then m}
+            <SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
+                {#if (!m) || (m.length === 0)}
+                    <OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
+                    <OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
+                    <OptionInput value="openai/gpt-4">GPT-4</OptionInput>
+                    <OptionInput value="openai/gpt-4-32k">GPT-4 32k</OptionInput>
+                    <OptionInput value="anthropic/claude-2">Claude 2</OptionInput>
+                    <OptionInput value="anthropic/claude-instant-v1">Claude Instant v1</OptionInput>
+                    <OptionInput value="anthropic/claude-instant-v1-100k">Claude Instant v1 100k</OptionInput>
+                    <OptionInput value="anthropic/claude-v1">Claude v1</OptionInput>
+                    <OptionInput value="anthropic/claude-v1-100k">Claude v1 100k</OptionInput>
+                    <OptionInput value="anthropic/claude-1.2">Claude v1.2</OptionInput>
+                {:else}
+                    <OptionInput value={"risu/free"}>Free Auto</OptionInput>
+                    <OptionInput value={"openrouter/auto"}>Openrouter Auto</OptionInput>
+                    {#each m as model}
+                        <OptionInput value={model.id}>{model.name}</OptionInput>
+                    {/each}
+                {/if}
+            </SelectInput>
+        {/await}
+    {/if}
+    {#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
+        <span class="text-textcolor">{language.tokenizer}</span>
+        <SelectInput bind:value={$DataBase.customTokenizer}>
+            {#each tokenizerList as entry}
+                <OptionInput value={entry[0]}>{entry[1]}</OptionInput>
+            {/each}
+        </SelectInput>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
+        || $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')}
+        <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
+        <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
+
+    {/if}
+
+    <div class="py-2 flex flex-col gap-2 mb-4">
+        {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter' || $DataBase.aiModel.startsWith('claude-3')}
+            <Check bind:check={$DataBase.useStreaming} name={`Response ${language.streaming}`}/>
+        {/if}
+
+        {#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
+            <Check check={$DataBase.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => {
+                if(!v){
+                    $DataBase.google.projectId = 'aigoogle'
+                }
+                else{
+                    $DataBase.google.projectId = ''
+                }
+            }}/>
+        {/if}
+        {#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
+            <Check name="AWS Claude" bind:check={$DataBase.claudeAws}></Check>
+        {/if}
+        {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
+            <Check bind:check={$DataBase.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/>
+        {/if}
+        {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
+            <Check bind:check={$DataBase.NAIadventure} name={language.textAdventureNAI}/>
+
+            <Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
+        {/if}
+    </div>
+
+    {#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'}
+        <span class="text-textcolor mt-2">{language.plugin}</span>
+        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
+            <OptionInput value="">None</OptionInput>
+            {#each $customProviderStore as plugin}
+                <OptionInput value={plugin}>{plugin}</OptionInput>
+            {/each}
+        </SelectInput>
+    {/if}
+
+    {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
+        <span class="text-textcolor">Kobold URL</span>
+        <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
+
+    {/if}
+
+
+    {#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
+        <span class="text-textcolor">Horde {language.apiKey}</span>
+        <TextInput hideText marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
+
+    {/if}
+    {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
+        || $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'}
+        <span class="text-textcolor mt-2">Blocking {language.providerURL}</span>
+        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
+        <span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
+        <span class="text-textcolor mt-2">Stream {language.providerURL}</span>
+        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
+        {#if !isTauri}
+            <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
+        {/if}
+        <span class="text-draculared text-xs mb-2">Warning: For Ooba version over 1.7, use "Ooba" as model, and use url like http://127.0.0.1:5000/v1/chat/completions</span>
+    {/if}
+    {#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
+        <span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
+        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
+    {/if}
+
+{/if}
+
+{#if submenu === 1 || submenu === -1}
     <span class="text-textcolor">{language.maxContextSize}</span>
     <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
 
@@ -325,178 +292,174 @@
     <span class="text-textcolor">{language.maxResponseSize}</span>
     <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
 
-{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
-<span class="text-textcolor">{language.seed}</span>
+    {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
+    <span class="text-textcolor">{language.seed}</span>
 
-<NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
-{/if}
-<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
+    <NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
+    {/if}
+    <span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
 
-{#if $DataBase.aiModel.startsWith("novelai")}
-    <SliderInput min={0} max={250} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
-{:else}
-    <SliderInput min={0} max={200} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')}
-    <span class="text-textcolor">Top K</span>
-    <SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k}/>
-{/if}
-{#if $DataBase.aiModel.startsWith('openrouter')}
-    <span class="text-textcolor">Repetition penalty</span>
-    <SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={$DataBase.repetition_penalty}/>
+    {#if $DataBase.aiModel.startsWith("novelai")}
+        <SliderInput min={0} max={250} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
+    {:else}
+        <SliderInput min={0} max={200} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')}
+        <span class="text-textcolor">Top K</span>
+        <SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k}/>
+    {/if}
+    {#if $DataBase.aiModel.startsWith('openrouter')}
+        <span class="text-textcolor">Repetition penalty</span>
+        <SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={$DataBase.repetition_penalty}/>
 
-    <span class="text-textcolor">Min P</span>
-    <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.min_p}/>
+        <span class="text-textcolor">Min P</span>
+        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.min_p}/>
 
-    <span class="text-textcolor">Top A</span>
-    <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a}/>
-{/if}
-{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
-    <span class="text-textcolor">Repetition Penalty</span>
-    <SliderInput min={1} max={1.5} step={0.01} fixed={2} marginBottom bind:value={$DataBase.ooba.repetition_penalty}/>
-    <span class="text-textcolor">Length Penalty</span>
-    <SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={$DataBase.ooba.length_penalty}/>
-    <span class="text-textcolor">Top K</span>
-    <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.ooba.top_k} />
-    <span class="text-textcolor">Top P</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_p}/>
-    <span class="text-textcolor">Typical P</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.typical_p}/>
-    <span class="text-textcolor">Top A</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_a}/>
-    <span class="text-textcolor">No Repeat n-gram Size</span>
-    <SliderInput min={0} max={20} step={1} marginBottom bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
-    <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
-    </div>
-    <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.ooba.add_bos_token} name={'Add BOS Token'}/>
-    </div>
-    <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.ooba.ban_eos_token} name={'Ban EOS Token'}/>
-    </div>
-    <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
-    </div>
-    <div class="flex items-center mt-4">
-        <Check check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
-            if(!$DataBase.localStopStrings){
-                $DataBase.localStopStrings = []
-            }
-            else{
-                $DataBase.localStopStrings = null
-            }
-        }} />
-    </div>
-    {#if $DataBase.localStopStrings}
-        <div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
-            <div class="p-2">
-                <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
-                    let localStopStrings = $DataBase.localStopStrings
-                    localStopStrings.push('')
-                    $DataBase.localStopStrings = localStopStrings
-                }}><PlusIcon /></button>
-            </div>
-            {#each $DataBase.localStopStrings as stopString, i}
-                <div class="flex w-full">
-                    <div class="flex-grow">
-                        <TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
-                    </div>
-                    <div>
-                        <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
-                            let localStopStrings = $DataBase.localStopStrings
-                            localStopStrings.splice(i, 1)
-                            $DataBase.localStopStrings = localStopStrings
-                        }}><TrashIcon /></button>
-                    </div>
-                </div>
-            {/each}
+        <span class="text-textcolor">Top A</span>
+        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a}/>
+    {/if}
+    {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
+        <span class="text-textcolor">Repetition Penalty</span>
+        <SliderInput min={1} max={1.5} step={0.01} fixed={2} marginBottom bind:value={$DataBase.ooba.repetition_penalty}/>
+        <span class="text-textcolor">Length Penalty</span>
+        <SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={$DataBase.ooba.length_penalty}/>
+        <span class="text-textcolor">Top K</span>
+        <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.ooba.top_k} />
+        <span class="text-textcolor">Top P</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_p}/>
+        <span class="text-textcolor">Typical P</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.typical_p}/>
+        <span class="text-textcolor">Top A</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_a}/>
+        <span class="text-textcolor">No Repeat n-gram Size</span>
+        <SliderInput min={0} max={20} step={1} marginBottom bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
         </div>
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.ooba.add_bos_token} name={'Add BOS Token'}/>
+        </div>
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.ooba.ban_eos_token} name={'Ban EOS Token'}/>
+        </div>
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
+        </div>
+        <div class="flex items-center mt-4">
+            <Check check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
+                if(!$DataBase.localStopStrings){
+                    $DataBase.localStopStrings = []
+                }
+                else{
+                    $DataBase.localStopStrings = null
+                }
+            }} />
+        </div>
+        {#if $DataBase.localStopStrings}
+            <div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
+                <div class="p-2">
+                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
+                        let localStopStrings = $DataBase.localStopStrings
+                        localStopStrings.push('')
+                        $DataBase.localStopStrings = localStopStrings
+                    }}><PlusIcon /></button>
+                </div>
+                {#each $DataBase.localStopStrings as stopString, i}
+                    <div class="flex w-full">
+                        <div class="flex-grow">
+                            <TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
+                        </div>
+                        <div>
+                            <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
+                                let localStopStrings = $DataBase.localStopStrings
+                                localStopStrings.splice(i, 1)
+                                $DataBase.localStopStrings = localStopStrings
+                            }}><TrashIcon /></button>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+        <div class="flex flex-col p-3 rounded-md border-selected border mt-4">
+            <ChatFormatSettings />
+        </div>
+        <Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
+
+    {:else if $DataBase.aiModel.startsWith('novelai')}
+        <div class="flex flex-col p-3 bg-darkbg mt-4">
+            <span class="text-textcolor">Starter</span>
+            <TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
+            <span class="text-textcolor">Seperator</span>
+            <TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
+        </div>
+        <span class="text-textcolor">Top P</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topP}/>
+        <span class="text-textcolor">Top K</span>
+        <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.NAIsettings.topK}/>
+        <span class="text-textcolor">Top A</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topA}/>
+        <span class="text-textcolor">Tailfree Sampling</span>
+        <SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
+        <span class="text-textcolor">Typical P</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.typicalp}/>
+        <span class="text-textcolor">Repetition Penalty</span>
+        <SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
+        <span class="text-textcolor">Repetition Penalty Range</span>
+        <SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
+        <span class="text-textcolor">Repetition Penalty Slope</span>
+        <SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
+        <span class="text-textcolor">Frequency Penalty</span>
+        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
+        <span class="text-textcolor">Presence Penalty</span>
+        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.presencePenalty}/>
+        <span class="text-textcolor">Mirostat LR</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_lr}/>
+        <span class="text-textcolor">Mirostat Tau</span>
+        <SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_tau}/>
+        <span class="text-textcolor">Cfg Scale</span>
+        <SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.cfg_scale}/>
+
+    {:else if $DataBase.aiModel.startsWith('novellist')}
+        <span class="text-textcolor">Top P</span>
+        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/>
+        <span class="text-textcolor">Reputation Penalty</span>
+        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen}/>
+        <span class="text-textcolor">Reputation Penalty Range</span>
+        <SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_range}/>
+        <span class="text-textcolor">Reputation Penalty Slope</span>
+        <SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
+        <span class="text-textcolor">Top K</span>
+        <SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_k}/>
+        <span class="text-textcolor">Top A</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_a}/>
+        <span class="text-textcolor">Typical P</span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.typical_p}/>
+    {:else if $DataBase.aiModel.startsWith('claude')}
+        <span class="text-textcolor">Top P <Help key="topP"/></span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p}/>
+    {:else}
+
+
+        <span class="text-textcolor">Top P <Help key="topP"/></span>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p}/>
+
+        <span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
+        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.frequencyPenalty} />
+        <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
+        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.PresensePenalty} />
     {/if}
-    <div class="flex flex-col p-3 rounded-md border-selected border mt-4">
-        <ChatFormatSettings />
-    </div>
-    <Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
 
-{:else if $DataBase.aiModel.startsWith('novelai')}
-    <div class="flex flex-col p-3 bg-darkbg mt-4">
-        <span class="text-textcolor">Starter</span>
-        <TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
-        <span class="text-textcolor">Seperator</span>
-        <TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
-    </div>
-    <span class="text-textcolor">Top P</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topP}/>
-    <span class="text-textcolor">Top K</span>
-    <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.NAIsettings.topK}/>
-    <span class="text-textcolor">Top A</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topA}/>
-    <span class="text-textcolor">Tailfree Sampling</span>
-    <SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
-    <span class="text-textcolor">Typical P</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.typicalp}/>
-    <span class="text-textcolor">Repetition Penalty</span>
-    <SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
-    <span class="text-textcolor">Repetition Penalty Range</span>
-    <SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
-    <span class="text-textcolor">Repetition Penalty Slope</span>
-    <SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
-    <span class="text-textcolor">Frequency Penalty</span>
-    <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
-    <span class="text-textcolor">Presence Penalty</span>
-    <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.presencePenalty}/>
-    <span class="text-textcolor">Mirostat LR</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_lr}/>
-    <span class="text-textcolor">Mirostat Tau</span>
-    <SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_tau}/>
-    <span class="text-textcolor">Cfg Scale</span>
-    <SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.cfg_scale}/>
-
-{:else if $DataBase.aiModel.startsWith('novellist')}
-    <span class="text-textcolor">Top P</span>
-    <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/>
-    <span class="text-textcolor">Reputation Penalty</span>
-    <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen}/>
-    <span class="text-textcolor">Reputation Penalty Range</span>
-    <SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_range}/>
-    <span class="text-textcolor">Reputation Penalty Slope</span>
-    <SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
-    <span class="text-textcolor">Top K</span>
-    <SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_k}/>
-    <span class="text-textcolor">Top A</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_a}/>
-    <span class="text-textcolor">Typical P</span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.typical_p}/>
-{:else if $DataBase.aiModel.startsWith('claude')}
-    <span class="text-textcolor">Top P <Help key="topP"/></span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p}/>
-{:else}
-
-
-    <span class="text-textcolor">Top P <Help key="topP"/></span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p}/>
-
-    <span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
-    <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.frequencyPenalty} />
-    <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
-    <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.PresensePenalty} />
-{/if}
-{/if}
-
-{#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
-    <OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
-{/if}
-
-{#if $DataBase.aiModel.startsWith('openrouter')}
-    <OpenrouterSettings />
-{/if}
-
-
-{#if advancedBotSettings}
-    {#if !$DataBase.promptTemplate}
-        <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
-        <DropList bind:list={$DataBase.formatingOrder} />
+    {#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
+        <OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
     {/if}
+
+    {#if $DataBase.aiModel.startsWith('openrouter')}
+        <OpenrouterSettings />
+    {/if}
+
+{/if}
+
+{#if submenu === 3 || submenu === -1}
     <Arcodion styled name="Bias " help="bias">
         <table class="contain w-full max-w-full tabler">
             <tr>
@@ -576,14 +539,10 @@
     {/if}
 
 
-    {#if !$DataBase.promptTemplate}
-        <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
-        </div>
-    {/if}
-    <div class="flex items-center mt-4">
+    <Arcodion styled name={language.promptTemplate}>
         {#if $DataBase.promptTemplate}
-            <Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} onChange={async ()=>{
+            <PromptSettings mode='inline' subMenu={1} />
+            <Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
                 const conf = await alertConfirm(language.resetPromptTemplateConfirm)
                 
                 if(conf){
@@ -592,21 +551,41 @@
                 else{
                     $DataBase.promptTemplate = $DataBase.promptTemplate
                 }
-
-
             }}/>
         {:else}
             <Check check={false} name={language.usePromptTemplate} onChange={() => {
                 $DataBase.promptTemplate = []
             }}/>
         {/if}
-    </div>
-
-    {#if ($DataBase.promptTemplate)}
-        <div class="mt-2">
-            <Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
-        </div>
-    {/if}
+    </Arcodion>
     <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 
 {/if}
+
+{#if submenu === 2 || submenu === -1}
+    {#if !$DataBase.promptTemplate}
+        <span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
+        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
+        <span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
+        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
+        <span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
+        <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>  
+        <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
+        <DropList bind:list={$DataBase.formatingOrder} />
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
+        </div>
+    {:else}
+        <PromptSettings mode='inline' />
+    {/if}
+{/if}
+
+
+{#if $DataBase.promptTemplate && submenu === -1}
+    <div class="mt-2">
+        <Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
+    </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index c8e4119f..b6f631f7 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -17,276 +17,297 @@
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
     }
+
+    let submenu = 0
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
+<div class="flex w-full rounded-md border border-darkborderc mb-4">
+    <button on:click={() => {
+        submenu = 0
+    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
+        <span>{language.theme}</span>
+    </button>
+    <button on:click={() => {
+        submenu = 1
+    }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
+        <span>{language.sizeAndSpeed}</span>
+    </button>
+    <button on:click={() => {
+        submenu = 2
+    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
+        <span>{language.others}</span>
+    </button>
+</div>
 
-<span class="text-textcolor mt-4">{language.theme}</span>
-<SelectInput className="mt-2" bind:value={$DataBase.theme}>
-    <OptionInput value="" >Standard Risu</OptionInput>
-    <OptionInput value="waifu" >Waifulike</OptionInput>
-    <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
-</SelectInput>
-
-
-{#if $DataBase.theme === "waifu"}
-    <span class="text-textcolor mt-4">{language.waifuWidth}</span>
-    <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
-    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
-
-    <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
-    <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
-    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
-{/if}
-
-<span class="text-textcolor mt-4">{language.colorScheme}</span>
-<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
-    {#each colorSchemeList as scheme}
-        <OptionInput value={scheme} >{scheme}</OptionInput>
-    {/each}
-    <OptionInput value="custom" >Custom</OptionInput>
-</SelectInput>
-
-{#if $DataBase.colorSchemeName === "custom"}
-<div class="border border-darkborderc p-2 m-2 rounded-md">
-    <SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
-        <OptionInput value="light">Light</OptionInput>
-        <OptionInput value="dark">Dark</OptionInput>
+{#if submenu === 0 || submenu === -1}
+    <span class="text-textcolor mt-4">{language.theme}</span>
+    <SelectInput className="mt-2" bind:value={$DataBase.theme}>
+        <OptionInput value="" >Standard Risu</OptionInput>
+        <OptionInput value="waifu" >Waifulike</OptionInput>
+        <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
     </SelectInput>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
-        <span class="ml-2">Background</span>
+
+
+    {#if $DataBase.theme === "waifu"}
+        <span class="text-textcolor mt-4">{language.waifuWidth}</span>
+        <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
+        <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
+
+        <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
+        <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
+        <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
+    {/if}
+
+    <span class="text-textcolor mt-4">{language.colorScheme}</span>
+    <SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
+        {#each colorSchemeList as scheme}
+            <OptionInput value={scheme} >{scheme}</OptionInput>
+        {/each}
+        <OptionInput value="custom" >Custom</OptionInput>
+    </SelectInput>
+
+    {#if $DataBase.colorSchemeName === "custom"}
+    <div class="border border-darkborderc p-2 m-2 rounded-md">
+        <SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
+            <OptionInput value="light">Light</OptionInput>
+            <OptionInput value="dark">Dark</OptionInput>
+        </SelectInput>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
+            <span class="ml-2">Background</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
+            <span class="ml-2">Dark Background</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
+            <span class="ml-2">Color 1</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
+            <span class="ml-2">Color 2</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
+            <span class="ml-2">Color 3</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
+            <span class="ml-2">Color 4</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
+            <span class="ml-2">Color 5</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
+            <span class="ml-2">Text Color</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
+            <span class="ml-2">Text Color 2</span>
+        </div>
+        <div class="flex-grow flex justify-end">
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
+                exportColorScheme()
+            }}>
+                <DownloadIcon size={18}/>
+            </button>
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                importColorScheme()
+            }}>
+                <FolderUpIcon size={18}/>
+            </button>
+        </div>
     </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
-        <span class="ml-2">Dark Background</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
-        <span class="ml-2">Color 1</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
-        <span class="ml-2">Color 2</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
-        <span class="ml-2">Color 3</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
-        <span class="ml-2">Color 4</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
-        <span class="ml-2">Color 5</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
-        <span class="ml-2">Text Color</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
-        <span class="ml-2">Text Color 2</span>
-    </div>
-    <div class="flex-grow flex justify-end">
-        <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
-            exportColorScheme()
-        }}>
-            <DownloadIcon size={18}/>
-        </button>
-        <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
-            importColorScheme()
-        }}>
-            <FolderUpIcon size={18}/>
-        </button>
-    </div>
-</div>
+    {/if}
+
+    <span class="text-textcolor mt-4">{language.textColor}</span>
+    <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
+        <OptionInput value="standard" >{language.classicRisu}</OptionInput>
+        <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
+        <OptionInput value="custom" >Custom</OptionInput>
+    </SelectInput>
+
+    {#if $DataBase.textTheme === "custom"}
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
+            <span class="ml-2">Normal Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
+            <span class="ml-2">Italic Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
+            <span class="ml-2">Bold Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
+            <span class="ml-2">Italic Bold Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
+            <span class="ml-2">Single Quote Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
+            <span class="ml-2">Double Quote Text</span>
+        </div>
+    {/if}
+
+    <span class="text-textcolor mt-4">{language.font}</span>
+    <SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
+        <OptionInput value="default" >Default</OptionInput>
+        <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
+        <OptionInput value="custom" >Custom</OptionInput>
+    </SelectInput>
+
+    {#if $DataBase.font === "custom"}
+        <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
+    {/if}
+
 {/if}
 
-<span class="text-textcolor mt-4">{language.textColor}</span>
-<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
-    <OptionInput value="standard" >{language.classicRisu}</OptionInput>
-    <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
-    <OptionInput value="custom" >Custom</OptionInput>
-</SelectInput>
+{#if submenu === 1 || submenu === -1}
+
+    <span class="text-textcolor mt-4">{language.UISize}</span>
+    <SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
+
+    <span class="text-textcolor">{language.lineHeight}</span>
+    <SliderInput  min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} marginBottom/>
+
+    <span class="text-textcolor">{language.iconSize}</span>
+    <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
+
+    <span class="text-textcolor">{language.textAreaSize}</span>
+    <SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
+
+    <span class="text-textcolor">{language.textAreaTextSize}</span>
+    <SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
+
+    <span class="text-textcolor">{language.sideBarSize}</span>
+    <SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
+
+    <span class="text-textcolor">{language.assetWidth}</span>
+    <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} customText={
+        ($DataBase.assetWidth === -1) ? "Unlimited" : 
+        ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)
+    } marginBottom />
+
+    <span class="text-textcolor">{language.animationSpeed}</span>
+    <SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} marginBottom />
+
+    {#if $DataBase.showMemoryLimit}
+        <span class="text-textcolor">{language.memoryLimitThickness}</span>
+        <SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} marginBottom />
+    {/if}
 
-{#if $DataBase.textTheme === "custom"}
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
-        <span class="ml-2">Normal Text</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
-        <span class="ml-2">Italic Text</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
-        <span class="ml-2">Bold Text</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
-        <span class="ml-2">Italic Bold Text</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
-        <span class="ml-2">Single Quote Text</span>
-    </div>
-    <div class="flex items-center mt-2">
-        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
-        <span class="ml-2">Double Quote Text</span>
-    </div>
 {/if}
 
-<span class="text-textcolor mt-4">{language.font}</span>
-<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
-    <OptionInput value="default" >Default</OptionInput>
-    <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
-    <OptionInput value="custom" >Custom</OptionInput>
-</SelectInput>
+{#if submenu === 2 || submenu === -1}
 
-{#if $DataBase.font === "custom"}
-    <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
-{/if}
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
+    </div>
 
-<span class="text-textcolor mt-4">{language.UISize}</span>
-<SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} />
-<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
+    </div>
 
-<span class="text-textcolor mt-4">{language.lineHeight}</span>
-<SliderInput  min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} />
-<span class="text-textcolor2 mb-6 text-sm">{($DataBase.lineHeight)}</span>
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
+    </div>
 
-<span class="text-textcolor">{language.iconSize}</span>
-<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
-<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
-
-<span class="text-textcolor">{language.textAreaSize}</span>
-<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} />
-<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span>
-
-<span class="text-textcolor">{language.textAreaTextSize}</span>
-<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} />
-<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span>
-
-<span class="text-textcolor">{language.sideBarSize}</span>
-<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} />
-<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.sideBarSize)}</span>
-
-<span class="text-textcolor">{language.assetWidth}</span>
-<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
-<span class="text-textcolor2 mb-6 text-sm">{
-    ($DataBase.assetWidth === -1) ? "Unlimited" : 
-    ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
-
-
-<span class="text-textcolor">{language.animationSpeed}</span>
-<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
-<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
-
-{#if $DataBase.showMemoryLimit}
-    <span class="text-textcolor">{language.memoryLimitThickness}</span>
-    <SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} />
-    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.memoryLimitThickness)}px</span>
-{/if}
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
-        if(check){
-            $DataBase.customBackground = '-'
-            const d = await selectSingleFile(['png', 'webp', 'gif'])
-            if(!d){
-                $DataBase.customBackground = ''
-                return
+    <div class="flex items-center mt-2">
+        <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
+            if(check){
+                $DataBase.customBackground = '-'
+                const d = await selectSingleFile(['png', 'webp', 'gif'])
+                if(!d){
+                    $DataBase.customBackground = ''
+                    return
+                }
+                const img = await saveImage(d.data)
+                $DataBase.customBackground = img
             }
-            const img = await saveImage(d.data)
-            $DataBase.customBackground = img
-        }
-        else{
-            $DataBase.customBackground = ''
-        }
-    }} name={language.useCustomBackground}></Check>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
-    <span> <Help key="msgSound" name={language.playMessage}/></span>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
-</div>
-
-{#if $DataBase.textScreenColor}
-    <div class="flex items-center mt-2">
-        <Check check={true} onChange={() => {
-            $DataBase.textScreenColor = null
-        }} name={language.textBackgrounds} hiddenName/>
-        <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
-        <span>{language.textBackgrounds}</span>
+            else{
+                $DataBase.customBackground = ''
+            }
+        }} name={language.useCustomBackground}></Check>
     </div>
-{:else}
+
     <div class="flex items-center mt-2">
-        <Check check={false} onChange={() => {
-            $DataBase.textScreenColor = "#121212"
-        }} name={language.textBackgrounds}/>
+        <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
+        <span> <Help key="msgSound" name={language.playMessage}/></span>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
+    </div>
+
+    {#if $DataBase.textScreenColor}
+        <div class="flex items-center mt-2">
+            <Check check={true} onChange={() => {
+                $DataBase.textScreenColor = null
+            }} name={language.textBackgrounds} hiddenName/>
+            <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
+            <span>{language.textBackgrounds}</span>
+        </div>
+    {:else}
+        <div class="flex items-center mt-2">
+            <Check check={false} onChange={() => {
+                $DataBase.textScreenColor = "#121212"
+            }} name={language.textBackgrounds}/>
+        </div>
+
+
+    {/if}
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
     </div>
 
 
-{/if}
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
-</div>
-
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
-</div>
-
-{#if $DataBase.textScreenBorder}
     <div class="flex items-center mt-2">
-        <Check check={true} onChange={() => {
-            $DataBase.textScreenBorder = null
-        }} name={language.textScreenBorder} hiddenName/>
-        <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
-        <span>{language.textScreenBorder}</span>
+        <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
     </div>
-{:else}
+
+    {#if $DataBase.textScreenBorder}
+        <div class="flex items-center mt-2">
+            <Check check={true} onChange={() => {
+                $DataBase.textScreenBorder = null
+            }} name={language.textScreenBorder} hiddenName/>
+            <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
+            <span>{language.textScreenBorder}</span>
+        </div>
+    {:else}
+        <div class="flex items-center mt-2">
+            <Check check={false} onChange={() => {
+                $DataBase.textScreenBorder = "#121212"
+            }} name={language.textScreenBorder}/>
+        </div>
+    {/if}
+
     <div class="flex items-center mt-2">
-        <Check check={false} onChange={() => {
-            $DataBase.textScreenBorder = "#121212"
-        }} name={language.textScreenBorder}/>
+        <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
     </div>
-{/if}
 
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
-</div>
-
-{#if $DataBase.useExperimental}
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
-        <Help key="experimental" name={language.useChatSticker}/>
+        <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
     </div>
-{/if}
+
+    {#if $DataBase.useExperimental}
+        <div class="flex items-center mt-2">
+            <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
+            <Help key="experimental" name={language.useChatSticker}/>
+        </div>
+    {/if}
+
+{/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
index 53b74173..38fdb523 100644
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -14,7 +14,7 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
 
-<div class="p-4 rounded-md bg-darkbg flex-wrap flex gap-2">
+<div class="p-4 rounded-md border-darkborderc border mb-2 flex-wrap flex gap-2">
     {#each $DataBase.personas as persona, i}
         <button on:click={() => {
             changeUserPersona(i)
@@ -60,11 +60,7 @@
     </div>
 </div>
 
-
-<div class="mt-4 mb-4 border-y-1 border-y-selected">
-</div>
-
-<div class="flex w-full items-starts rounded-md bg-darkbg p-4 max-w-full flex-wrap">
+<div class="flex w-full items-starts rounded-md border-darkborderc border p-4 max-w-full flex-wrap">
     <div class="flex flex-col mt-4 mr-4">
         <button on:click={() => {selectUserImg()}}>
             {#if $DataBase.userIcon === ''}
diff --git a/src/lib/Setting/Pages/PromptSettings.svelte b/src/lib/Setting/Pages/PromptSettings.svelte
index eb655985..c9656b47 100644
--- a/src/lib/Setting/Pages/PromptSettings.svelte
+++ b/src/lib/Setting/Pages/PromptSettings.svelte
@@ -15,10 +15,11 @@
     let opened = 0
     let warns: string[] = []
     export let onGoBack: () => void = () => {}
+    export let mode: 'independent'|'inline' = 'independent'
     let tokens = 0
     let extokens = 0
     executeTokenize($DataBase.promptTemplate)
-    let subMenu = 0
+    export let subMenu = 0
 
     async function executeTokenize(prest: PromptItem[]){
         tokens = await tokenizePreset(prest, true)
@@ -28,27 +29,29 @@
     $: warns = templateCheck($DataBase)
     $: executeTokenize($DataBase.promptTemplate)
 </script>
+{#if mode === 'independent'}
+    <h2 class="mb-2 text-2xl font-bold mt-2 items-center flex">
+        <button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}>
+            <ArrowLeft />
+        </button>
+        {language.promptTemplate}
+    </h2>
 
-<h2 class="mb-2 text-2xl font-bold mt-2 items-center flex">
-    <button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}>
-        <ArrowLeft />
-    </button>
-    {language.promptTemplate}
-</h2>
-<div class="flex w-full rounded-md border border-selected">
-    <button on:click={() => {
-        subMenu = 0
-    }} class="p-2 flex-1" class:bg-selected={subMenu === 0}>
-        <span>{language.template}</span>
-    </button>
-    <button on:click={() => {
-        subMenu = 1
-    }} class="p-2 flex-1" class:bg-selected={subMenu === 1}>
-        <span>{language.settings}</span>
-    </button>
-</div>
-{#if warns.length > 0}
-    <div class="text-red-500 flex flex-col items-start p-2 rounded-md border-red-500 border">
+    <div class="flex w-full rounded-md border border-selected">
+        <button on:click={() => {
+            subMenu = 0
+        }} class="p-2 flex-1" class:bg-selected={subMenu === 0}>
+            <span>{language.template}</span>
+        </button>
+        <button on:click={() => {
+            subMenu = 1
+        }} class="p-2 flex-1" class:bg-selected={subMenu === 1}>
+            <span>{language.settings}</span>
+        </button>
+    </div>
+{/if}
+{#if warns.length > 0 && subMenu === 0}
+    <div class="text-red-500 flex flex-col items-start p-2 rounded-md border-red-500 border mt-4">
         <h2 class="text-xl font-bold">Warning</h2>
         <div class="border-b border-b-red-500 mt-1 mb-2 w-full"></div>
         {#each warns as warn}
diff --git a/src/lib/UI/GUI/SliderInput.svelte b/src/lib/UI/GUI/SliderInput.svelte
index 5a25e81d..594d9d87 100644
--- a/src/lib/UI/GUI/SliderInput.svelte
+++ b/src/lib/UI/GUI/SliderInput.svelte
@@ -41,9 +41,9 @@
     >
     </div> -->
     <span 
-      class="absolute top-0 left-4 h-8 w-8 rounded-full items-center justify-center flex text-textcolor text-sm"
+      class="absolute top-0 left-4 h-8 rounded-full items-center justify-center flex text-textcolor text-sm"
     >
-      {(value * multiple).toFixed(fixed)}
+      {customText === undefined ? (value * multiple).toFixed(fixed) : customText}
     </span>
   </div>
 </div>
@@ -59,6 +59,7 @@
     export let multiple = 1
     let slider: HTMLDivElement
     let mouseDown = false
+    export let customText: string|undefined = undefined
 
     function changeValue(event) {
         const rect = slider.getBoundingClientRect();