diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 4e39e075..84f6bfc5 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "RisuAI",
-    "version": "1.24.1"
+    "version": "1.24.2"
   },
   "tauri": {
     "allowlist": {
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 43254ce8..57f48395 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -303,4 +303,6 @@ export const languageChinese = {
     tags: "标签",
     copied: "已复制",
     useChatCopy: "使用聊天复制",
+    autoTranslateInput: "使用自动翻译输入",
+    enterMessageForTranslateToEnglish: "输入要翻译为英语的消息",
 }
\ No newline at end of file
diff --git a/src/lang/en.ts b/src/lang/en.ts
index ecd47d60..14a67f82 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -307,4 +307,10 @@ export const languageEnglish = {
     backgroundHTML: "Background Embedding",
     copied: "Copied",
     useChatCopy: "Use Chat Message Copy",
+    autoTranslateInput: "Auto Translate Input",
+    enterMessageForTranslateToEnglish: "Enter Message for Translate to English",
+    recent: 'Recent',
+    downloads: 'Downloads',
+    trending: "Trending"
+
 }
\ No newline at end of file
diff --git a/src/lang/ko.ts b/src/lang/ko.ts
index c8a0a245..dd6aa543 100644
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -279,4 +279,6 @@ export const languageKorean = {
     backgroundHTML: "백그라운드 임베딩",
     copied: "복사됨",
     useChatCopy: "채팅 메시지 복사 사용",
+    autoTranslateInput: "입력 자동 번역",
+    enterMessageForTranslateToEnglish: "영어로 번역할 메시지를 입력해주세요",
 }
\ No newline at end of file
diff --git a/src/lib/ChatScreens/BackgroundDom.svelte b/src/lib/ChatScreens/BackgroundDom.svelte
index 193e6dea..999511a3 100644
--- a/src/lib/ChatScreens/BackgroundDom.svelte
+++ b/src/lib/ChatScreens/BackgroundDom.svelte
@@ -11,7 +11,7 @@
 
     function checkUpdate(){
         if(selectedId > 0 && lastdb){
-            if(lastdb.characters[selectedId].backgroundHTML !== backgroundHTML){
+            if(lastdb.characters[selectedId] && lastdb.characters[selectedId].backgroundHTML !== backgroundHTML){
                 backgroundHTML = lastdb.characters[selectedId].backgroundHTML
                 currentChar = lastdb.characters[selectedId]
             }
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 8b3da038..403f7ba8 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -16,8 +16,10 @@
     import CreatorQuote from "./CreatorQuote.svelte";
     import { stopTTS } from "src/ts/process/tts";
     import MainMenu from '../UI/MainMenu.svelte';
+    import Help from '../Others/Help.svelte';
 
-    let messageInput = ''
+    let messageInput:string = ''
+    let messageInputTranslate:string = ''
     let openMenu = false
     export let openChatList = false
     let loadPages = 30
@@ -26,6 +28,7 @@
     let rerollid = -1
     let lastCharId = -1
     let doingChatInputTranslate = false
+
     async function send() {
         let selectedChar = $selectedCharID
         console.log('send')
@@ -67,10 +70,11 @@
             }
         }
         messageInput = ''
+        messageInputTranslate = ''
         $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message = cha
         rerolls = []
         await sleep(10)
-        updateInputSize()
+        updateInputSizeAll()
         await sendChatMain()
 
     }
@@ -170,7 +174,21 @@
     export let customStyle = ''
     let inputHeight = "44px"
     let inputEle:HTMLTextAreaElement
+    let inputTranslateHeight = "44px"
+    let inputTranslateEle:HTMLTextAreaElement
 
+    function updateInputSizeAll() {
+        updateInputSize()
+        updateInputTranslateSize()
+    }
+
+    function updateInputTranslateSize() {
+        if(inputTranslateEle) {
+            inputTranslateEle.style.height = "0";
+            inputTranslateHeight = (inputTranslateEle.scrollHeight) + "px";
+            inputTranslateEle.style.height = inputTranslateHeight
+        }
+    }
     function updateInputSize() {
         if(inputEle){
             inputEle.style.height = "0";
@@ -179,7 +197,26 @@
         }
     }
 
-    $: updateInputSize()
+    $: updateInputSizeAll()
+
+    function updateInputTransateMessage(reverse: boolean) {
+        if(reverse && messageInputTranslate === '') {
+            messageInput = ''
+            return
+        }
+        if(!reverse && messageInput === '') {
+            messageInputTranslate = ''
+            return
+        }
+        translate(reverse ? messageInputTranslate : messageInput, reverse).then((translatedMessage) => {
+            if(translatedMessage){
+                if(reverse)
+                    messageInput = translatedMessage
+                else
+                    messageInputTranslate = translatedMessage
+            }
+        })
+    }
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="w-full h-full" style={customStyle} on:click={() => {
@@ -211,7 +248,7 @@
                             e.preventDefault()
                         }
                     }}
-                    on:input={updateInputSize}
+                    on:input={()=>{updateInputSizeAll();updateInputTransateMessage(false)}}
                     style:height={inputHeight}
                 />
 
@@ -234,6 +271,33 @@
                     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 />
                     </div>
             </div>
+            {#if $DataBase.useAutoTranslateInput && $DataBase.useExperimental}
+                <div class="flex items-center mt-2 mb-2 w-full">
+                    <label for='messageInputTranslate' class="text-neutral-200 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"
+                        bind:value={messageInputTranslate}
+                        bind:this={inputTranslateEle}
+                        on:keydown={(e) => {
+                            if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
+                                if($DataBase.sendWithEnter){
+                                    send()
+                                    e.preventDefault()
+                                }
+                            }
+                            if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
+                                reroll()
+                                e.preventDefault()
+                            }
+                        }}
+                        on:input={()=>{updateInputSizeAll();updateInputTransateMessage(true)}}
+                        placeholder={language.enterMessageForTranslateToEnglish}
+                        style:height={inputTranslateHeight}
+                    />
+                </div>
+            {/if}
+            
             {#if $DataBase.useAutoSuggestions}
                 <Suggestion messageInput={(msg)=>messageInput=msg} {send}/>
             {/if}
@@ -362,7 +426,18 @@
                             <LanguagesIcon />
                             <span class="ml-2">{language.translateInput}</span>
                         </div>
+                        {#if $DataBase.useExperimental}
+                            <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} on:click={() => {
+                                $DataBase.useAutoTranslateInput = !$DataBase.useAutoTranslateInput
+                            }}>
+                                <LanguagesIcon />
+                                <span class="ml-2">{language.autoTranslateInput}</span>
+                                <Help key="experimental" />
+                            </div>
+                        {/if}
+                        
                     {/if}
+                    
                     <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} on:click={async () => {
                         $DataBase.useAutoSuggestions = !$DataBase.useAutoSuggestions
                     }}>
diff --git a/src/lib/ChatScreens/Suggestion.svelte b/src/lib/ChatScreens/Suggestion.svelte
index 9ae4309f..2cd0c447 100644
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -11,6 +11,7 @@
     import { onDestroy } from 'svelte';
     import { processScript } from "src/ts/process/scripts";
     import { get } from "svelte/store";
+    import { ParseMarkdown } from "src/ts/parser";
 
     export let send: () => any;
     export let messageInput:(string:string) => any;
@@ -68,10 +69,9 @@
                 role:'system',
                 content: replacePlaceholders($DataBase.autoSuggestPrompt, currentChar.name)
             }
-            ,
-            {
+            ,{
                 role: 'user', 
-                content: lastMessages.map(b=>(b.role==='char'? 'assistant' : 'user')+":"+b.data).reduce((a,b)=>a+','+b)
+                content: lastMessages.map(b=>(b.role==='char'? currentChar.name : $DataBase.username)+":"+b.data).reduce((a,b)=>a+','+b)
             }
             ]
 
@@ -118,16 +118,18 @@
             <div>{language.creatingSuggestions}</div>
         </div>        
     {:else if !$doingChat}
-        <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')}
-                on:click={() => {
-                    toggleTranslate = !toggleTranslate
-                    // translateSuggest(toggleTranslate, suggestMessages)
-                }}
-            >
-                <LanguagesIcon/>
-            </button>
-        </div>
+        {#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')}
+                    on:click={() => {
+                        toggleTranslate = !toggleTranslate
+                    }}
+                >
+                    <LanguagesIcon/>
+                </button>
+            </div>    
+        {/if}
+        
 
         <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"
@@ -151,11 +153,9 @@
                     messageInput(suggest)
                     send()
                 }}>
-                {#if toggleTranslate && suggestMessagesTranslated && suggestMessagesTranslated.length > 0}
-                    {suggestMessagesTranslated[i]??suggest}
-                {:else}
-                    {suggest}
-                {/if}
+                {#await ParseMarkdown(($DataBase.translator !== '' && toggleTranslate && suggestMessagesTranslated && suggestMessagesTranslated.length > 0) ? suggestMessagesTranslated[i]??suggest : suggest) then md}
+                    {@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={() => {
                     messageInput(suggest)
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index 2309b7bb..ab4df6cb 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -3,6 +3,7 @@
 import { changeLanguage, language } from "src/lang";
     import { DataBase } from "src/ts/storage/database";
     import { sleep } from "src/ts/util";
+    import Help from "src/lib/Others/Help.svelte";
     let langChanged = false
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
@@ -39,4 +40,11 @@ import { changeLanguage, language } from "src/lang";
         <Check bind:check={$DataBase.autoTranslate} />
         <span>{language.autoTranslation}</span>
     </div>
+    {#if $DataBase.useExperimental}
+        <div class="flex items-center mt-2">
+            <Check bind:check={$DataBase.useAutoTranslateInput} />
+            <span>{language.autoTranslateInput}</span>
+            <Help key="experimental" />
+        </div>
+    {/if}
 {/if}
\ No newline at end of file
diff --git a/src/lib/UI/Hub.svelte b/src/lib/UI/Hub.svelte
index 20568073..09c8db45 100644
--- a/src/lib/UI/Hub.svelte
+++ b/src/lib/UI/Hub.svelte
@@ -3,6 +3,7 @@
     import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
   import { parseMarkdownSafe } from "src/ts/parser";
+  import { language } from "src/lang";
 
     let openedData:null|{
         name:string
@@ -23,14 +24,18 @@
     }[] = []
 
     let page = 0
+    let sort = ''
 
     let search = ''
     let menuOpen = false
+    let nsfw = false
 
     async function getHub(){
         charas = await getRisuHub({
             search: search,
-            page: page
+            page: page,
+            nsfw: nsfw,
+            sort: sort
         })
     }
 
@@ -38,7 +43,7 @@
 
 
 </script>
-<div class="w-full flex justify-center mt-4 mb-3">
+<div class="w-full flex justify-center mt-4">
     <div class="flex w-2xl max-w-full items-center">
         <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
@@ -54,6 +59,33 @@
         </button>
     </div>
 </div>
+<div class="w-full mt-2 flex justify-center mb-3 items-center">
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} on:click={() => {
+        nsfw = !nsfw
+        getHub()
+    }}>
+        {nsfw ? 'NSFW ON': 'NSFW OFF'}
+    </button>
+    <div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
+        sort = ''
+        getHub()
+    }}>
+        {language.recent}
+    </button>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} on:click={() => {
+        sort = 'trending'
+        getHub()
+    }}>
+        {language.trending}
+    </button>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} on:click={() => {
+        sort = 'downloads'
+        getHub()
+    }}>
+        {language.downloads}
+    </button>
+</div>
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
     {#key charas}
         {#each charas as chara}
diff --git a/src/ts/characterCards.ts b/src/ts/characterCards.ts
index eb778b68..ef7603d6 100644
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -654,7 +654,9 @@ export async function shareRisuHub(char:character, arg:{
 
 export async function getRisuHub(arg?:{
     search?:string,
-    page?:number
+    page?:number,
+    nsfw?:boolean
+    sort?:string
 }):Promise<{
     name:string
     desc: string
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index b55e788a..74931499 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -8,7 +8,7 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.24.1'
+export let appVer = '1.24.2'
 
 export function setDatabase(data:Database){
     if(checkNullish(data.characters)){
@@ -502,8 +502,9 @@ export interface Database{
     useAutoSuggestions:boolean
     autoSuggestPrompt:string,
     claudeAPIKey:string,
-    novellistAPI:string
     useChatCopy:boolean,
+    novellistAPI:string,
+    useAutoTranslateInput:boolean
 }
 
 interface hordeConfig{
diff --git a/version.json b/version.json
index 5539bf1a..bb93f1ee 100644
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.24.1"}
\ No newline at end of file
+{"version":"1.24.2"}
\ No newline at end of file