diff --git a/src/lib/Setting/Pages/Module/ModuleMenu.svelte b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
index f3d5e04e..03f35715 100644
--- a/src/lib/Setting/Pages/Module/ModuleMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
@@ -103,8 +103,8 @@
 </script>
 
 <span class="mt-4 text-xl">{language.basicInfo}</span>
-<TextInput bind:value={currentModule.name} additionalClass="mt-1" placeholder={language.name}/>
-<TextInput bind:value={currentModule.description} additionalClass="mt-1" placeholder={language.description} size="sm"/>
+<TextInput bind:value={currentModule.name} className="mt-1" placeholder={language.name}/>
+<TextInput bind:value={currentModule.description} className="mt-1" placeholder={language.description} size="sm"/>
 <span class="mt-6 text-xl">{language.moduleContent}</span>
 <div class="grid grid-cols-2 border-selected border rounded-md">
     <button class={(!Array.isArray(currentModule.lorebook)) ? 'p-4' : "p-4 bg-selected rounded-tl-md"} on:click={toggleLorebook}>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 1ca7b1e8..295180e9 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -624,10 +624,10 @@
         {/if}
         {#if currentChar.data.ttsMode === 'huggingface'}
             <span class="text-textcolor">Model</span>
-            <TextInput additionalClass="mb-4 mt-2" bind:value={currentChar.data.hfTTS.model} />
+            <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.model} />
 
             <span class="text-textcolor">Language</span>
-            <TextInput additionalClass="mb-4 mt-2" bind:value={currentChar.data.hfTTS.language} placeholder="en" />
+            <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.language} placeholder="en" />
         {/if}
         {#if currentChar.data.ttsMode === 'vits'}
             {#if currentChar.data.vits}
@@ -693,8 +693,8 @@
 
         <span class="text-textcolor">{language.depthPrompt}</span>
         <div class="flex justify-center items-center">
-            <NumberInput size="sm" bind:value={currentChar.data.depth_prompt.depth} additionalClass="w-12"/>
-            <TextInput size="sm" bind:value={currentChar.data.depth_prompt.prompt} additionalClass="flex-1"/>
+            <NumberInput size="sm" bind:value={currentChar.data.depth_prompt.depth} className="w-12"/>
+            <TextInput size="sm" bind:value={currentChar.data.depth_prompt.prompt} className="flex-1"/>
         </div>
 
         <span class="text-textcolor mt-2">{language.altGreet}</span>
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index c95bab1a..c63ca36f 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -43,7 +43,7 @@
             }
         }} 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}/>
+                <TextInput bind:value={chara.chats[i].name} className="flex-grow min-w-0" padding={false}/>
             {:else}
                 <span>{chat.name}</span>
             {/if}
diff --git a/src/lib/UI/GUI/MultiLangInput.svelte b/src/lib/UI/GUI/MultiLangInput.svelte
index de888c64..e6cfa785 100644
--- a/src/lib/UI/GUI/MultiLangInput.svelte
+++ b/src/lib/UI/GUI/MultiLangInput.svelte
@@ -57,4 +57,4 @@
 <TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => {
     updateValue()
     onInput()
-}} additionalClass={className} />
\ No newline at end of file
+}} className={className} />
\ No newline at end of file
diff --git a/src/lib/UI/GUI/NumberInput.svelte b/src/lib/UI/GUI/NumberInput.svelte
index f6fdac43..46e07d5d 100644
--- a/src/lib/UI/GUI/NumberInput.svelte
+++ b/src/lib/UI/GUI/NumberInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    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={"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" + ((className) ? (' ' + className) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
@@ -31,7 +31,7 @@
     export let fullwidth = false
     export let fullh = false
     export let onChange = () => {}
-    export let additionalClass = ''
+    export let className = ''
 </script>
 
 <style>
diff --git a/src/lib/UI/GUI/OptionalInput.svelte b/src/lib/UI/GUI/OptionalInput.svelte
index 76e859ae..568866e4 100644
--- a/src/lib/UI/GUI/OptionalInput.svelte
+++ b/src/lib/UI/GUI/OptionalInput.svelte
@@ -32,15 +32,15 @@
     </div>
 
     {#if (value === null || value === undefined)}
-        <TextInput value={"Using default"}  additionalClass="flex-1" disabled/>
+        <TextInput value={"Using default"}  className="flex-1" disabled/>
     {:else if typeof(value) === 'string'}
-        <TextInput bind:value={value}  additionalClass="flex-1"/>
+        <TextInput bind:value={value}  className="flex-1"/>
     {:else if typeof(value) === 'number'}
-        <NumberInput bind:value={value}  additionalClass="flex-1"/>
+        <NumberInput bind:value={value}  className="flex-1"/>
     {:else if typeof(value) === 'boolean'}
         <button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={!value} on:click={valToggle}>True</button>
         <button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={value} on:click={valToggle}>False</button>
     {:else}
-        <TextInput value={"Using default"}  additionalClass="flex-1" disabled/>
+        <TextInput value={"Using default"}  className="flex-1" disabled/>
     {/if}
 </div>
\ No newline at end of file
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index a73763ca..0c10c3b2 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-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={"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" + ((className) ? (' ' + className) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
@@ -37,7 +37,7 @@
     />
 {:else}
     <textarea 
-        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={"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" + ((className) ? (' ' + className) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
@@ -74,7 +74,7 @@
     export let onInput = () => {}
     export let fullwidth = false
     export let height:'20'|'24'|'32'|'full' = '20'
-    export let additionalClass = ''
+    export let className = ''
     export let optimaizedInput = true
     let inpa = 0
 
diff --git a/src/lib/UI/GUI/TextInput.svelte b/src/lib/UI/GUI/TextInput.svelte
index ee9beed6..47ef0f73 100644
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/src/lib/UI/GUI/TextInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    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={"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'}
@@ -39,6 +39,6 @@
     export let onInput = () => {}
     export let fullwidth = false
     export let fullh = false
-    export let additionalClass = ''
+    export let className = ''
     export let disabled = false
 </script>
\ No newline at end of file
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index 0adaf15d..a376bca2 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -37,9 +37,9 @@
 <div class="w-full flex justify-center mt-4">
     <div class="flex w-2xl max-w-full items-center">
         {#if $SizeStore.w < 768}
-            <TextInput additionalClass="flex-grow min-w-0" placeholder="Search" bind:value={search} />
+            <TextInput className="flex-grow min-w-0" placeholder="Search" bind:value={search} />
         {:else}
-            <TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} />
+            <TextInput size="xl" className="flex-grow" placeholder="Search" bind:value={search} />
 
         {/if}
         <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={() => {