diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 18d8fe2f..dd44e795 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "RisuAI",
-    "version": "1.44.2"
+    "version": "1.45.0"
   },
   "tauri": {
     "allowlist": {
diff --git a/src/App.svelte b/src/App.svelte
index 62bed479..fa68739e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -23,9 +23,9 @@
 
 </script>
 
-<main class="flex bg-bg w-full h-full max-w-100vw">
+<main class="flex bg-bg w-full h-full max-w-100vw text-textcolor">
     {#if !$loadedStore}
-        <div class="w-full h-full flex justify-center items-center text-gray-200 text-xl">
+        <div class="w-full h-full flex justify-center items-center text-textcolor text-xl">
             <span>Loading...</span>
         </div>
     {:else if !didFirstSetup}
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 95428fac..bec8852b 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -10,7 +10,8 @@ export const languageEnglish = {
         'authorNote': "Author's Note",
         'lastChat': "Last Chat",
         "description": "Character Description",
-        'personaPrompt':'Persona Prompt'
+        'personaPrompt':'Persona Prompt',
+        'plain': "Plain Prompt",
     },
     errors:{
         toomuchtoken: 'Error: The minimum required token is greater than the Max Context Size.',
@@ -399,4 +400,9 @@ export const languageEnglish = {
     ifRandom: "If random",
     hideRealm: "Hide RisuRealm",
     popularityLevel: "{} Popularity",
+    colorScheme: "Color Scheme",
+    rangeStart: "Range Start",
+    rangeEnd: "Range End",
+    untilChatEnd: "Until Chat End",
+    usePromptTemplate: "Use Prompt Template",
 }
\ No newline at end of file
diff --git a/src/lib/ChatScreens/AssetInput.svelte b/src/lib/ChatScreens/AssetInput.svelte
index 0bf4d097..7158c06b 100644
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -28,7 +28,7 @@
     }
 </script>
 {#if currentCharacter.type ==='character'}
-    <button class="hover:text-green-500 bg-gray-500 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
+    <button class="hover:text-green-500 bg-textcolor2 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
         if(currentCharacter.type === 'character'){
             const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
             currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []
diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index d59b6a18..45773df1 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -75,18 +75,18 @@
     $: displaya(message)
 </script>
 <div class="flex max-w-full justify-center risu-chat" class:bgc={isLastMemory}>
-    <div class="text-neutral-200 mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
+    <div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
         {#await img}
-            <div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            <div class="shadow-lg bg-textcolor2 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
             class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
         {:then m}
-            <div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
             class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}  />
         {/await}
         <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
             <div class="flexium items-center chat">
                 <span class="chat text-xl unmargin">{name}</span>
-                <div class="flex-grow flex items-center justify-end text-gray-500">
+                <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>
                     {#if $DataBase.useChatCopy}
                         <button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{
diff --git a/src/lib/ChatScreens/CreatorQuote.svelte b/src/lib/ChatScreens/CreatorQuote.svelte
index ea4023a0..5d6ab518 100644
--- a/src/lib/ChatScreens/CreatorQuote.svelte
+++ b/src/lib/ChatScreens/CreatorQuote.svelte
@@ -1,5 +1,5 @@
 <div class="flex w-full justify-center mt-4 max-w-100vw">
-    <div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-white text-sm">
+    <div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-textcolor text-sm">
         <h1 class="font-bold mb-2">{language.creatorNotes}
             <button class="float-right" on:click={onRemove}>
                 <XIcon />
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index bb175fce..27b102ae 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -62,7 +62,7 @@
         else{
             const char = $DataBase.characters[selectedChar]
             if(char.type === 'character'){
-                let triggerResult = runTrigger(char,'input', {chat: char.chats[char.chatPage]})
+                let triggerResult = await runTrigger(char,'input', {chat: char.chats[char.chatPage]})
                 if(triggerResult){
                     cha = triggerResult.chat.message
                 }
@@ -270,7 +270,7 @@
                 mergedCanvas.height = totalHeight;
             }
 
-            mergedCtx.fillStyle = '#282a36'
+            mergedCtx.fillStyle = 'var(--risu-theme-bgcolor)'
             mergedCtx.fillRect(0, 0, maxWidth, totalHeight);
             let indh = 0
             for(let i = 0; i < canvases.length; i++) {
@@ -313,11 +313,11 @@
             <div class="flex items-end mt-2 mb-2 w-full">
                 {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
                     <div on:click={()=>{toggleStickers = !toggleStickers}}
-                            class={"ml-4 bg-gray-500 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-white')}>
+                            class={"ml-4 bg-textcolor2 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}>
                             <Laugh/>
                     </div>    
                 {/if}
-                <textarea class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                <textarea class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                     bind:value={messageInput}
                     bind:this={inputEle}
                     on:keydown={(e) => {
@@ -339,28 +339,28 @@
                 
                 {#if $doingChat || doingChatInputTranslate}
                     <div
-                        class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
+                        class="mr-2 bg-selected flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
                         <div class="loadmove" class:autoload={autoMode}>
                         </div>
                     </div>
                 {:else}
                     <div on:click={send}
-                        class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
+                        class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
                     </div>
                 {/if}
                     <div on:click={(e) => {
                         openMenu = !openMenu
                         e.stopPropagation()
                     }}
-                    class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
+                    class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
                     </div>
             </div>
             {#if $DataBase.useAutoTranslateInput}
                 <div class="flex items-center mt-2 mb-2 w-full">
-                    <label for='messageInputTranslate' class="text-neutral-200 ml-4">
+                    <label for='messageInputTranslate' class="text-textcolor ml-4">
                         <LanguagesIcon />
                     </label>
-                    <textarea id = 'messageInputTranslate' class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                    <textarea id = 'messageInputTranslate' class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                         bind:value={messageInputTranslate}
                         bind:this={inputTranslateEle}
                         on:keydown={(e) => {
@@ -491,7 +491,7 @@
             {/if}
 
             {#if openMenu}
-                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
+                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor" on:click={(e) => {
                     e.stopPropagation()
                 }}>
                     {#if $DataBase.characters[$selectedCharID].type === 'group'}
@@ -569,8 +569,8 @@
         border: 0.4rem solid rgba(0,0,0,0);
         width: 1rem;
         height: 1rem;
-        border-top: 0.4rem solid #6272a4;
-        border-left: 0.4rem solid #6272a4;
+        border-top: 0.4rem solid var(--risu-theme-borderc);
+        border-left: 0.4rem solid var(--risu-theme-borderc);
     }
 
     .autoload{
diff --git a/src/lib/ChatScreens/ResizeBox.svelte b/src/lib/ChatScreens/ResizeBox.svelte
index ba29e916..495e7830 100644
--- a/src/lib/ChatScreens/ResizeBox.svelte
+++ b/src/lib/ChatScreens/ResizeBox.svelte
@@ -63,8 +63,8 @@
         position: absolute;
         right: 0px;
         top: 0px;
-        border-bottom: 1px solid #6272a4;
-        border-left: 1px solid #6272a4;
+        border-bottom: 1px solid var(--risu-theme-borderc);
+        border-left: 1px solid var(--risu-theme-borderc);
         width: 12rem;
         height: 12rem;
         z-index: 5;
@@ -74,8 +74,8 @@
         position: absolute;
         width: 16px;
         height: 16px;
-        border-top: 1px solid #6272a4;
-        border-right: 1px solid #6272a4;
+        border-top: 1px solid var(--risu-theme-borderc);
+        border-right: 1px solid var(--risu-theme-borderc);
         cursor: sw-resize;
         bottom: 0;
         left: 0;
diff --git a/src/lib/ChatScreens/Suggestion.svelte b/src/lib/ChatScreens/Suggestion.svelte
index 153a20b1..d5124146 100644
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -126,14 +126,14 @@
 
 <div class="ml-4 flex flex-wrap">
     {#if progress}
-        <div class="flex bg-gray-500 p-2 rounded-lg items-center">
+        <div class="flex bg-textcolor2 p-2 rounded-lg items-center">
             <div class="loadmove mx-2"/>
             <div>{language.creatingSuggestions}</div>
         </div>        
     {:else if !$doingChat}
         {#if $DataBase.translator !== ''}
             <div class="flex mr-2 mb-2">
-                <button class={"bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-white')}
+                <button class={"bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-textcolor')}
                     on:click={() => {
                         toggleTranslate = !toggleTranslate
                     }}
@@ -145,7 +145,7 @@
         
 
         <div class="flex mr-2 mb-2">
-            <button class="bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded text-white"
+            <button class="bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded text-textcolor"
                 on:click={() => {
                     alertConfirm(language.askReRollAutoSuggestions).then((result) => {
                         if(result) {
@@ -161,7 +161,7 @@
         </div>
         {#each suggestMessages??[] as suggest, i}
             <div class="flex mr-2 mb-2">
-                <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" on:click={() => {
+                <button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded" on:click={() => {
                     suggestMessages = []
                     messageInput(suggest)
                     send()
@@ -170,7 +170,7 @@
                     {@html md}
                 {/await}
                 </button>
-                <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded ml-1" on:click={() => {
+                <button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded ml-1" on:click={() => {
                     messageInput(suggest)
                 }}>
                     <CopyIcon/>
@@ -189,8 +189,8 @@
         border: 0.4rem solid rgba(0,0,0,0);
         width: 1rem;
         height: 1rem;
-        border-top: 0.4rem solid white;
-        border-left: 0.4rem solid white;
+        border-top: 0.4rem solid var(--risu-theme-textcolor);
+        border-left: 0.4rem solid var(--risu-theme-textcolor);
     }
 
     @keyframes spin {
diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index ed78f202..863a8099 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -61,7 +61,7 @@
             {:else if $alertStore.type === 'tos'}
                 <!-- svelte-ignore a11y-missing-attribute -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="text-white">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
+                <div class="text-textcolor">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
                     openURL('https://sv.risuai.xyz/hub/tos')
                 }}>Terms of Service</a> to continue</div>
             {:else if $alertStore.type !== 'select'}
@@ -161,7 +161,7 @@
         </div>
     </div>
 {:else if $alertStore.type === 'toast'}
-    <div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl  max-h-11/12 overflow-y-auto z-50 text-neutral-200"
+    <div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl  max-h-11/12 overflow-y-auto z-50 text-textcolor"
         on:animationend={() => {
             alertStore.set({
                 type: 'none',
diff --git a/src/lib/Others/ChatList.svelte b/src/lib/Others/ChatList.svelte
index 1d151433..007ba81a 100644
--- a/src/lib/Others/ChatList.svelte
+++ b/src/lib/Others/ChatList.svelte
@@ -14,10 +14,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-72 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.chatList}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -28,20 +28,20 @@
                     $DataBase.characters[$selectedCharID].chatPage = i
                      close()
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
                 {:else}
                     <span>{chat.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         exportChat(i)
                     }}>
                         <DownloadIcon size={18}/>
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.characters[$selectedCharID].chats.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -61,7 +61,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 const cha = $DataBase.characters[$selectedCharID]
                 const len = $DataBase.characters[$selectedCharID].chats.length
                 let chats = $DataBase.characters[$selectedCharID].chats
@@ -83,12 +83,12 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
                 importChat()
             }}>
                 <FolderUpIcon size={18}/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
diff --git a/src/lib/Others/GithubStars.svelte b/src/lib/Others/GithubStars.svelte
index 9130ded3..c50def08 100644
--- a/src/lib/Others/GithubStars.svelte
+++ b/src/lib/Others/GithubStars.svelte
@@ -17,12 +17,12 @@
       <img src="/icon/github-mark-white.svg" width="24" alt="github" />
     </button>
   {/if}
-  <button class="text-white" on:click={() => {
+  <button class="text-textcolor" on:click={() => {
     openURL("https://www.patreon.com/RisuAI")
   }}>
     <WalletIcon size={24} />
   </button>
-  <button class="text-white" on:click={() => {
+  <button class="text-textcolor" on:click={() => {
     openURL("mailto:amasio1234@proton.me")
   }}>
     <MailIcon size={24} />
diff --git a/src/lib/Others/GridCatalog.svelte b/src/lib/Others/GridCatalog.svelte
index 8e09c7a6..eed5cd57 100644
--- a/src/lib/Others/GridCatalog.svelte
+++ b/src/lib/Others/GridCatalog.svelte
@@ -38,16 +38,16 @@
 
 <div class="h-full w-full flex justify-center">
     <div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
-        <h1 class="text-neutral-200 text-2xl font-bold mt-2">Catalog</h1>
+        <h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
         <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
         <div class="w-full flex justify-center">
             <div class="flex flex-wrap gap-2 mx-auto container">
                 {#each formatChars(search) as char}
-                    <div class="flex items-center text-neutral-200">
+                    <div class="flex items-center text-textcolor">
                         {#if char.image}
                             <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                         {:else}
-                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:#44475a' : ''}>
+                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
                                 {#if char.type === 'group'}
                                     <Users />
                                 {:else}
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index 508e61f8..ac4b7f9b 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -12,7 +12,7 @@
     let provider = 0
 </script>
 
-<div class="w-full h-full flex justify-center welcome-bg text-neutral-200">
+<div class="w-full h-full flex justify-center welcome-bg text-textcolor">
     <article class="w-full overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-auto">
         <div class="w-full justify-center flex mt-8">
             <img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm  mb-0">
@@ -64,7 +64,7 @@
                         <span class="mb-2">API key</span>
                         <TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
                     </div>
-                    <span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
+                    <span class="text-textcolor2">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
                     <div class="flex flex-col items-start ml-2 mt-6">
                         <button class="hover:text-green-500 transition-colors" on:click={() => {
                             provider = 1
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 6f8ec2c9..d10c88d1 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -12,24 +12,24 @@
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
 <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
-<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+<span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.loreBookDepth}/>
-<span class="text-neutral-200">{language.loreBookToken}</span>
+<span class="text-textcolor">{language.loreBookToken}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.loreBookToken}/>
 
-<span class="text-neutral-200">{language.additionalPrompt}</span>
+<span class="text-textcolor">{language.additionalPrompt}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.additionalPrompt}/>
 
-<span class="text-neutral-200">{language.descriptionPrefix}</span>
+<span class="text-textcolor">{language.descriptionPrefix}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.descriptionPrefix}/>
 
-<span class="text-neutral-200">{language.emotionPrompt}</span>
+<span class="text-textcolor">{language.emotionPrompt}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default"/>
 
-<span class="text-neutral-200">{language.requestretrys}</span>
+<span class="text-textcolor">{language.requestretrys}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>
 
-<span class="text-neutral-200">Request Lib</span>
+<span class="text-textcolor">Request Lib</span>
 <SelectInput bind:value={$DataBase.requester}>
     <OptionInput value="new">Reqwest</OptionInput>
     <OptionInput value="old">Tauri</OptionInput>
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 1d271556..598f414b 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -74,13 +74,13 @@
     </button>
 </div>
 {#if advancedBotSettings}
-    <span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+    <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
     <ModelList bind:value={$DataBase.aiModel}/>
 
-    <span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
+    <span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
     <ModelList bind:value={$DataBase.subModel}/>
 {:else}
-    <span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+    <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')){
@@ -112,24 +112,24 @@
     </div>
 {/if}
 {#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
-    <span class="text-neutral-200">Palm2 {language.apiKey}</span>
+    <span class="text-textcolor">Palm2 {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.palmAPI}/>
 {/if}
 {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
-    <span class="text-neutral-200">NovelList {language.apiKey}</span>
+    <span class="text-textcolor">NovelList {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
 {/if}
 
 {#if $DataBase.aiModel.startsWith('claude') || $DataBase.subModel.startsWith('claude')}
-    <span class="text-neutral-200">Claude {language.apiKey}</span>
+    <span class="text-textcolor">Claude {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
 {/if}
 {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
-    <span class="text-neutral-200 mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
+    <span class="text-textcolor mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
-    <span class="text-neutral-200 mt-4"> {language.proxyAPIKey}</span>
+    <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
     <TextInput marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
-    <span class="text-neutral-200 mt-4"> {language.proxyRequestModel}</span>
+    <span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.proxyRequestModel}>
         <OptionInput value="">None</OptionInput>
         <OptionInput value="gpt35">GPT 3.5</OptionInput>
@@ -147,10 +147,10 @@
     </SelectInput>
 {/if}
 {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
-    <span class="text-neutral-200 mt-4">Openrouter Key</span>
+    <span class="text-textcolor mt-4">Openrouter Key</span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
 
-    <span class="text-neutral-200 mt-4">Openrouter Model</span>
+    <span class="text-textcolor mt-4">Openrouter Model</span>
     {#await openRouterModels()}
         <SelectInput className="mt-2 mb-4" value="">
             <OptionInput value="">Loading..</OptionInput>
@@ -177,7 +177,7 @@
     {/await}
 {/if}
 {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')}
-    <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
+    <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
 
 {/if}
@@ -188,7 +188,7 @@
 {/if}
 
 {#if $DataBase.aiModel === 'custom'}
-    <span class="text-neutral-200 mt-2">{language.plugin}</span>
+    <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}
@@ -198,7 +198,7 @@
 {/if}
 {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
 
-    <span class="text-neutral-200">NovelAI Bearer Token</span>
+    <span class="text-textcolor">NovelAI Bearer Token</span>
     <TextInput marginBottom={true} bind:value={$DataBase.novelai.token}/>
 
     {#if !($DataBase.novelai.token)}
@@ -209,70 +209,72 @@
 {/if}
 
 {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
-    <span class="text-neutral-200">Kobold URL</span>
+    <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-neutral-200">Horde {language.apiKey}</span>
+    <span class="text-textcolor">Horde {language.apiKey}</span>
     <TextInput marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
 
 {/if}
 {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
-    <span class="text-neutral-200 mt-2">Oobabooga Blocking {language.providerURL}</span>
+    <span class="text-textcolor mt-2">Oobabooga 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-neutral-200 mt-2">Oobabooga Stream {language.providerURL}</span>
+    <span class="text-textcolor mt-2">Oobabooga 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}
 {/if}
 {#if advancedBotSettings}
-    <span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
-    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
-    <span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
-    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
-    <span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
-    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>    
+    {#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}    
 
-    <span class="text-neutral-200">{language.maxContextSize}</span>
+    <span class="text-textcolor">{language.maxContextSize}</span>
     <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
 
 
-    <span class="text-neutral-200">{language.maxResponseSize}</span>
+    <span class="text-textcolor">{language.maxResponseSize}</span>
     <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
 
-<span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
+<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
 <SliderInput min={0} max={200} bind:value={$DataBase.temperature}/>
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
 {#if $DataBase.aiModel === 'textgen_webui'}
-    <span class="text-neutral-200">Repetition Penalty</span>
+    <span class="text-textcolor">Repetition Penalty</span>
     <SliderInput min={1} max={1.5} step={0.01} bind:value={$DataBase.ooba.repetition_penalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Length Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
+    <span class="text-textcolor">Length Penalty</span>
     <SliderInput min={-5} max={5} step={0.05} bind:value={$DataBase.ooba.length_penalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={0} max={100} step={1} bind:value={$DataBase.ooba.top_k} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.typical_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_a}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
-    <span class="text-neutral-200">No Repeat n-gram Size</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
+    <span class="text-textcolor">No Repeat n-gram Size</span>
     <SliderInput min={0} max={20} step={1} bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
     <div class="flex items-center mt-4">
         <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
     </div>
@@ -286,98 +288,98 @@
         <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
     </div>
     <div class="flex flex-col p-3 bg-darkbg mt-4">
-        <span class="text-neutral-200">Header</span>
+        <span class="text-textcolor">Header</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.header} />
-        <span class="text-neutral-200">System Prefix</span>
+        <span class="text-textcolor">System Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.systemPrefix} />
-        <span class="text-neutral-200">User Prefix</span>
+        <span class="text-textcolor">User Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.userPrefix} />
-        <span class="text-neutral-200">Assistant Prefix</span>
+        <span class="text-textcolor">Assistant Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.assistantPrefix} />
-        <span class="text-neutral-200">Seperator</span>
+        <span class="text-textcolor">Seperator</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.seperator} />
     </div>
 
-    <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
+    <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
     <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.autoSuggestPrompt} />
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 
-    <span class="text-neutral-200">{language.autoSuggest} Prefix</span>
+    <span class="text-textcolor">{language.autoSuggest} Prefix</span>
     <TextInput marginBottom={true} bind:value={$DataBase.autoSuggestPrefix} />
 {:else if $DataBase.aiModel.startsWith('novelai')}
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topP}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={0} max={100} step={1} bind:value={$DataBase.NAIsettings.topK}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topA}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
-    <span class="text-neutral-200">Tailfree Sampling</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
+    <span class="text-textcolor">Tailfree Sampling</span>
     <SliderInput min={0} max={1} step={0.001} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.typicalp}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
-    <span class="text-neutral-200">Repetition Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
+    <span class="text-textcolor">Repetition Penalty</span>
     <SliderInput min={0} max={3} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Repetition Penalty Range</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
+    <span class="text-textcolor">Repetition Penalty Range</span>
     <SliderInput min={0} max={2048} step={1} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
-    <span class="text-neutral-200">Repetition Penalty Slope</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
+    <span class="text-textcolor">Repetition Penalty Slope</span>
     <SliderInput min={0} max={10} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
-    <span class="text-neutral-200">Frequency Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
+    <span class="text-textcolor">Frequency Penalty</span>
     <SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Presence Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
+    <span class="text-textcolor">Presence Penalty</span>
     <SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.presencePenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
 
 {:else if $DataBase.aiModel.startsWith('novellist')}
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.top_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty</span>
     <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.rep_pen}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty Range</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty Range</span>
     <SliderInput min={0} max={2048} step={1} bind:value={$DataBase.ainconfig.rep_pen_range}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty Slope</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty Slope</span>
     <SliderInput min={0} max={10} step={0.1} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={1} max={500} step={1} bind:value={$DataBase.ainconfig.top_k}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.top_a}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.typical_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
 {:else}
-    <span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
+    <span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
     <SliderInput min={0} max={100} bind:value={$DataBase.frequencyPenalty} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
-    <span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
+    <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
     <SliderInput min={0} max={100} bind:value={$DataBase.PresensePenalty} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
 
-    <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
+    <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
     <TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 {/if}
 {/if}
 
 
 
 {#if advancedBotSettings}
-    <span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
+    <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
     <DropList bind:list={$DataBase.formatingOrder} />
-    <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+    <span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
     <table class="contain w-full max-w-full tabler mt-2">
         <tr>
             <th class="font-medium w-1/2">Bias</th>
@@ -392,7 +394,7 @@
         </tr>
         {#if $DataBase.bias.length === 0}
             <tr>
-                <div class="text-gray-500">{language.noBias}</div>
+                <div class="text-textcolor2">{language.noBias}</div>
             </tr>
         {/if}
         {#each $DataBase.bias as bias, i}
@@ -414,10 +416,22 @@
         {/each}
     </table>
 
+    {#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">
-        <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
+        {#if $DataBase.promptTemplate}
+            <Check check={true} name={language.usePromptTemplate} onChange={()=>{
+                $DataBase.promptTemplate = undefined
+            }}/>
+        {:else}
+            <Check check={false} name={language.usePromptTemplate} onChange={() => {
+                $DataBase.promptTemplate = []
+            }}/>
+        {/if}
     </div>
-
 <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 
 {/if}
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index f7562397..8bc24df7 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
     import { language } from "src/lang";
-    import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
+    import { DataBase, saveImage } from "src/ts/storage/database";
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
-  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
-  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
-  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
-  import { updateAnimationSpeed } from "src/ts/gui/animation";
+    import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
+    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+    import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+    import { updateAnimationSpeed } from "src/ts/gui/animation";
+    import { changeColorScheme, colorSchemeList, updateTextTheme } from "src/ts/gui/colorscheme";
+
+    const onSchemeInputChange = (e:Event) => {
+        changeColorScheme((e.target as HTMLInputElement).value)
+    }
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
 
-<span class="text-neutral-200 mt-4">{language.theme}</span>
+<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>
@@ -21,16 +26,23 @@
 
 
 {#if $DataBase.theme === "waifu"}
-    <span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
+    <span class="text-textcolor mt-4">{language.waifuWidth}</span>
     <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
-    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth)}%</span>
+    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
 
-    <span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
+    <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
     <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
-    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth2)}%</span>
+    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
 {/if}
 
-<span class="text-neutral-200 mt-4">{language.textColor}</span>
+<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}
+</SelectInput>
+
+<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>
@@ -56,25 +68,25 @@
     </div>
 {/if}
 
-<span class="text-neutral-200">{language.UISize}</span>
+<span class="text-textcolor">{language.UISize}</span>
 <SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} />
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
 
-<span class="text-neutral-200">{language.iconSize}</span>
+<span class="text-textcolor">{language.iconSize}</span>
 <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
 
-<span class="text-neutral-200">{language.assetWidth}</span>
+<span class="text-textcolor">{language.assetWidth}</span>
 <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
-<span class="text-gray-400 mb-6 text-sm">{
+<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-neutral-200">{language.animationSpeed}</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-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
+<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
 
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
diff --git a/src/lib/Setting/Pages/GlobalRegex.svelte b/src/lib/Setting/Pages/GlobalRegex.svelte
index 8bddd46e..2b88c70c 100644
--- a/src/lib/Setting/Pages/GlobalRegex.svelte
+++ b/src/lib/Setting/Pages/GlobalRegex.svelte
@@ -8,7 +8,7 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
 <RegexList bind:value={$DataBase.globalscript} />
-<div class="text-gray-500 mt-2 flex gap-2">
+<div class="text-textcolor2 mt-2 flex gap-2">
     <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
         let script = $DataBase.globalscript
         script.push({
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index aefac210..91b5807f 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -13,7 +13,7 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
 
-<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
+<span class="text-textcolor mt-4">{language.UiLanguage}</span>
 <SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
     if($DataBase.language === 'translang'){
         downloadFile('lang.json', new TextEncoder().encode(JSON.stringify(languageEnglish, null, 4)))
@@ -32,7 +32,7 @@
 {#if langChanged}
     <span class="bg-red-500 text-sm">Close the settings to take effect</span>
 {/if}
-<span class="text-neutral-200 mt-4">{language.translator}</span>
+<span class="text-textcolor mt-4">{language.translator}</span>
 <SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
     <OptionInput value="" >{language.disabled}</OptionInput>
     <OptionInput value="ko" >Korean</OptionInput>
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 82fd292e..870645e8 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -12,9 +12,9 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
+<span class="text-textcolor mt-4 text-lg font-bold">{language.imageGeneration}</span>
 
-<span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
+<span class="text-textcolor mt-2">{language.provider} <Help key="sdProvider"/></span>
 <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
     <OptionInput value="" >None</OptionInput>
     <OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
@@ -28,44 +28,44 @@
     {#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-neutral-200 mt-2">WebUI {language.providerURL}</span>
+    <span class="text-textcolor mt-2">WebUI {language.providerURL}</span>
     <TextInput size="sm" marginBottom placeholder="https://..." bind:value={$DataBase.webUiUrl}/>
-    <span class="text-neutral-200">Steps</span>
+    <span class="text-textcolor">Steps</span>
     <NumberInput size="sm" marginBottom min={0} max={100} bind:value={$DataBase.sdSteps}/>
     
-    <span class="text-neutral-200">CFG Scale</span>
+    <span class="text-textcolor">CFG Scale</span>
     <NumberInput size="sm" marginBottom min={0} max={20} bind:value={$DataBase.sdCFG}/>
 
-    <span class="text-neutral-200">Width</span>
+    <span class="text-textcolor">Width</span>
     <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
-    <span class="text-neutral-200">Height</span>
+    <span class="text-textcolor">Height</span>
     <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
-    <span class="text-neutral-200">Sampler</span>
+    <span class="text-textcolor">Sampler</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
     
     <div class="flex items-center mt-2">
         <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
     </div>
     {#if $DataBase.sdConfig.enable_hr === true}
-        <span class="text-neutral-200">denoising_strength</span>
+        <span class="text-textcolor">denoising_strength</span>
         <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.denoising_strength}/>
-        <span class="text-neutral-200">hr_scale</span>
+        <span class="text-textcolor">hr_scale</span>
         <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.hr_scale}/>
-        <span class="text-neutral-200">Upscaler</span>
+        <span class="text-textcolor">Upscaler</span>
         <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
     {/if}
 {/if}
 
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span>
-<span class="text-neutral-200 mt-2">ElevenLabs API key</span>
+<span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
+<span class="text-textcolor mt-2">ElevenLabs API key</span>
 <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
 
-<span class="text-neutral-200 mt-2">VOICEVOX URL</span>
+<span class="text-textcolor mt-2">VOICEVOX URL</span>
 <TextInput size="sm" marginBottom bind:value={$DataBase.voicevoxUrl}/>
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
-<span class="text-neutral-200 mt-4">{language.SuperMemory} {language.model}</span>
+<span class="text-textcolor mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
+<span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
 <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
     <OptionInput value="none" >None</OptionInput>
     <OptionInput value="davinci" >OpenAI Davinci</OptionInput>
@@ -73,11 +73,11 @@
     <OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput>
 </SelectInput>
 {#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'}
-    <span class="text-neutral-200">{language.SuperMemory} OpenAI Key</span>
+    <span class="text-textcolor">{language.SuperMemory} OpenAI Key</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
 {/if}
 {#if $DataBase.supaMemoryType !== 'none'}
-    <span class="text-neutral-200">{language.SuperMemory} Prompt</span>
+    <span class="text-textcolor">{language.SuperMemory} Prompt</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default"/>
 {/if}
 {#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental}
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
index c17d58db..8ee99460 100644
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -17,12 +17,12 @@
             changeUserPersona(i)
         }}>
             {#if persona.icon === ''}
-                <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
+                <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
             {:else}
                 {#await getCharImage(persona.icon, 'css')}
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
                 {:then im} 
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />                
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />                
                 {/await}
             {/if}
         </button>
@@ -61,20 +61,20 @@
     <div class="flex flex-col mt-4">
         <button on:click={() => {selectUserImg()}}>
             {#if $DataBase.userIcon === ''}
-                <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+                <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
             {:else}
                 {#await getCharImage($DataBase.userIcon, 'css')}
-                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
                 {:then im} 
-                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
                 {/await}
             {/if}
         </button>
     </div>
     <div class="flex flex-grow flex-col p-2 ml-4">
-        <span class="text-sm text-gray-500">{language.name}</span>
+        <span class="text-sm text-textcolor2">{language.name}</span>
         <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
-        <span class="text-sm text-gray-500">{language.description}</span>
+        <span class="text-sm text-textcolor2">{language.description}</span>
         <TextAreaInput height="32" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
         <div>
             <button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {
diff --git a/src/lib/Setting/Pages/PluginSettings.svelte b/src/lib/Setting/Pages/PluginSettings.svelte
index 9a3ca7da..caca3157 100644
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -27,7 +27,7 @@
         <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
         <div class="flex">
             <span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
-            <button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
+            <button class="textcolor2 hover:gray-200 cursor-pointer" on:click={async () => {
                 const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
                 if(v){
                     if($DataBase.currentPluginProvider === plugin.name){
@@ -61,10 +61,10 @@
         {/if}
     {/each}
 </div>
-<div class="text-gray-500 mt-2 flex">
+<div class="text-textcolor2 mt-2 flex">
     <button on:click={() => {
         importPlugin()  
-    }} class="hover:text-neutral-200 cursor-pointer">
+    }} class="hover:text-textcolor cursor-pointer">
         <PlusIcon />
     </button>
 </div>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/PromptSettings.svelte b/src/lib/Setting/Pages/PromptSettings.svelte
new file mode 100644
index 00000000..01259045
--- /dev/null
+++ b/src/lib/Setting/Pages/PromptSettings.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { PlusIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+    import ProomptItem from "src/lib/UI/ProomptItem.svelte";
+    import type { Proompt } from "src/ts/process/proompt";
+  import { DataBase } from "src/ts/storage/database";
+
+    let sorted = 0
+    let opened = 0
+
+    const onOpen = () => {
+        opened += 1
+    }
+    const onClose = () => {
+        opened -= 1
+    }
+
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.prompt}</h2>
+<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md">
+    {#if $DataBase.promptTemplate.length === 0}
+            <div class="text-textcolor2">No Format</div>
+    {/if}
+    {#key sorted}
+        {#each $DataBase.promptTemplate as proompt, i}
+            <ProomptItem bind:proompt={proompt} onRemove={() => {
+                let templates = $DataBase.promptTemplate
+                templates.splice(i, 1)
+                $DataBase.promptTemplate = templates
+            }}  />
+        {/each}
+    {/key}
+</div>
+
+<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+    let value = $DataBase.promptTemplate ?? []
+    value.push({
+        type: "plain",
+        text: "",
+        role: "bot",
+        type2: 'normal'
+    })
+    $DataBase.promptTemplate = value
+}}><PlusIcon /></button>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/UserSettings.svelte b/src/lib/Setting/Pages/UserSettings.svelte
index 8c5e16ea..55b42db5 100644
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/src/lib/Setting/Pages/UserSettings.svelte
@@ -82,7 +82,7 @@
         {/if}</h1>
     </div>
     {#if $DataBase.account}
-        <span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
+        <span class="mb-4 text-textcolor2">ID: {$DataBase.account.id}</span>
         {#if !isTauri}
             <div class="flex items-center mt-2">
                 {#if $DataBase.account.useSync || forageStorage.isAccount}
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index e0d9330a..4c71b271 100644
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, ScrollTextIcon, UserIcon, XCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import DisplaySettings from "./Pages/DisplaySettings.svelte";
     import UserSettings from "./Pages/UserSettings.svelte";
@@ -17,6 +17,8 @@
     import LanguageSettings from "./Pages/LanguageSettings.svelte";
     import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
     import PersonaSettings from "./Pages/PersonaSettings.svelte";
+  import PromptSettings from "./Pages/PromptSettings.svelte";
+  import { DataBase } from "src/ts/storage/database";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
@@ -30,87 +32,134 @@
         {#if window.innerWidth >= 700 || selected === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                 class:w-full={window.innerWidth < 700}>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 1} on:click={() => {
-                    selected = 1
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 1}
+                    class:text-textcolor2={selected !== 1}
+                    on:click={() => {
+                        selected = 1
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 12} on:click={() => {
-                    selected = 12
+                {#if $DataBase.promptTemplate}
+                    <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 13}
+                    class:text-textcolor2={selected !== 13}
+                    on:click={() => {
+                        selected = 13
+                }}>
+                        <ScrollTextIcon />
+                        <span>{language.prompt}</span>
+                    </button>
+                {/if}
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 12}
+                    class:text-textcolor2={selected !== 12}
+                    on:click={() => {
+                        selected = 12
                 }}>
                     <ContactIcon />
                     <span>{language.persona}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 2} on:click={() => {
-                    selected = 2
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 2}
+                    class:text-textcolor2={selected !== 2}
+                    on:click={() => {
+                        selected = 2
                 }}>
                     <Sailboat />
                     <span>{language.otherBots}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 3} on:click={() => {
-                    selected = 3
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 3}
+                    class:text-textcolor2={selected !== 3}
+                    on:click={() => {
+                        selected = 3
                 }}>
                     <MonitorIcon />
                     <span>{language.display}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 10} on:click={() => {
-                    selected = 10
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 10}
+                    class:text-textcolor2={selected !== 10}
+                    on:click={() => {
+                        selected = 10
                 }}>
                     <LanguagesIcon />
                     <span>{language.language}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 11} on:click={() => {
-                    selected = 11
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 11}
+                    class:text-textcolor2={selected !== 11}
+                    on:click={() => {
+                        selected = 11
                 }}>
                     <AccessibilityIcon />
                     <span>{language.accessibility}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 8} on:click={() => {
-                    selected = 8
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 8}
+                    class:text-textcolor2={selected !== 8}
+                    on:click={() => {
+                        selected = 8
                 }}>
                     <BookIcon />
                     <span>{language.globalLoreBook}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 9} on:click={() => {
-                    selected = 9
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 9}
+                    class:text-textcolor2={selected !== 9}
+                    on:click={() => {
+                        selected = 9
                 }}>
                     <AlignLeft />
                     <span>{language.globalRegexScript}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 4} on:click={() => {
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 4}
+                    class:text-textcolor2={selected !== 4}
+                    on:click={() => {
                     selected = 4
                 }}>
                     <CodeIcon />
                     <span>{language.plugin}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
-                    selected = 0
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 0}
+                    class:text-textcolor2={selected !== 0}
+                    on:click={() => {
+                        selected = 0
                 }}>
                     <UserIcon />
                     <span>{language.account} & {language.files}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 6} on:click={() => {
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 6}
+                    class:text-textcolor2={selected !== 6}
+                    on:click={() => {
                     selected = 6
                 }}>
                     <ActivityIcon />
                     <span>{language.advancedSettings}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 7} on:click={() => {
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 7}
+                    class:text-textcolor2={selected !== 7}
+                    on:click={() => {
                     selected = 7
                 }}>
                     <BoxIcon />
                     <span>{language.community}</span>
                 </button>
                 {#if window.innerWidth < 700}
-                    <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+                    <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                         settingsOpen.set(false)
                     }}> <XCircleIcon /> </button>
                 {/if}
             </div>
         {/if}
         {#if window.innerWidth >= 700 || selected !== -1}
-            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-white overflow-y-auto relative">
+            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
                 {#if selected === 0}
                     <UserSettings />
                 {:else if selected === 1}
@@ -137,9 +186,11 @@
                     <AccessibilitySettings/>
                 {:else if selected === 12}
                     <PersonaSettings/>
+                {:else if selected === 13}
+                    <PromptSettings/>
                 {/if}
             </div>
-            <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+            <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                 if(window.innerWidth >= 700){
                     settingsOpen.set(false)
                 }
@@ -160,7 +211,7 @@
 {/if}
 <style>
     .setting-bg{
-        background: linear-gradient(to right, #21222C 50%, #282a36 50%);
+        background: linear-gradient(to right, var(--risu-theme-darkbg) 50%, var(--risu-theme-bgcolor) 50%);
 
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 0a2fdbc7..f42fe9e0 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -13,10 +13,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.presets}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -27,30 +27,30 @@
                     changeToPreset(i)
                     close()
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
                 {:else}
                     {#if i < 9}
-                    <span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>
+                    <span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
                     {/if}
                     <span>{presets.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
                         e.stopPropagation()
                         copyPreset(i)
                     }}>
                         <CopyIcon size={18}/>
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
                         e.stopPropagation()
                         downloadPreset(i)
                     }}>
 
                         <DownloadIcon size={18} />
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.botPresets.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -72,7 +72,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 let botPresets = $DataBase.botPresets
                 let newPreset = cloneDeep(presetTemplate)
                 newPreset.name = `New Preset`
@@ -82,18 +82,18 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
                 importPreset()
             }}>
                 <FolderUpIcon size={18}/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
             </button>
         </div>
-        <span class="text-gray-400 text-sm">{language.quickPreset}</span>
+        <span class="text-textcolor2 text-sm">{language.quickPreset}</span>
     </div>
 </div>
 
diff --git a/src/lib/Setting/lorepreset.svelte b/src/lib/Setting/lorepreset.svelte
index 34b1f956..cdfda2e8 100644
--- a/src/lib/Setting/lorepreset.svelte
+++ b/src/lib/Setting/lorepreset.svelte
@@ -10,10 +10,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.loreBook}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -23,14 +23,14 @@
                 if(!editMode){
                     $DataBase.loreBookPage = ind
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
                 {:else}
                     <span>{lore.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.loreBook.length === 1){
                             return
@@ -49,7 +49,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 let loreBooks = $DataBase.loreBook
                 let newLoreBook = {
                     name: `New LoreBook`,
@@ -61,7 +61,7 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index c9bbc6e6..043344f6 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -140,24 +140,24 @@
 
 {#if licensed !== 'private'}
     <div class="flex gap-2 mb-2">
-        <button class={subMenu === 0 ? 'text-gray-200 ' : 'text-gray-500'} on:click={() => {subMenu = 0}}>
+        <button class={subMenu === 0 ? 'text-textcolor ' : 'text-textcolor2'} on:click={() => {subMenu = 0}}>
             <UserIcon />
         </button>
-        <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
+        <button class={subMenu === 1 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 1}}>
             <SmileIcon />
         </button>
-        <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3}}>
+        <button class={subMenu === 3 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 3}}>
             <BookIcon />
         </button>
         {#if currentChar.type === 'character'}
-            <button class={subMenu === 5 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 5}}>
+            <button class={subMenu === 5 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 5}}>
                 <Volume2Icon />
             </button>
-            <button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 4}}>
+            <button class={subMenu === 4 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 4}}>
                 <CurlyBraces />
             </button>
         {/if}
-        <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
+        <button class={subMenu === 2 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 2}}>
             <ActivityIcon />
         </button>
     </div>
@@ -167,19 +167,19 @@
 {#if subMenu === 0}
     {#if currentChar.type !== 'group' && licensed !== 'private'}
         <TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
-        <span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
+        <span class="text-textcolor">{language.description} <Help key="charDesc"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.desc}></TextAreaInput>
-        <span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
-        <span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></span>
+        <span class="text-textcolor2 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
+        <span class="text-textcolor">{language.firstMessage} <Help key="charFirstMessage"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.firstMessage}></TextAreaInput>
-        <span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
+        <span class="text-textcolor2 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
 
     {:else if licensed !== 'private' && currentChar.type === 'group'}
         <TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
-        <span class="text-neutral-200">{language.character}</span>
+        <span class="text-textcolor">{language.character}</span>
         <div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
             {#if currentChar.data.characters.length === 0}
-                <span class="text-gray-500">No Character</span>
+                <span class="text-textcolor2">No Character</span>
             {:else}
                 <div></div>
                 <div class="text-center">{language.talkness}</div>
@@ -217,16 +217,16 @@
                 {/each}
             {/if}
         </div>
-        <div class="text-gray-500 mt-1 flex mb-6">
-            <button on:click={addGroupChar} class="hover:text-neutral-200 cursor-pointer">
+        <div class="text-textcolor2 mt-1 flex mb-6">
+            <button on:click={addGroupChar} class="hover:text-textcolor cursor-pointer">
                 <PlusIcon />
             </button>
         </div>
 
     {/if}
-    <span class="text-neutral-200">{language.authorNote} <Help key="chatNote"/></span>
+    <span class="text-textcolor">{language.authorNote} <Help key="chatNote"/></span>
     <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>     
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>     
     <div class="flex mt-6 items-center">
         <Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
     </div>
@@ -267,15 +267,15 @@
     })()}
 {:else if subMenu === 1}
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
-    <span class="text-neutral-200 mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
+    <span class="text-textcolor mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
     <button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
         {#if currentChar.data.image === ''}
-            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+            <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
         {:else}
             {#await getCharImage(currentChar.data.image, 'css')}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500"></div>
+                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
             {:then im}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
             {/await}
         {/if}
     </button>
@@ -289,7 +289,7 @@
     {/if}
 
 
-    <span class="text-neutral-200 mt-6 mb-2">{language.viewScreen}</span>
+    <span class="text-textcolor mt-6 mb-2">{language.viewScreen}</span>
     <!-- svelte-ignore empty-block -->
 
     {#if currentChar.type !== 'group'}
@@ -309,8 +309,8 @@
     {/if}
 
     {#if currentChar.data.viewScreen === 'emotion'}
-        <span class="text-neutral-200 mt-6">{language.emotionImage} <Help key="emotion"/></span>
-        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+        <span class="text-textcolor mt-6">{language.emotionImage} <Help key="emotion"/></span>
+        <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
 
         <div class="w-full max-w-full border border-selected p-2 rounded-md">
 
@@ -322,7 +322,7 @@
                 </tr>
                 {#if currentChar.data.emotionImages.length === 0}
                     <tr>
-                        <div class="text-gray-500">{language.noImages}</div>
+                        <div class="text-textcolor2">{language.noImages}</div>
                     </tr>
                 {:else}
                     {#each emos as emo, i}
@@ -345,7 +345,7 @@
 
         </div>
 
-        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+        <div class="text-textcolor2 hover:text-textcolor mt-2 flex">
             {#if !$addingEmotion}
                 <button class="cursor-pointer hover:text-green-500" on:click={() => {addCharEmotion($selectedCharID)}}>
                     <PlusIcon />
@@ -356,8 +356,8 @@
         </div>
     {/if}
     {#if currentChar.data.viewScreen === 'imggen'}
-        <span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
-        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+        <span class="text-textcolor mt-6">{language.imageGeneration} <Help key="imggen"/></span>
+        <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
         
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="w-full max-w-full tabler">
@@ -368,7 +368,7 @@
                 </tr>
                 {#if currentChar.data.sdData.length === 0}
                     <tr>
-                        <div class="text-gray-500">{language.noData}</div>
+                        <div class="text-textcolor2">{language.noData}</div>
                     </tr>
                 {/if}
                 {#each currentChar.data.sdData as emo, i}
@@ -397,7 +397,7 @@
                 {/each}
             </table>
         </div>
-        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+        <div class="text-textcolor2 hover:text-textcolor mt-2 flex">
             {#if !$addingEmotion}
                 <button class="cursor-pointer hover:text-green-500" on:click={() => {
                     let db = ($DataBase)
@@ -415,11 +415,11 @@
                 <span>Loading...</span>
             {/if}
         </div>
-        <span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
+        <span class="text-textcolor mt-6">{language.currentImageGeneration}</span>
         {#if currentChar.data.chats[currentChar.data.chatPage].sdData}
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></TextAreaInput>
         {:else}
-            <span><div class="text-gray-500">{language.noData}</div></span>
+            <span><div class="text-textcolor2">{language.noData}</div></span>
         {/if}
     {/if}
 {:else if subMenu === 3}
@@ -429,7 +429,7 @@
     {#if currentChar.type === 'character'}
         <h2 class="mb-2 text-2xl font-bold mt-2">{language.scripts}</h2>
 
-        <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+        <span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
 
         <table class="w-full max-w-full tabler mt-2">
@@ -448,7 +448,7 @@
             </tr>
             {#if currentChar.data.bias.length === 0}
                 <tr>
-                    <div class="text-gray-500"> {language.noBias}</div>
+                    <div class="text-textcolor2"> {language.noBias}</div>
                 </tr>
             {/if}
             {#each currentChar.data.bias as bias, i}
@@ -475,7 +475,7 @@
 
         </div>
 
-        <span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
+        <span class="text-textcolor mt-4">{language.regexScript} <Help key="regexScript"/></span>
         <RegexList bind:value={currentChar.data.customscript} />
         <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
             if(currentChar.type === 'character'){
@@ -490,7 +490,7 @@
             }
         }}><PlusIcon /></button>
 
-        <span class="text-neutral-200 mt-4">{language.triggerScript} <Help key="regexScript"/></span>
+        <span class="text-textcolor mt-4">{language.triggerScript} <Help key="regexScript"/></span>
         <TriggerList bind:value={currentChar.data.triggerscript} />
         <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
             if(currentChar.type === 'character'){
@@ -508,7 +508,7 @@
 {:else if subMenu === 5}
     {#if currentChar.type === 'character'}
         <h2 class="mb-2 text-2xl font-bold mt-2">TTS</h2>
-        <span class="text-neutral-200">{language.provider}</span>
+        <span class="text-textcolor">{language.provider}</span>
         <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsMode} on:change={() => {
             if(currentChar.type === 'character'){
                 currentChar.data.ttsSpeech = ''
@@ -523,9 +523,9 @@
 
         {#if currentChar.data.ttsMode === 'webspeech'}
             {#if !speechSynthesis}
-                <span class="text-neutral-200">Web Speech isn't supported in your browser or OS</span>
+                <span class="text-textcolor">Web Speech isn't supported in your browser or OS</span>
             {:else}
-                <span class="text-neutral-200">{language.Speech}</span>
+                <span class="text-textcolor">{language.Speech}</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
                     <OptionInput value="">Auto</OptionInput>
                     {#each getWebSpeechTTSVoices() as voice}
@@ -537,9 +537,9 @@
                 {/if}
             {/if}
         {:else if currentChar.data.ttsMode === 'elevenlab'}
-            <span class="text-sm mb-2 text-gray-400">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
+            <span class="text-sm mb-2 text-textcolor2">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
             {#await getElevenTTSVoices() then voices}
-                <span class="text-neutral-200">{language.Speech}</span>
+                <span class="text-textcolor">{language.Speech}</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
                     <OptionInput value="">Unset</OptionInput>
                         {#each voices as voice}
@@ -548,7 +548,7 @@
                 </SelectInput>
             {/await}
          {:else if currentChar.data.ttsMode === 'VOICEVOX'}
-                <span class="text-neutral-200">Speaker</span>
+                <span class="text-textcolor">Speaker</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.voicevoxConfig.speaker}>
                     {#await getVOICEVOXVoices() then voices}
                         {#each voices as voice}
@@ -564,18 +564,18 @@
                 {/each}
                 </SelectInput>
                 {/if}
-                <span class="text-neutral-200">Speed scale</span>
+                <span class="text-textcolor">Speed scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
 
-                <span class="text-neutral-200">Pitch scale</span>
+                <span class="text-textcolor">Pitch scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
 
-                <span class="text-neutral-200">Volume scale</span>
+                <span class="text-textcolor">Volume scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
 
-                <span class="text-neutral-200">Intonation scale</span>
+                <span class="text-textcolor">Intonation scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
-                <span class="text-sm mb-2 text-gray-400">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
+                <span class="text-sm mb-2 text-textcolor2">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
         {/if}
         {#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
             <div class="flex items-center mt-2">
@@ -586,44 +586,44 @@
 {:else if subMenu === 2}
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
     {#if currentChar.type !== 'group'}
-        <span class="text-neutral-200">{language.exampleMessage} <Help key="exampleMessage"/></span>
+        <span class="text-textcolor">{language.exampleMessage} <Help key="exampleMessage"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.creatorNotes} <Help key="creatorQuotes"/></span>
+        <span class="text-textcolor">{language.creatorNotes} <Help key="creatorQuotes"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
             currentChar.data.removedQuotes = false
         }}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.systemPrompt} <Help key="systemPrompt"/></span>
+        <span class="text-textcolor">{language.systemPrompt} <Help key="systemPrompt"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
+        <span class="text-textcolor">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.replaceGlobalNote}></TextAreaInput>
 
 
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
-            <span class="text-neutral-200">{language.SuperMemory}</span>
+            <span class="text-textcolor">{language.SuperMemory}</span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
         {/if}
         {#if $DataBase.showUnrecommended || currentChar.data.personality.length > 3}
-            <span class="text-neutral-200">{language.personality} <Help key="personality" unrecommended/></span>
+            <span class="text-textcolor">{language.personality} <Help key="personality" unrecommended/></span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.personality}></TextAreaInput>
         {/if}
         {#if $DataBase.showUnrecommended || currentChar.data.scenario.length > 3}
-            <span class="text-neutral-200">{language.scenario} <Help key="scenario" unrecommended/></span>
+            <span class="text-textcolor">{language.scenario} <Help key="scenario" unrecommended/></span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.scenario}></TextAreaInput>
         {/if}
 
-        <span class="text-neutral-200 mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
+        <span class="text-textcolor mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.creator}</span>
+        <span class="text-textcolor">{language.creator}</span>
         <TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
 
-        <span class="text-neutral-200">{language.CharVersion}</span>
+        <span class="text-textcolor">{language.CharVersion}</span>
         <TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
 
-        <span class="text-neutral-200 mt-2">{language.altGreet}</span>
+        <span class="text-textcolor mt-2">{language.altGreet}</span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="contain w-full max-w-full tabler mt-2">
                 <tr>
@@ -642,7 +642,7 @@
                 </tr>
                 {#if currentChar.data.alternateGreetings.length === 0}
                     <tr>
-                        <div class="text-gray-500"> No Messages</div>
+                        <div class="text-textcolor2"> No Messages</div>
                     </tr>
                 {/if}
                 {#each currentChar.data.alternateGreetings as bias, i}
@@ -667,7 +667,7 @@
             </table>
         </div>
       
-        <span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
+        <span class="text-textcolor mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="contain w-full max-w-full tabler mt-2">
                 <tr>
@@ -697,7 +697,7 @@
                 </tr>
                 {#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
                     <tr>
-                        <div class="text-gray-500"> No Assets</div>
+                        <div class="text-textcolor2"> No Assets</div>
                     </tr>
                 {:else}
                     {#each currentChar.data.additionalAssets as assets, i}
@@ -770,7 +770,7 @@
         {/if}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
-            <span class="text-neutral-200">{language.SuperMemory}</span>
+            <span class="text-textcolor">{language.SuperMemory}</span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
         {/if}
         {#if $DataBase.useExperimental}
diff --git a/src/lib/SideBars/LoreBook/LoreBookData.svelte b/src/lib/SideBars/LoreBook/LoreBookData.svelte
index fa438c38..1c34437d 100644
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -45,21 +45,21 @@
     </div>
     {#if open}
         <div class="border-0 outline-none w-full mt-2 flex flex-col mb-2">
-            <span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
+            <span class="text-textcolor mt-6">{language.name} <Help key="loreName"/></span>
             <TextInput size="sm" bind:value={value.comment}/>
             {#if !value.alwaysActive}
-                <span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
-                <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                <span class="text-textcolor mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
+                <span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
                 <TextInput size="sm" bind:value={value.key}/>
 
                 {#if value.selective}
-                    <span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
-                    <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                    <span class="text-textcolor mt-6">{language.SecondaryKeys}</span>
+                    <span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
                     <TextInput size="sm" bind:value={value.secondkey}/>
                 {/if}
             {/if}
             {#if !(value.activationPercent === undefined || value.activationPercent === null)}
-                <span class="text-neutral-200 mt-6">{language.activationProbability}</span>
+                <span class="text-textcolor mt-6">{language.activationProbability}</span>
                 <NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
                     if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
                         value.activationPercent = 0
@@ -69,9 +69,9 @@
                     }
                 }} />
             {/if}
-            <span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
+            <span class="text-textcolor mt-4">{language.insertOrder} <Help key="loreorder"/></span>
             <NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
-            <span class="text-neutral-200 mt-4 mb-2">{language.prompt}</span>
+            <span class="text-textcolor mt-4 mb-2">{language.prompt}</span>
             <TextAreaInput autocomplete="off" bind:value={value.content} />
             <div class="flex items-center mt-4">
                 <Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
diff --git a/src/lib/SideBars/LoreBook/LoreBookList.svelte b/src/lib/SideBars/LoreBook/LoreBookList.svelte
index 8946d6e8..537e2539 100644
--- a/src/lib/SideBars/LoreBook/LoreBookList.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookList.svelte
@@ -75,7 +75,7 @@
     {#key sorted}
         {#if globalMode}
             {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
                     <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
@@ -87,7 +87,7 @@
             {/if}
         {:else if submenu === 0}
             {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
                     <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
@@ -99,7 +99,7 @@
             {/if}
         {:else if submenu === 1}
             {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
                     <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {
diff --git a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
index 08829bf4..610e7295 100644
--- a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
@@ -33,7 +33,7 @@
 {/if}
 {#if submenu !== 2}
     {#if !globalMode}
-        <span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
+        <span class="text-textcolor2 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
     {/if}
     <LoreBookList bind:globalMode bind:submenu />
 {:else}
@@ -51,9 +51,9 @@
         <div class="flex items-center mt-4">
             <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
         </div>
-        <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+        <span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
         <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
-        <span class="text-neutral-200">{language.loreBookToken}</span>
+        <span class="text-textcolor">{language.loreBookToken}</span>
         <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
     {:else}
         <div class="flex items-center mt-4">
@@ -71,18 +71,18 @@
 {/if}
 {#if submenu !== 2}
 
-<div class="text-gray-500 mt-2 flex">
-    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
+<div class="text-textcolor2 mt-2 flex">
+    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-textcolor cursor-pointer">
         <PlusIcon />
     </button>
     <button on:click={() => {
         exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
+    }} class="hover:text-textcolor ml-1  cursor-pointer">
         <DownloadIcon />
     </button>
     <button on:click={() => {
         importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
+    }} class="hover:text-textcolor ml-2  cursor-pointer">
         <FolderUpIcon />
     </button>
 </div>
diff --git a/src/lib/SideBars/Scripts/RegexData.svelte b/src/lib/SideBars/Scripts/RegexData.svelte
index c3dff92b..a9ba689a 100644
--- a/src/lib/SideBars/Scripts/RegexData.svelte
+++ b/src/lib/SideBars/Scripts/RegexData.svelte
@@ -44,21 +44,21 @@
     </div>
     {#if open}
         <div class="seperator p-2">
-            <span class="text-neutral-200 mt-6">{language.name}</span>
+            <span class="text-textcolor mt-6">{language.name}</span>
             <TextInput size="sm" bind:value={value.comment} />
-            <span class="text-neutral-200 mt-4">Modification Type</span>
+            <span class="text-textcolor mt-4">Modification Type</span>
             <SelectInput bind:value={value.type}>
                 <OptionInput value="editinput">{language.editInput}</OptionInput>
                 <OptionInput value="editoutput">{language.editOutput}</OptionInput>
                 <OptionInput value="editprocess">{language.editProcess}</OptionInput>
                 <OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
             </SelectInput>
-            <span class="text-neutral-200 mt-6">IN:</span>
+            <span class="text-textcolor mt-6">IN:</span>
             <TextInput size="sm" bind:value={value.in} />
-            <span class="text-neutral-200 mt-6">OUT:</span>
+            <span class="text-textcolor mt-6">OUT:</span>
             <TextInput size="sm" bind:value={value.out} />
             {#if value.ableFlag}
-                <span class="text-neutral-200 mt-6">FLAG:</span>
+                <span class="text-textcolor mt-6">FLAG:</span>
                 <TextInput size="sm" bind:value={value.flag} />
             {/if}
             <div class="flex items-center mt-4">
diff --git a/src/lib/SideBars/Scripts/RegexList.svelte b/src/lib/SideBars/Scripts/RegexList.svelte
index 2c16f9a8..6915dcea 100644
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/src/lib/SideBars/Scripts/RegexList.svelte
@@ -53,7 +53,7 @@
 
 <div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
-            <div class="text-gray-500">No Scripts</div>
+            <div class="text-textcolor2">No Scripts</div>
     {/if}
     {#key sorted}
         {#each value as customscript, i}
diff --git a/src/lib/SideBars/Scripts/TriggerData.svelte b/src/lib/SideBars/Scripts/TriggerData.svelte
index 7de6a265..ec379e85 100644
--- a/src/lib/SideBars/Scripts/TriggerData.svelte
+++ b/src/lib/SideBars/Scripts/TriggerData.svelte
@@ -46,9 +46,9 @@
     </div>
     {#if open}
         <div class="seperator p-2">
-            <span class="text-neutral-200 mt-6">{language.name}</span>
+            <span class="text-textcolor mt-6">{language.name}</span>
             <TextInput size="sm" bind:value={value.comment} />
-            <span class="text-neutral-200 mt-4">{language.type}</span>
+            <span class="text-textcolor mt-4">{language.type}</span>
             <SelectInput bind:value={value.type}>
                 <OptionInput value="start">{language.triggerStart}</OptionInput>
                 <OptionInput value="output">{language.triggerOutput}</OptionInput>
@@ -56,8 +56,8 @@
                 <OptionInput value="manual">{language.triggerManual}</OptionInput>
             </SelectInput>
             
-            <span class="text-neutral-200 mt-4">Conditions
-                <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+            <span class="text-textcolor mt-4">Conditions
+                <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                     value.conditions.push({
                         type: 'exists',
                         value: '',
@@ -70,14 +70,14 @@
             </span>
             <div class="flex flex-col px-2 py-4 border border-selected rounded-md">
                 {#if value.conditions.length === 0}
-                    <span class="text-gray-500 text-sm">{language.always}</span>
+                    <span class="text-textcolor2 text-sm">{language.always}</span>
                 {/if}
                 {#each value.conditions as cond,i}
                     {#if i > 0}
                         <hr class="border-selected my-4" />
                     {/if}
-                    <span class="text-gray-400 text-sm">{language.type}
-                        <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+                    <span class="text-textcolor2 text-sm">{language.type}
+                        <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                             value.conditions.splice(i, 1)
                             value.conditions = value.conditions
         
@@ -121,18 +121,18 @@
                             <OptionInput value="strict">{language.triggerMatchStrict}</OptionInput>
                             <OptionInput value="regex">{language.triggerMatchRegex}</OptionInput>
                         </SelectInput>
-                        <span  class="text-gray-400 text-sm">{language.value}</span>
+                        <span  class="text-textcolor2 text-sm">{language.value}</span>
                         <TextInput size="sm" bind:value={cond.value} />
 
-                        <span  class="text-gray-400 text-sm">{language.searchDepth}</span>
+                        <span  class="text-textcolor2 text-sm">{language.searchDepth}</span>
                         <NumberInput size="sm" bind:value={cond.depth} />
                     {/if}
                     {#if cond.type === 'var' || cond.type === 'chatindex'}
                         {#if cond.type === 'var'}
-                            <span class="text-gray-400 text-sm">{language.varableName}</span>
+                            <span class="text-textcolor2 text-sm">{language.varableName}</span>
                             <TextInput size="sm" bind:value={cond.var} />
                         {/if}
-                        <span  class="text-gray-400 text-sm">{language.value}</span>
+                        <span  class="text-textcolor2 text-sm">{language.value}</span>
                         <SelectInput bind:value={cond.operator} size="sm">
                             <OptionInput value="=">{language.equal}</OptionInput>
                             <OptionInput value="!=">{language.notEqual}</OptionInput>
@@ -150,8 +150,8 @@
                 {/each}
             </div>
 
-            <span class="text-neutral-200 mt-4">Effects
-                <button aria-labelledby="Add Effects" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+            <span class="text-textcolor mt-4">Effects
+                <button aria-labelledby="Add Effects" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                     if(value.type === 'start'){
                         value.effect.push({
                             type: 'systemprompt',
@@ -174,14 +174,14 @@
 
             <div class="flex flex-col px-2 py-4 border border-selected rounded-md">
                 {#if value.effect.length === 0}
-                    <span class="text-gray-500 text-sm">{language.noEffect}</span>
+                    <span class="text-textcolor2 text-sm">{language.noEffect}</span>
                 {/if}
                 {#each value.effect as effect,i}
                     {#if i > 0}
                         <hr class="border-selected my-4" />
                     {/if}
-                    <span class="text-gray-400 text-sm">{language.type}
-                        <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+                    <span class="text-textcolor2 text-sm">{language.type}
+                        <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                             value.effect.splice(i, 1)
                             value.effect = value.effect
         
@@ -222,19 +222,19 @@
                         {#if value.type !== 'start'}
                             <span class="text-red-400 text-sm">{language.invaildTriggerEffect}</span>
                         {/if}
-                        <span class="text-gray-400 text-sm">{language.location}</span>
+                        <span class="text-textcolor2 text-sm">{language.location}</span>
                         <SelectInput bind:value={effect.location} size="sm">
                             <OptionInput value="start">{language.promptstart}</OptionInput>
                             <OptionInput value="historyend">{language.historyend}</OptionInput>
                             <OptionInput value="promptend">{language.promptend}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextAreaInput size="sm" bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'setvar'}
-                        <span class="text-gray-400 text-sm">{language.varableName}</span>
+                        <span class="text-textcolor2 text-sm">{language.varableName}</span>
                         <TextInput size="sm" bind:value={effect.var} />
-                        <span class="text-gray-400 text-sm">{language.operator}</span>
+                        <span class="text-textcolor2 text-sm">{language.operator}</span>
                         <SelectInput bind:value={effect.operator} size="sm">
                             <OptionInput value="=">{language.TriggerSetToVar}</OptionInput>
                             <OptionInput value="+=">{language.TriggerAddToVar}</OptionInput>
@@ -242,16 +242,16 @@
                             <OptionInput value="*=">{language.TriggerMulToVar}</OptionInput>
                             <OptionInput value="/=">{language.TriggerDivToVar}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextInput size="sm" bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'impersonate'}
-                        <span class="text-gray-400 text-sm">{language.role}</span>
+                        <span class="text-textcolor2 text-sm">{language.role}</span>
                         <SelectInput bind:value={effect.role} size="sm">
                             <OptionInput value="user">{language.user}</OptionInput>
                             <OptionInput value="char">{language.character}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextAreaInput size="sm" bind:value={effect.value} />
                     {/if}
                 {/each}
diff --git a/src/lib/SideBars/Scripts/TriggerList.svelte b/src/lib/SideBars/Scripts/TriggerList.svelte
index 8cba7fd8..4a82ec09 100644
--- a/src/lib/SideBars/Scripts/TriggerList.svelte
+++ b/src/lib/SideBars/Scripts/TriggerList.svelte
@@ -9,7 +9,7 @@
 
 <div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
-            <div class="text-gray-500">No Scripts</div>
+            <div class="text-textcolor2">No Scripts</div>
     {/if}
     {#key sorted}
         {#each value as triggerscript, i}
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index ebcb71bf..c0b191db 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -40,25 +40,25 @@
             if(!editMode){
                 chara.chatPage = i
             }
-        }} class="flex items-center text-neutral-200  border-solid border-0 border-gray-600 p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
+        }} class="flex items-center text-textcolor  border-solid border-0 border-darkborderc p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
             {#if editMode}
                 <TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/>
             {:else}
                 <span>{chat.name}</span>
             {/if}
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
+                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
                     editMode = !editMode
                 }}>
                     <EditIcon size={18}/>
                 </button>
-                <button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
+                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     exportChat(i)
                 }}>
                     <DownloadIcon size={18}/>
                 </button>
-                <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     if(chara.chats.length === 1){
                         alertError(language.errors.onlyOneChat)
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index c7c16328..6b83656d 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -328,7 +328,7 @@
 </script>
 
 <div
-  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
+  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative"
   class:editMode
   class:risu-sub-sidebar={$sideBarClosing}
   class:risu-sub-sidebar-close={$sideBarClosing}
@@ -336,12 +336,12 @@
   class:flex={!hidden}
 >
   <button
-    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer mt-2 items-center justify-center rounded-md bg-gray-500 transition-colors hover:bg-green-500"
+    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer text-white mt-2 items-center justify-center rounded-md bg-textcolor2 transition-colors hover:bg-green-500"
     on:click={() => {
       menuMode = 1 - menuMode;
     }}><ListIcon />
   </button>
-  <div class="mt-2 border-b border-b-selected w-full relative">
+  <div class="mt-2 border-b border-b-selected w-full relative text-white ">
     {#if menuMode === 1}
       <div class="absolute w-20 min-w-20 flex border-b-selected border-b bg-bgcolor flex-col items-center pt-2 rounded-b-md z-20 pb-2">
         <BarIcon
@@ -585,7 +585,7 @@
   </div>
 </div>
 <div
-  class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-gray-200 max-h-full"
+  class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
   class:risu-sidebar={!$sideBarClosing}
   class:risu-sidebar-close={$sideBarClosing}
   class:minw96={!$DynamicGUI}
@@ -602,7 +602,7 @@
   }}
 >
   <button
-    class="flex w-full justify-end text-gray-200"
+    class="flex w-full justify-end text-textcolor"
     on:click={async () => {
       if($sideBarClosing){
         return
@@ -610,18 +610,18 @@
       $sideBarClosing = true;
     }}
   >
-    <!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
+    <!-- <button class="border-none bg-transparent p-0 text-textcolor"><X /></button> -->
   </button>
   {#if sideBarMode === 0}
     {#if $selectedCharID < 0 || $settingsOpen}
       <div>
         <h1 class="text-xl">Welcome to RisuAI!</h1>
-        <span class="text-xs text-gray-400">Select a bot to start chating</span>
+        <span class="text-xs text-textcolor2">Select a bot to start chating</span>
       </div>
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
-        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-gray-500={$botMakerMode}>{language.Chat}</button>
-        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-gray-500={!$botMakerMode}>{language.character}</button>
+        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
+        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
       </div>
       {#if $botMakerMode}
         <CharConfig />
diff --git a/src/lib/UI/BaseRoundedButton.svelte b/src/lib/UI/BaseRoundedButton.svelte
index f0e4712b..d9746b2d 100644
--- a/src/lib/UI/BaseRoundedButton.svelte
+++ b/src/lib/UI/BaseRoundedButton.svelte
@@ -8,7 +8,7 @@
   on:click={onClick}
   class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
    transition-colors rounded-full
-   border border-gray-500 text-gray-300
+   border border-textcolor2 text-gray-300
    hover:border-gray-300 
    {isDisabled ? '!cursor-not-allowed' : ''}"
 >
diff --git a/src/lib/UI/GUI/Button.svelte b/src/lib/UI/GUI/Button.svelte
index 92efc544..c233fde0 100644
--- a/src/lib/UI/GUI/Button.svelte
+++ b/src/lib/UI/GUI/Button.svelte
@@ -1,6 +1,6 @@
 <button
     on:click
-    class="{selected ? 'bg-borderc' : 'bg-gray-700'} border border-gray-600 text-white rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
+    class="{selected ? 'bg-borderc' : 'bg-darkbutton'} border border-darkborderc text-textcolor rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
     class:px-4 = {size == "md"}
     class:px-2 = {size == "sm"}
     class:px-6 = {size == "lg"}
diff --git a/src/lib/UI/GUI/CheckInput.svelte b/src/lib/UI/GUI/CheckInput.svelte
index 7a14c062..9162c69e 100644
--- a/src/lib/UI/GUI/CheckInput.svelte
+++ b/src/lib/UI/GUI/CheckInput.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <label 
-    class="flex items-center space-x-2 cursor-pointer text-white"
+    class="flex items-center space-x-2 cursor-pointer text-textcolor"
     class:mr-2={margin}
     aria-describedby="{name} {check ? 'abled' : 'disabled'}"
 >
@@ -23,7 +23,7 @@
         }}
     />
     <span 
-        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-gray-600 flex justify-center items-center {check ? 'bg-borderc' : 'bg-gray-700'} transition-colors duration-200"
+        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-borderc' : 'bg-darkbutton'} transition-colors duration-200"
         aria-hidden="true"
     >
         {#if check}
diff --git a/src/lib/UI/GUI/NumberInput.svelte b/src/lib/UI/GUI/NumberInput.svelte
index 3a53085e..f6fdac43 100644
--- a/src/lib/UI/GUI/NumberInput.svelte
+++ b/src/lib/UI/GUI/NumberInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/GUI/SelectInput.svelte b/src/lib/UI/GUI/SelectInput.svelte
index 20f25f0d..32aac48b 100644
--- a/src/lib/UI/GUI/SelectInput.svelte
+++ b/src/lib/UI/GUI/SelectInput.svelte
@@ -1,5 +1,5 @@
 <select
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/GUI/SideBarArrow.svelte b/src/lib/UI/GUI/SideBarArrow.svelte
index eaec7adc..76664ead 100644
--- a/src/lib/UI/GUI/SideBarArrow.svelte
+++ b/src/lib/UI/GUI/SideBarArrow.svelte
@@ -5,14 +5,14 @@
 </script>
 
 {#if $sideBarStore && !$DynamicGUI}
-    <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
+    <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
         <ArrowLeft />
     </button>
 {:else}
     <button on:click={() => {
         sideBarClosing.set(false);
         sideBarStore.set(true)}
-    } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
+    } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
         <ArrowRight />
     </button>
 {/if}
\ No newline at end of file
diff --git a/src/lib/UI/GUI/SliderInput.svelte b/src/lib/UI/GUI/SliderInput.svelte
index d23e8a7d..ea23ded0 100644
--- a/src/lib/UI/GUI/SliderInput.svelte
+++ b/src/lib/UI/GUI/SliderInput.svelte
@@ -1,5 +1,5 @@
 <input
-    class="text-neutral-200 bg-transparent input-text"
+    class="text-textcolor bg-transparent input-text"
     class:mb-4={marginBottom}
     type="range"
     min={min}
@@ -11,7 +11,7 @@
 
 <!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>
     <div 
-      class="relative w-full h-2 bg-gray-700 rounded-full cursor-pointer"
+      class="relative w-full h-2 bg-darkbutton rounded-full cursor-pointer"
       on:click={changeValue}
     >
       <div 
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index 81c6901e..a73763ca 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -1,6 +1,6 @@
 {#if optimaizedInput}
     <textarea 
-        class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
@@ -14,6 +14,7 @@
         class:mt-2={margin === 'both'}
         class:w-full={fullwidth}
         class:h-20={height === '20'}
+        class:h-24={height === '24'}
         class:h-32={height === '32'}
         class:h-full={height === 'full'}
         class:min-h-20={height === '20'}
@@ -36,7 +37,7 @@
     />
 {:else}
     <textarea 
-        class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
@@ -50,6 +51,7 @@
         class:mt-2={margin === 'both'}
         class:w-full={fullwidth}
         class:h-20={height === '20'}
+        class:h-24={height === '24'}
         class:h-32={height === '32'}
         class:h-full={height === 'full'}
         class:min-h-20={height === '20'}
@@ -71,7 +73,7 @@
     export let margin:"none"|"top"|"bottom"|"both" = "none"
     export let onInput = () => {}
     export let fullwidth = false
-    export let height:'20'|'32'|'full' = '20'
+    export let height:'20'|'24'|'32'|'full' = '20'
     export let additionalClass = ''
     export let optimaizedInput = true
     let inpa = 0
diff --git a/src/lib/UI/GUI/TextAreaResizable.svelte b/src/lib/UI/GUI/TextAreaResizable.svelte
index e7ef5098..10a31894 100644
--- a/src/lib/UI/GUI/TextAreaResizable.svelte
+++ b/src/lib/UI/GUI/TextAreaResizable.svelte
@@ -29,7 +29,7 @@
         resize: none;
         box-sizing: border-box;
         background: transparent;
-        color: white;
+        color: var(--risu-theme-textcolor);
         border: 1px solid rgba(98, 114, 164, 0.5);
         max-width: calc(95% - 2rem);
         padding: 1rem;
diff --git a/src/lib/UI/GUI/TextInput.svelte b/src/lib/UI/GUI/TextInput.svelte
index 5b8bb160..4aa66957 100644
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/src/lib/UI/GUI/TextInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/MainMenu.svelte b/src/lib/UI/MainMenu.svelte
index 11809fea..548bbc13 100644
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -12,26 +12,26 @@
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
     {#if !openHub}
-      <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
+      <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black">RisuAI</h2>
       {#if (!isTauri) && (!isNodeServer)}
-        <h3 class="text-gray-500 mt-1">Version {appVer}{webAppSubVer}</h3>
+        <h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
       {:else}
-        <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
+        <h3 class="text-textcolor2 mt-1">Version {appVer}</h3>
       {/if}
       <GithubStars />
     {/if}
-    <div class="w-full flex p-4 flex-col text-white max-w-4xl">
+    <div class="w-full flex p-4 flex-col text-textcolor max-w-4xl">
       {#if !openHub}
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
           openURL("https://github.com/kwaroran/RisuAI/wiki")
         }}>
           <h1 class="text-2xl font-bold text-start">{language.officialWiki}</h1>
-          <span class="mt-2 text-gray-400 text-start">{language.officialWikiDesc}</span>
+          <span class="mt-2 text-textcolor2 text-start">{language.officialWikiDesc}</span>
         </button>
         <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
           <h1 class="text-2xl font-bold text-start">{language.officialDiscord}</h1>
-          <span class="mt-2 text-gray-400 text-start">{language.officialDiscordDesc}</span>
+          <span class="mt-2 text-textcolor2 text-start">{language.officialDiscordDesc}</span>
         </button>
       </div>
       <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
@@ -52,15 +52,15 @@
                   {/each}
               </div>
             {:else}
-              <div class="text-gray-500">Failed to load {language.hub}...</div>
+              <div class="text-textcolor2">Failed to load {language.hub}...</div>
             {/if}
           {/await}
         {:else}
-          <div class="text-gray-500">{language.hideRealm}</div>
+          <div class="text-textcolor2">{language.hideRealm}</div>
         {/if}
       {:else}
         <div class="flex items-center mt-4">
-          <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
+          <button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => (openHub = false)}>
             <ArrowLeft/>
           </button>
         </div>
diff --git a/src/lib/UI/ModelList.svelte b/src/lib/UI/ModelList.svelte
index 1d22099f..0fd23eb1 100644
--- a/src/lib/UI/ModelList.svelte
+++ b/src/lib/UI/ModelList.svelte
@@ -74,7 +74,7 @@
     }}>
         <div class="w-96 max-w-full max-h-full overflow-y-auto overflow-x-hidden bg-bgcolor p-4 flex flex-col" on:click|stopPropagation>
             <h1 class="font-bold text-xl">{language.model}
-                <!-- <button class="float-right text-sm font-light text-gray-500 hover:text-green-300"
+                <!-- <button class="float-right text-sm font-light text-textcolor2 hover:text-green-300"
                 class:text-green-500={openAdv} on:click={() => {
                     openAdv = !openAdv
                 }}>
diff --git a/src/lib/UI/ProomptItem.svelte b/src/lib/UI/ProomptItem.svelte
new file mode 100644
index 00000000..e63d1318
--- /dev/null
+++ b/src/lib/UI/ProomptItem.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { Proompt } from "src/ts/process/proompt";
+    import OptionInput from "./GUI/OptionInput.svelte";
+    import TextAreaInput from "./GUI/TextAreaInput.svelte";
+    import SelectInput from "./GUI/SelectInput.svelte";
+    import { language } from "src/lang";
+    import NumberInput from "./GUI/NumberInput.svelte";
+    import CheckInput from "./GUI/CheckInput.svelte";
+    import { XIcon } from "lucide-svelte";
+    export let proompt:Proompt
+    export let onRemove:() => void = () => {}
+    
+</script>
+
+<div class="flex flex-col first:pt-0 first:mt-0 first:border-0 pt-2 mt-2 border-t border-t-selected">
+    <span>{language.type}   <button class="float-right" on:click={onRemove}><XIcon /></button></span>
+    <SelectInput bind:value={proompt.type} on:change={() => {
+        if(proompt.type === 'plain' || proompt.type === 'jailbreak'){
+            proompt.text = ""
+            proompt.role = "bot"
+        }
+        if(proompt.type === 'chat'){
+            proompt.rangeStart = 0
+            proompt.rangeEnd = 'end'
+        }
+    }} >
+        <OptionInput value="plain">{language.formating.plain}</OptionInput>
+        <OptionInput value="jailbreak">{language.formating.jailbreak}</OptionInput>
+        <OptionInput value="chat">{language.Chat}</OptionInput>
+        <OptionInput value="persona">{language.formating.personaPrompt}</OptionInput>
+        <OptionInput value="description">{language.formating.description}</OptionInput>
+        <OptionInput value="authornote">{language.formating.authorNote}</OptionInput>
+        <OptionInput value="lorebook">{language.formating.lorebook}</OptionInput>
+    </SelectInput>
+
+    {#if proompt.type === 'plain' || proompt.type === 'jailbreak'}
+        <span>{language.prompt}</span>
+        <TextAreaInput bind:value={proompt.text} />
+        <span>{language.role}</span>
+        <SelectInput bind:value={proompt.role}>
+            <OptionInput value="plain">{language.user}</OptionInput>
+            <OptionInput value="jailbreak">{language.character}</OptionInput>
+            <OptionInput value="system">{language.systemPrompt}</OptionInput>
+        </SelectInput>
+    {/if}
+    {#if proompt.type === 'chat'}
+        <span>{language.rangeStart}</span>
+        <NumberInput bind:value={proompt.rangeStart} />
+        <span>{language.rangeEnd}</span>
+        {#if proompt.rangeEnd === 'end'}
+            <CheckInput name={language.untilChatEnd} check={true} onChange={() => {
+                if(proompt.type === 'chat'){
+                    proompt.rangeEnd = 0
+                }
+            }} />
+        {:else}
+            <NumberInput bind:value={proompt.rangeEnd} marginBottom />
+            <CheckInput name={language.untilChatEnd} check={false} onChange={() => {
+                if(proompt.type === 'chat'){
+                    proompt.rangeEnd = 'end'
+                }
+            }} />
+        {/if}
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/lib/UI/Realm/RealmHubIcon.svelte b/src/lib/UI/Realm/RealmHubIcon.svelte
index cb998e2e..980364c7 100644
--- a/src/lib/UI/Realm/RealmHubIcon.svelte
+++ b/src/lib/UI/Realm/RealmHubIcon.svelte
@@ -12,8 +12,8 @@
 <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}>                <div class="flex gap-2 w-full">
     <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
     <div class="flex flex-col flex-grow min-w-0">
-        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+        <span class="text-textcolor text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+        <span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
         <div class="flex flex-wrap">
             {#each chara.tags as tag, i}
                 {#if i < 4}
@@ -26,13 +26,13 @@
         <div class="flex-grow"></div>
         <div class="flex flex-wrap w-full flex-row-reverse gap-1">
             {#if chara.hasEmotion}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
             {/if}
             {#if chara.hasAsset}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
             {/if}
             {#if chara.hasLore}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
             {/if}
         </div>
     </div>
diff --git a/src/lib/UI/Realm/RealmLicense.svelte b/src/lib/UI/Realm/RealmLicense.svelte
index 175e557c..3a03e3a0 100644
--- a/src/lib/UI/Realm/RealmLicense.svelte
+++ b/src/lib/UI/Realm/RealmLicense.svelte
@@ -13,7 +13,7 @@
             openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
         }}>
             <img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
-            <span class="text-gray-500">
+            <span class="text-textcolor2">
                 Licensed with {CCLicenseData[license][2]}
             </span>
     
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index 601904be..783c13cd 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -120,7 +120,7 @@
                 <span>
                     Menu
                 </span>
-                <button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
+                <button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {menuOpen = false}}>
                     <XIcon />
                 </button>
             </h1>
diff --git a/src/lib/UI/Realm/RealmPopUp.svelte b/src/lib/UI/Realm/RealmPopUp.svelte
index 32316ee1..dd429591 100644
--- a/src/lib/UI/Realm/RealmPopUp.svelte
+++ b/src/lib/UI/Realm/RealmPopUp.svelte
@@ -14,7 +14,7 @@
 
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-white" on:click={() => {
+<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" on:click={() => {
     openedData = null
 }}>
     <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
@@ -25,7 +25,7 @@
             {/if}
             <div class="flex justify-start gap-4 mt-4">
                 <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
-                <span class="text-gray-400 break-words text-base chattext prose prose-invert">
+                <span class="text-textcolor2 break-words text-base chattext prose prose-invert">
                     {@html parseMarkdownSafe(openedData.desc)}
                 </span>
             </div>
@@ -37,24 +37,24 @@
                 {/each}
             </div>
             <div class="flex flex-wrap w-full flex-row gap-1 mt-2">
-                <span class="text-gray-500">
+                <span class="text-textcolor2">
                     {language.popularityLevel.replace('{}', openedData.download.toString())}
                 </span>
                 <div class="border-l-selected border-l ml-1 mr-1"></div>
                 {#if openedData.hasEmotion}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
                 {/if}
                 {#if openedData.hasAsset}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
                 {/if}
                 {#if openedData.hasLore}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
                 {/if}
             </div>
 
         </div>
         <div class="flex flex-row-reverse gap-2">
-            <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+            <button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
                 const conf = await alertConfirm('Report this character?')
                 if(conf){
                     const report = await alertInput('Write a report text that would be sent to the admin')
@@ -71,7 +71,7 @@
                 <FlagIcon />
             </button>
             {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
-                <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+                <button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
                     const conf = await alertConfirm('Do you want to remove this character from Realm?')
                     if(conf){
                         const da = await fetch(hubURL + '/hub/remove', {
@@ -87,7 +87,7 @@
                     <TrashIcon />
                 </button>
             {/if}
-            <button class="text-gray-400 hover:text-green-500" on:click|stopPropagation={async () => {
+            <button class="text-textcolor2 hover:text-green-500" on:click|stopPropagation={async () => {
                 await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
                 alertNormal("Copied to clipboard")
             }}>
diff --git a/src/lib/UI/Realm/RealmUpload.svelte b/src/lib/UI/Realm/RealmUpload.svelte
index 700f60f7..83dc9673 100644
--- a/src/lib/UI/Realm/RealmUpload.svelte
+++ b/src/lib/UI/Realm/RealmUpload.svelte
@@ -4,35 +4,35 @@
         
         {#if !$DataBase.account}
             <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
-            <span class="text-gray-500">You can login in app settings 🡲 account</span>
+            <span class="text-textcolor2">You can login in app settings 🡲 account</span>
             <button on:click={async () => {
                 close()
-            }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
+            }} class="text-textcolor mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
             
         {:else}
         <h1 class="font-bold text-2xl w-full">
             <span>
                 Share {char.name} to {language.hub}
             </span>
-            <button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
+            <button class="float-right text-textcolor2 hover:text-green-500" on:click={close}>
                 <XIcon />
             </button>
         </h1>
         <div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
-        <span class="text-neutral-200">{language.creatorNotes}</span>
-        <span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
-        <span class="text-gray-400 text-sm">More than 20 characters.</span>
+        <span class="text-textcolor">{language.creatorNotes}</span>
+        <span class="text-textcolor2 text-sm">A description that displays when you search and when you first open a bot.</span>
+        <span class="text-textcolor2 text-sm">More than 20 characters.</span>
         <TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
-        <span class="text-neutral-200">{language.tags}</span>
-        <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
+        <span class="text-textcolor">{language.tags}</span>
+        <span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
         <TextInput placeholder="" bind:value={tags} on:input={() => {
             tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
         }} />
 
         {#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'}
 
-        <span class="text-neutral-200 mt-4">License</span>
-        <span class="text-gray-400 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
+        <span class="text-textcolor mt-4">License</span>
+        <span class="text-textcolor2 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
         <SelectInput bind:value={license}>
             <OptionInput value="">None</OptionInput>
             {#each Object.keys(CCLicenseData) as ccl}
@@ -50,7 +50,7 @@
             <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
         </div>
         {#if nsfwMode}
-            <span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
+            <span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
         {/if}
         <Button on:click={async () => {
             if(char.creatorNotes.length < 20){
diff --git a/src/styles.css b/src/styles.css
index 30e195fa..f4d37b5e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,17 +6,27 @@ body{
   margin: 0;
   padding: 0;
   margin-top: 0px;
-  background-color: #282a36;
+  background-color: var(--risu-theme-bgcolor);
   overflow-y: hidden;
   overflow-x: hidden;
 }
 
 :root{
   --FontColorStandard: #fafafa;
-  --FontColorBold : #fafafa;
+  --FontColorBold : ##e5e5e5;
   --FontColorItalic : #8C8D93;
   --FontColorItalicBold : #8C8D93;
-  --risu-animation-speed: 0.2s
+  --risu-animation-speed: 0.2s;
+  --risu-theme-bgcolor: #282a36;
+  --risu-theme-darkbg:  #21222c;
+  --risu-theme-borderc: #6272a4;
+  --risu-theme-selected: #44475a;
+  --risu-theme-draculared: #ff5555;
+  --risu-theme-textcolor: #f5f5f5;
+  --risu-theme-textcolor2: #64748b;
+  --risu-theme-darkborderc: #4b5563;
+  --risu-theme-darkbutton: #374151;
+
 }
 
 html, body{
@@ -28,7 +38,7 @@ html, body{
 }
 
 .chattext2 pre{
-  background-color: #282a36;
+  background-color: var(--risu-theme-bgcolor);
   padding: 0.5rem;
   overflow-x: auto;
 }
@@ -126,7 +136,7 @@ html, body{
 .input-text{
   border: none;
   outline: 0;
-  border-bottom: 1px solid #6272a4;
+  border-bottom: 1px solid var(--risu-theme-borderc);
 }
 
 .bgc{
diff --git a/src/ts/gui/colorscheme.ts b/src/ts/gui/colorscheme.ts
new file mode 100644
index 00000000..431b09e5
--- /dev/null
+++ b/src/ts/gui/colorscheme.ts
@@ -0,0 +1,160 @@
+import { get } from "svelte/store";
+import { DataBase, setDatabase } from "../storage/database";
+import { cloneDeep } from "lodash";
+
+export interface ColorScheme{
+    bgcolor: string;
+    darkbg: string;
+    borderc: string;
+    selected: string;
+    draculared: string;
+    textcolor: string;
+    textcolor2: string;
+    darkBorderc: string;
+    darkbutton: string;
+    type:'light'|'dark';
+}
+
+
+export const defaultColorScheme: ColorScheme = {
+    bgcolor: "#282a36",
+    darkbg: "#21222c",
+    borderc: "#6272a4",
+    selected: "#44475a",
+    draculared: "#ff5555",
+    textcolor: "#f8f8f2",
+    textcolor2: "#64748b",
+    darkBorderc: "#4b5563",
+    darkbutton: "#374151",
+    type:'dark'
+}
+
+const colorShemes = {
+    "default": defaultColorScheme,
+    "light": {
+        bgcolor: "#f0f0f0",
+        darkbg: "#ffffff",
+        borderc: "#0f172a",
+        selected: "#e0e0e0",
+        draculared: "#ff5555",
+        textcolor: "#0f172a",
+        textcolor2: "#64748b",
+        darkBorderc: "#d1d5db",
+        darkbutton: "#e5e7eb",
+        type:'light'
+    },
+    "cherry": {
+        bgcolor: "#450a0a",
+        darkbg: "#7f1d1d",
+        borderc: "#ea580c",
+        selected: "#d97706",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#fca5a5",
+        darkBorderc: "#92400e",
+        darkbutton: "#b45309",
+        type:'dark'
+    },
+    "galaxy": {
+        bgcolor: "#0f172a",
+        darkbg: "#1f2a48",
+        borderc: "#8be9fd",
+        selected: "#457b9d",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#8be9fd",
+        darkBorderc: "#457b9d",
+        darkbutton: "#1f2a48",
+        type:'dark'
+    },
+    "nature": {
+        bgcolor: "#1b4332",
+        darkbg: "#2d6a4f",
+        borderc: "#a8dadc",
+        selected: "#4d908e",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#4d908e",
+        darkBorderc: "#457b9d",
+        darkbutton: "#2d6a4f",
+        type:'dark'
+    }
+
+} as const
+
+export const colorSchemeList = Object.keys(colorShemes) as (keyof typeof colorShemes)[]
+
+export function changeColorScheme(colorScheme: string){
+    let db = get(DataBase)
+    db.colorScheme = cloneDeep(colorShemes[colorScheme])
+    db.colorSchemeName = colorScheme
+    setDatabase(db)
+    updateColorScheme()
+}
+
+export function updateColorScheme(){
+    let db = get(DataBase)
+
+    let colorScheme = db.colorScheme
+
+    if(colorScheme == null){
+        colorScheme = defaultColorScheme
+    }
+
+    //set css variables
+    document.documentElement.style.setProperty("--risu-theme-bgcolor", colorScheme.bgcolor);
+    document.documentElement.style.setProperty("--risu-theme-darkbg", colorScheme.darkbg);
+    document.documentElement.style.setProperty("--risu-theme-borderc", colorScheme.borderc);
+    document.documentElement.style.setProperty("--risu-theme-selected", colorScheme.selected);
+    document.documentElement.style.setProperty("--risu-theme-draculared", colorScheme.draculared);
+    document.documentElement.style.setProperty("--risu-theme-textcolor", colorScheme.textcolor);
+    document.documentElement.style.setProperty("--risu-theme-textcolor2", colorScheme.textcolor2);
+    document.documentElement.style.setProperty("--risu-theme-darkborderc", colorScheme.darkBorderc);
+    document.documentElement.style.setProperty("--risu-theme-darkbutton", colorScheme.darkbutton);
+}
+
+export function updateTextTheme(){
+    let db = get(DataBase)
+    const root = document.querySelector(':root') as HTMLElement;
+    if(!root){
+        return
+    }
+    switch(db.textTheme){
+        case "standard":{
+            if(db.colorScheme.type === 'dark'){
+                root.style.setProperty('--FontColorStandard', '#fafafa');
+                root.style.setProperty('--FontColorItalic', '#8C8D93');
+                root.style.setProperty('--FontColorBold', '#fafafa');
+                root.style.setProperty('--FontColorItalicBold', '#8C8D93');
+            }else{
+                root.style.setProperty('--FontColorStandard', '#0f172a');
+                root.style.setProperty('--FontColorItalic', '#8C8D93');
+                root.style.setProperty('--FontColorBold', '#0f172a');
+                root.style.setProperty('--FontColorItalicBold', '#8C8D93');
+            }
+            break
+        }
+        case "highcontrast":{
+            if(db.colorScheme.type === 'dark'){
+                root.style.setProperty('--FontColorStandard', '#f8f8f2');
+                root.style.setProperty('--FontColorItalic', '#F1FA8C');
+                root.style.setProperty('--FontColorBold', '#8BE9FD');
+                root.style.setProperty('--FontColorItalicBold', '#FFB86C');
+            }
+            else{
+                root.style.setProperty('--FontColorStandard', '#0f172a');
+                root.style.setProperty('--FontColorItalic', '#F1FA8C');
+                root.style.setProperty('--FontColorBold', '#8BE9FD');
+                root.style.setProperty('--FontColorItalicBold', '#FFB86C');
+            }
+            break
+        }
+        case "custom":{
+            root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
+            root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
+            root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
+            root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
+            break
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/ts/process/index.ts b/src/ts/process/index.ts
index 4d092a97..0c7311c9 100644
--- a/src/ts/process/index.ts
+++ b/src/ts/process/index.ts
@@ -1,7 +1,7 @@
 import { get, writable } from "svelte/store";
 import { DataBase, setDatabase, type character } from "../storage/database";
 import { CharEmotion, selectedCharID } from "../stores";
-import { ChatTokenizer, tokenizeNum } from "../tokenizer";
+import { ChatTokenizer, tokenize, tokenizeNum } from "../tokenizer";
 import { language } from "../../lang";
 import { alertError } from "../alert";
 import { loadLoreBookPrompt } from "./lorebook";
@@ -169,7 +169,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
         'personaPrompt':([] as OpenAIChat[])
     }
 
-    if(!currentChar.utilityBot){
+    if((!currentChar.utilityBot) && (!db.promptTemplate)){
         const mainp = currentChar.systemPrompt?.replaceAll('{{original}}', db.mainPrompt) || db.mainPrompt
 
 
@@ -255,10 +255,84 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
     //await tokenize currernt
     let currentTokens = db.maxResponse
     
-    for(const key in unformated){
-        const chats = unformated[key] as OpenAIChat[]
-        for(const chat of chats){
-            currentTokens += await tokenizer.tokenizeChat(chat)
+
+    if(db.promptTemplate){
+        const template = db.promptTemplate
+
+        async function tokenizeChatArray(chats:OpenAIChat[]){
+            for(const chat of chats){
+                const tokens = await tokenizer.tokenizeChat(chat)
+                currentTokens += tokens
+            }
+        }
+
+
+        for(const card of template){
+            switch(card.type){
+                case 'persona':{
+                    await tokenizeChatArray(unformated.personaPrompt)
+                    break
+                }
+                case 'description':{
+                    await tokenizeChatArray(unformated.description)
+                    break
+                }
+                case 'authornote':{
+                    await tokenizeChatArray(unformated.authorNote)
+                    break
+                }
+                case 'lorebook':{
+                    await tokenizeChatArray(unformated.lorebook)
+                    break
+                }
+                case 'plain':
+                case 'jailbreak':{
+                    if((!db.jailbreakToggle) && (card.type === 'jailbreak')){
+                        continue
+                    }
+
+                    const convertRole = {
+                        "system": "system",
+                        "user": "user",
+                        "bot": "assistant"
+                    } as const
+
+                    let content = card.text
+
+                    if(card.type2 === 'globalNote'){
+                        content = (risuChatParser(currentChar.replaceGlobalNote?.replaceAll('{{original}}', content) || content, {chara:currentChar}))
+                    }
+                    else if(card.type2 === 'main'){
+                        content = (risuChatParser(content, {chara: currentChar}))
+                    }
+                    else{
+                        content = risuChatParser(content, {chara: currentChar})
+                    }
+
+                    const prompt:OpenAIChat ={
+                        role: convertRole[card.role],
+                        content: content
+                    }
+
+                    await tokenizeChatArray([prompt])
+                    break
+                }
+                case 'chat':{
+                    const start = card.rangeStart
+                    const end = (card.rangeEnd === 'end') ? unformated.chats.length : card.rangeEnd
+                    const chats = unformated.chats.slice(start, end)
+                    await tokenizeChatArray(chats)
+                    break
+                }
+            }
+        }
+    }
+    else{
+        for(const key in unformated){
+            const chats = unformated[key] as OpenAIChat[]
+            for(const chat of chats){
+                currentTokens += await tokenizer.tokenizeChat(chat)
+            }
         }
     }
 
@@ -293,10 +367,11 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
 
     let ms = currentChat.message
 
-    const triggerResult = runTrigger(currentChar, 'start', {chat: currentChat})
+    const triggerResult = await runTrigger(currentChar, 'start', {chat: currentChat})
     if(triggerResult){
         currentChat = triggerResult.chat
         ms = currentChat.message
+        currentTokens += triggerResult.tokens
     }
 
     for(const msg of ms){
@@ -406,42 +481,97 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
     let formated:OpenAIChat[] = []
     const formatOrder = cloneDeep(db.formatingOrder)
     formatOrder.push('postEverything')
-    let sysPrompts:string[] = []
-    for(let i=0;i<formatOrder.length;i++){
-        const cha = unformated[formatOrder[i]]
-        if(cha.length === 1 && cha[0].content.length === 0){
-            continue
-        }
-        else if(cha.length === 1 && cha[0].role === 'system'){
-            sysPrompts.push(cha[0].content)
-        }
-        else if(sysPrompts.length > 0){
-            const prompt = sysPrompts.join('\n')
 
-            if(prompt.replace(/\n/g,'').length > 3){
-                formated.push({
-                    role: 'system',
-                    content: prompt
-                })
+
+    function pushPrompts(cha:OpenAIChat[]){
+        for(const chat of cha){
+            if(!chat.content){
+                continue
+            }
+            if(chat.role === 'system'){
+                const endf = formated.at(-1)
+                if(endf && endf.role === 'system' && endf.memo === chat.memo && endf.name === chat.name){
+                    formated[formated.length - 1].content += '\n\n' + chat.content
+                }
+                else{
+                    formated.push(chat)
+                }
+                formated.at(-1).content += ''
+            }
+            else{
+                formated.push(chat)
             }
-            sysPrompts = []
-            formated = formated.concat(cha)
-        }
-        else{
-            formated = formated.concat(cha)
         }
     }
 
-    if(sysPrompts.length > 0){
-        const prompt = sysPrompts.join('\n')
+    if(db.promptTemplate){
+        const template = db.promptTemplate
 
-        if(prompt.replace(/\n/g,'').length > 3){
-            formated.push({
-                role: 'system',
-                content: prompt
-            })
+        for(const card of template){
+            switch(card.type){
+                case 'persona':{
+                    pushPrompts(unformated.personaPrompt)
+                    break
+                }
+                case 'description':{
+                    pushPrompts(unformated.description)
+                    break
+                }
+                case 'authornote':{
+                    pushPrompts(unformated.authorNote)
+                    break
+                }
+                case 'lorebook':{
+                    pushPrompts(unformated.lorebook)
+                    break
+                }
+                case 'plain':
+                case 'jailbreak':{
+                    if((!db.jailbreakToggle) && (card.type === 'jailbreak')){
+                        continue
+                    }
+
+                    const convertRole = {
+                        "system": "system",
+                        "user": "user",
+                        "bot": "assistant"
+                    } as const
+
+                    let content = card.text
+
+                    if(card.type2 === 'globalNote'){
+                        content = (risuChatParser(currentChar.replaceGlobalNote?.replaceAll('{{original}}', content) || content, {chara:currentChar}))
+                    }
+                    else if(card.type2 === 'main'){
+                        content = (risuChatParser(content, {chara: currentChar}))
+                    }
+                    else{
+                        content = risuChatParser(content, {chara: currentChar})
+                    }
+
+                    const prompt:OpenAIChat ={
+                        role: convertRole[card.role],
+                        content: content
+                    }
+
+                    pushPrompts([prompt])
+                    break
+                }
+                case 'chat':{
+                    const start = card.rangeStart
+                    const end = (card.rangeEnd === 'end') ? unformated.chats.length : card.rangeEnd
+                    const chats = unformated.chats.slice(start, end)
+                    pushPrompts(chats)
+                    break
+                }
+            }
+        }
+    }
+    else{
+        for(let i=0;i<formatOrder.length;i++){
+            const cha = unformated[formatOrder[i]]
+            pushPrompts(cha)
         }
-        sysPrompts = []
     }
 
 
@@ -495,7 +625,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
             }   
         }
         
-        const triggerResult = runTrigger(currentChar, 'output', {chat:currentChat})
+        const triggerResult = await runTrigger(currentChar, 'output', {chat:currentChat})
         if(triggerResult){
             db.characters[selectedChar].chats[selectedChat] = triggerResult.chat
             setDatabase(db)
@@ -517,7 +647,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                 saying: currentChar.chaId
             })
             db.characters[selectedChar].reloadKeys += 1
-            const triggerResult = runTrigger(currentChar, 'output', {chat:currentChat})
+            const triggerResult = await runTrigger(currentChar, 'output', {chat:currentChat})
             if(triggerResult){
                 db.characters[selectedChar].chats[selectedChat] = triggerResult.chat
             }
diff --git a/src/ts/process/memory/supaMemory.ts b/src/ts/process/memory/supaMemory.ts
index ff9bdbf0..951ff988 100644
--- a/src/ts/process/memory/supaMemory.ts
+++ b/src/ts/process/memory/supaMemory.ts
@@ -205,6 +205,7 @@ export async function supaMemory(
             const hypa = new HypaProcesser()
             hypa.oaikey = db.supaMemoryKey
             hypa.vectors = []
+            hypaChunks = hypaChunks.filter((value) => value.length > 1)
             await hypa.addText(hypaChunks.filter((value, index, self) => {
                 return self.indexOf(value) === index;
             }))
diff --git a/src/ts/process/proompt.ts b/src/ts/process/proompt.ts
new file mode 100644
index 00000000..01bcd966
--- /dev/null
+++ b/src/ts/process/proompt.ts
@@ -0,0 +1,19 @@
+export type Proompt = ProomptPlain|ProomptTyped|ProomptChat;
+
+export interface ProomptPlain {
+    type: 'plain'|'jailbreak';
+    type2: 'normal'|'globalNote'|'main'
+    text: string;
+    role: 'user'|'bot'|'system';
+}
+
+export interface ProomptTyped {
+    type: 'persona'|'description'|'authornote'|'lorebook'
+}
+
+
+export interface ProomptChat {
+    type: 'chat';
+    rangeStart: number;
+    rangeEnd: number|'end';
+}
\ No newline at end of file
diff --git a/src/ts/process/request.ts b/src/ts/process/request.ts
index ab8a01aa..aeedfffd 100644
--- a/src/ts/process/request.ts
+++ b/src/ts/process/request.ts
@@ -4,7 +4,7 @@ import { DataBase, setDatabase, type character } from "../storage/database";
 import { pluginProcess } from "../plugins/plugins";
 import { language } from "../../lang";
 import { stringlizeAINChat, stringlizeChat, stringlizeChatOba, getStopStrings, unstringlizeAIN, unstringlizeChat } from "./stringlize";
-import { globalFetch, isNodeServer, isTauri } from "../storage/globalApi";
+import { addFetchLog, globalFetch, isNodeServer, isTauri } from "../storage/globalApi";
 import { sleep } from "../util";
 import { createDeep } from "./deepai";
 import { hubURL } from "../characterCards";
@@ -213,6 +213,15 @@ export async function requestChatDataMain(arg:requestDataArgument, model:'model'
             let throughProxi = (!isTauri) && (!isNodeServer) && (!db.usePlainFetch)
             if(db.useStreaming && arg.useStreaming){
                 body.stream = true
+                let urlHost = new URL(replacerURL).host
+                if(urlHost.includes("localhost") || urlHost.includes("172.0.0.1") || urlHost.includes("0.0.0.0")){
+                    if(!isTauri){
+                        return {
+                            type: 'fail',
+                            result: 'You are trying local request on streaming. this is not allowed dude to browser/os security policy. turn off streaming.',
+                        }
+                    }
+                }
                 const da =  (throughProxi)
                     ? await fetch(hubURL + `/proxy2`, {
                         body: JSON.stringify(body),
@@ -246,6 +255,13 @@ export async function requestChatDataMain(arg:requestDataArgument, model:'model'
                     }
                 }
 
+                addFetchLog({
+                    body: body,
+                    response: "Streaming",
+                    success: true,
+                    url: replacerURL,
+                })
+
                 let dataUint = new Uint8Array([])
 
                 const transtream = new TransformStream<Uint8Array, string>(  {
diff --git a/src/ts/process/triggers.ts b/src/ts/process/triggers.ts
index 2dfc97db..f896653e 100644
--- a/src/ts/process/triggers.ts
+++ b/src/ts/process/triggers.ts
@@ -1,6 +1,7 @@
 import { cloneDeep } from "lodash";
 import { getVarChat, risuChatParser } from "../parser";
 import type { Chat, character } from "../storage/database";
+import { tokenize } from "../tokenizer";
 
 export interface triggerscript{
     comment: string;
@@ -58,7 +59,7 @@ export type additonalSysPrompt = {
     promptend: string
 }
 
-export function runTrigger(char:character,mode:triggerMode, arg:{
+export async function runTrigger(char:character,mode:triggerMode, arg:{
     chat?: Chat
 } = {}){
     char = cloneDeep(char)
@@ -189,6 +190,17 @@ export function runTrigger(char:character,mode:triggerMode, arg:{
     if(arg.chat !== undefined && arg.chat !== null){
         char.chats[char.chatPage] = chat
     }
-    return {additonalSysPrompt, chat}
+    let caculatedTokens = 0
+    if(additonalSysPrompt.start){
+        caculatedTokens += await tokenize(additonalSysPrompt.start)
+    }
+    if(additonalSysPrompt.historyend){
+        caculatedTokens += await tokenize(additonalSysPrompt.historyend)
+    }
+    if(additonalSysPrompt.promptend){
+        caculatedTokens += await tokenize(additonalSysPrompt.promptend)
+    }
+
+    return {additonalSysPrompt, chat, tokens:caculatedTokens}
 
 }
\ No newline at end of file
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index fa65825a..6fe83d6d 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -9,10 +9,12 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.
 import { alertNormal } from '../alert';
 import type { NAISettings } from '../process/models/nai';
 import { prebuiltNAIpresets } from '../process/templates/templates';
+import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
+import type { Proompt } from '../process/proompt';
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.44.2'
+export let appVer = '1.45.0'
 export let webAppSubVer = ''
 
 export function setDatabase(data:Database){
@@ -294,6 +296,8 @@ export function setDatabase(data:Database){
     data.NAIsettings ??= cloneDeep(prebuiltNAIpresets)
     data.assetWidth ??= -1
     data.animationSpeed ??= 0.4
+    data.colorScheme ??= cloneDeep(defaultColorScheme)
+    data.colorSchemeName ??= 'default'
     
     changeLanguage(data.language)
     DataBase.set(data)
@@ -604,6 +608,9 @@ export interface Database{
     botSettingAtStart:false
     NAIsettings:NAISettings
     hideRealm:boolean
+    colorScheme:ColorScheme
+    colorSchemeName:string
+    promptTemplate?:Proompt[]
 }
 
 interface hordeConfig{
@@ -789,37 +796,6 @@ export const defaultSdDataFunc = () =>{
     return cloneDeep(defaultSdData)
 }
 
-export function updateTextTheme(){
-    let db = get(DataBase)
-    const root = document.querySelector(':root') as HTMLElement;
-    if(!root){
-        return
-    }
-    switch(db.textTheme){
-        case "standard":{
-            root.style.setProperty('--FontColorStandard', '#fafafa');
-            root.style.setProperty('--FontColorItalic', '#8C8D93');
-            root.style.setProperty('--FontColorBold', '#fafafa');
-            root.style.setProperty('--FontColorItalicBold', '#8C8D93');
-            break
-        }
-        case "highcontrast":{
-            root.style.setProperty('--FontColorStandard', '#f8f8f2');
-            root.style.setProperty('--FontColorItalic', '#F1FA8C');
-            root.style.setProperty('--FontColorBold', '#8BE9FD');
-            root.style.setProperty('--FontColorItalicBold', '#FFB86C');
-            break
-        }
-        case "custom":{
-            root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
-            root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
-            root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
-            root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
-            break
-        }
-    }
-}
-
 export function saveCurrentPreset(){
     let db = get(DataBase)
     let pres = db.botPresets
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index daca7bda..8ed6e5dd 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { appDataDir, join } from "@tauri-apps/api/path";
 import { get } from "svelte/store";
 import {open} from '@tauri-apps/api/shell'
-import { DataBase, loadedStore, setDatabase, type Database, updateTextTheme, defaultSdDataFunc } from "./database";
+import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database";
 import { appWindow } from "@tauri-apps/api/window";
 import { checkOldDomain, checkUpdate } from "../update";
 import { botMakerMode, selectedCharID } from "../stores";
@@ -21,6 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { AutoStorage } from "./autoStorage";
 import { updateAnimationSpeed } from "../gui/animation";
+import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -425,6 +426,7 @@ export async function loadData() {
             }
             await checkNewFormat()
             const db = get(DataBase);
+            updateColorScheme()
             updateTextTheme()
             updateAnimationSpeed()
             if(db.botSettingAtStart){
@@ -441,6 +443,23 @@ export async function loadData() {
 
 const knownHostes = ["localhost","127.0.0.1"]
 
+export function addFetchLog(arg:{
+    body:any,
+    headers?:{[key:string]:string},
+    response:any,
+    success:boolean,
+    url:string
+}){
+    fetchLog.unshift({
+        body: JSON.stringify(arg.body, null, 2),
+        header: JSON.stringify(arg.headers ?? {}, null, 2),
+        response: JSON.stringify(arg.response, null, 2),
+        success: arg.success,
+        date: (new Date()).toLocaleTimeString(),
+        url: arg.url
+    })
+}
+
 export async function globalFetch(url:string, arg:{
     plainFetchForce?:boolean,
     body?:any,
@@ -492,6 +511,17 @@ export async function globalFetch(url:string, arg:{
     
         const urlHost = (new URL(url)).hostname
         let forcePlainFetch = (knownHostes.includes(urlHost) && (!isTauri)) || db.usePlainFetch || arg.plainFetchForce
+
+        console.log(urlHost)
+        //check if the url is a local url like localhost
+        if(urlHost.includes("localhost") || urlHost.includes("172.0.0.1") || urlHost.includes("0.0.0.0")){
+            return {
+                ok: false,
+                data: 'You are trying local request on web version. this is not allowed dude to browser security policy. use the desktop version instead, or use tunneling service like ngrok and set the cors to allow all.',
+                headers: {}
+            }
+        }
+
         if(forcePlainFetch){
             try {
                 let headers = arg.headers ?? {}
diff --git a/tailwind.config.js b/tailwind.config.js
index 697fe8c8..112e5f87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,11 +7,15 @@ export default {
   theme: {
     extend: {
       colors:{
-          bgcolor: "#282a36",
-          darkbg: "#21222C",
-          borderc: "#6272a4",
-          selected: "#44475a",
-          draculared: "#ff5555"
+          bgcolor: "var(--risu-theme-bgcolor)",
+          darkbg: "var(--risu-theme-darkbg)",
+          borderc: "var(--risu-theme-borderc)",
+          selected: "var(--risu-theme-selected)",
+          draculared: "var(--risu-theme-draculared)",
+          textcolor: "var(--risu-theme-textcolor)",
+          textcolor2: "var(--risu-theme-textcolor2)",
+          darkborderc: "var(--risu-theme-darkborderc)",
+          darkbutton: "var(--risu-theme-darkbutton)",
       },
       minWidth: {
         '2': '0.5rem',
diff --git a/version.json b/version.json
index 5d675412..32664d80 100644
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.44.2"}
\ No newline at end of file
+{"version":"1.45.0"}
\ No newline at end of file