diff --git a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
index 3943dac3a..56bc6cc16 100644
--- a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
+++ b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
@@ -6,7 +6,7 @@
 
 import { Paragraph } from "@components/Paragraph";
 import { Patch, ReplaceFn } from "@utils/types";
-import { TextArea, useEffect, useRef, useState } from "@webpack/common";
+import { ManaTextArea, useEffect, useRef, useState } from "@webpack/common";
 
 export interface FullPatchInputProps {
     setFind(v: string): void;
@@ -68,7 +68,7 @@ export function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacemen
 
     return (
         <>
-            <TextArea
+            <ManaTextArea
                 inputRef={textAreaRef}
                 value={patch}
                 onChange={setPatch}
diff --git a/src/components/settings/tabs/plugins/components/TextSetting.tsx b/src/components/settings/tabs/plugins/components/TextSetting.tsx
index ad60a1111..2a00a91d7 100644
--- a/src/components/settings/tabs/plugins/components/TextSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/TextSetting.tsx
@@ -17,7 +17,7 @@
 */
 
 import { PluginOptionString } from "@utils/types";
-import { React, TextArea, TextInput, useState } from "@webpack/common";
+import { ManaTextArea, React, TextInput, useState } from "@webpack/common";
 
 import { resolveError, SettingProps, SettingsSection } from "./Common";
 
@@ -39,7 +39,7 @@ export function TextSetting({ option, pluginSettings, definedSettings, id, onCha
     return (
         <SettingsSection name={id} description={option.description} error={error}>
             {option.multiline
-                ? <TextArea
+                ? <ManaTextArea
                     placeholder={option.placeholder ?? "Enter a value"}
                     value={state}
                     onChange={handleChange}
diff --git a/src/equicordplugins/fileUpload/settings.tsx b/src/equicordplugins/fileUpload/settings.tsx
index 14980ea55..38f19ad79 100644
--- a/src/equicordplugins/fileUpload/settings.tsx
+++ b/src/equicordplugins/fileUpload/settings.tsx
@@ -10,7 +10,7 @@ import { SettingsSection } from "@components/settings/tabs/plugins/components/Co
 import { Switch } from "@components/Switch";
 import { useForceUpdater } from "@utils/react";
 import { OptionType } from "@utils/types";
-import { React, Select, showToast, TextArea, TextInput, Toasts } from "@webpack/common";
+import { ManaTextArea, React, Select, showToast, TextInput, Toasts } from "@webpack/common";
 
 import { CORS_PROXY } from "./constants";
 import { ServiceType } from "./types";
@@ -483,7 +483,7 @@ export function SettingsComponent() {
                         name="ShareX Custom Uploader Config"
                         description="Paste your ShareX custom uploader JSON (.sxcu/.json). DestinationType must include FileUploader or ImageUploader."
                     >
-                        <TextArea
+                        <ManaTextArea
                             value={store.sharexConfig}
                             rows={10}
                             placeholder='{"RequestMethod":"POST","RequestURL":"https://example.com/api/upload","Body":"MultipartFormData"}'
diff --git a/src/equicordplugins/moreStickers/components/misc.tsx b/src/equicordplugins/moreStickers/components/misc.tsx
index bca8f2990..6c0e6b210 100644
--- a/src/equicordplugins/moreStickers/components/misc.tsx
+++ b/src/equicordplugins/moreStickers/components/misc.tsx
@@ -17,7 +17,7 @@ import { isV1, migrate } from "@equicordplugins/moreStickers/migrate-v1";
 import { deleteStickerPack, getStickerPack, getStickerPackMetas, saveStickerPack } from "@equicordplugins/moreStickers/stickers";
 import { SettingsTabsKey, Sticker, StickerPack, StickerPackMeta } from "@equicordplugins/moreStickers/types";
 import { cl, clPicker, Mutex } from "@equicordplugins/moreStickers/utils";
-import { Button, React, TabBar, TextArea, Toasts } from "@webpack/common";
+import { Button, ManaTextArea, React, TabBar, Toasts } from "@webpack/common";
 import { JSX } from "react";
 
 const mutex = new Mutex();
@@ -251,7 +251,7 @@ export const Packs = () => {
                         <span style={{
                             flexGrow: 1
                         }}>
-                            <TextArea
+                            <ManaTextArea
                                 value={addStickerHtml}
                                 onChange={setAddStickerHtml}
                                 placeholder="Paste HTML here"
diff --git a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
index 1037b96a8..56d26c8c7 100644
--- a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
+++ b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
@@ -10,7 +10,7 @@ import { FormSwitch } from "@components/FormSwitch";
 import { Heading } from "@components/Heading";
 import { characters } from "@equicordplugins/sekaiStickers/characters.json";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Button, ChannelStore, React, SelectedChannelStore, Slider, TextArea, UploadHandler } from "@webpack/common";
+import { Button, ChannelStore, ManaTextArea, React, SelectedChannelStore, Slider, UploadHandler } from "@webpack/common";
 
 import Canvas from "./Canvas";
 import CharSelectModal from "./Picker";
@@ -113,7 +113,7 @@ export default function SekaiStickersModal({ modalProps, settings }: { modalProp
                     </div>
                     <div style={{ marginRight: 10, width: "30vw" }}>
                         <Heading>Text</Heading>
-                        <TextArea onChange={setText} placeholder={text} rows={4} spellCheck={false} />
+                        <ManaTextArea onChange={setText} placeholder={text} rows={4} />
                         <Heading>Rotation</Heading>
                         <Slider markers={[-10, -5, 0, 5, 10]} stickToMarkers={false} minValue={-10} maxValue={10} asValueChanges={val => setRotate(val)} initialValue={rotate} keyboardStep={0.2} orientation={"horizontal"} onValueRender={(v: number) => String(v.toFixed(2))} />
                         <Heading>Font Size</Heading>
diff --git a/src/plugins/customCommands/CreateTagModal.tsx b/src/plugins/customCommands/CreateTagModal.tsx
index 652f18503..a5d644836 100644
--- a/src/plugins/customCommands/CreateTagModal.tsx
+++ b/src/plugins/customCommands/CreateTagModal.tsx
@@ -15,7 +15,7 @@ import { InfoIcon } from "@components/Icons";
 import { Margins } from "@components/margins";
 import { Paragraph } from "@components/Paragraph";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { TextArea, TextInput, useState } from "@webpack/common";
+import { ManaTextArea, TextInput, useState } from "@webpack/common";
 
 import { parseTagArguments } from ".";
 import { addTag, getTag, Tag } from "./settings";
@@ -54,7 +54,7 @@ function Modal({ initialValue, modalProps }: { initialValue: Tag; modalProps: Mo
 
                     <section>
                         <HeadingSecondary>Response</HeadingSecondary>
-                        <TextArea value={message} onChange={setMessage} placeholder={EXAMPLE_RESPONSE} />
+                        <ManaTextArea value={message} onChange={setMessage} placeholder={EXAMPLE_RESPONSE} />
                     </section>
 
                     {detectedArguments.length > 0 && (
diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index dfc57bdf4..f920a3401 100644
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@@ -13,7 +13,7 @@ import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, RunningGameStore, showToast, TextArea, Toasts, Tooltip, useEffect, useState } from "@webpack/common";
+import { Button, ManaTextArea, RunningGameStore, showToast, Toasts, Tooltip, useEffect, useState } from "@webpack/common";
 
 const enum ActivitiesTypes {
     Game,
@@ -133,8 +133,7 @@ function IdsListComponent(props: { setValue: (value: string) => void; }) {
         <section>
             <HeadingSecondary>Filter List</HeadingSecondary>
             <Paragraph className={Margins.bottom8}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Paragraph>
-            <TextArea
-                type="text"
+            <ManaTextArea
                 value={idsList}
                 onChange={handleChange}
                 placeholder="235834946571337729, 343383572805058560"
diff --git a/src/plugins/mentionAvatars/index.tsx b/src/plugins/mentionAvatars/index.tsx
index b5775da4d..2415410bb 100644
--- a/src/plugins/mentionAvatars/index.tsx
+++ b/src/plugins/mentionAvatars/index.tsx
@@ -67,9 +67,9 @@ export default definePlugin({
     },
     {
         // show avatar in the chat input box
-        find: ".hasUniqueUsername()?null:`#",
+        find: '"text":"locked"',
         replacement: {
-            match: /(?<=,(\i)\).{0,150})`@\$\{(\i)\}`/,
+            match: /(?<=,(\i)\).{0,55})`@\$\{(\i)\}`/,
             replace: "$self.renderInputMention($2,$1)"
         }
     }],
diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts
index 98d453abf..dab3fc8ff 100644
--- a/src/webpack/common/components.ts
+++ b/src/webpack/common/components.ts
@@ -57,7 +57,8 @@ export const Tooltip = waitForComponent<t.Tooltip>("Tooltip", m => m.prototype?.
 export const TooltipContainer = TooltipContainerComponent as never;
 
 export const TextInput = waitForComponent<t.TextInput>("TextInput", filters.componentByCode("#{intl::MAXIMUM_LENGTH_ERROR}", '"input"'));
-export const TextArea = waitForComponent<t.TextArea>("TextArea", filters.componentByCode("this.getPaddingRight()},id:"));
+export const ManaTextArea = waitForComponent("ManaTextArea", filters.componentByCode('"data-mana-component":"text-area"'));=
+export const TextArea = ManaTextArea;
 export const Select = waitForComponent<t.Select>("Select", filters.componentByCode('selectionMode:"single",onSelectionChange:', "isSelected:"));
 export const SearchableSelect = waitForComponent<t.SearchableSelect>("SearchableSelect", filters.componentByCode('?"multiple":"single",required:'));
 export const Slider = waitForComponent<t.Slider>("Slider", filters.componentByCode("markDash", "this.renderMark("));