diff --git a/src/lib/Playground/PlaygroundJinja.svelte b/src/lib/Playground/PlaygroundJinja.svelte
index 9ef11f68..190349e0 100644
--- a/src/lib/Playground/PlaygroundJinja.svelte
+++ b/src/lib/Playground/PlaygroundJinja.svelte
@@ -28,12 +28,12 @@
 
 <span class="text-textcolor text-lg">Jinja</span>
 
-<TextAreaInput onInput={onInput} bind:value={input} height="32" />
+<TextAreaInput onInput={onInput} bind:value={input} />
 
 <span class="text-textcolor text-lg">Data (JSON)</span>
 
-<TextAreaInput onInput={onInput} bind:value={json} height="32" />
+<TextAreaInput onInput={onInput} bind:value={json} />
 
 <span class="text-textcolor text-lg">Result</span>
 
-<TextAreaInput value={output} height="32" />
\ No newline at end of file
+<TextAreaInput value={output} />
\ No newline at end of file
diff --git a/src/lib/Playground/PlaygroundSyntax.svelte b/src/lib/Playground/PlaygroundSyntax.svelte
index 2d425fec..8a665be5 100644
--- a/src/lib/Playground/PlaygroundSyntax.svelte
+++ b/src/lib/Playground/PlaygroundSyntax.svelte
@@ -20,8 +20,8 @@
 
 <span class="text-textcolor text-lg">Input</span>
 
-<TextAreaInput onInput={onInput} bind:value={input} height="32" optimaizedInput={false} />
+<TextAreaInput onInput={onInput} bind:value={input} optimaizedInput={false} />
 
 <span class="text-textcolor text-lg">Result</span>
 
-<TextAreaInput value={output} height="32" />
\ No newline at end of file
+<TextAreaInput value={output} />
\ No newline at end of file
diff --git a/src/lib/Playground/PlaygroundTokenizer.svelte b/src/lib/Playground/PlaygroundTokenizer.svelte
index 09c68d88..ab840b52 100644
--- a/src/lib/Playground/PlaygroundTokenizer.svelte
+++ b/src/lib/Playground/PlaygroundTokenizer.svelte
@@ -22,10 +22,10 @@
 
 <span class="text-textcolor text-lg">Input</span>
 
-<TextAreaInput onInput={onInput} bind:value={input} height="32" optimaizedInput={false} />
+<TextAreaInput onInput={onInput} bind:value={input} optimaizedInput={false} />
 
 <span class="text-textcolor text-lg">Result</span>
 
-<TextAreaInput value={output} height="32" />
+<TextAreaInput value={output} />
 
 <span class="text-textcolor2 text-lg">{outputLength} {language.tokens}</span>
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 5a6886a2..cbf22812 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -441,7 +441,7 @@
     </div>
 
     <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
-    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.autoSuggestPrompt} />
+    <TextAreaInput fullwidth autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
     <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 
     <span class="text-textcolor">{language.autoSuggest} Prefix</span>
@@ -525,7 +525,7 @@
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.top_p}/>
     <span class="text-textcolor2 mb-6 text-sm">{($DataBase.top_p).toFixed(2)}</span>
     <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
-    <TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
+    <TextAreaInput autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
     <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 {:else}
 
@@ -542,7 +542,7 @@
     <span class="text-textcolor2 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
 
     <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
-    <TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
+    <TextAreaInput autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
     <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 {/if}
 {/if}
diff --git a/src/lib/Setting/Pages/ChatFormatSettings.svelte b/src/lib/Setting/Pages/ChatFormatSettings.svelte
index 1e5f0ee6..6b335275 100644
--- a/src/lib/Setting/Pages/ChatFormatSettings.svelte
+++ b/src/lib/Setting/Pages/ChatFormatSettings.svelte
@@ -21,5 +21,5 @@
 
 {#if $DataBase.instructChatTemplate === 'jinja'}
     <span class="text-textcolor">Jinja Template</span>
-    <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.JinjaTemplate} />
+    <TextAreaInput fullwidth autocomplete="off" bind:value={$DataBase.JinjaTemplate} />
 {/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
index 01366bc9..7e668bbf 100644
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -82,7 +82,7 @@
         <span class="text-sm text-textcolor2">{language.name}</span>
         <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
         <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.]`} />
+        <TextAreaInput autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
         <div class="flex gap-2 mt-4 max-w-full flex-wrap">
             <Button on:click={exportUserPersona}>{language.export}</Button>
             <Button on:click={importUserPersona}>{language.import}</Button>
diff --git a/src/lib/SideBars/Scripts/TriggerData.svelte b/src/lib/SideBars/Scripts/TriggerData.svelte
index 93bc66da..ddcfcb39 100644
--- a/src/lib/SideBars/Scripts/TriggerData.svelte
+++ b/src/lib/SideBars/Scripts/TriggerData.svelte
@@ -249,19 +249,19 @@
                     {/if}
                     {#if effect.type === 'systemprompt'}
                         <span class="text-textcolor2 text-sm">{language.location}</span>
-                        <SelectInput bind:value={effect.location} size="sm">
+                        <SelectInput bind:value={effect.location}>
                             <OptionInput value="start">{language.promptstart}</OptionInput>
                             <OptionInput value="historyend">{language.historyend}</OptionInput>
                             <OptionInput value="promptend">{language.promptend}</OptionInput>
                         </SelectInput>
                         <span class="text-textcolor2 text-sm">{language.value}</span>
-                        <TextAreaInput size="sm" bind:value={effect.value} />
+                        <TextAreaInput bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'setvar'}
                         <span class="text-textcolor2 text-sm">{language.varableName}</span>
-                        <TextInput size="sm" bind:value={effect.var} />
+                        <TextInput bind:value={effect.var} />
                         <span class="text-textcolor2 text-sm">{language.operator}</span>
-                        <SelectInput bind:value={effect.operator} size="sm">
+                        <SelectInput bind:value={effect.operator} >
                             <OptionInput value="=">{language.TriggerSetToVar}</OptionInput>
                             <OptionInput value="+=">{language.TriggerAddToVar}</OptionInput>
                             <OptionInput value="-=">{language.TriggerSubToVar}</OptionInput>
@@ -269,7 +269,7 @@
                             <OptionInput value="/=">{language.TriggerDivToVar}</OptionInput>
                         </SelectInput>
                         <span class="text-textcolor2 text-sm">{language.value}</span>
-                        <TextInput size="sm" bind:value={effect.value} />
+                        <TextInput bind:value={effect.value} />
                     {/if}
 
                     {#if effect.type === 'runtrigger'}
@@ -278,7 +278,7 @@
                     {/if}
                     {#if effect.type === 'command'}
                         <span class="text-textcolor2 text-sm">{language.value}</span>
-                        <TextAreaInput size="sm" bind:value={effect.value} />
+                        <TextAreaInput bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'impersonate'}
                         <span class="text-textcolor2 text-sm">{language.role}</span>
@@ -287,7 +287,7 @@
                             <OptionInput value="char">{language.character}</OptionInput>
                         </SelectInput>
                         <span class="text-textcolor2 text-sm">{language.value}</span>
-                        <TextAreaInput size="sm" bind:value={effect.value} />
+                        <TextAreaInput bind:value={effect.value} />
                     {/if}
                 {/each}
             </div>
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 4d7c1e91..aff83f22 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -620,12 +620,12 @@
   class:w-96={$sideBarSize === 0}
   class:w-110={$sideBarSize === 1}
   class:w-124={$sideBarSize === 2}
-  class:w-144={$sideBarSize === 3}
+  class:w-138={$sideBarSize === 3}
   class:risu-sidebar-close={$sideBarClosing}
   class:min-w-96={!$DynamicGUI && $sideBarSize === 0}
   class:min-w-110={!$DynamicGUI && $sideBarSize === 1}
   class:min-w-124={!$DynamicGUI && $sideBarSize === 2}
-  class:min-w-144={!$DynamicGUI && $sideBarSize === 3}
+  class:min-w-138={!$DynamicGUI && $sideBarSize === 3}
   class:px-2={$DynamicGUI}
   class:px-4={!$DynamicGUI}
   class:dynamic-sidebar={$DynamicGUI}
@@ -734,12 +734,12 @@
       width: 0rem;
     }
     to {
-      width: 24rem;
+      width: var(--sidebar-size);
     }
   }
   @keyframes sidebar-transition-close {
     from {
-      width: 24rem;
+      width: var(--sidebar-size);
       right:0rem;
     }
     to {
@@ -753,14 +753,14 @@
       min-width: 0rem;
     }
     to {
-      width: 24rem;
-      min-width: 24rem;
+      width: var(--sidebar-size);
+      min-width: var(--sidebar-size);
     }
   }
   @keyframes sidebar-transition-close-non-dynamic {
     from {
-      width: 24rem;
-      min-width: 24rem;
+      width: var(--sidebar-size);
+      min-width: var(--sidebar-size);
       right:0rem;
     }
     to {
diff --git a/src/lib/UI/GUI/MultiLangInput.svelte b/src/lib/UI/GUI/MultiLangInput.svelte
index e6cfa785..547fd783 100644
--- a/src/lib/UI/GUI/MultiLangInput.svelte
+++ b/src/lib/UI/GUI/MultiLangInput.svelte
@@ -54,7 +54,7 @@
         {/each}
     </div>
 {/if}
-<TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => {
+<TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} onInput={() => {
     updateValue()
     onInput()
 }} className={className} />
\ No newline at end of file
diff --git a/src/ts/gui/guisize.ts b/src/ts/gui/guisize.ts
index ff8c6c62..1011fcb3 100644
--- a/src/ts/gui/guisize.ts
+++ b/src/ts/gui/guisize.ts
@@ -14,6 +14,7 @@ export function updateGuisize(){
     textAreaSize.set(db.textAreaSize)
     sideBarSize.set(db.sideBarSize)
     textAreaTextSize.set(db.textAreaTextSize)
+    root.style.setProperty('--sidebar-size', (24 + (4 * db.sideBarSize)) + 'rem')
 }
 
 export function guiSizeText(num:number){
diff --git a/tailwind.config.js b/tailwind.config.js
index cce8d459..223809d5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,7 +29,7 @@ export default {
         '96': '24rem',
         '110': '28rem',
         '124': '32rem',
-        '144': '36rem',
+        '138': '36rem',
       },
       maxWidth:{
         'half': '50%',
@@ -48,7 +48,7 @@ export default {
         '3xl': '72rem',
         '110': '28rem',
         '124': '32rem',
-        '144': '36rem',
+        '138': '36rem',
       },
       minHeight:{
         '2': '0.5rem',