diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
new file mode 100644
index 000000000..d4f9ddb09
--- /dev/null
+++ b/.github/workflows/autofix.yml
@@ -0,0 +1,33 @@
+name: autofix.ci
+
+on:
+    pull_request:
+
+permissions:
+    contents: read
+
+jobs:
+    autofix:
+        name: autofix
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v6
+
+            - uses: pnpm/action-setup@v6
+
+            - name: Use Node.js 24
+              uses: actions/setup-node@v6
+              with:
+                  node-version: 24
+                  cache: "pnpm"
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Run lint fix
+              run: pnpm lint:fix
+
+            - name: Run stylelint fix
+              run: pnpm lint-styles:fix
+
+            - uses: autofix-ci/action@v1
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index df48d7a6f..d55249f75 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -73,7 +73,7 @@ jobs:
                   gh release upload latest --clobber dist/release/*
 
             - name: Upload Plugin JSONs to Equibored repo
-              if: github.repository == 'Equicord/Equicord' && !vars.ACT == 'false'
+              if: github.repository == 'Equicord/Equicord' && vars.ACT == 'false'
               run: |
                   git config --global user.name "GitHub-Actions"
                   git config --global user.email actions@github.com
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index bd48b13b4..d066e4882 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -83,7 +83,7 @@ jobs:
                   ".git/*"
 
             - name: Publish extension
-              if: steps.check.outputs.release == 'true' && !vars.ACT == 'false'
+              if: steps.check.outputs.release == 'true' && vars.ACT == 'false'
               run: pnpx @equicord/publish-browser-extension@latest --chrome-zip
                   dist/extension-chrome.zip --firefox-zip
                   dist/extension-firefox.zip --firefox-sources-zip
diff --git a/.rules b/.rules
index f5d7fa075..d29198c0f 100644
--- a/.rules
+++ b/.rules
@@ -1,213 +1,238 @@
-# Equicord Development Guidelines
+# Equicord Development Rules
 
-## Critical Rules
+## Philosophy
 
-- **NEVER** edit existing license headers. New files use 2026.
-- Push back when the user idea is wrong or not correct.
-- **NEVER** git checkout files without explicit permission.
-- Always verify components/functions arent deprecated before using.
-- **NEVER** use `any` for Discord objects. Import proper types from `@vencord/discord-types`.
-- Fix with smallest possible change. No refactoring unless explicitly asked.
-- Solve the problem at hand only. No patterns for patterns sake.
-- **NEVER** overengineer. No premature abstractions, no helpers for one-time operations, no building for hypothetical futures. Three similar lines is better than a premature abstraction.
-- Write modern, robust, professional code. Use current language features, proper error handling, and clean structure.
-- Write natural human text in errors, descriptions, messages. No dashes or robotic formatting. Write like "Module not found" not "Module - not found". Keep it simple and conversational.
-
-## Code Rules
-
-- **DELETE** dead code, dont comment it. Git preserves history.
-- No hardcoded values, unused imports, magic numbers.
-- Import `classNameFactory` from `@utils/css` (NOT `@api/Styles` which is deprecated). **ALWAYS** use `cl()` for class names, never hardcode strings like `"vc-plugin-name-class"`.
-- When combining multiple class names use `classes()` from `@utils/misc`, not template strings like `` `${a} ${b}` ``.
-- Use utilities from `@utils/`, `@api/`, `@components/`.
-- Use `Logger` from `@utils/Logger`, not `console.log`.
-- Descriptions: capital first letter, end with period.
-- Less code with same functionality is **ALWAYS** better. If it can be done in fewer lines without losing clarity, do it.
-- Keep logic flat. Avoid deep nesting, prefer early returns, guard clauses, and simple control flow.
-- **NEVER** add comments unless explicitly asked.
-- Keep existing comments, they contain important context.
-- Use `Map`/`Set`, `.some`/`.find`, no spread in loops, `Promise.all`.
-- KISS over clever, flat over nested, explicit over implicit.
+- Solve the problem at hand. No refactors unless asked.
+- Smallest diff that fixes it. Three similar lines beats a premature helper.
+- Less code with the same behavior wins.
+- Never add comments unless asked. Keep existing comments, they carry context.
+- Delete dead code. Don't comment it out.
+- Natural human text in errors, descriptions, toasts. No dashes, no robotic phrasing. Descriptions start capitalized and end with a period.
 
 ## TypeScript
 
-- **Prefer:** optional chaining (`?.`), nullish coalescing (`??`), `const`, arrow functions
-- **Use:** destructuring, template literals, object shorthand, array methods
-- **Style:** early returns, trust inference, inline single-use variables
+- `strict: true`, `noImplicitAny: false`, `noUncheckedIndexedAccess: false`. Annotate params explicitly. Array index access is not auto `undefined`.
+- Never `any`. Use `unknown` and narrow, or type webpack results via the `find*` generic.
+- Never `as unknown as`. Write a type guard or use `satisfies`.
+- Never `@ts-ignore`. Use `@ts-expect-error` with a one line reason only when unavoidable.
+- Never `!` non null assertion. Narrow with `if` or early return.
+- Never plain `enum`. Use `const enum` for internal closed sets. Use `as const` object plus literal union for cross boundary values.
+- Never `namespace`. Modules only.
+- Never relative `../../` when a `@alias` exists.
+- Don't optional chain through values guaranteed to exist (`settings.store`, plugin proxies, find proxies). Optional chaining is for actually optional values.
+- `import type` for type only imports.
 
-## React
+## Plugin Policy
 
-- Wrap complex components with `ErrorBoundary.wrap(Component, { noop: true })`.
-- Return `null` for conditional rendering, not `undefined`.
-- **Forbidden:** `React.cloneElement`, `React.isValidElement`, `React.memo()`, `React.lazy`, `React.Children`
-- Always return cleanup functions in `useEffect`.
+What does NOT get merged:
 
-## Forbidden
+- Selfbot, automation of user actions, client state spoofing, anything abusing the API.
+- Plugins requiring user supplied API keys or untrusted third party endpoints.
+- Plugins targeting specific third party bots. Official Discord apps are fine.
+- CSS only plugins that just hide or restyle UI.
+- Functionality already trivial via built in plugins or Discord features.
+- New dependencies without strong justification.
 
-### Code
+## Plugin Structure
 
-- **No raw DOM manipulation.** No `document.querySelector`, no `MutationObserver`, no `element.style`. Always use webpack patches and React.
-- Empty catch blocks.
-- Hardcoded minified vars in patches (`e,t,n`).
-- **NEVER** use `settings.use()` with arrays. Mutate then reassign.
+- Folder per plugin. `src/plugins/<name>/index.tsx` or `src/equicordplugins/<name>/index.tsx`. Single file plugins still get a folder.
+- Folder suffixes the build system filters on: `.desktop`, `.web`, `.dev`, `.discordDesktop`, `.vesktop`, `.equibop`.
+- `export default definePlugin({ ... })`. Never named.
+- Required fields: `name`, `description`, `authors`. Use `Devs` or `EquicordDevs`, never inline objects.
+- List `dependencies` for every API plugin used.
+- Prefer the folder suffix to lock environment. The `target?: "WEB" | "DESKTOP" | "BOTH"` field exists but is rarely used. Runtime `IS_DISCORD_DESKTOP`, `IS_WEB`, `IS_VESKTOP` (build time replaced) for partial gating inside a mixed plugin.
+- `requiresRestart` defaults to true when `patches` exist. Set it only to override.
 
-### Plugins
+### Declarative over imperative
 
-- **No selfbot or API abuse.** Nothing that automates user actions, spoofs client state, or abuses Discord's API in any way.
-- No plugins that only do something trivially achievable with existing built-in plugins or Discord features.
-- No CSS-only plugins that only hide or redesign UI elements.
-- No plugins targeting specific third-party bots (official Discord apps are fine).
-- No untrusted third-party APIs. No plugins requiring users to supply their own API keys.
-- Do not introduce new dependencies unless strictly necessary and well justified.
+Use these plugin object fields instead of calling `add*` or `remove*` manually. `PluginManager` handles lifecycle and auto enables the matching API plugin.
 
-## Anti-Patterns
+`commands`, `contextMenus`, `flux`, `onBeforeMessageSend`, `onBeforeMessageEdit`, `onMessageClick`, `chatBarButton`, `chatBarButtonWrapper`, `messagePopoverButton`, `renderMessageAccessory`, `renderMessageDecoration`, `renderMemberListDecorator`, `renderNicknameIcon`, `renderProfileCollection`, `renderProfileSection`, `headerBarButton`, `userAreaButton`, `userProfileBadge`, `managedStyle`, `toolboxActions`, `audioProcessor`.
 
-- `value !== null && value !== undefined` ⟹ `value != null`
-- `array && array.length > 0` ⟹ `array.length` (only when array is guaranteed to exist)
-- `settings?.store?.value` ⟹ `settings.store.value`
-- `value || defaultValue` ⟹ `value ?? defaultValue`
+Wrapper style fields take `{ render | wrapper, priority }`, never a bare function.
+
+Imperative `add*` and `remove*` is only valid when registering multiple items of the same kind, registering conditionally, or registering after `start()`. Always pair with removal in `stop()`. Never mix the two for the same item.
+
+### Lifecycle
+
+- `start()` runs at `StartAt.WebpackReady` by default.
+- `stop()` must reverse everything `start()` did.
+- Never throw from `start` or `stop`.
+- Plugin methods called via `$self` must be on the plugin object. Closures over module locals aren't callable.
+- Never `Vencord.Plugins.plugins["Name"]`. Import the plugin directly and use `isPluginEnabled(name)` from `@api/PluginManager`.
+
+## Settings
+
+- `definePluginSettings({...})` from `@api/Settings`. Assign to `settings`.
+- Every non SELECT setting needs `default`. SELECT puts `default: true` on one option.
+- `restartNeeded: true` only when the value feeds a patch replacement or eager load decision.
+- `hidden` and `disabled` can be functions for conditional UI. Never delete keys to "remove" them. Write a migration.
+- `withPrivateSettings<T>()` for internal state. Never widen the global `Settings` interface.
+- Renames go at module top before `definePlugin`. Use `migratePluginSettings("New", "Old", ...)` and `migratePluginSetting(...)`.
+
+### Reading
+
+- React: `settings.use([...specificKeys])`. Hoist the keys array to module scope or memoize it. A fresh array literal resubscribes every render.
+- Never `settings.use()` with no argument inside list rendered components.
+- Hot paths: destructure `settings.store.x` once. Never re read in loops or render rows.
+- `OptionType.COMPONENT` components must be module level. Use the `setValue` and `setError` props. Never write `settings.store.x` directly inside them.
+
+## Flux
+
+- Plugin lifetime subscriptions: `flux: { ACTION_TYPE(payload) { ... } }` on the plugin object.
+- Component scoped or one shot: `FluxDispatcher.subscribe` inside `useEffect`, paired with `unsubscribe(sameRef)` in cleanup.
+- Never declare both `flux` and manual `subscribe` for the same event in one plugin.
 
 ## Patching
 
-### Core Principles
+- One patch per concern. Minimum code touched.
+- `find` is a string when possible. Anchor on stable tokens: intl keys (`#{intl::KEY}`), method names with trailing punctuation, action type literals, distinct CSS or path literals.
+- Prefer intl key anchors over English copy.
+- `match` is always a RegExp. Use `\i` for every minified identifier. Never letters or named patterns.
+- Bound every gap with `.{0,N}?`. Never `.+?` or `.*?` unbounded. Cap at the smallest N that works.
+- Use lookbehind and lookahead to inject without re consuming context.
+- Capture only what you reuse. Convert reused only groups to `(?:...)` or move to lookarounds.
+- `#{intl::KEY}` in match. The build hashes it. Never hardcode hashed forms like `.aA4Vce`.
+- `/g` only when intentionally hitting multiple sites in one module.
+- Replace: `$&` keeps the match, `$1` and `$2` for captures. Call into plugin code via `$self.fn(...)`.
+- Never inject a statement where Discord expects an expression.
+- `group: true` when multiple replacements in one patch must land together.
+- Scope conditional patches with `predicate`, `fromBuild`, `toBuild`. Never branch inside `replace`.
+- `all: true` for intl patches that may match across multiple bundles (English fallback plus user locale).
+- Never `try/catch` to silence a failing replacement. Fix the match.
+- Never depend on argument names or object key order. Use `arguments[i]`.
+- Prefer multiple small patches with tight `find`s over one patch with a broad find and many replacements.
 
-- Minimum code touched. Stability over cleverness. One patch per concern.
-- Try multiple approaches, keep simplifying until you find the cleanest solution.
-- Remove any regex character that doesnt change the match result.
-- Not overengineered, not overlooked, just clean and future-proof.
-
-### Find Strings
-
-- Use `#{intl::KEY}` in find when possible, most stable anchor.
-- If find matches multiple modules, add nearby stable string like `"),icon:"` or function name.
-- `"#{intl::PIN_MESSAGE}),icon:"` is better than generic strings.
-
-### Match Patterns
-
-- Match only what you need to replace, let find do the targeting.
-- Can use `#{intl::KEY}` in match too, gets canonicalized to hash.
-- `/#{intl::KEY}\)/` beats `/label:\i\.pinned\?.{0,60}#{intl::KEY}\)/`
-- `$&` keeps original, append/prepend to it.
-- Use bounded gaps: `.{0,50}` not `.+?` or `.*?`
-- Only use capture groups if reusing in replace.
-
-### NEVER Do
-
-- **Hardcoded minified vars:** `e,t,n,r,i,o,s,l,c,u,$_,xx,eD,eH,eW` — use `\i` instead
-- **Minified chains:** `\i\.\i` alone — surround with stable strings
-- **Unbounded gaps:** `.+?` or `.*?` — use `.{0,N}`
-- **Generic patterns:** `/className:\i/` alone — add anchor
-- **Raw intl hashes:** `.aA4Vce` — use `#{intl::KEY_NAME}`
-
-### Patch Examples
-
-**Clean replacement:**
+### Examples
 
 ```js
+// clean replacement
 find: "#{intl::PIN_MESSAGE}),icon:"
 match: /#{intl::PIN_MESSAGE}\)/
 replace: "$self.getPinLabel(arguments[0]))"
-```
 
-**Appending:**
-
-```js
+// appending
 find: "#{intl::VIEW_AS_ROLES_MENTIONS_WARNING}"
 match: /#{intl::VIEW_AS_ROLES_MENTIONS_WARNING}.{0,100}(?=])/
 replace: "$&,$self.renderTooltip(arguments[0].guild)"
-```
 
-**Wrapping:**
-
-```js
+// wrapping with lookbehind
 find: "#{intl::SEVERAL_USERS_TYPING_STRONG}"
 match: /(?<="aria-atomic":!0,children:)\i/
 replace: "$self.renderTypingUsers({ children: $& })"
 ```
 
-## Plugin Interop
+## Webpack access
 
-- `isPluginEnabled(name)` from `@api/PluginManager` takes a string, checks required/isDependency/enabled.
-- Import the plugin directly from its path to access `.name` and functions.
-- Dont use `Vencord.Plugins.plugins` or `plugin.started`. Dont use `"as unknown as"` casting.
+- Top level: lazy finders only. `findByPropsLazy`, `findByCodeLazy`, `findComponentByCodeLazy`, `findStoreLazy`, `findCssClassesLazy`, `getUserSettingLazy`, `proxyLazyWebpack`.
+- Direct `find(...)` only inside `start()` or later runtime callbacks.
+- Use `findComponentByCode` or `waitForComponent` for Discord components, not `findByProps`. Survives bundle reshuffles.
+- `proxyLazy` for values needing same tick destructuring. `makeLazy` for plain deferred values.
+- `@webpack/common` exports backed by `waitFor` (stores, `FluxDispatcher`, `Parser`, `Alerts`, hooks) are `undefined` until webpack is ready. Reference inside functions, not at module top.
+- No `eagerPatches` or `wreq(id)` brute forcing.
 
-```ts
-import { isPluginEnabled } from "@api/PluginManager";
-import otherPlugin from "@equicordplugins/otherPlugin";
-if (!isPluginEnabled(otherPlugin.name)) return null;
-otherPlugin.someFunction();
-```
+## React
+
+- Import hooks and `React` from `@webpack/common`. Never `import React from "react"`. Only `import type` from `"react"` (`ReactNode`, `ComponentType`, etc.).
+- Forbidden: `React.FC`, `React.memo`, `React.lazy`, `React.Children`, `React.cloneElement`, `React.isValidElement`. Type props with a named `interface`.
+- Conditional rendering returns `null`, never `undefined` or `false`.
+- Wrap every component injected by a patch with `ErrorBoundary.wrap(C, { noop: true })`. Same for components exported as plugin surface.
+- `LazyComponent(() => findByCode(...))` for webpack sourced components used before webpack is ready.
+- `useStateFromStores([Store1, ...], () => derive(), deps?, areEqual?)`. List every store the selector reads. Pass `areEqual` when the selector returns objects or arrays. Selector must be pure and synchronous.
+
+## CSS / Classes
+
+- `classNameFactory` from `@utils/css`. Never from `@api/Styles`. That re export is deprecated, kept for Vesktop backcompat.
+- Prefix is `vc-<plugin>-`. Usage: `cl("base", ["a", "b"], { active: cond })`.
+- Combine classes with `classes(a, b)` from `@utils/misc`. Never template strings, never `+`.
+- Discord mangled classes via `findCssClassesLazy("propA", ...)`. Never hardcode mangled suffixes.
+- Static stylesheet: `import "./style.css"`. Runtime toggleable: `import name from "./style.css?managed"` plus `enableStyle`, `disableStyle`, `toggleStyle`, `setStyleClassNames` from `@api/Styles`.
+- CSS variable selectors in managed CSS use `[--varName]`. The build rewrites these via the `setStyleClassNames` map. Never hardcode mangled selectors in CSS.
+- Every selector in plugin CSS starts with `.vc-<plugin>-`. No bare element selectors, no `:root`, no `@import`.
+- Prefer Discord CSS vars like `var(--background-primary)` over literal colors.
+- Inline `style={{}}` only for dynamic per render values.
+- No `!important` except to override a Discord rule unbeatable by specificity.
+
+## Native / Desktop
+
+- Desktop only plugin: folder suffix `.desktop`. Mixed target plugins with a `native.ts` do not use the suffix.
+- `native.ts` next to `index.tsx`. Exports auto register as IPC handlers via `~pluginNatives`.
+- Handler first arg is `IpcMainInvokeEvent`. Renderer side:
+  ```ts
+  const Native = VencordNative.pluginHelpers.MyPlugin as PluginNative<typeof import("./native")>;
+  ```
+- `pluginHelpers` key matches `definePlugin.name`.
+- Renderer must never import `fs`, `path`, `net`, `https`, `child_process`, `electron`. Go through `native.ts` and validate input there.
+- File pickers: `saveFile` and `chooseFile` from `@utils/web`. Cross platform, no IPC needed.
+- Only `src/preload.ts` may `contextBridge.exposeInMainWorld`.
+
+## Never hardcode
+
+- CDN URLs (`cdn.discordapp.com/...`) → `IconUtils`.
+- API paths (`/api/v9`, `/users/@me`) → `Constants.Endpoints` or `RestAPI`.
+- Intl strings → `#{intl::KEY}`.
+- Mangled CSS classes → `findCssClassesLazy`.
+- Minified vars in patches (`e,t,n,r,i,o,s,...`) → `\i`.
+- `console.log`, `warn`, `error` → `new Logger("name")` from `@utils/Logger`.
+- Toast type strings → `Toasts.Type.*`.
+- Class name concatenation → `classes(...)`.
+
+## Forbidden
+
+- Raw DOM. No `document.querySelector`, `MutationObserver`, `element.style`. Use webpack patches and React.
+- Empty `catch` blocks.
+- `settings.use()` with arrays mutated in place. Reassign with a new array.
 
 ## Reference
 
-### Types
+### Types from `@vencord/discord-types`
+`Channel`, `Guild`, `GuildMember`, `User`, `Role`, `Message`, `Command`, `FluxEvents`, store types.
 
-`Channel`, `Guild`, `GuildMember`, `User`, `Role`, `Message` from `@vencord/discord-types`
+### `@api/*`
+`Settings`, `Commands`, `DataStore`, `ContextMenu`, `Badges`, `Notices`, `Notifications`, `MessageEvents`, `MessageUpdater`, `MessageAccessories`, `MessageDecorations`, `MessagePopover`, `MemberListDecorators`, `ServerList`, `ChatButtons`, `HeaderBar`, `UserArea`, `NicknameIcons`, `ProfileCollections`, `ProfileSections`, `AudioPlayer`, `UserSettings`, `Styles`, `PluginManager`.
 
-### Components
+Deprecated: `@api/Themes`, and the `classNameFactory` re export from `@api/Styles`.
 
-`Paragraph`, `BaseText`, `Flex`, `Button`, `ErrorCard` from `@components/`
+### `@utils/*`
+- `Logger`. `new Logger(name)`.
+- `css`. `classNameFactory`, `classNameToSelector`.
+- `misc`. `classes`, `sleep`, `isObject`, `isObjectEmpty`, `pluralise`, `parseUrl`, `identity`, `interpolateIfDefined`, `tryOrElse`, `isPluginDev`, `removeFromArray`.
+- `text`. `formatDuration`, `formatDurationMs`, `humanFriendlyJoin`, `makeCodeblock`, `toInlineCode`, `escapeRegExp`, `stripIndent`, `ZWSP`.
+- `react`. `useAwaiter`, `useForceUpdater`, `useIntersection`, `useTimer`, `useFixedTimer`, `useCleanupEffect`, `NoopComponent`.
+- `lazy`. `makeLazy`, `proxyLazy`.
+- `lazyReact`. `LazyComponent`.
+- `modal`. `openModal`, `openModalLazy`, `closeModal`, `closeAllModals`, `openMediaModal`, `ModalRoot`, `ModalHeader`, `ModalContent`, `ModalFooter`, `ModalCloseButton`, `ModalSize`.
+- `discord`. `getCurrentChannel`, `getCurrentGuild`, `getIntlMessage`, `openUserProfile`, `openPrivateChannel`, `sendMessage`, `insertTextIntoChatInputBox`, `copyWithToast`, `getUniqueUsername`, `fetchUserProfile`, `openImageModal`, `openInviteModal`, `getTheme`, `Theme`, `hasGuildFeature`.
+- `clipboard`. `copyToClipboard`, `readClipboard`.
+- `margins`. `Margins`.
+- `guards`. `isTruthy`, `isNonNullish`.
+- `web`. `saveFile`, `chooseFile`.
+- `constants`. `Devs`, `EquicordDevs`, `IS_WINDOWS`, `IS_MAC`, `IS_LINUX`, `IS_MOBILE`.
+- `types`. `OptionType`, `StartAt`, `ReporterTestable`, `definePlugin`.
 
-### Settings
+### `@components/*`
+`Paragraph`, `BaseText`, `Flex`, `Button`, `ErrorCard`, `ErrorBoundary`.
 
-Use `definePluginSettings` from `@api/Settings`, not inline settings object.
+### `@webpack/common`
 
-### Utilities
+Stores. `UserStore`, `GuildStore`, `GuildRoleStore`, `GuildMemberStore`, `GuildChannelStore`, `ChannelStore`, `SelectedChannelStore`, `SelectedGuildStore`, `MessageStore`, `PresenceStore`, `RelationshipStore`, `PermissionStore`, `ReadStateStore`, `EmojiStore`, `StickersStore`, `ThemeStore`, `VoiceStateStore`, `TypingStore`, `DraftStore`, `WindowStore`, `AccessibilityStore`, `PendingReplyStore`, `UserProfileStore`, `StreamerModeStore`, `SpotifyStore`, `NotificationSettingsStore`, `LocaleStore`, `ExperimentStore`, `QuestStore`. Full list in `src/webpack/common/stores.ts`.
 
-- **@utils/clipboard** — `copyToClipboard`
-- **@utils/discord** — `insertTextIntoChatInputBox`, `getCurrentChannel`, `getCurrentGuild`, `getIntlMessage`, `openUserProfile`, `openPrivateChannel`, `sendMessage`, `copyWithToast`, `getUniqueUsername`, `fetchUserProfile`
-- **@utils/css** — `classNameFactory`, `classNameToSelector`
-- **@utils/misc** — `classes`, `sleep`, `isObject`, `isObjectEmpty`, `pluralise`, `parseUrl`, `identity`
-- **@utils/text** — `formatDuration`, `formatDurationMs`, `humanFriendlyJoin`, `makeCodeblock`, `toInlineCode`, `escapeRegExp`
-- **@utils/modal** — `openModal`, `closeModal`, `ModalRoot`, `ModalHeader`, `ModalContent`, `ModalCloseButton`
-- **@utils/margins** — `Margins` (`Margins.top8`, `Margins.bottom16`, etc.)
-- **@utils/guards** — `isTruthy`, `isNonNullish`
-- **@utils/web** — `saveFile`, `chooseFile`
+React and hooks. `React`, `useState`, `useEffect`, `useLayoutEffect`, `useMemo`, `useRef`, `useReducer`, `useCallback`, `useStateFromStores`.
 
-### Webpack Common
+Components. `Tooltip`, `TextInput`, `TextArea`, `Select`, `SearchableSelect`, `Slider`, `Checkbox`, `Avatar`, `Menu`, `Popout`, `Dialog`, `TabBar`, `Clickable`, `MaskedLink`, `Timestamp`, `FocusLock`, `UserSummaryItem`, `ColorPicker`, `OAuth2AuthorizeModal`, `ScrollerThin`, `ScrollerAuto`, `ScrollerNone`, `ListScrollerThin`, `ListScrollerAuto`.
 
-#### IconUtils
+Utils. `FluxDispatcher`, `RestAPI`, `Constants`, `SnowflakeUtils`, `Parser`, `PermissionsBits`, `Alerts`, `Toasts`, `showToast`, `moment`, `lodash`, `i18n`, `IconUtils`, `ColorUtils`, `ImageUtils`, `DateUtils`, `UsernameUtils`, `DisplayProfileUtils`, `URLUtils`, `Humanize`, `EmojiUtils`, `UserUtils`, `UploadHandler`, `UploadManager`, `ComponentDispatch`, `ExpressionPickerStore`, `ReadStateUtils`, `PopoutActions`, `ApplicationAssetUtils`.
 
-From `@webpack/common`. **NEVER** hardcode `cdn.discordapp.com` URLs.
+Routers. `NavigationRouter`, `ChannelRouter`, `SettingsRouter`.
 
-- `IconUtils.getUserAvatarURL(user, canAnimate?, size?)`
-- `IconUtils.getDefaultAvatarURL(id)`
-- `IconUtils.getUserBannerURL({ id, banner, canAnimate?, size })`
-- `IconUtils.getGuildIconURL({ id, icon, size?, canAnimate? })`
-- `IconUtils.getGuildBannerURL(guild, canAnimate?)`
-- `IconUtils.getChannelIconURL({ id, icon })`
-- `IconUtils.getEmojiURL({ id, animated, size })`
-- `IconUtils.getApplicationIconURL(data)`
-- `IconUtils.getGameAssetURL(data)`
+Action creators. `MessageActions`, `ChannelActionCreators`, `UserProfileActions`, `InviteActions`, `GuildActions`, `VoiceActions`, `DraftActions`, `PinActions`, `MessageCache`.
 
-#### Stores
+Menu. `Menu`, `ContextMenuApi` (`openContextMenu`, `closeContextMenu`, `openContextMenuLazy`).
 
-`UserStore`, `GuildStore`, `ChannelStore`, `GuildMemberStore`, `SelectedChannelStore`, `SelectedGuildStore`, `PresenceStore`, `RelationshipStore`, `MessageStore`, `EmojiStore`, `ThemeStore`, `PermissionStore`, `VoiceStateStore` from `@webpack/common`
+### Lazy webpack imports
+From `@webpack`. `findByPropsLazy`, `findByCodeLazy`, `findComponentLazy`, `findComponentByCodeLazy`, `findExportedComponentLazy`, `findStoreLazy`, `findCssClassesLazy`, `findLazy`, `proxyLazyWebpack`, `LazyComponentWebpack`, `mapMangledModuleLazy`, `extractAndLoadChunksLazy`, `waitFor`.
 
-#### Actions
+`waitForStore` and `waitForComponent` live in `@webpack/common/internal.tsx`. They're used by `@webpack/common` itself, not directly by plugins.
 
-`RestAPI`, `FluxDispatcher`, `MessageActions`, `NavigationRouter`, `ChannelRouter`, `ChannelActionCreators`, `SettingsRouter` from `@webpack/common`
-
-#### Utils
-
-`Constants` (`Constants.Endpoints`), `SnowflakeUtils`, `Parser`, `PermissionsBits`, `moment`, `lodash`, `ColorUtils`, `ImageUtils`, `DateUtils`, `UsernameUtils`, `DisplayProfileUtils`, `URLUtils`, `Humanize`, `EmojiUtils` from `@webpack/common`
-
-#### Components
-
-`Tooltip`, `TextInput`, `TextArea`, `Select`, `Slider`, `Avatar`, `Menu`, `Popout`, `ScrollerThin`, `Timestamp` from `@webpack/common`
-
-#### Toasts
-
-`Toasts`, `showToast` from `@webpack/common`
-
-### Imports
-
-- **Lazy** from `@webpack` — `findByPropsLazy`, `findStoreLazy`, `findComponentByCodeLazy`, `findExportedComponentLazy`
-- **Common** from `@webpack/common` — `useState`, `useEffect`, `useCallback`, `useStateFromStores`
-
-### Never Hardcode
-
-- `"cdn.discordapp.com/avatars/"` etc. ⟹ `IconUtils`
-- `"/api/v9"`, `"/users/@me"` ⟹ `Constants.Endpoints` or `RestAPI`
-- `console.log/warn/error` ⟹ `Logger` from `@utils/Logger`
-- `` `${a} ${b}` `` for class names ⟹ `classes(a, b)` from `@utils/misc`
+### `IconUtils` methods
+`getUserAvatarURL(user, canAnimate?, size?, format?)`, `getUserBannerURL({ id, banner, canAnimate?, size })`, `getGuildIconURL({ id, icon, size?, canAnimate? })`, `getGuildBannerURL(guild, canAnimate?)`, `getGuildSplashURL`, `getGuildDiscoverySplashURL`, `getGuildHomeHeaderURL`, `getChannelIconURL({ id, icon })`, `getResourceChannelIconURL`, `getEmojiURL({ id, animated, size })`, `getApplicationIconURL`, `getGameAssetURL`, `getVideoFilterAssetURL`, `getAvatarDecorationURL`, `getGuildMemberAvatarURL`, `getGuildMemberAvatarURLSimple`, `getGuildMemberBannerURL`, `getDefaultAvatarURL(id)`, `hasAnimatedGuildIcon`, `isAnimatedIconHash`.
diff --git a/README.md b/README.md
index 9d4992b1a..ddb34ecf9 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,8 @@ Windows
 
 MacOS
 
-- [GUI](https://github.com/Equicord/Equilotl/releases/latest/download/Equilotl.MacOS.zip)
+- [X64 GUI](https://github.com/Equicord/Equilotl/releases/latest/download/Equilotl-darwin-x64.zip)
+- [ARM64 GUI](https://github.com/Equicord/Equilotl/releases/latest/download/Equilotl-darwin-arm64.zip)
 
 Linux
 
diff --git a/browser/VencordNativeStub.ts b/browser/VencordNativeStub.ts
index 46cba9d0c..746d41e48 100644
--- a/browser/VencordNativeStub.ts
+++ b/browser/VencordNativeStub.ts
@@ -55,6 +55,7 @@ window.VencordNative = {
 
     native: {
         getVersions: () => ({}),
+        supportsWindowsMaterial: () => false,
         openExternal: async (url) => void open(url, "_blank"),
         getRendererCss: async () => {
             if (IS_USERSCRIPT)
diff --git a/package.json b/package.json
index 472d56a5b..b26f1c271 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "equicord",
     "private": "true",
-    "version": "1.14.12.0",
+    "version": "1.14.13.0",
     "description": "The other cutest Discord client mod",
     "homepage": "https://github.com/Equicord/Equicord#readme",
     "bugs": {
@@ -33,8 +33,11 @@
         "repair": "node scripts/runInstaller.mjs -- --repair",
         "lint": "eslint",
         "lint-styles": "stylelint \"src/**/*.css\" --ignore-pattern src/userplugins",
+        "lint-styles:fix": "pnpm lint-styles --fix",
         "lint:fix": "pnpm lint --fix",
-        "test": "pnpm buildStandalone && pnpm testTsc && pnpm lint:fix && pnpm lint-styles && pnpm generatePluginJson",
+        "lint:intl": "node scripts/lintIntl.mjs",
+        "lint:patches": "node scripts/lintPatches.mjs",
+        "test": "pnpm buildStandalone && pnpm testTsc && pnpm lint:fix && pnpm lint-styles && pnpm lint:intl && pnpm lint:patches && pnpm generatePluginJson",
         "testWeb": "pnpm lint:fix && pnpm buildWeb && pnpm testTsc",
         "testTsc": "tsc --noEmit",
         "depCheck": "node scripts/depCheck.mjs"
@@ -98,31 +101,7 @@
         "typescript-transform-paths": "^3.5.6",
         "zip-local": "^0.3.5"
     },
-    "packageManager": "pnpm@10.33.0",
-    "pnpm": {
-        "patchedDependencies": {
-            "@types/less@3.0.8": "patches/@types__less@3.0.8.patch"
-        },
-        "peerDependencyRules": {
-            "ignoreMissing": [
-                "eslint-plugin-import",
-                "eslint"
-            ]
-        },
-        "allowedDeprecatedVersions": {
-            "source-map-resolve": "*",
-            "resolve-url": "*",
-            "source-map-url": "*",
-            "urix": "*",
-            "q": "*"
-        },
-        "onlyBuiltDependencies": [
-            "esbuild"
-        ],
-        "overrides": {
-            "@eslint/plugin-kit@<0.3.4": ">=0.3.4"
-        }
-    },
+    "packageManager": "pnpm@11.0.9",
     "engines": {
         "node": ">=18"
     }
diff --git a/packages/discord-types/src/components.d.ts b/packages/discord-types/src/components.d.ts
index c7d01e481..a207ba755 100644
--- a/packages/discord-types/src/components.d.ts
+++ b/packages/discord-types/src/components.d.ts
@@ -192,6 +192,7 @@ export type TextInput = ComponentType<PropsWithChildren<{
 export type TextArea = ComponentType<Omit<HTMLProps<HTMLTextAreaElement>, "onChange"> & {
     onChange(v: string): void;
     inputRef?: Ref<HTMLTextAreaElement>;
+    autosize?: boolean;
 }>;
 
 export interface SelectOption {
diff --git a/packages/discord-types/src/components/Modal.d.ts b/packages/discord-types/src/components/Modal.d.ts
new file mode 100644
index 000000000..e8586b647
--- /dev/null
+++ b/packages/discord-types/src/components/Modal.d.ts
@@ -0,0 +1,136 @@
+import { ComponentType, ReactNode, Ref, RefObject } from "react";
+import { LiteralUnion } from "type-fest";
+
+export type ModalActionVariant = LiteralUnion<"primary" | "secondary" | "critical-primary", string>;
+export type ModalSize = LiteralUnion<"sm" | "md" | "lg" | "xl" | "xxl", string>;
+
+export interface ModalAction {
+    text: string;
+    variant: ModalActionVariant;
+    onClick(): void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+
+/**
+ * Modal with all options: https://files.catbox.moe/c8qxt0.png
+ */
+export interface ModalProps extends RenderModalProps {
+    size?: ModalSize;
+    role?: "alertdialog" | "dialog";
+
+    title: ReactNode;
+    /** Optional subtitle, will render below title (duh) */
+    subtitle?: ReactNode;
+
+    /** Optional Modal content */
+    children?: ReactNode;
+    input?: ReactNode;
+    preview?: ReactNode;
+
+    listProps?: any;
+    onScroll?(): void;
+    scrollerRef?: Ref<HTMLDivElement>;
+
+    /** Action buttons at the bottom of the Modal */
+    actions?: ModalAction[];
+    /** Custom component to show before actions, useful for e.g. "Don't show again" checkbox */
+    actionBarInput?: ReactNode;
+    actionBarInputLayout?: "default" | "chat-input";
+
+    /** Shows a Notice (card) between (sub-)title and content (children) */
+    notice?: {
+        message: string;
+        type: LiteralUnion<"critical", string>;
+    };
+}
+
+export interface RenderModalProps {
+    transitionState: number;
+    onClose(): void;
+}
+
+/** Wrapper around Modal */
+export interface ConfirmModalProps extends ModalProps {
+    /** Variant for the confirm button, defaults to critical */
+    variant?: ModalActionVariant;
+    confirmText: ModalAction["text"];
+    /** Defaults to "Cancel" */
+    cancelText?: ModalAction["text"];
+    /**
+     * If onConfirm runs without error, the modal will close.
+     * To indicate an error, throw an Error. This will show the user a notice inside the Modal and keep it open.
+     * This notice will either be a generic message if you just throw. If you call setError, it will show that message.
+     * Even if you call setError, you still have to throw to keep the Modal open
+     */
+    onConfirm?(setError: (error: string) => void): void;
+    /** Optional callback that runs when the user cancels the action. Whether provided or not, the Modal will close when user clicks Cancel. */
+    onCancel?(): void;
+    onCloseCallback?(): void;
+    /** Checkbox that shows before the action buttons */
+    checkboxProps?: {
+        /** Defaults to "Don't show again" */
+        label?: string;
+        checked: boolean;
+        onChange(checked: boolean): void;
+    };
+
+    /** Custom Modal content */
+    children?: ReactNode;
+}
+
+export type Modal = ComponentType<ModalProps>;
+export type ConfirmModal = ComponentType<ConfirmModalProps>;
+
+export type RenderModal = (props: RenderModalProps) => ReactNode;
+
+export interface ModalOptions {
+    modalKey?: string;
+    onCloseRequest?(): void;
+    onCloseCallback?(): void;
+}
+
+export interface ModalAPI {
+    /**
+     * Wait for the render promise to resolve, then open a modal with it.
+     * This is usually preferable to render().then(openModal), because it shows a Loading modal
+     */
+    openModalLazy: (renderModal: () => Promise<RenderModal>, options?: ModalOptions & { contextKey?: string; }) => Promise<string>;
+    /**
+     * Open a Modal with the given render function.
+     */
+    openModal: (renderModal: RenderModal, options?: ModalOptions, contextKey?: string) => string;
+    /**
+     * Close a modal by its key
+     */
+    closeModal: (modalKey: string, contextKey?: string) => void;
+    /**
+     * Close all open modals
+     */
+    closeAllModals: () => void;
+}
+
+export interface MediaModalItem {
+    url: string;
+    type: "IMAGE" | "VIDEO" | "CLIP";
+    original?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    animated?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+
+export interface MediaModalProps {
+    location?: string;
+    contextKey?: string;
+    onCloseCallback?: () => void;
+    className?: string;
+    items: MediaModalItem[];
+    startingIndex?: number;
+    onIndexChange?: (...args: any[]) => void;
+    fit?: string;
+    shouldRedactExplicitContent?: boolean;
+    shouldHideMediaOptions?: boolean;
+}
diff --git a/packages/discord-types/src/index.d.ts b/packages/discord-types/src/index.d.ts
index 23ab505d8..83bbba26e 100644
--- a/packages/discord-types/src/index.d.ts
+++ b/packages/discord-types/src/index.d.ts
@@ -1,5 +1,7 @@
 export * from "./common";
+// TODO: Splitting up components into files in the folder would be good
 export * from "./components";
+export * from "./components/Modal";
 export * from "./flux";
 export * from "./fluxEvents";
 export * from "./menu";
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9bec5ba55..0e9faf0f1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,23 @@
 packages:
     - packages/*
+
+allowBuilds:
+    esbuild: true
+
+overrides:
+    "@eslint/plugin-kit@<0.3.4": ">=0.3.4"
+
+patchedDependencies:
+    "@types/less@3.0.8": patches/@types__less@3.0.8.patch
+
+peerDependencyRules:
+    ignoreMissing:
+        - eslint-plugin-import
+        - eslint
+
+allowedDeprecatedVersions:
+    source-map-resolve: "*"
+    resolve-url: "*"
+    source-map-url: "*"
+    urix: "*"
+    q: "*"
diff --git a/scripts/lintIntl.mjs b/scripts/lintIntl.mjs
new file mode 100644
index 000000000..c85812aa9
--- /dev/null
+++ b/scripts/lintIntl.mjs
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { join, sep } from "node:path";
+
+const ROOT = new URL("..", import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, "$1");
+const VALID_MODIFIERS = new Set(["raw", "hash"]);
+const MARKER_RE = /#\{intl::([\w$+/]*)(?:::(\w+))?\}/g;
+const HASH_RE = /["'`]\s*\.([A-Za-z][A-Za-z0-9+/]{5})\b/g;
+
+const tracked = execFileSync("git", ["ls-files", "src"], { cwd: ROOT, encoding: "utf8" })
+    .split("\n")
+    .filter(p => /\.(ts|tsx|js|jsx|mjs)$/.test(p))
+    .map(p => p.replace(/\//g, sep));
+
+let errors = 0;
+let warnings = 0;
+
+for (const rel of tracked) {
+    const text = readFileSync(join(ROOT, rel), "utf8");
+    if (!text.includes("#{intl::") && !text.includes("find:") && !text.includes("match:")) continue;
+
+    const lines = text.split("\n");
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const at = `${rel.replace(/\\/g, "/")}:${i + 1}`;
+
+        if (/#\{intl::[^}]*$/.test(line)) {
+            console.error(`${at}: ERROR unclosed #{intl:: marker`);
+            errors++;
+        }
+        for (const [full, key, modifier] of line.matchAll(MARKER_RE)) {
+            if (!key) {
+                console.error(`${at}: ERROR empty intl key: ${full}`);
+                errors++;
+            }
+            if (modifier && !VALID_MODIFIERS.has(modifier)) {
+                console.error(`${at}: ERROR unknown intl modifier "${modifier}": ${full}`);
+                errors++;
+            }
+        }
+        if (/\b(find|match)\s*:/.test(line) && !line.includes("#{intl::")) {
+            for (const [, hash] of line.matchAll(HASH_RE)) {
+                if (!/[0-9+/]/.test(hash)) continue;
+                console.warn(`${at}: WARN baked intl hash ".${hash}", prefer #{intl::KEY}`);
+                warnings++;
+            }
+        }
+    }
+}
+
+console.log(`\nintl lint: ${errors} error(s), ${warnings} warning(s)`);
+process.exit(errors > 0 ? 1 : 0);
diff --git a/scripts/lintPatches.mjs b/scripts/lintPatches.mjs
new file mode 100644
index 000000000..33a08483c
--- /dev/null
+++ b/scripts/lintPatches.mjs
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { join, sep } from "node:path";
+
+const ROOT = new URL("..", import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, "$1");
+const VERBOSE = process.env.LINT_PATCHES_VERBOSE === "1" || process.argv.includes("--verbose");
+
+const tracked = execFileSync("git", ["ls-files", "src"], { cwd: ROOT, encoding: "utf8" })
+    .split("\n")
+    .filter(p => /^src\/(plugins|equicordplugins)\/.*\.(ts|tsx)$/.test(p))
+    .map(p => p.replace(/\//g, sep));
+
+let errors = 0;
+let warnings = 0;
+
+function fail(at, rule, msg) {
+    console.error(`${at}: ERROR ${rule} ${msg}`);
+    errors++;
+}
+function warn(at, rule, msg) {
+    if (VERBOSE) console.warn(`${at}: WARN  ${rule} ${msg}`);
+    warnings++;
+}
+
+for (const rel of tracked) {
+    const text = readFileSync(join(ROOT, rel), "utf8");
+    if (!text.includes("match:") && !text.includes("find:")) continue;
+
+    const lines = text.split("\n");
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const at = `${rel.replace(/\\/g, "/")}:${i + 1}`;
+
+        const matchM = line.match(/\bmatch\s*:\s*\/((?:\\.|[^/\\\n])+)\/[gimsuy]*/);
+        if (matchM) {
+            const src = matchM[1];
+            const unbounded = src.match(/\.[+*]\??/);
+            if (unbounded) warn(at, "P002", `unbounded ${unbounded[0]} in match`);
+            const minified = src.match(/\b[a-z]\.[a-z]\b/);
+            if (minified) fail(at, "P001", `hardcoded minified var "${minified[0]}", use \\i.\\i`);
+        }
+
+        const findM = line.match(/\bfind\s*:\s*("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\/(?:\\.|[^/\\\n])+\/[gimsuy]*)/);
+        if (findM) {
+            const window = lines.slice(i, i + 12).join("\n");
+            if (/\b(replacement|match)\s*:/.test(window)) {
+                const v = findM[1];
+                if (v === '""' || v === "''" || v === "``") {
+                    fail(at, "P003", "find is empty");
+                } else if (v.startsWith("/")) {
+                    const src = v.slice(1, v.lastIndexOf("/"));
+                    if (/\\i/.test(src) && !/[A-Za-z]{3,}/.test(src) && !src.includes("#{intl::")) {
+                        warn(at, "P004", "find regex has no string anchor");
+                    }
+                }
+            }
+        }
+
+        const replaceM = line.match(/\breplace\s*:\s*(["'`])((?:\\.|(?!\1).)*)\1/);
+        if (replaceM && /\btry\s*\{[\s\S]*?\}\s*catch\b/.test(replaceM[2])) {
+            warn(at, "P005", "replace uses try/catch, fix the match instead");
+        }
+    }
+}
+
+const tail = warnings && !VERBOSE ? " (run with --verbose to list)" : "";
+console.log(`\npatch lint: ${errors} error(s), ${warnings} warning(s)${tail}`);
+process.exit(errors > 0 ? 1 : 0);
diff --git a/scripts/runInstaller.mjs b/scripts/runInstaller.mjs
index 94c03dd4a..0c124b170 100644
--- a/scripts/runInstaller.mjs
+++ b/scripts/runInstaller.mjs
@@ -38,7 +38,14 @@ function getFilename() {
         case "win32":
             return "EquilotlCli.exe";
         case "darwin":
-            return "Equilotl.MacOS.zip";
+            switch (process.arch) {
+                case "x64":
+                    return "Equilotl-darwin-x64.zip";
+                case "arm64":
+                    return "Equilotl-darwin-arm64.zip";
+                default:
+                    throw new Error("Unsupported macOS architecture: " + process.arch);
+            }
         case "linux":
             return "EquilotlCli-linux";
         default:
diff --git a/src/Vencord.ts b/src/Vencord.ts
index 1ce426d0f..189f67e7d 100644
--- a/src/Vencord.ts
+++ b/src/Vencord.ts
@@ -18,6 +18,7 @@
 
 // DO NOT REMOVE UNLESS YOU WISH TO FACE THE WRATH OF THE CIRCULAR DEPENDENCY DEMON!!!!!!!
 import "~plugins";
+import "./fixWeirdAppRegionBug.css";
 
 export * as Api from "./api";
 export * as Plugins from "./api/PluginManager";
diff --git a/src/VencordNative.ts b/src/VencordNative.ts
index d13ce4dd7..59969777f 100644
--- a/src/VencordNative.ts
+++ b/src/VencordNative.ts
@@ -77,6 +77,7 @@ export default {
 
     native: {
         getVersions: () => process.versions as Partial<NodeJS.ProcessVersions>,
+        supportsWindowsMaterial: () => sendSync<boolean>(IpcEvents.SUPPORTS_WINDOWS_MATERIAL),
         openExternal: (url: string) => invoke<void>(IpcEvents.OPEN_EXTERNAL, url),
         getRendererCss: () => invoke<string>(IpcEvents.GET_RENDERER_CSS),
         onRendererCssUpdate: (cb: (newCss: string) => void) => {
diff --git a/src/api/ChatButtons.tsx b/src/api/ChatButtons.tsx
index a04725386..ae1ea261c 100644
--- a/src/api/ChatButtons.tsx
+++ b/src/api/ChatButtons.tsx
@@ -138,7 +138,7 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
     return (
         <Tooltip text={props.tooltip}>
             {({ onMouseEnter, onMouseLeave }) => (
-                <div className={`expression-picker-chat-input-button ${ChannelTextAreaClasses?.buttonContainer ?? ""}`}>
+                <div className={`expression-picker-chat-input-button ${ChannelTextAreaClasses?.buttonContainer ?? ""} vc-chatbar-button`}>
                     <Clickable
                         aria-label={props.tooltip}
                         onMouseEnter={onMouseEnter}
@@ -191,20 +191,28 @@ addContextMenuPatch("textarea-context", (children, args) => {
     );
 });
 
-// Wrapper stuff is down here to avoid conflicts with above
 export type ChatBarButtonWrapper = (buttons: ReactNode) => ReactNode;
 
-/**
- * Registry for plugins that need to wrap the entire chat bar button container
- */
-export const ChatBarButtonWrappers = new Map<string, ChatBarButtonWrapper>();
+export interface ChatBarButtonWrapperData {
+    wrapper: ChatBarButtonWrapper;
+    priority: number;
+}
 
-export const addChatBarButtonWrapper = (id: string, wrapper: ChatBarButtonWrapper) => ChatBarButtonWrappers.set(id, wrapper);
+/**
+ * Registry for plugins that need to wrap the entire chat bar button container.
+ * Wrappers are applied in ascending priority order (lower number = outermost wrapper).
+ */
+export const ChatBarButtonWrappers = new Map<string, ChatBarButtonWrapperData>();
+
+export const addChatBarButtonWrapper = (id: string, wrapper: ChatBarButtonWrapper, priority: number = 0) => ChatBarButtonWrappers.set(id, { wrapper, priority });
 export const removeChatBarButtonWrapper = (id: string) => ChatBarButtonWrappers.delete(id);
 
 export function _wrapButtons(buttons: ReactNode) {
+    const sorted = [...ChatBarButtonWrappers.values()]
+        .sort((a, b) => a.priority - b.priority);
+
     let wrapped = buttons;
-    for (const wrapper of ChatBarButtonWrappers.values()) {
+    for (const { wrapper } of sorted) {
         wrapped = wrapper(wrapped);
     }
     return wrapped;
diff --git a/src/api/Notifications/notificationLog.tsx b/src/api/Notifications/notificationLog.tsx
index 633ea07be..f0063863c 100644
--- a/src/api/Notifications/notificationLog.tsx
+++ b/src/api/Notifications/notificationLog.tsx
@@ -18,15 +18,13 @@
 
 import * as DataStore from "@api/DataStore";
 import { Settings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
-import { Flex } from "@components/Flex";
 import { Paragraph } from "@components/Paragraph";
 import { openNotificationSettingsModal } from "@components/settings/tabs/vencord/NotificationSettings";
 import { classNameFactory } from "@utils/css";
-import { closeModal, ModalCloseButton, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { t } from "@utils/translation";
-import { Alerts, Button, ListScrollerThin, React, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { ConfirmModal, ListScrollerThin, Modal, openModal, React, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
 import { nanoid } from "nanoid";
 import type { DispatchWithoutAction } from "react";
 
@@ -133,7 +131,7 @@ function NotificationEntry({ data }: { data: PersistentNotificationData; }) {
 export function NotificationLog({ log, pending }: { log: PersistentNotificationData[], pending: boolean; }) {
     if (!log.length && !pending)
         return (
-            <div className={cl("container")}>
+            <div>
                 <div className={cl("empty")} />
                 <Paragraph style={{ textAlign: "center" }}>
                     {t("api.notifications.noNotifications")}
@@ -153,56 +151,47 @@ export function NotificationLog({ log, pending }: { log: PersistentNotificationD
     );
 }
 
-function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void; }) {
+function LogModal(props: RenderModalProps) {
     const [log, pending] = useLogs();
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.LARGE} className={cl("modal")}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{t("api.notifications.notificationLog")}</BaseText>
-                <ModalCloseButton onClick={close} />
-            </ModalHeader>
-
-            <div style={{ width: "100%" }}>
-                <NotificationLog log={log} pending={pending} />
-            </div>
-
-            <ModalFooter>
-                <Flex>
-                    <Button onClick={openNotificationSettingsModal}>
-                        {t("api.notifications.notificationSettings")}
-                    </Button>
-
-                    <Button
-                        disabled={log.length === 0}
-                        color={Button.Colors.RED}
-                        onClick={() => {
-                            Alerts.show({
-                                title: t("api.notifications.logs.title"),
-                                body: t("api.notifications.logs.body", { count: log.length }),
-                                async onConfirm() {
+        <Modal
+            {...props}
+            size="xl"
+            title={t("api.notifications.notificationLog")}
+            actions={[
+                {
+                    text: t("api.notifications.notificationSettings"),
+                    variant: "primary",
+                    onClick: openNotificationSettingsModal
+                },
+                {
+                    text: t("api.notifications.logs.clearNotificationLog"),
+                    variant: "critical-primary",
+                    disabled: !log.length,
+                    onClick() {
+                        openModal(props =>
+                            <ConfirmModal
+                                {...props}
+                                title={t("api.notifications.logs.title")}
+                                subtitle={t("api.notifications.logs.body", { count: log.length })}
+                                confirmText={t("api.notifications.logs.confirm")}
+                                cancelText={t("api.notifications.logs.cancel")}
+                                onConfirm={async () => {
                                     await DataStore.set(KEY, []);
                                     signals.forEach(x => x());
-                                },
-                                confirmText: t("api.notifications.logs.confirm"),
-                                confirmColor: "vc-notification-log-danger-btn",
-                                cancelText: t("api.notifications.cancel")
-                            });
-                        }}
-                    >
-                        {t("api.notifications.clearNotificationLog")}
-                    </Button>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+                                }}
+                            />
+                        );
+                    }
+                }
+            ]}
+        >
+            <NotificationLog log={log} pending={pending} />
+        </Modal>
     );
 }
 
 export function openNotificationLogModal() {
-    const key = openModal(modalProps => (
-        <LogModal
-            modalProps={modalProps}
-            close={() => closeModal(key)}
-        />
-    ));
+    openModal(props => <LogModal {...props} />);
 }
diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css
index e15e01a7d..1d3085e98 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -89,12 +89,6 @@
     margin-bottom: 40px;
 }
 
-.vc-notification-log-container {
-    padding: 1em;
-    max-height: min(750px, 75vh);
-    width: 100%;
-}
-
 .vc-notification-log-wrapper {
     height: 120px;
     width: 100%;
diff --git a/src/api/PluginManager.ts b/src/api/PluginManager.ts
index 76a14c988..910c3e0bc 100644
--- a/src/api/PluginManager.ts
+++ b/src/api/PluginManager.ts
@@ -288,9 +288,9 @@ export const startPlugin = traceFunction("startPlugin", function startPlugin(p:
     }
     if (audioProcessor) addAudioProcessor(name, audioProcessor);
     if (userAreaButton) addUserAreaButton(name, userAreaButton.render, userAreaButton.priority);
-    if (renderProfileCollection) addProfileCollection(name, renderProfileCollection);
-    if (chatBarButtonWrapper) addChatBarButtonWrapper(name, chatBarButtonWrapper);
-    if (renderProfileSection) addProfileSection(name, renderProfileSection);
+    if (renderProfileCollection) addProfileCollection(name, renderProfileCollection.render, renderProfileCollection.priority);
+    if (chatBarButtonWrapper) addChatBarButtonWrapper(name, chatBarButtonWrapper.wrapper, chatBarButtonWrapper.priority);
+    if (renderProfileSection) addProfileSection(name, renderProfileSection.render, renderProfileSection.priority);
 
     return true;
 }, p => `startPlugin ${p.name}`);
@@ -382,7 +382,7 @@ export const initPluginManager = onlyOnce(function init() {
         "onBeforeMessageEdit", "onBeforeMessageSend", "onMessageClick",
         "renderMemberListDecorator", "renderMessageAccessory", "renderMessageDecoration",
         // Custom
-        "renderNicknameIcon", "renderProfileCollection"
+        "renderNicknameIcon"
     ];
 
     const neededApiPlugins = new Set<string>();
@@ -429,7 +429,7 @@ export const initPluginManager = onlyOnce(function init() {
         if (p.renderProfileSection) neededApiPlugins.add("ProfileSectionsAPI");
 
         for (const key of pluginKeysToBind) {
-            p[key] &&= p[key].bind(p) as any;
+            p[key] &&= (p[key] as Function).bind(p) as any;
         }
     }
 
diff --git a/src/api/ProfileCollections.tsx b/src/api/ProfileCollections.tsx
index 07afef0cb..81cf4aa39 100644
--- a/src/api/ProfileCollections.tsx
+++ b/src/api/ProfileCollections.tsx
@@ -14,11 +14,12 @@ const logger = new Logger("ProfileCollectionAPI");
 
 export type ProfileCollectionFactory = (props: { user: User; isSideBar: boolean; }) => ReactNode | Promise<ReactNode> | null;
 
-interface CollectionEntry {
+export interface ProfileCollectionData {
     render: ProfileCollectionFactory;
+    priority: number;
 }
 
-const profileCollections = new Map<string, CollectionEntry>();
+const profileCollections = new Map<string, ProfileCollectionData>();
 const profileCollectionListeners = new Set<() => void>();
 
 /**
@@ -34,7 +35,7 @@ const profileCollectionListeners = new Set<() => void>();
  * ));
  */
 export function addProfileCollection(id: string, render: ProfileCollectionFactory, priority = 0) {
-    profileCollections.set(id, { render });
+    profileCollections.set(id, { render, priority });
     profileCollectionListeners.forEach(listener => listener());
 }
 
@@ -58,6 +59,7 @@ function ProfileCollections({ props }: { props: any; }) {
     }, []);
 
     return Array.from(profileCollections)
+        .sort(([, a], [, b]) => b.priority - a.priority)
         .map(([id, { render: Collection }]) => (
             <ErrorBoundary noop key={id} onError={e => logger.error(`Failed to render profile collection: ${id}`, e.error)}>
                 <Collection {...props} user={props.user ?? props.currentUser} />
diff --git a/src/api/ProfileSections.tsx b/src/api/ProfileSections.tsx
index ecf52ae9c..b1942602a 100644
--- a/src/api/ProfileSections.tsx
+++ b/src/api/ProfileSections.tsx
@@ -13,12 +13,12 @@ const logger = new Logger("ProfileSectionsAPI");
 
 export type ProfileSectionFactory = (props: { userId: string; isSideBar: boolean; }) => ReactNode | Promise<ReactNode> | null;
 
-interface SectionEntry {
+export interface ProfileSectionData {
     render: ProfileSectionFactory;
     priority: number;
 }
 
-const profileSections = new Map<string, SectionEntry>();
+const profileSections = new Map<string, ProfileSectionData>();
 const profileSectionListeners = new Set<() => void>();
 
 /**
diff --git a/src/api/Settings.ts b/src/api/Settings.ts
index 9e674c326..555f4486f 100644
--- a/src/api/Settings.ts
+++ b/src/api/Settings.ts
@@ -70,6 +70,7 @@ export interface Settings {
     | "under-page"
     | "window"
     | undefined;
+    windowsMaterial: "none" | "mica" | "tabbed" | "acrylic";
     disableMinSize: boolean;
     winNativeTitleBar: boolean;
     plugins: {
@@ -126,6 +127,7 @@ const DefaultSettings: Settings = {
     transparent: false,
     winCtrlQ: false,
     macosVibrancyStyle: undefined,
+    windowsMaterial: "none",
     disableMinSize: false,
     winNativeTitleBar: false,
     plugins: {},
diff --git a/src/api/SettingsSync/cloudSetup.tsx b/src/api/SettingsSync/cloudSetup.tsx
index b1fd1a7f4..0d0496f44 100644
--- a/src/api/SettingsSync/cloudSetup.tsx
+++ b/src/api/SettingsSync/cloudSetup.tsx
@@ -8,9 +8,8 @@ import * as DataStore from "@api/DataStore";
 import { showNotification } from "@api/Notifications";
 import { Settings } from "@api/Settings";
 import { Logger } from "@utils/Logger";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
-import { OAuth2AuthorizeModal, UserStore } from "@webpack/common";
+import { OAuth2AuthorizeModal, openModal, UserStore } from "@webpack/common";
 
 export const logger = new Logger("SettingsSync:CloudSetup", "#39b7e0");
 
diff --git a/src/components/Badge.css b/src/components/Badge.css
index be4c3eb7a..e9153b18e 100644
--- a/src/components/Badge.css
+++ b/src/components/Badge.css
@@ -13,6 +13,7 @@
     letter-spacing: 0.02em;
     text-align: center;
     text-transform: uppercase;
+    white-space: nowrap;
 }
 
 .vc-badge-icon {
@@ -51,4 +52,4 @@
 .vc-badge-premium {
     background-color: var(--premium-tier-2-purple-for-gradients);
     color: var(--white);
-}
+}
\ No newline at end of file
diff --git a/src/components/Card.css b/src/components/Card.css
index bdd9ec7b0..8ec6c1fe6 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -11,6 +11,10 @@
     color: var(--text-default);
 }
 
+.vc-card-normal {
+    border: 1px solid var(--border-subtle);
+}
+
 .vc-card-danger {
     background-color: var(--background-feedback-critical);
     border-color: var(--background-feedback-critical);
@@ -56,4 +60,4 @@
 
 .vc-card-defaultPadding {
     padding: 1em;
-}
+}
\ No newline at end of file
diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx
index e5abe3c7b..0f2f84c98 100644
--- a/src/components/ThemeSettings/ThemesTab.tsx
+++ b/src/components/ThemeSettings/ThemesTab.tsx
@@ -37,7 +37,6 @@ import { classNameFactory } from "@utils/css";
 import { copyWithToast, openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { openModal } from "@utils/modal";
 import { relaunch, showItemInFolder } from "@utils/native";
 import { useAwaiter, useForceUpdater } from "@utils/react";
 import type { ThemeHeader } from "@utils/themes";
@@ -46,7 +45,7 @@ import { usercssParse } from "@utils/themes/usercss";
 import { t } from "@utils/translation";
 import { getStylusWebStoreUrl } from "@utils/web";
 import { findComponentByCodeLazy, findLazy } from "@webpack";
-import { Alerts, Menu, React, Select, showToast, TextInput, Toasts, Tooltip, useEffect, useMemo, useState } from "@webpack/common";
+import { Alerts, Menu, openModal,React, Select, showToast, TextInput, Toasts, Tooltip, useEffect, useMemo, useState } from "@webpack/common";
 import { ContextMenuApi } from "@webpack/common/menu";
 import type { ComponentType, Ref, SyntheticEvent } from "react";
 import type { UserstyleHeader } from "usercss-meta";
diff --git a/src/components/ThemeSettings/UserCSSModal.tsx b/src/components/ThemeSettings/UserCSSModal.tsx
index b4f3e4812..550eeb877 100644
--- a/src/components/ThemeSettings/UserCSSModal.tsx
+++ b/src/components/ThemeSettings/UserCSSModal.tsx
@@ -9,15 +9,15 @@ import { BaseText } from "@components/BaseText";
 import { Flex } from "@components/Flex";
 import { CopyIcon, PasteIcon, ResetIcon } from "@components/Icons";
 import { copyWithToast } from "@utils/discord";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { showToast, Toasts, Tooltip } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, showToast, Toasts, Tooltip } from "@webpack/common";
 import { type ReactNode } from "react";
 import { UserstyleHeader } from "usercss-meta";
 
 import { SettingBooleanComponent, SettingColorComponent, SettingNumberComponent, SettingRangeComponent, SettingSelectComponent, SettingTextComponent } from "./components";
 
 interface UserCSSSettingsModalProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     theme: UserstyleHeader;
     onSettingsReset: () => void;
 }
@@ -186,21 +186,22 @@ export function UserCSSSettingsModal({ modalProps, theme, onSettingsReset }: Use
     }
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader separator={false}>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</BaseText>
-                <Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons">
-                    <ExportButton themeSettings={themeVars} />
-                    <ImportButton themeSettings={themeVars} />
-                    <ResetButton themeSettings={userCssVars} themeId={theme.id} close={modalProps.onClose} onReset={onSettingsReset} />
+        <Modal
+            {...modalProps}
+            title={
+                <Flex style={{ alignItems: "center", gap: 4 }}>
+                    <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</BaseText>
+                    <Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons">
+                        <ExportButton themeSettings={themeVars} />
+                        <ImportButton themeSettings={themeVars} />
+                        <ResetButton themeSettings={userCssVars} themeId={theme.id} close={modalProps.onClose} onReset={onSettingsReset} />
+                    </Flex>
                 </Flex>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent>
-                <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>
-                    {controls}
-                </Flex>
-            </ModalContent>
-        </ModalRoot>
+            }
+        >
+            <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>
+                {controls}
+            </Flex>
+        </Modal>
     );
 }
diff --git a/src/components/settings/AddonCard.css b/src/components/settings/AddonCard.css
index ec0f7b326..c76184ee7 100644
--- a/src/components/settings/AddonCard.css
+++ b/src/components/settings/AddonCard.css
@@ -32,7 +32,7 @@
 }
 
 .vc-addon-note {
-    height: 36px;
+    height: 34px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -105,4 +105,4 @@
 
 .vc-addon-footer {
     font-size: small;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/BaseTab.tsx b/src/components/settings/tabs/BaseTab.tsx
index 2e67c7d8a..47b52a9c0 100644
--- a/src/components/settings/tabs/BaseTab.tsx
+++ b/src/components/settings/tabs/BaseTab.tsx
@@ -16,12 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BaseText } from "@components/BaseText";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { onlyOnce } from "@utils/onlyOnce";
 import { t } from "@utils/translation";
+import { Modal, openModal } from "@webpack/common";
 import type { ComponentType, PropsWithChildren } from "react";
 
 export function SettingsTab({ children }: PropsWithChildren) {
@@ -43,19 +42,18 @@ export function wrapTab(component: ComponentType<any>, tab: string) {
 }
 
 export function openSettingsTabModal(Tab: ComponentType<any>) {
-    try {
-        openModal(wrapTab((modalProps: ModalProps) => (
-            <ModalRoot {...modalProps} size={ModalSize.MEDIUM} className="vc-settings-modal-root">
-                <ModalHeader>
-                    <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{Tab.displayName?.replace("SettingsTab", "") || "Settings"}</BaseText>
-                    <ModalCloseButton onClick={modalProps.onClose} />
-                </ModalHeader>
+    Tab = wrapTab(Tab, Tab.displayName || "SettingsTab");
 
-                <ModalContent className="vc-settings-modal">
-                    <Tab />
-                </ModalContent>
-            </ModalRoot>
-        ), Tab.displayName || "SettingsTab"));
+    try {
+        openModal(props => (
+            <Modal
+                {...props}
+                size="lg"
+                title={Tab.displayName?.replace("SettingsTab", "") || "Settings"}
+            >
+                <Tab />
+            </Modal>
+        ));
     } catch {
         handleSettingsTabError();
     }
diff --git a/src/components/settings/tabs/patchHelper/PatchPreview.tsx b/src/components/settings/tabs/patchHelper/PatchPreview.tsx
index 00f7f0597..e294280da 100644
--- a/src/components/settings/tabs/patchHelper/PatchPreview.tsx
+++ b/src/components/settings/tabs/patchHelper/PatchPreview.tsx
@@ -13,8 +13,8 @@ import { ReplaceFn } from "@utils/types";
 import { Button, Parser, useMemo, useState } from "@webpack/common";
 import type { Change } from "diff";
 
-// Do not include diff in non dev builds (side effects import)
-if (IS_DEV) {
+// Do not include diff in standalone builds (side effects import)
+if (!IS_STANDALONE) {
     var differ = require("diff") as typeof import("diff");
 }
 
@@ -130,7 +130,10 @@ export function PatchPreview({ module, match, replacement, setReplacementError }
                     className={Margins.top20}
                     onClick={() => {
                         try {
-                            Function(patchedCode.replace(/^(?=function\()/, "0,"));
+                            const isArrowFunction = patchedCode.startsWith("(");
+                            const wrappedCode = "0," + (!isArrowFunction ? "function" : "") + patchedCode.slice(patchedCode.indexOf("("));
+                            Function(wrappedCode);
+
                             setCompileResult([true, "Compiled successfully"]);
                         } catch (err) {
                             setCompileResult([false, (err as Error).message]);
diff --git a/src/components/settings/tabs/patchHelper/index.tsx b/src/components/settings/tabs/patchHelper/index.tsx
index b0701a1ac..64e333559 100644
--- a/src/components/settings/tabs/patchHelper/index.tsx
+++ b/src/components/settings/tabs/patchHelper/index.tsx
@@ -183,4 +183,4 @@ function PatchHelper() {
     );
 }
 
-export default IS_DEV ? wrapTab(PatchHelper, "Patch Helper") : null;
+export default !IS_STANDALONE ? wrapTab(PatchHelper, "PatchHelper") : null;
diff --git a/src/components/settings/tabs/plugins/ContributorModal.css b/src/components/settings/tabs/plugins/ContributorModal.css
index 9cfcb4b5a..e63579fa8 100644
--- a/src/components/settings/tabs/plugins/ContributorModal.css
+++ b/src/components/settings/tabs/plugins/ContributorModal.css
@@ -1,12 +1,12 @@
 .vc-author-modal-root {
-    padding: 1em;
+    padding: 0 0 16px;
 }
 
 .vc-author-modal-header {
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-bottom: 1em;
+    margin-bottom: 4px;
 }
 
 .vc-author-modal-name {
@@ -50,18 +50,16 @@
         0 2px 6px rgb(0 0 0 / 35%);
 }
 
-.vc-author-modal-root+[class*="footer"] {
-    padding: 16px;
-}
-
 .vc-author-modal-links {
     display: flex;
     gap: 4px;
     margin-left: auto;
+    width: 100%;
+    justify-content: flex-end;
 }
 
 .vc-author-modal-plugins {
     display: grid;
     gap: 0.5em;
     margin-top: 0.75em;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/plugins/ContributorModal.tsx b/src/components/settings/tabs/plugins/ContributorModal.tsx
index 38b48c9bd..3e2bb8cd0 100644
--- a/src/components/settings/tabs/plugins/ContributorModal.tsx
+++ b/src/components/settings/tabs/plugins/ContributorModal.tsx
@@ -7,17 +7,15 @@
 import "./ContributorModal.css";
 
 import { useSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { HeadingPrimary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { Link } from "@components/Link";
 import { Paragraph } from "@components/Paragraph";
 import { EquicordDevsById, VencordDevsById } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { fetchUserProfile } from "@utils/discord";
-import { ModalContent, ModalFooter, ModalRoot, openModal } from "@utils/modal";
 import { Translate } from "@utils/translation";
-import { User } from "@vencord/discord-types";
-import { showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
+import { RenderModalProps, User } from "@vencord/discord-types";
+import { Modal, openModal, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
 
 import Plugins, { PluginMeta } from "~plugins";
 
@@ -27,16 +25,10 @@ import { PluginCard } from "./PluginCard";
 const cl = classNameFactory("vc-author-modal-");
 
 export function openContributorModal(user: User) {
-    openModal(modalProps =>
-        <ModalRoot {...modalProps}>
-            <ErrorBoundary>
-                <ContributorModal user={user} />
-            </ErrorBoundary>
-        </ModalRoot>
-    );
+    openModal(modalProps => <ContributorModal user={user} modalProps={modalProps} />);
 }
 
-function ContributorModal({ user }: { user: User; }) {
+function ContributorModal({ user, modalProps }: { user: User; modalProps: RenderModalProps; }) {
     useSettings();
 
     const profile = useStateFromStores([UserProfileStore], () => UserProfileStore.getUserProfile(user.id));
@@ -68,18 +60,20 @@ function ContributorModal({ user }: { user: User; }) {
     const hasLinks = website || githubName;
 
     return (
-        <>
-            <ModalContent className={cl("root")}>
+        <Modal
+            {...modalProps}
+            title={
                 <div className={cl("header")}>
                     <img
                         className={cl("avatar")}
                         src={user.getAvatarURL(void 0, 512, true)}
                         alt=""
                     />
-                    <HeadingPrimary className={cl("name")}>{user.username}</HeadingPrimary>
+                    <Heading tag="h2" className={cl("name")}>{user.username}</Heading>
                 </div>
-
-                {plugins.length ? (
+            }
+            subtitle={
+                plugins.length ? (
                     <Paragraph>
                         <Translate
                             i18nKey="vencord.settings.plugins.contributorModal.contributorInfo.plugins"
@@ -94,25 +88,14 @@ function ContributorModal({ user }: { user: User; }) {
                             to Equicord in other ways!
                         </Translate>
                     </Paragraph >
-                )}
-
-                {!!plugins.length && (
-                    <div className={cl("plugins")}>
-                        {plugins.map(p =>
-                            <PluginCard
-                                key={p.name}
-                                plugin={p}
-                                disabled={p.required ?? false}
-                                onRestartNeeded={() => showToast("Restart to apply changes!")}
-                            />
-                        )}
-                    </div>
-                )}
-            </ModalContent>
-
-            {hasLinks && (
-                <ModalFooter>
-                    <div className={cl("links")}>
+                )
+            }
+            actionBarInput={
+                hasLinks && (
+                    <div
+                        className={cl("links")}
+                        style={{ width: "100%", justifyContent: "flex-end" }}
+                    >
                         {website && (
                             <WebsiteButton
                                 text={website}
@@ -126,8 +109,23 @@ function ContributorModal({ user }: { user: User; }) {
                             />
                         )}
                     </div>
-                </ModalFooter>
-            )}
-        </>
+                )
+            }
+        >
+            <div className={cl("root")}>
+                {!!plugins.length && (
+                    <div className={cl("plugins")}>
+                        {plugins.map(p =>
+                            <PluginCard
+                                key={p.name}
+                                plugin={p}
+                                disabled={p.required ?? false}
+                                onRestartNeeded={() => showToast("Restart to apply changes!")}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+        </Modal>
     );
 }
diff --git a/src/components/settings/tabs/plugins/PluginModal.css b/src/components/settings/tabs/plugins/PluginModal.css
index bdd35c80c..0983f505a 100644
--- a/src/components/settings/tabs/plugins/PluginModal.css
+++ b/src/components/settings/tabs/plugins/PluginModal.css
@@ -1,7 +1,6 @@
 .vc-plugin-modal-header {
     align-items: flex-start;
     position: relative;
-    padding: 16px 16px 0 24px;
 }
 
 .vc-plugin-modal-header-content {
@@ -70,7 +69,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
-    margin-block: 8px 16px;
+    margin-top: 8px;
 }
 
 .vc-plugin-modal-tag {
@@ -82,3 +81,9 @@
     padding: 6px 12px;
     color: var(--text-default);
 }
+
+.vc-plugin-modal-about-box {
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid var(--border-normal, var(--background-modifier-accent));
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx
index 186f2be1f..5d397afb5 100644
--- a/src/components/settings/tabs/plugins/PluginModal.tsx
+++ b/src/components/settings/tabs/plugins/PluginModal.tsx
@@ -32,11 +32,10 @@ import { classNameFactory } from "@utils/css";
 import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { OptionType, Plugin, PluginTag } from "@utils/types";
-import { User } from "@vencord/discord-types";
+import { RenderModalProps, User } from "@vencord/discord-types";
 import { findComponentByCodeLazy, findCssClassesLazy } from "@webpack";
-import { Clickable, FluxDispatcher, React, Toasts, Tooltip, useEffect, useMemo, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
+import { Clickable, FluxDispatcher, Modal, openModal, React, Text, Toasts, Tooltip, useEffect, useMemo, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
 import { Constructor } from "type-fest";
 
 import { PluginMeta } from "~plugins";
@@ -53,7 +52,7 @@ const ConfirmModal = findComponentByCodeLazy('parentComponent:"ConfirmModal"');
 const WarningIcon = findComponentByCodeLazy("3.15H3.29c-1.74");
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
 
-interface PluginModalProps extends ModalProps {
+interface PluginModalProps extends RenderModalProps {
     plugin: Plugin;
     onRestartNeeded(key: string): void;
 }
@@ -142,6 +141,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         onChange={debounce(onChange)}
                         pluginSettings={pluginSettings}
                         definedSettings={settings}
+                        closePluginSettings={onClose}
                     />
                 </ErrorBoundary>
             );
@@ -176,28 +176,36 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     const isEquicordPlugin = pluginMeta.folderName.startsWith("src/equicordplugins/") ?? false;
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
-            <ModalHeader separator={false} className={cl("header")}>
-                <div className={cl("header-content")}>
-                    <BaseText size="lg" weight="semibold" className={cl("title")}>{plugin.name}</BaseText>
-                    <BaseText size="sm" className={cl("description")}>{plugin.description}</BaseText>
-                    {!!plugin.tags?.length && <PluginTags tags={plugin.tags} />}
-                    {!!plugin.settingsAboutComponent && (
-                        <div className={Margins.top8}>
-                            <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
-                                <plugin.settingsAboutComponent />
-                            </ErrorBoundary>
-                        </div>
-                    )}
+        <Modal
+            transitionState={transitionState}
+            onClose={onClose}
+            size="lg"
+            title={
+                <div className={cl("header")}>
+                    <BaseText tag="h1" weight="semibold" size="lg">{plugin.name}</BaseText>
                 </div>
-                <div className={cl("header-trailing")}>
-                    <CloseButton onClick={onClose} />
+            }
+            subtitle={
+                <div className={cl("info")}>
+                    <div>
+                        <Paragraph size="md">{plugin.description}</Paragraph>
+                        {!!plugin.tags?.length && <PluginTags tags={plugin.tags} />}
+                    </div>
                 </div>
-            </ModalHeader>
-
-            <ModalContent className={"vc-settings-modal-content"}>
+            }
+        >
+            {!!plugin.settingsAboutComponent && (
+                <div className={classes(Margins.top16, cl("about-box"))}>
+                    <section>
+                        <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
+                            <plugin.settingsAboutComponent />
+                        </ErrorBoundary>
+                    </section>
+                </div>
+            )}
+            <div className={"vc-settings-modal-content"}>
                 <section>
-                    <BaseText size="lg" weight="semibold" color="text-strong" className={Margins.bottom8}>Authors</BaseText>
+                    <Text variant="heading-lg/semibold" className={classes(Margins.top8, Margins.bottom8)}>Authors</Text>
                     <div style={{ width: "fit-content" }}>
                         <ErrorBoundary noop>
                             <UserSummaryItem
@@ -228,8 +236,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     <BaseText size="lg" weight="semibold" color="text-strong" className={classes(Margins.top16, Margins.bottom8)}>Settings</BaseText>
                     {renderSettings()}
                 </section>
-            </ModalContent>
-            <ModalFooter>
+            </div>
+            <div>
                 <Flex flexDirection="column" style={{ width: "100%" }}>
                     <Flex style={{ justifyContent: "space-between", alignItems: "center" }}>
                         {hasSettings ? (
@@ -262,8 +270,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         )}
                     </Flex>
                 </Flex>
-            </ModalFooter>
-        </ModalRoot >
+            </div>
+        </Modal >
     );
 }
 
diff --git a/src/components/settings/tabs/plugins/UIElements.css b/src/components/settings/tabs/plugins/UIElements.css
index 30db51dbd..a362aad6a 100644
--- a/src/components/settings/tabs/plugins/UIElements.css
+++ b/src/components/settings/tabs/plugins/UIElements.css
@@ -18,10 +18,9 @@
 }
 
 .vc-plugin-ui-elements-modal-content {
-    padding: 1em;
     display: flex;
     flex-direction: column;
-    gap: 1.5em;
+    gap: 2em;
 }
 
 .vc-plugin-ui-elements-switches {
diff --git a/src/components/settings/tabs/plugins/UIElements.tsx b/src/components/settings/tabs/plugins/UIElements.tsx
index 6d79c96cb..a3a7bb8e2 100644
--- a/src/components/settings/tabs/plugins/UIElements.tsx
+++ b/src/components/settings/tabs/plugins/UIElements.tsx
@@ -17,9 +17,9 @@ import { Switch } from "@components/Switch";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { ModalContent, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { IconComponent } from "@utils/types";
-import { Clickable } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Clickable, Modal,openModal } from "@webpack/common";
 
 const cl = classNameFactory("vc-plugin-ui-elements-");
 
@@ -74,7 +74,7 @@ function Section(props: {
 
     return (
         <section>
-            <BaseText tag="h3" size="xl" weight="bold">{title}</BaseText>
+            <BaseText tag="h3" size="lg" weight="semibold">{title}</BaseText>
             <Paragraph size="sm" className={classes(Margins.top8, Margins.bottom20)}>{description}</Paragraph>
 
             <div className={cl("switches")}>
@@ -89,12 +89,12 @@ function Section(props: {
     );
 }
 
-function UIElementsModal(props: ModalProps) {
+function UIElementsModal(props: RenderModalProps) {
     const { uiElements } = useSettings(["uiElements.*"]);
 
     return (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalContent className={cl("modal-content")}>
+        <Modal {...props} size="md" title="Manage plugin UI elements">
+            <div className={cl("modal-content")}>
                 <Section
                     title="Chatbar Buttons"
                     description="These are the buttons on the right side of the chat input bar"
@@ -107,7 +107,7 @@ function UIElementsModal(props: ModalProps) {
                     buttonMap={MessagePopoverButtonMap}
                     settings={uiElements.messagePopoverButtons}
                 />
-            </ModalContent>
-        </ModalRoot>
+            </div>
+        </Modal>
     );
 }
diff --git a/src/components/settings/tabs/plugins/components/Common.tsx b/src/components/settings/tabs/plugins/components/Common.tsx
index 803f1d395..ab5454d89 100644
--- a/src/components/settings/tabs/plugins/components/Common.tsx
+++ b/src/components/settings/tabs/plugins/components/Common.tsx
@@ -22,6 +22,7 @@ interface SettingBaseProps<T> {
     };
     id: string;
     definedSettings: DefinedSettings;
+    closePluginSettings(): void;
 }
 
 export type SettingProps<T extends PluginSettingDefCommon> = SettingBaseProps<T>;
diff --git a/src/components/settings/tabs/plugins/components/ComponentSetting.tsx b/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
index e1521f02a..d67f83be7 100644
--- a/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
@@ -20,6 +20,6 @@ import { PluginSettingComponentDef } from "@utils/types";
 
 import { ComponentSettingProps } from "./Common";
 
-export function ComponentSetting({ setting, onChange }: ComponentSettingProps<PluginSettingComponentDef>) {
-    return setting.component({ setValue: onChange, option: setting });
+export function ComponentSetting({ setting, onChange, closePluginSettings }: ComponentSettingProps<PluginSettingComponentDef>) {
+    return setting.component({ setValue: onChange, option: setting, closePluginSettings });
 }
diff --git a/src/components/settings/tabs/plugins/index.tsx b/src/components/settings/tabs/plugins/index.tsx
index 2909f15ab..80686ecae 100644
--- a/src/components/settings/tabs/plugins/index.tsx
+++ b/src/components/settings/tabs/plugins/index.tsx
@@ -35,10 +35,10 @@ import { isTruthy } from "@utils/guards";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { useAwaiter, useIntersection } from "@utils/react";
+import { useAwaiter, useCleanupEffect, useIntersection } from "@utils/react";
 import { t } from "@utils/translation";
 import { PluginTag, PluginTags } from "@utils/types";
-import { Alerts, lodash, Parser, React, SearchableSelect, Select, TextInput, Toasts, Tooltip, useCallback, useMemo, useRef, useState } from "@webpack/common";
+import { Alerts, ConfirmModal, lodash, openModal, Parser, React, SearchableSelect, Select, TextInput, Toasts, Tooltip, useCallback, useMemo, useRef, useState } from "@webpack/common";
 import { JSX } from "react";
 
 import Plugins, { ExcludedPlugins, PluginMeta } from "~plugins";
@@ -148,7 +148,7 @@ export default function PluginSettings() {
     const changeRef = useRef<ChangeList<string>>(null);
     const changes = changeRef.current ??= new ChangeList<string>();
 
-    React.useEffect(() => {
+    useCleanupEffect(() => {
         return () => {
             if (!changes.hasChanges) return;
 
@@ -158,23 +158,29 @@ export default function PluginSettings() {
             const displayed = pluginNames.slice(0, maxDisplay);
             const remainingCount = pluginNames.length - displayed.length;
 
-            Alerts.show({
-                title: t("vencord.settings.restartRequired.title"),
-                body: (
-                    <div>
-                        {displayed.map((s, i) => (
-                            <span key={i}>
-                                {i > 0 && ", "}
-                                {Parser.parse("`" + s + "`")}
-                            </span>
-                        ))}
-                        {remainingCount > 0 && <span> and {remainingCount} more</span>}
-                    </div>
-                ),
-                confirmText: t("vencord.settings.restartRequired.confirm"),
-                cancelText: t("vencord.settings.restartRequired.cancel"),
-                onConfirm: () => location.reload()
-            });
+            openModal(props => (
+                <ConfirmModal
+                    {...props}
+                    title={t("vencord.settings.restartRequired.title")}
+                    confirmText={t("vencord.settings.restartRequired.confirm")}
+                    cancelText={t("vencord.settings.restartRequired.cancel")}
+                    variant="primary"
+                    onConfirm={() => location.reload()}
+                >
+                    <>
+                        <p>{t("vencord.settings.restartRequired.plugins")}</p>
+                        <div>
+                            {displayed.map((s, i) => (
+                                <span key={i}>
+                                    {i > 0 && ", "}
+                                    {Parser.parse("`" + s + "`")}
+                                </span>
+                            ))}
+                            {remainingCount > 0 && <span> and {remainingCount} more</span>}
+                        </div>
+                    </>
+                </ConfirmModal>
+            ));
         };
     }, []);
 
diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css
index 318bb3215..c87965b1a 100644
--- a/src/components/settings/tabs/styles.css
+++ b/src/components/settings/tabs/styles.css
@@ -88,12 +88,4 @@
 
 .vc-cloud-button-icon {
     height: 1.25em;
-}
-
-.vc-settings-modal-root {
-    background: var(--background-base-low);
-}
-
-.vc-settings-modal {
-    padding-bottom: 1em;
 }
\ No newline at end of file
diff --git a/src/components/settings/tabs/updater/Components.tsx b/src/components/settings/tabs/updater/Components.tsx
index 22f830eb9..88893d43f 100644
--- a/src/components/settings/tabs/updater/Components.tsx
+++ b/src/components/settings/tabs/updater/Components.tsx
@@ -14,7 +14,7 @@ import { Span } from "@components/Span";
 import { Margins } from "@utils/margins";
 import { relaunch } from "@utils/native";
 import { changes, checkForUpdates, update, updateError } from "@utils/updater";
-import { Alerts, React, Toasts, useState } from "@webpack/common";
+import { ConfirmModal, openModal, React, Toasts, useState } from "@webpack/common";
 
 import { runWithDispatch } from "./runWithDispatch";
 
@@ -113,17 +113,21 @@ export function Updatable(props: CommonProps) {
                                 setUpdates([]);
 
                                 await new Promise<void>(r => {
-                                    Alerts.show({
-                                        title: "Update Success!",
-                                        body: "Successfully updated. Restart now to apply the changes?",
-                                        confirmText: "Restart",
-                                        cancelText: "Not now!",
-                                        onConfirm() {
-                                            relaunch();
-                                            r();
-                                        },
-                                        onCancel: r
-                                    });
+                                    openModal(props => (
+                                        <ConfirmModal
+                                            {...props}
+                                            title="Update Success!"
+                                            subtitle="Successfully updated. Restart now to apply the changes?"
+                                            confirmText="Restart"
+                                            cancelText="Not now!"
+                                            variant="primary"
+                                            onConfirm={() => {
+                                                relaunch();
+                                                r();
+                                            }}
+                                            onCancel={r}
+                                        />
+                                    ));
                                 });
                             }
                         })}
diff --git a/src/components/settings/tabs/updater/runWithDispatch.tsx b/src/components/settings/tabs/updater/runWithDispatch.tsx
index 719958e78..55f290ad9 100644
--- a/src/components/settings/tabs/updater/runWithDispatch.tsx
+++ b/src/components/settings/tabs/updater/runWithDispatch.tsx
@@ -6,7 +6,7 @@
 
 import { ErrorCard } from "@components/ErrorCard";
 import { UpdateLogger } from "@utils/updater";
-import { Alerts, Parser } from "@webpack/common";
+import { ConfirmModal,openModal, Parser } from "@webpack/common";
 
 function getErrorMessage(e: any) {
     if (!e?.code || !e.cmd)
@@ -33,16 +33,20 @@ export function runWithDispatch(dispatch: React.Dispatch<React.SetStateAction<bo
 
             const err = getErrorMessage(e);
 
-            Alerts.show({
-                title: "Oops!",
-                body: (
+            openModal(props => (
+                <ConfirmModal
+                    {...props}
+                    title="Oops!"
+                    confirmText="OK"
+                    variant="primary"
+                >
                     <ErrorCard>
                         {err.split("\n").map((line, idx) =>
                             <div key={idx}>{Parser.parse(line)}</div>
                         )}
                     </ErrorCard>
-                )
-            });
+                </ConfirmModal>
+            ));
         } finally {
             dispatch(false);
         }
diff --git a/src/components/settings/tabs/vencord/MacVibrancySettings.tsx b/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
index 015f27588..157b16ab6 100644
--- a/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
+++ b/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
@@ -7,80 +7,81 @@
 import { useSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Heading } from "@components/Heading";
+import { IS_MAC } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { t } from "@utils/translation";
 import { Select } from "@webpack/common";
 
-export function VibrancySettings() {
+export function MacOSVibrancySettings() {
     const settings = useSettings(["macosVibrancyStyle"]);
 
+    if (!IS_MAC || IS_WEB) return null;
+
     return (
-        <>
-            <Heading>{t("vencord.settings.macosVibrancyStyle.title")}</Heading>
-            <ErrorBoundary noop>
-                <Select
-                    className={Margins.bottom20}
-                    placeholder={t("vencord.settings.macosVibrancyStyle.placeholder")}
-                    options={[
-                        // Sorted from most opaque to most transparent
-                        {
-                            label: "No vibrancy", value: undefined
-                        },
-                        {
-                            label: "Under Page (window tinting)",
-                            value: "under-page"
-                        },
-                        {
-                            label: "Content",
-                            value: "content"
-                        },
-                        {
-                            label: "Window",
-                            value: "window"
-                        },
-                        {
-                            label: "Selection",
-                            value: "selection"
-                        },
-                        {
-                            label: "Titlebar",
-                            value: "titlebar"
-                        },
-                        {
-                            label: "Header",
-                            value: "header"
-                        },
-                        {
-                            label: "Sidebar",
-                            value: "sidebar"
-                        },
-                        {
-                            label: "Tooltip",
-                            value: "tooltip"
-                        },
-                        {
-                            label: "Menu",
-                            value: "menu"
-                        },
-                        {
-                            label: "Popover",
-                            value: "popover"
-                        },
-                        {
-                            label: "Fullscreen UI (transparent but slightly muted)",
-                            value: "fullscreen-ui"
-                        },
-                        {
-                            label: "HUD (Most transparent)",
-                            value: "hud"
-                        },
-                    ]}
-                    select={v => settings.macosVibrancyStyle = v}
-                    isSelected={v => settings.macosVibrancyStyle === v}
-                    serialize={identity}
-                />
-            </ErrorBoundary>
-        </>
+        <ErrorBoundary noop>
+            <Heading tag="h5">{t("vencord.settings.macosVibrancyStyle.title")}</Heading>
+            <Select
+                className={Margins.bottom20}
+                placeholder={t("vencord.settings.macosVibrancyStyle.placeholder")}
+                options={[
+                    // Sorted from most opaque to most transparent
+                    {
+                        label: "No vibrancy", value: undefined
+                    },
+                    {
+                        label: "Under Page (window tinting)",
+                        value: "under-page"
+                    },
+                    {
+                        label: "Content",
+                        value: "content"
+                    },
+                    {
+                        label: "Window",
+                        value: "window"
+                    },
+                    {
+                        label: "Selection",
+                        value: "selection"
+                    },
+                    {
+                        label: "Titlebar",
+                        value: "titlebar"
+                    },
+                    {
+                        label: "Header",
+                        value: "header"
+                    },
+                    {
+                        label: "Sidebar",
+                        value: "sidebar"
+                    },
+                    {
+                        label: "Tooltip",
+                        value: "tooltip"
+                    },
+                    {
+                        label: "Menu",
+                        value: "menu"
+                    },
+                    {
+                        label: "Popover",
+                        value: "popover"
+                    },
+                    {
+                        label: "Fullscreen UI (transparent but slightly muted)",
+                        value: "fullscreen-ui"
+                    },
+                    {
+                        label: "HUD (Most transparent)",
+                        value: "hud"
+                    },
+                ]}
+                select={v => settings.macosVibrancyStyle = v}
+                isSelected={v => settings.macosVibrancyStyle === v}
+                serialize={identity}
+            />
+        </ErrorBoundary>
     );
 }
diff --git a/src/components/settings/tabs/vencord/NotificationSettings.tsx b/src/components/settings/tabs/vencord/NotificationSettings.tsx
index bad4773e8..acc992985 100644
--- a/src/components/settings/tabs/vencord/NotificationSettings.tsx
+++ b/src/components/settings/tabs/vencord/NotificationSettings.tsx
@@ -6,7 +6,6 @@
 
 import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
 import { Button } from "@components/Button";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
@@ -15,9 +14,8 @@ import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
-import { Select, Slider } from "@webpack/common";
+import { Modal, openModal, Select, Slider } from "@webpack/common";
 
 export function NotificationSection() {
     return (
@@ -41,16 +39,13 @@ export function NotificationSection() {
 
 export function openNotificationSettingsModal() {
     openModal(props => (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Notification Settings</BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-
-            <ModalContent>
-                <NotificationSettings />
-            </ModalContent>
-        </ModalRoot>
+        <Modal
+            {...props}
+            size="lg"
+            title={t("api.notifications.notificationSettings")}
+        >
+            <NotificationSettings />
+        </Modal>
     ));
 }
 
@@ -58,8 +53,8 @@ function NotificationSettings() {
     const settings = useSettings(["notifications.*"]).notifications;
 
     return (
-        <div style={{ padding: "1em 0" }}>
-            <Heading>Notification Style</Heading>
+        <>
+            <Heading tag="h5">Notification Style</Heading>
             {settings.useNative !== "never" && Notification?.permission === "denied" && (
                 <ErrorCard style={{ padding: "1em" }} className={Margins.bottom8}>
                     <Heading>Desktop Notification Permission denied</Heading>
@@ -135,6 +130,6 @@ function NotificationSettings() {
                 onValueRender={v => v === 200 ? "∞" : v}
                 onMarkerRender={v => v === 200 ? "∞" : v}
             />
-        </div>
+        </>
     );
 }
diff --git a/src/components/settings/tabs/vencord/WindowsMaterialSettings.tsx b/src/components/settings/tabs/vencord/WindowsMaterialSettings.tsx
new file mode 100644
index 000000000..0fec4ef88
--- /dev/null
+++ b/src/components/settings/tabs/vencord/WindowsMaterialSettings.tsx
@@ -0,0 +1,55 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { useSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Heading } from "@components/Heading";
+import { Margins } from "@components/margins";
+import { Paragraph } from "@components/Paragraph";
+import { IS_WINDOWS } from "@utils/constants";
+import { Select } from "@webpack/common";
+
+export function WindowsMaterialSettings() {
+    const settings = useSettings(["windowsMaterial"]);
+
+    if (!IS_WINDOWS || IS_WEB || !VencordNative.native.supportsWindowsMaterial()) return null;
+
+    return (
+        <ErrorBoundary noop>
+            <Heading tag="h5">Background Material</Heading>
+            <Paragraph className={Margins.bottom8}>
+                Windows transparent background effects. You need a theme that supports transparency or this will do nothing. A restart is required after changing this setting.
+            </Paragraph>
+
+            <Select
+                placeholder="None"
+                options={[
+                    {
+                        label: "None",
+                        value: "none",
+                        default: true
+                    },
+                    {
+                        label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
+                        value: "mica"
+                    },
+                    {
+                        label: "Tabbed (variant of Mica with stronger background tinting)",
+                        value: "tabbed"
+                    },
+                    {
+                        label: "Acrylic (blurs the window behind Vesktop for a translucent background)",
+                        value: "acrylic"
+                    }
+                ]}
+                closeOnSelect={true}
+                select={v => (settings.windowsMaterial = v)}
+                isSelected={v => v === settings.windowsMaterial}
+                serialize={s => s}
+            />
+        </ErrorBoundary>
+    );
+}
diff --git a/src/components/settings/tabs/vencord/index.tsx b/src/components/settings/tabs/vencord/index.tsx
index 894626afc..56a235844 100644
--- a/src/components/settings/tabs/vencord/index.tsx
+++ b/src/components/settings/tabs/vencord/index.tsx
@@ -11,7 +11,6 @@ import { plugins } from "@api/PluginManager";
 import { useSettings } from "@api/Settings";
 import { Button } from "@components/Button";
 import { Divider } from "@components/Divider";
-import { Flex } from "@components/Flex";
 import { FormSwitch } from "@components/FormSwitch";
 import { Heading } from "@components/Heading";
 import { FolderIcon, GithubIcon, LogIcon, PaintbrushIcon, RestartIcon } from "@components/Icons";
@@ -22,16 +21,18 @@ import { QuickAction, QuickActionCard } from "@components/settings/QuickAction";
 import { SpecialCard } from "@components/settings/SpecialCard";
 import BadgeAPI from "@plugins/_api/badges";
 import { gitRemote } from "@shared/vencordUserAgent";
-import { DONOR_ROLE_ID, GUILD_ID, IS_MAC, IS_WINDOWS, VC_DONOR_ROLE_ID, VC_GUILD_ID } from "@utils/constants";
+import { DONOR_ROLE_ID, GUILD_ID, IS_WINDOWS, VC_DONOR_ROLE_ID, VC_GUILD_ID } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
-import { identity, isAnyPluginDev } from "@utils/misc";
+import { isAnyPluginDev } from "@utils/misc";
 import { relaunch } from "@utils/native";
 import { t } from "@utils/translation";
-import { Alerts, GuildMemberStore, React, Select, UserStore } from "@webpack/common";
+import { Alerts, GuildMemberStore, React, useMemo, UserStore } from "@webpack/common";
 
 import { DonateButtonComponent } from "./DonateButton";
-import { openNotificationSettingsModal } from "./NotificationSettings";
+import { MacOSVibrancySettings } from "./MacVibrancySettings";
+import { NotificationSection } from "./NotificationSettings";
+import { WindowsMaterialSettings } from "./WindowsMaterialSettings";
 
 const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
 const SHIGGY_DONATE_IMAGE = "https://equicord.org/assets/favicon.png";
@@ -48,80 +49,121 @@ type KeysOfType<Object, Type> = {
     [K in keyof Object]: Object[K] extends Type ? K : never;
 }[keyof Object];
 
-function EquicordSettings() {
-    const settings = useSettings();
+function Switches() {
+    const settings = useSettings(["useQuickCss", "enableReactDevtools", "mainWindowFrameless", "frameless", "winNativeTitleBar", "transparent", "winCtrlQ", "disableMinSize"]);
 
-    const donateImage = React.useMemo(
-        () => (Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE),
-        [],
-    );
-
-    const needsVibrancySettings = IS_DISCORD_DESKTOP && IS_MAC;
-
-    const user = UserStore?.getCurrentUser();
-
-    const Switches: Array<false | {
+    const Switches = [
+        {
+            key: "useQuickCss",
+            title: t("vencord.settings.useQuickCss.title"),
+            description: t("vencord.settings.useQuickCss.description"),
+        },
+        !IS_WEB && {
+            key: "enableReactDevtools",
+            title: t("vencord.settings.enableReactDevtools.title"),
+            description: t("vencord.settings.enableReactDevtools.description"),
+            restartRequired: true,
+        },
+        (!IS_WEB && !IS_DISCORD_DESKTOP || !IS_WINDOWS) && {
+            key: "mainWindowFrameless",
+            title: t("equicord.mainWindowFrameless.title"),
+            description: t("equicord.mainWindowFrameless.description"),
+            restartRequired: true,
+        },
+        !IS_WEB && (!IS_DISCORD_DESKTOP || !IS_WINDOWS
+            ? {
+                key: "frameless",
+                title: t("vencord.settings.frameless.title"),
+                description: t("vencord.settings.frameless.description"),
+                restartRequired: true,
+            }
+            : {
+                key: "winNativeTitleBar",
+                title: t("vencord.settings.winNativeTitleBar.title"),
+                description: t("vencord.settings.winNativeTitleBar.description"),
+                restartRequired: true,
+            }
+        ),
+        !IS_WEB && {
+            key: "transparent",
+            title: t("vencord.settings.transparent.title"),
+            description: t("vencord.settings.transparent.description"),
+            restartRequired: true,
+            warning: IS_WINDOWS
+                ? t("vencord.settings.transparent.noteWindows")
+                : t("vencord.settings.transparent.note"),
+        },
+        IS_DISCORD_DESKTOP && {
+            key: "disableMinSize",
+            title: t("vencord.settings.disableMinSize.title"),
+            description: t("vencord.settings.disableMinSize.description"),
+            restartRequired: true,
+        },
+        !IS_WEB &&
+        IS_WINDOWS && {
+            key: "winCtrlQ",
+            title: t("vencord.settings.winCtrlQ.title"),
+            description: t("vencord.settings.winCtrlQ.description"),
+            restartRequired: true,
+        }
+    ] satisfies Array<false | {
         key: KeysOfType<typeof settings, boolean>;
         title: string;
         description?: string;
         restartRequired?: boolean;
         warning?: string;
-    }>
-        = [
-            {
-                key: "useQuickCss",
-                title: t("vencord.settings.useQuickCss.title"),
-                description: t("vencord.settings.useQuickCss.description"),
-            },
-            !IS_WEB && {
-                key: "enableReactDevtools",
-                title: t("vencord.settings.enableReactDevtools.title"),
-                description: t("vencord.settings.enableReactDevtools.description"),
-                restartRequired: true,
-            },
-            (!IS_WEB && !IS_DISCORD_DESKTOP || !IS_WINDOWS) && {
-                key: "mainWindowFrameless",
-                title: t("equicord.mainWindowFrameless.title"),
-                description: t("equicord.mainWindowFrameless.description"),
-                restartRequired: true,
-            },
-            !IS_WEB && (!IS_DISCORD_DESKTOP || !IS_WINDOWS
-                ? {
-                    key: "frameless",
-                    title: t("vencord.settings.frameless.title"),
-                    description: t("vencord.settings.frameless.description"),
-                    restartRequired: true,
+    }>;
+
+    return Switches.map(setting => {
+        if (!setting) {
+            return null;
+        }
+
+        const { key, title, description, restartRequired, warning } = setting;
+
+        return (
+            <FormSwitch
+                key={key}
+                title={title}
+                description={
+                    warning ? (
+                        <>
+                            {description}
+                            <Notice.Warning className={Margins.top8} style={{ width: "100%" }}>
+                                {warning}
+                            </Notice.Warning>
+                        </>
+                    ) : (
+                        description
+                    )
                 }
-                : {
-                    key: "winNativeTitleBar",
-                    title: t("vencord.settings.winNativeTitleBar.title"),
-                    description: t("vencord.settings.winNativeTitleBar.description"),
-                    restartRequired: true,
-                }
-            ),
-            !IS_WEB && {
-                key: "transparent",
-                title: t("vencord.settings.transparent.title"),
-                description: t("vencord.settings.transparent.description"),
-                restartRequired: true,
-                warning: IS_WINDOWS
-                    ? t("vencord.settings.transparent.noteWindows")
-                    : t("vencord.settings.transparent.note"),
-            },
-            IS_DISCORD_DESKTOP && {
-                key: "disableMinSize",
-                title: t("vencord.settings.disableMinSize.title"),
-                description: t("vencord.settings.disableMinSize.description"),
-                restartRequired: true,
-            },
-            !IS_WEB &&
-            IS_WINDOWS && {
-                key: "winCtrlQ",
-                title: t("vencord.settings.winCtrlQ.title"),
-                description: t("vencord.settings.winCtrlQ.description"),
-                restartRequired: true,
-            }
-        ];
+                value={settings[key]}
+                onChange={v => {
+                    settings[key] = v;
+
+                    if (restartRequired) {
+                        Alerts.show({
+                            title: t("vencord.settings.restartRequired.title"),
+                            body: t("vencord.settings.restartRequired.body"),
+                            confirmText: t("vencord.settings.restartRequired.confirm"),
+                            cancelText: t("vencord.settings.restartRequired.cancel"),
+                            onConfirm: relaunch
+                        });
+                    }
+                }}
+                hideBorder
+            />
+        );
+    });
+}
+
+function EquicordSettings() {
+    const donateImage = useMemo(() =>
+        Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE,
+        []
+    );
+
+    const user = UserStore?.getCurrentUser();
 
     return (
         <SettingsTab>
@@ -233,131 +275,13 @@ function EquicordSettings() {
                 </a>.
             </Notice.Info>
 
-            {Switches.filter((s): s is Exclude<typeof s, false> => !!s).map(
-                s => (
-                    <FormSwitch
-                        key={s.key}
-                        value={settings[s.key]}
-                        onChange={v => {
-                            settings[s.key] = v;
+            <Switches />
 
-                            if (s.restartRequired) {
-                                Alerts.show({
-                                    title: "Restart Required",
-                                    body: "A restart is required to apply this change",
-                                    confirmText: "Restart now",
-                                    cancelText: "Later!",
-                                    onConfirm: relaunch
-                                });
-                            }
-                        }}
-                        title={s.title}
-                        description={
-                            s.warning ? (
-                                <>
-                                    {s.description}
-                                    <Notice.Warning className={Margins.top8} style={{ width: "100%" }}>
-                                        {s.warning}
-                                    </Notice.Warning>
-                                </>
-                            ) : (
-                                s.description
-                            )
-                        }
-                        hideBorder
-                    />
-                ),
-            )}
+            <MacOSVibrancySettings />
+            <WindowsMaterialSettings />
 
-            {needsVibrancySettings && (
-                <>
-                    <Divider className={Margins.top20} />
-
-                    <Heading className={Margins.top20}>Window Vibrancy</Heading>
-                    <Paragraph className={Margins.bottom16}>
-                        Customize the macOS window vibrancy effect. This controls the blur and transparency style of the Discord window. Changes require a restart to take effect.
-                    </Paragraph>
-                    <Select
-                        className={Margins.bottom20}
-                        placeholder="Window vibrancy style"
-                        options={[
-                            // Sorted from most opaque to most transparent
-                            {
-                                label: "No vibrancy",
-                                value: undefined,
-                            },
-                            {
-                                label: "Under Page (window tinting)",
-                                value: "under-page",
-                            },
-                            {
-                                label: "Content",
-                                value: "content",
-                            },
-                            {
-                                label: "Window",
-                                value: "window",
-                            },
-                            {
-                                label: "Selection",
-                                value: "selection",
-                            },
-                            {
-                                label: "Titlebar",
-                                value: "titlebar",
-                            },
-                            {
-                                label: "Header",
-                                value: "header",
-                            },
-                            {
-                                label: "Sidebar",
-                                value: "sidebar",
-                            },
-                            {
-                                label: "Tooltip",
-                                value: "tooltip",
-                            },
-                            {
-                                label: "Menu",
-                                value: "menu",
-                            },
-                            {
-                                label: "Popover",
-                                value: "popover",
-                            },
-                            {
-                                label: "Fullscreen UI (transparent but slightly muted)",
-                                value: "fullscreen-ui",
-                            },
-                            {
-                                label: "HUD (Most transparent)",
-                                value: "hud",
-                            },
-                        ]}
-                        select={v => (settings.macosVibrancyStyle = v)}
-                        isSelected={v => settings.macosVibrancyStyle === v}
-                        serialize={identity}
-                    />
-                </>
-            )}
-
-            <Divider className={Margins.top20} />
-
-            <Heading className={Margins.top20}>Notifications</Heading>
-            <Paragraph className={Margins.bottom16}>
-                Configure how Equicord handles notifications. You can customize when and how you receive alerts, or view a history of past notifications.
-            </Paragraph>
-
-            <Flex gap="16px">
-                <Button onClick={openNotificationSettingsModal}>
-                    Notification Settings
-                </Button>
-                <Button variant="secondary" onClick={openNotificationLogModal}>
-                    View Notification Log
-                </Button>
-            </Flex>
-        </SettingsTab>
+            <NotificationSection />
+        </SettingsTab >
     );
 }
 
diff --git a/src/equicordplugins/_api/profileCollections.ts b/src/equicordplugins/_api/profileCollections.ts
index bbc51a840..f573c006a 100644
--- a/src/equicordplugins/_api/profileCollections.ts
+++ b/src/equicordplugins/_api/profileCollections.ts
@@ -12,6 +12,7 @@ export default definePlugin({
     description: "API to add collections to the user profile panel like discords game collection.",
     authors: [Devs.thororen],
     patches: [
+        // message and member list popouts
         {
             find: "#{intl::USER_PROFILE_FRIEND_REQUEST_TOAST}",
             replacement: {
@@ -19,6 +20,7 @@ export default definePlugin({
                 replace: "$&Vencord.Api.ProfileCollections.renderProfileCollections(arguments[0]),",
             }
         },
+        // user panel popout
         {
             find: '"UserProfileAccountPopout"',
             replacement: {
@@ -26,6 +28,7 @@ export default definePlugin({
                 replace: "$&Vencord.Api.ProfileCollections.renderProfileCollections(arguments[0]),",
             },
         },
+        // dm sidebar
         {
             find: ".SIDEBAR,disableToolbar:",
             replacement: {
diff --git a/src/equicordplugins/_api/profileSections.ts b/src/equicordplugins/_api/profileSections.ts
index 1d7520c79..b59e0606a 100644
--- a/src/equicordplugins/_api/profileSections.ts
+++ b/src/equicordplugins/_api/profileSections.ts
@@ -12,15 +12,15 @@ export default definePlugin({
     description: "API to add sections near the 'Member Since' area of user profile panels.",
     authors: [Devs.thororen],
     patches: [
-        // DM User Sidebar
+        // dm user sidebar
         {
-            find: "#{intl::PREMIUM_GIFTING_BUTTON}),action:",
+            find: '"UserProfileSidebar"',
             replacement: {
                 match: /(#{intl::USER_PROFILE_MEMBER_SINCE}\),.{0,100}userId:(\i\.id)}\)}\))/,
                 replace: "$1,Vencord.Api.ProfileSections.renderProfileSections({userId:$2,isSideBar:true})",
             }
         },
-        // User Profile Modal
+        // user profile modal
         {
             find: ",applicationRoleConnection:",
             replacement: {
@@ -28,7 +28,7 @@ export default definePlugin({
                 replace: "$1,Vencord.Api.ProfileSections.renderProfileSections({userId:$2,isSideBar:false}),",
             }
         },
-        // User Profile Modal v2
+        // user profile modal v2
         {
             find: ".MODAL_V2,onClose:",
             replacement: {
diff --git a/src/equicordplugins/_api/userArea.ts b/src/equicordplugins/_api/userArea.ts
index 9519f2efc..acb5abdea 100644
--- a/src/equicordplugins/_api/userArea.ts
+++ b/src/equicordplugins/_api/userArea.ts
@@ -11,7 +11,7 @@ import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { findCssClassesLazy } from "@webpack";
 
-const { iconForeground } = findCssClassesLazy("iconForeground", "accountPopoutButtonWrapper");
+const accountClasses = findCssClassesLazy("iconForeground", "accountPopoutButtonWrapper");
 
 export default definePlugin({
     name: "UserAreaAPI",
@@ -38,7 +38,7 @@ export default definePlugin({
     renderButtons(props: { nameplate?: any; }) {
         return Vencord.Api.UserArea._renderButtons({
             nameplate: props.nameplate,
-            iconForeground: props.nameplate != null ? iconForeground : void 0,
+            iconForeground: accountClasses.iconForeground,
             hideTooltips: this.shouldHideTooltips()
         });
     },
diff --git a/src/equicordplugins/_core/concatenatedModules.tsx b/src/equicordplugins/_core/concatenatedModules.tsx
index 0cde5f7be..c6b4a6662 100644
--- a/src/equicordplugins/_core/concatenatedModules.tsx
+++ b/src/equicordplugins/_core/concatenatedModules.tsx
@@ -14,19 +14,20 @@ export default definePlugin({
     name: "ConcatenatedModules",
     description: "Extract modules that have been concatenated by the bundler",
     authors: [Devs.thororen],
-
-    required: true,
-
     patches: [
         {
             find: "AngleBracketsIcon",
             replacement: {
                 match: /\i\.\i\((\i)\),\i\.\i\(\i,\{AIcon/,
-                replace: "$self.iconsModule($1),$&"
+                replace: "$self.setIconsModule($1),$&"
             }
         }
     ],
-    iconsModule(value: IconsDef) {
+    setIconsModule(value: IconsDef) {
         iconsModule = value;
+
+        // incase you dont want to use iconviewer you can do
+        // Vencord.Plugins.plugins.ConcatenatedModules.iconsModule instead for icons and viewing paths
+        this.iconsModule = value;
     },
 });
diff --git a/src/equicordplugins/baseDecoder/index.tsx b/src/equicordplugins/baseDecoder/index.tsx
index 41233369d..bdbcdf148 100644
--- a/src/equicordplugins/baseDecoder/index.tsx
+++ b/src/equicordplugins/baseDecoder/index.tsx
@@ -17,17 +17,14 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
 import { CodeBlock } from "@components/CodeBlock";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
 import { Heading } from "@components/Heading";
 import { EquicordDevs } from "@utils/constants";
 import { copyWithToast } from "@utils/discord";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ChannelStore } from "@webpack/common";
+import { ChannelStore, Modal, openModal } from "@webpack/common";
 
 function DecodeIcon() {
     return (
@@ -65,32 +62,26 @@ function decodeBase64Strings(base64Strings) {
 }
 
 function openDecodedBase64Modal(decodedContent) {
-    const key = openModal(props => (
+    openModal(props => (
         <ErrorBoundary>
-            <ModalRoot {...props} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{t("equicord.baseDecoder.ui.modalTitle")}</BaseText>
-                    <ModalCloseButton onClick={() => closeModal(key)} />
-                </ModalHeader>
-                <ModalContent>
-                    <div style={{ padding: "16px 0" }}>
-                        <Heading>{t("equicord.baseDecoder.ui.decodedContent")}</Heading>
-                        {decodedContent.map((content, index) => (
-                            <CodeBlock key={index} content={content} lang="" />
-                        ))}
-                    </div>
-                </ModalContent >
-                <ModalFooter>
-                    <Flex gap={10}>
-                        {decodedContent.map((content, index) => (
-                            <Button key={index} onClick={() => copyWithToast(content, t("equicord.baseDecoder.ui.copiedToast"))}>
-                                {t("equicord.baseDecoder.ui.copyDecoded")} {index + 1}
-                            </Button>
-                        ))}
-                    </Flex>
-                </ModalFooter>
-            </ModalRoot >
-        </ErrorBoundary >
+            <Modal
+                {...props}
+                size="lg"
+                title={t("equicord.baseDecoder.ui.modalTitle")}
+                actions={decodedContent.map((content, index) => ({
+                    text: `${t("equicord.baseDecoder.ui.copyDecoded")} ${index + 1}`,
+                    variant: "primary",
+                    onClick: () => copyWithToast(content, t("equicord.baseDecoder.ui.copiedToast"))
+                }))}
+            >
+                <div style={{ padding: "16px 0" }}>
+                    <Heading>{t("equicord.baseDecoder.ui.decodedContent")}</Heading>
+                    {decodedContent.map((content, index) => (
+                        <CodeBlock key={index} content={content} lang="" />
+                    ))}
+                </div>
+            </Modal>
+        </ErrorBoundary>
     ));
 }
 
diff --git a/src/equicordplugins/blockKeywords/index.tsx b/src/equicordplugins/blockKeywords/index.tsx
new file mode 100644
index 000000000..d10bb808e
--- /dev/null
+++ b/src/equicordplugins/blockKeywords/index.tsx
@@ -0,0 +1,193 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { definePluginSettings } from "@api/Settings";
+import { Card } from "@components/Card";
+import { HeadingTertiary } from "@components/Heading";
+import { ErrorBoundary } from "@components/index";
+import { Margins } from "@components/margins";
+import { EquicordDevs } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
+import { classes } from "@utils/misc";
+import definePlugin, { OptionType } from "@utils/types";
+import { Message } from "@vencord/discord-types";
+import { React, TextInput } from "@webpack/common";
+
+let blockedKeywords: Array<RegExp>;
+const cl = classNameFactory("vc-block-keywords-");
+
+function splitPatterns(input: string): string[] {
+    return input
+        .replace(/\[([^\]]*)\]/g, m => m.replace(/,/g, "\x00")) // protect commas in [...]
+        .replace(/\{(\d+,?\d*|,\d+)\}/g, m => m.replace(",", "\x00")) // protect commas in {n,m}
+        .split(",")
+        .map(s => s.replace(/\x00/g, ",").trim())
+        .filter(Boolean);
+}
+
+function RegexHelper() {
+    const [testInput, setTestInput] = React.useState("");
+    const { blockedWords, caseSensitive, useRegex } = settings.use(["blockedWords", "caseSensitive", "useRegex"]);
+
+    const results = React.useMemo(() => {
+        const caseSensitiveFlag = caseSensitive ? "" : "i";
+        return splitPatterns(blockedWords)
+            .map(pattern => {
+                try {
+                    const regex = useRegex
+                        ? new RegExp(pattern, caseSensitiveFlag)
+                        : new RegExp(`\\b${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`, caseSensitiveFlag);
+                    return { pattern, matches: regex.test(testInput) };
+                } catch (e: unknown) {
+                    return { pattern, matches: false, error: e instanceof Error ? e.message : String(e) };
+                }
+            });
+    }, [testInput, blockedWords, caseSensitive, useRegex]);
+
+    return (
+        <Card className={cl("regex")}>
+            <HeadingTertiary className={Margins.bottom8}>Regex Helper</HeadingTertiary>
+            <TextInput
+                type="text"
+                placeholder="Input to test..."
+                value={testInput}
+                onChange={setTestInput}
+                maxLength={null}
+            />
+            {results.length === 0 ?
+                <Card
+                    key="vc-no-patterns-regex"
+                    variant="warning"
+                    className={classes(cl("card"), Margins.top8)}
+                >
+                    <code>No patterns configured</code>
+                </Card> : (
+                    results.map(({ pattern, matches, error }, i) => (
+                        <Card
+                            key={`vc-pattern-card-${i}`}
+                            variant={error ? "danger" : matches ? "success" : "primary"}
+                            className={classes(cl("card"), Margins.top8)}
+                        >
+                            <code>{pattern}</code>
+                            {error && <span className={cl("error")}>{error}</span>}
+                        </Card>
+                    )))}
+        </Card>
+    );
+}
+
+const settings = definePluginSettings({
+    blockedWords: {
+        type: OptionType.STRING,
+        description: "Comma-separated list of words to block",
+        default: "",
+        restartNeeded: true
+    },
+    useRegex: {
+        type: OptionType.BOOLEAN,
+        description: "Use each value as a regular expression when checking message content (advanced)",
+        default: false,
+        restartNeeded: true
+    },
+    regexHelper: {
+        type: OptionType.COMPONENT,
+        description: "Test your regular expressions against a sample input",
+        component: () => <ErrorBoundary noop><RegexHelper /></ErrorBoundary>,
+    },
+    caseSensitive: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to use a case sensitive search or not",
+        default: false,
+        restartNeeded: true
+    },
+    ignoreBlockedMessages: {
+        description: "Completely ignores (recent) new messages bar",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true,
+    },
+}, {
+    regexHelper: {
+        hidden() { return !this.store.useRegex; }
+    }
+});
+
+export function containsBlockedKeywords(message: Message) {
+    if (!blockedKeywords) return false;
+
+    // test a nullable string against all keywords
+    const testField = (text: string | null | undefined) => text != null && blockedKeywords.some(regex => regex.test(text));
+
+    return blockedKeywords.some(regex =>
+        regex.test(message.content)) || message.embeds.some(embed =>
+            testField(embed.rawDescription) || testField(embed.rawTitle));
+}
+
+export default definePlugin({
+    name: "BlockKeywords",
+    description: "Blocks messages containing specific user-defined keywords, as if the user sending them was blocked.",
+    tags: ["Appearance", "Customisation", "Privacy"],
+    authors: [EquicordDevs.catcraft, EquicordDevs.secp192k1],
+    patches: [
+        {
+            find: "_channelMessages={}",
+            predicate: () => settings.store.blockedWords !== "",
+            replacement: {
+                match: /static commit\((\i)\)\{/g,
+                replace: "$&$1=$self.blockMessagesWithKeywords($1);"
+            }
+        },
+        {
+            find: '"MessageStore"',
+            predicate: () => settings.store.ignoreBlockedMessages && settings.store.blockedWords !== "",
+            replacement: [
+                {
+                    match: /(?<=MESSAGE_CREATE:function\((\i)\){)/,
+                    replace: (_, props) => `if($self.containsBlockedKeywords(${props}.message))return;`
+                }
+            ]
+        },
+        {
+            find: '"ReadStateStore"',
+            predicate: () => settings.store.ignoreBlockedMessages && settings.store.blockedWords !== "",
+            replacement: [
+                {
+                    match: /(?<=MESSAGE_CREATE:function\((\i)\){)/,
+                    replace: (_, props) => `if($self.containsBlockedKeywords(${props}.message))return;`
+                }
+            ]
+        },
+    ],
+
+    settings,
+    containsBlockedKeywords,
+
+    start() {
+        const blockedWordsList = splitPatterns(settings.store.blockedWords);
+        const caseSensitiveFlag = settings.store.caseSensitive ? "" : "i";
+
+        if (blockedWordsList.length === 0) return;
+
+        if (settings.store.useRegex) {
+            blockedKeywords = blockedWordsList.map(word => {
+                return new RegExp(word, caseSensitiveFlag);
+            });
+        } else {
+            blockedKeywords = blockedWordsList.map(word => {
+                // escape regex chars in word https://stackoverflow.com/a/6969486
+                return new RegExp(`\\b${word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`, caseSensitiveFlag);
+            });
+        }
+    },
+
+    blockMessagesWithKeywords(messageList) {
+        return messageList.reset(messageList.map(
+            message => message.set("blocked", message.blocked || this.containsBlockedKeywords(message))
+        ));
+    }
+});
diff --git a/src/equicordplugins/blockKeywords/styles.css b/src/equicordplugins/blockKeywords/styles.css
new file mode 100644
index 000000000..9e89d078a
--- /dev/null
+++ b/src/equicordplugins/blockKeywords/styles.css
@@ -0,0 +1,16 @@
+.vc-block-keywords-regex {
+    padding: 0.75em
+}
+
+.vc-block-keywords-card {
+    padding: 0.4em 0.75em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.vc-block-keywords-error {
+    font-size: 12px;
+    margin-left: 1em;
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx b/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
index b671049b8..16c46575e 100644
--- a/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
+++ b/src/equicordplugins/channelTabs/components/BookmarkContainer.tsx
@@ -10,9 +10,8 @@ import { CircleQuestionIcon, DiscoveryIcon, EnvelopeIcon, FriendsIcon, NitroIcon
 import { classNameFactory } from "@utils/css";
 import { getGuildAcronym, getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
-import { closeModal, openModal } from "@utils/modal";
 import { findComponentByCodeLazy } from "@webpack";
-import { Avatar, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, Menu, React, ReadStateStore, ReadStateUtils, SelectedChannelStore, SelectedGuildStore, TextInput, Tooltip, useDrag, useDrop, useEffect, useRef, UserStore, useState } from "@webpack/common";
+import { Avatar, ChannelStore, closeModal, ContextMenuApi, FluxDispatcher, GuildStore, Menu, openModal,React, ReadStateStore, ReadStateUtils, SelectedChannelStore, SelectedGuildStore, TextInput, Tooltip, useDrag, useDrop, useEffect, useRef, UserStore, useState } from "@webpack/common";
 
 import { NotificationDot } from "./ChannelTab";
 import { BookmarkContextMenu, EditModal } from "./ContextMenus";
diff --git a/src/equicordplugins/channelTabs/components/ContextMenus.tsx b/src/equicordplugins/channelTabs/components/ContextMenus.tsx
index c93b05fbe..780f8b710 100644
--- a/src/equicordplugins/channelTabs/components/ContextMenus.tsx
+++ b/src/equicordplugins/channelTabs/components/ContextMenus.tsx
@@ -11,9 +11,9 @@ import { bookmarkFolderColors, bookmarkPlaceholderName, closeOtherTabs, closeTab
 import { Bookmark, BookmarkFolder, Bookmarks, ChannelTabsProps, UseBookmarkMethods } from "@equicordplugins/channelTabs/util/types";
 import { getIntlMessage } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
-import { Button, ChannelStore, ColorPicker, FluxDispatcher, Menu, ReadStateStore, ReadStateUtils, Select, TextInput, useMemo, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Button, ChannelStore, closeModal, ColorPicker, FluxDispatcher, Menu, Modal, openModal, ReadStateStore, ReadStateUtils, Select, TextInput, useMemo, useState } from "@webpack/common";
 
 const legacyFolderColors: Record<string, string> = {
     "var(--channeltabs-red)": bookmarkFolderColors.Red,
@@ -116,7 +116,7 @@ function FolderChipPreview({ name, color, iconName }: { name: string; color: str
 }
 
 function FolderIconPickerModal({ modalProps, modalKey, name, color, iconName, onSelect, onColorChange }: {
-    modalProps: ModalProps,
+    modalProps: RenderModalProps,
     modalKey: string,
     name: string,
     color: string,
@@ -134,73 +134,72 @@ function FolderIconPickerModal({ modalProps, modalKey, name, color, iconName, on
     }, [iconNames, search]);
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold">Choose Folder Icon</BaseText>
-            </ModalHeader>
-            <ModalContent>
-                <Heading className={Margins.top16}>Preview</Heading>
-                <FolderChipPreview name={name} color={localColor} iconName={iconName} />
-                <Heading className={Margins.top16}>Icon Color</Heading>
-                <div className={Margins.top8}>
-                    <ColorPicker
-                        color={colorToInt(localColor)}
-                        onChange={value => {
-                            const nextColor = intToColor(value);
-                            setLocalColor(nextColor);
-                            onColorChange(nextColor);
-                        }}
-                        showEyeDropper={false}
-                    />
-                </div>
-                <Heading className={Margins.top16}>Search</Heading>
-                <TextInput
-                    value={search}
-                    placeholder={`Search ${iconNames.length} icons...`}
-                    onChange={setSearch}
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={<BaseText size="lg" weight="semibold">Choose Folder Icon</BaseText>}
+            actions={[
+                {
+                    text: "Close",
+                    variant: "secondary",
+                    onClick: () => closeModal(modalKey)
+                }
+            ]}
+        >
+            <Heading className={Margins.top16}>Preview</Heading>
+            <FolderChipPreview name={name} color={localColor} iconName={iconName} />
+            <Heading className={Margins.top16}>Icon Color</Heading>
+            <div className={Margins.top8}>
+                <ColorPicker
+                    color={colorToInt(localColor)}
+                    onChange={value => {
+                        const nextColor = intToColor(value);
+                        setLocalColor(nextColor);
+                        onColorChange(nextColor);
+                    }}
+                    showEyeDropper={false}
                 />
-                <div style={{
-                    display: "grid",
-                    gap: 8,
-                    gridTemplateColumns: "repeat(auto-fill, minmax(52px, 1fr))",
-                    marginTop: 16,
-                    maxHeight: 320,
-                    overflowY: "auto"
-                }}>
-                    {filteredIconNames.map(name => (
-                        <button
-                            key={name}
-                            onClick={() => {
-                                onSelect(name);
-                                closeModal(modalKey);
-                            }}
-                            style={{
-                                alignItems: "center",
-                                background: name === iconName ? "var(--background-modifier-hover)" : "var(--background-secondary)",
-                                border: "1px solid var(--border-subtle)",
-                                borderRadius: 8,
-                                cursor: "pointer",
-                                display: "flex",
-                                height: 52,
-                                justifyContent: "center",
-                                padding: 0
-                            }}
-                            title={name}
-                            type="button"
-                        >
-                            <FolderGlyph color={localColor} iconName={name} />
-                        </button>
-                    ))}
-                </div>
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
-                    onClick={() => closeModal(modalKey)}
-                >Close</Button>
-            </ModalFooter>
-        </ModalRoot>
+            </div>
+            <Heading className={Margins.top16}>Search</Heading>
+            <TextInput
+                value={search}
+                placeholder={`Search ${iconNames.length} icons...`}
+                onChange={setSearch}
+            />
+            <div style={{
+                display: "grid",
+                gap: 8,
+                gridTemplateColumns: "repeat(auto-fill, minmax(52px, 1fr))",
+                marginTop: 16,
+                maxHeight: 320,
+                overflowY: "auto"
+            }}>
+                {filteredIconNames.map(name => (
+                    <button
+                        key={name}
+                        onClick={() => {
+                            onSelect(name);
+                            closeModal(modalKey);
+                        }}
+                        style={{
+                            alignItems: "center",
+                            background: name === iconName ? "var(--background-modifier-hover)" : "var(--background-secondary)",
+                            border: "1px solid var(--border-subtle)",
+                            borderRadius: 8,
+                            cursor: "pointer",
+                            display: "flex",
+                            height: 52,
+                            justifyContent: "center",
+                            padding: 0
+                        }}
+                        title={name}
+                        type="button"
+                    >
+                        <FolderGlyph color={localColor} iconName={name} />
+                    </button>
+                ))}
+            </div>
+        </Modal>
     );
 }
 
@@ -264,7 +263,7 @@ function FolderAppearanceFields({
 }
 
 export function EditModal({ modalProps, modalKey, bookmark, onSave }: {
-    modalProps: ModalProps,
+    modalProps: RenderModalProps,
     modalKey: string,
     bookmark: Bookmark | BookmarkFolder,
     onSave: (name: string, color: string, iconName?: string) => void;
@@ -275,48 +274,47 @@ export function EditModal({ modalProps, modalKey, bookmark, onSave }: {
     const placeholder = bookmarkPlaceholderName(bookmark);
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold">Edit Bookmark</BaseText>
-            </ModalHeader>
-            <ModalContent>
-                {isBookmarkFolder(bookmark)
-                    ? <FolderAppearanceFields
-                        name={name}
-                        setName={setName}
-                        color={color}
-                        setColor={setColor}
-                        iconName={iconName}
-                        setIconName={setIconName}
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={<BaseText size="lg" weight="semibold">Edit Bookmark</BaseText>}
+            actions={[
+                {
+                    text: "Save",
+                    variant: "primary",
+                    onClick: () => onSave(name || placeholder, color, iconName)
+                },
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: () => closeModal(modalKey)
+                }
+            ]}
+        >
+            {isBookmarkFolder(bookmark)
+                ? <FolderAppearanceFields
+                    name={name}
+                    setName={setName}
+                    color={color}
+                    setColor={setColor}
+                    iconName={iconName}
+                    setIconName={setIconName}
+                    placeholder={placeholder}
+                />
+                : <>
+                    <Heading className={Margins.top16}>Bookmark Name</Heading>
+                    <TextInput
+                        value={name === placeholder ? undefined : name}
                         placeholder={placeholder}
+                        onChange={setName}
                     />
-                    : <>
-                        <Heading className={Margins.top16}>Bookmark Name</Heading>
-                        <TextInput
-                            value={name === placeholder ? undefined : name}
-                            placeholder={placeholder}
-                            onChange={setName}
-                        />
-                    </>}
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    onClick={() => onSave(name || placeholder, color, iconName)}
-                >Save</Button>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
-                    onClick={() => closeModal(modalKey)}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                </>}
+        </Modal>
     );
 }
 
 function AddToFolderModal({ modalProps, modalKey, bookmarks, onSave }: {
-    modalProps: any,
+    modalProps: RenderModalProps,
     modalKey: string,
     bookmarks: Bookmarks,
     onSave: (folderIndex: number, folderName: string, folderColor: string, iconName?: string) => void;
@@ -327,80 +325,79 @@ function AddToFolderModal({ modalProps, modalKey, bookmarks, onSave }: {
     const [iconName, setIconName] = useState<string | undefined>();
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold">Add Bookmark to Folder</BaseText>
-            </ModalHeader>
-            <ModalContent>
-                <Heading className={Margins.top16}>Select a folder</Heading>
-                <Select
-                    options={[...Object.entries(bookmarks)
-                        .filter(([, bookmark]) => isBookmarkFolder(bookmark))
-                        .map(([index, bookmark]) => ({
-                            label: bookmark.name,
-                            value: parseInt(index, 10)
-                        })),
-                    {
-                        label: "Create one",
-                        value: -1,
-                        default: true
-                    }]}
-                    isSelected={v => v === folderIndex}
-                    select={setIndex}
-                    serialize={String}
-                />
-                {folderIndex === -1 && <FolderAppearanceFields
-                    name={folderName}
-                    setName={setFolderName}
-                    color={folderColor}
-                    setColor={setFolderColor}
-                    iconName={iconName}
-                    setIconName={setIconName}
-                />}
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    onClick={() => onSave(folderIndex, folderName, folderColor, iconName)}
-                >Save</Button>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
-                    onClick={() => closeModal(modalKey)}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={<BaseText size="lg" weight="semibold">Add Bookmark to Folder</BaseText>}
+            actions={[
+                {
+                    text: "Save",
+                    variant: "primary",
+                    onClick: () => onSave(folderIndex, folderName, folderColor, iconName)
+                },
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: () => closeModal(modalKey)
+                }
+            ]}
+        >
+            <Heading className={Margins.top16}>Select a folder</Heading>
+            <Select
+                options={[...Object.entries(bookmarks)
+                    .filter(([, bookmark]) => isBookmarkFolder(bookmark))
+                    .map(([index, bookmark]) => ({
+                        label: bookmark.name,
+                        value: parseInt(index, 10)
+                    })),
+                {
+                    label: "Create one",
+                    value: -1,
+                    default: true
+                }]}
+                isSelected={v => v === folderIndex}
+                select={setIndex}
+                serialize={String}
+            />
+            {folderIndex === -1 && <FolderAppearanceFields
+                name={folderName}
+                setName={setFolderName}
+                color={folderColor}
+                setColor={setFolderColor}
+                iconName={iconName}
+                setIconName={setIconName}
+            />}
+        </Modal>
     );
 }
 
-function DeleteFolderConfirmationModal({ modalProps, modalKey, onConfirm }) {
+function DeleteFolderConfirmationModal({ modalProps, modalKey, onConfirm }: {
+    modalProps: RenderModalProps,
+    modalKey: string,
+    onConfirm: () => void;
+}) {
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold">Are you sure?</BaseText>
-            </ModalHeader>
-            <ModalContent>
-                <Paragraph className={Margins.top16}>
-                    Deleting a bookmark folder will also delete all bookmarks within it.
-                </Paragraph>
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    color={Button.Colors.RED}
-                    onClick={onConfirm}
-                >
-                    Delete
-                </Button>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
-                    onClick={() => closeModal(modalKey)}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={<BaseText size="lg" weight="semibold">Are you sure?</BaseText>}
+            actions={[
+                {
+                    text: "Delete",
+                    variant: "critical-primary",
+                    onClick: onConfirm
+                },
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: () => closeModal(modalKey)
+                }
+            ]}
+        >
+            <Paragraph className={Margins.top16}>
+                Deleting a bookmark folder will also delete all bookmarks within it.
+            </Paragraph>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/channelTabs/index.tsx b/src/equicordplugins/channelTabs/index.tsx
index 75e115af7..d60bf9f68 100644
--- a/src/equicordplugins/channelTabs/index.tsx
+++ b/src/equicordplugins/channelTabs/index.tsx
@@ -50,7 +50,7 @@ export default definePlugin({
     description: t("equicord.channelTabs.description"),
     tags: ["Appearance", "Customisation", "Organisation", "Servers"],
     authors: [Devs.TheSun, Devs.TheKodeToad, EquicordDevs.keifufu, Devs.Nickyux, EquicordDevs.DiabeloDEV, EquicordDevs.justjxke, EquicordDevs.keircn],
-    dependencies: ["ContextMenuAPI"],
+    dependencies: ["ContextMenuAPI", "ConcatenatedModules"],
     contextMenus: {
         "channel-mention-context": contextMenuPatch,
         "channel-context": contextMenuPatch,
diff --git a/src/equicordplugins/clipsEnhancements.discordDesktop/index.tsx b/src/equicordplugins/clipsEnhancements.discordDesktop/index.tsx
index 43f13ad84..2a81739cc 100644
--- a/src/equicordplugins/clipsEnhancements.discordDesktop/index.tsx
+++ b/src/equicordplugins/clipsEnhancements.discordDesktop/index.tsx
@@ -40,7 +40,7 @@ const settings = definePluginSettings({
     },
     enableSpeakingIndicators: {
         type: OptionType.BOOLEAN,
-        description: "Enable speaking indicators",
+        description: t("equicord.clipsEnhancements.settings.enableSpeakingIndicators"),
         default: true,
         restartNeeded: true
     },
@@ -104,14 +104,6 @@ export default definePlugin({
                 replace: "$self.patchTimeslots($&)"
             }
         },
-        // enables clips
-        {
-            find: "2026-03-clips-experiment",
-            replacement: {
-                match: /defaultConfig:\{enableClips:!\d,ignorePlatformRestriction:!\d,enableScreenshotKeybind:!\d,enableVoiceOnlyClips:!\d,enableSpeakingIndicators:!\d,enableAdvancedSignals:!\d\}/,
-                replace: "defaultConfig:{enableClips:!0,ignorePlatformRestriction:$self.settings.store.ignorePlatformRestriction,enableScreenshotKeybind:$self.settings.store.enableScreenshotKeybind,enableVoiceOnlyClips:$self.settings.store.enableVoiceOnlyClips,enableSpeakingIndicators:$self.settings.store.enableSpeakingIndicators,enableAdvancedSignals:$self.settings.store.enableAdvancedSignals}"
-            }
-        }
     ],
 
     patchTimeslots(timeslots: { id: string; value: number; label: string; }[]) {
diff --git a/src/equicordplugins/collapsibleUi/index.tsx b/src/equicordplugins/collapsibleUi/index.tsx
deleted file mode 100644
index 7893bcb3e..000000000
--- a/src/equicordplugins/collapsibleUi/index.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2026 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { ChannelToolbarButton } from "@api/HeaderBar";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { EquicordDevs } from "@utils/constants";
-import { classNameFactory } from "@utils/css";
-import { classes } from "@utils/misc";
-import definePlugin from "@utils/types";
-import { ContextMenuApi, Menu } from "@webpack/common";
-import type { ReactNode, SVGProps } from "react";
-
-import { PanelId, panelRegistry, settings, toolbarPanelOrder } from "./settings";
-import managedStyle from "./style.css?managed";
-
-const cl = classNameFactory("vc-collapsible-ui-");
-
-type StateStore = ReturnType<typeof settings.use>;
-
-function PanelsIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 24 24" fill="none" {...props}>
-            <path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3H3V5Zm0 5h6v11H5a2 2 0 0 1-2-2V10Zm8 0h10v9a2 2 0 0 1-2 2H11V10Zm2-5h8v3h-8V5Z" />
-        </svg>
-    );
-}
-
-function getStateClasses(store: StateStore) {
-    const classNames = [cl("state"), cl(`collapsed-size-${store.collapsedSize}`), cl(`transition-${store.transitionMs}`)];
-
-    for (const panelId of toolbarPanelOrder) {
-        const panel = panelRegistry[panelId];
-        if (store[panel.collapsedKey]) classNames.push(cl(`${panel.classId}-collapsed`));
-    }
-
-    return classes(...classNames);
-}
-
-function togglePanel(panelId: PanelId) {
-    const key = panelRegistry[panelId].collapsedKey;
-    settings.store[key] = !settings.store[key];
-}
-
-const ToolbarMenu = ErrorBoundary.wrap(({ onClose }: { onClose(): void; }) => {
-    const store = settings.use();
-
-    return (
-        <Menu.Menu navId="vc-collapsible-ui-toolbar-menu" onClose={onClose} aria-label="Collapsible UI">
-            {toolbarPanelOrder.map(panelId => {
-                const panel = panelRegistry[panelId];
-                const collapsed = store[panel.collapsedKey];
-
-                return (
-                    <Menu.MenuCheckboxItem
-                        key={panelId}
-                        id={`vc-collapsible-ui-${panel.classId}`}
-                        label={panel.label}
-                        checked={!collapsed}
-                        action={() => togglePanel(panelId)}
-                    />
-                );
-            })}
-        </Menu.Menu>
-    );
-}, { noop: true });
-
-const ToolbarButtons = ErrorBoundary.wrap(() => {
-    const store = settings.use();
-    const anyCollapsed = toolbarPanelOrder.some(panelId => store[panelRegistry[panelId].collapsedKey]);
-
-    return (
-        <>
-            <span aria-hidden className={getStateClasses(store)} style={{ display: "none" }} />
-            <ChannelToolbarButton
-                icon={PanelsIcon}
-                tooltip="Collapsible UI"
-                aria-label="Collapsible UI"
-                selected={anyCollapsed}
-                onClick={event => ContextMenuApi.openContextMenu(event, () => <ToolbarMenu onClose={ContextMenuApi.closeContextMenu} />)}
-                onContextMenu={event => ContextMenuApi.openContextMenu(event, () => <ToolbarMenu onClose={ContextMenuApi.closeContextMenu} />)}
-            />
-        </>
-    );
-}, { noop: true });
-
-const ChatButtonsRow = ErrorBoundary.wrap(({ buttons }: { buttons: ReactNode[]; }) => {
-    const { chatButtonsCollapsed } = settings.use();
-
-    if (buttons.length === 0) return <>{buttons}</>;
-
-    return (
-        <div
-            className={classes(
-                cl("chat-buttons"),
-                chatButtonsCollapsed && cl("chat-buttons-collapsed")
-            )}
-        >
-            <div className={cl("chat-buttons-items")}>
-                {buttons}
-            </div>
-        </div>
-    );
-}, { noop: true });
-
-export default definePlugin({
-    name: "CollapsibleUI",
-    description: "Native collapsible channel, member, chat button, and user area surfaces.",
-    tags: ["Appearance", "Customisation", "Chat", "Servers"],
-    dependencies: ["HeaderBarAPI", "ChatInputButtonAPI"],
-    authors: [EquicordDevs.benjii],
-    searchTerms: ["ui", "sidebar", "layout"],
-    managedStyle,
-    settings,
-
-    headerBarButton: {
-        icon: PanelsIcon,
-        location: "channeltoolbar",
-        priority: 25,
-        render: () => <ToolbarButtons />,
-    },
-
-    patches: [
-        {
-            find: ".DISPLAY_NAME_STYLES_COACHMARK)",
-            replacement: {
-                match: /className:(\i\.\i),(?=style:(\i),children:\[)/,
-                replace: "className:$self.userAreaControlsClass($1),"
-            }
-        },
-    ],
-    chatBarButtonWrapper: (buttons: ReactNode) => {
-        if (!Array.isArray(buttons) || buttons.length === 0) return buttons;
-        return <ChatButtonsRow buttons={buttons} />;
-    },
-
-    userAreaControlsClass(className: string) {
-        return classes(className, cl("user-area-controls"));
-    },
-});
diff --git a/src/equicordplugins/collapsibleUi/settings.ts b/src/equicordplugins/collapsibleUi/settings.ts
deleted file mode 100644
index 84be9d54e..000000000
--- a/src/equicordplugins/collapsibleUi/settings.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2026 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { definePluginSettings } from "@api/Settings";
-import { OptionType } from "@utils/types";
-
-export const transitionMarkers = [0, 80, 120, 160, 200, 260, 320];
-export const collapsedSizeMarkers = [8, 12, 16, 20, 24, 28, 32, 40, 48];
-
-export const panelRegistry = {
-    guildBar: {
-        id: "guildBar",
-        classId: "guild-bar",
-        label: "Guild Bar",
-        collapsedKey: "guildBarCollapsed",
-    },
-    channelList: {
-        id: "channelList",
-        classId: "channel-list",
-        label: "Channel List",
-        collapsedKey: "channelListCollapsed",
-    },
-    membersList: {
-        id: "membersList",
-        classId: "members-list",
-        label: "Members List",
-        collapsedKey: "membersListCollapsed",
-    },
-    chatButtons: {
-        id: "chatButtons",
-        classId: "chat-buttons",
-        label: "Message Buttons",
-        collapsedKey: "chatButtonsCollapsed",
-    },
-    titleBar: {
-        id: "titleBar",
-        classId: "title-bar",
-        label: "Title Bar",
-        collapsedKey: "titleBarCollapsed",
-    },
-    headerBar: {
-        id: "headerBar",
-        classId: "header-bar",
-        label: "Header Bar",
-        collapsedKey: "headerBarCollapsed",
-    },
-    userArea: {
-        id: "userArea",
-        classId: "user-area",
-        label: "User Area",
-        collapsedKey: "userAreaCollapsed",
-    },
-} as const;
-
-export type PanelId = keyof typeof panelRegistry;
-
-export const toolbarPanelOrder = ["guildBar", "channelList", "membersList", "chatButtons", "titleBar", "headerBar", "userArea"] as const satisfies readonly PanelId[];
-
-export const settings = definePluginSettings({
-    collapsedSize: {
-        type: OptionType.SLIDER,
-        description: "Collapsed hover area size in pixels.",
-        default: 12,
-        markers: collapsedSizeMarkers,
-    },
-    transitionMs: {
-        type: OptionType.SLIDER,
-        description: "Panel transition speed in milliseconds.",
-        default: 160,
-        markers: transitionMarkers,
-    },
-    guildBarCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the guild bar as collapsed.",
-        default: false,
-    },
-    channelListCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the channel list as collapsed.",
-        default: false,
-    },
-    membersListCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the members list as collapsed.",
-        default: false,
-    },
-    chatButtonsCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the message button row as collapsed.",
-        default: false,
-    },
-    titleBarCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the title bar as collapsed.",
-        default: false,
-    },
-    headerBarCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the header bar as collapsed.",
-        default: false,
-    },
-    userAreaCollapsed: {
-        type: OptionType.BOOLEAN,
-        description: "Persist the user area as collapsed.",
-        default: false,
-    },
-});
diff --git a/src/equicordplugins/collapsibleUi/style.css b/src/equicordplugins/collapsibleUi/style.css
deleted file mode 100644
index c2a0b619f..000000000
--- a/src/equicordplugins/collapsibleUi/style.css
+++ /dev/null
@@ -1,416 +0,0 @@
-@property --vc-cui-collapsed-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 12px;
-}
-
-@property --vc-cui-transition {
-    syntax: "<time>";
-    inherits: true;
-    initial-value: 160ms;
-}
-
-:root {
-    --vc-cui-chat-buttons-width: min(320px, 36vw);
-    --vc-cui-hover-peek: var(--vc-cui-collapsed-size);
-    --vc-cui-hover-delay: 120ms;
-    --vc-cui-header-bar-height: 32px;
-    --vc-cui-user-area-collapsed-width: 52px;
-    --vc-cui-ease: cubic-bezier(.2, 0, 0, 1);
-    --vc-cui-fade-transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
-    --vc-cui-inline-transition:
-        width var(--vc-cui-transition) var(--vc-cui-ease),
-        inline-size var(--vc-cui-transition) var(--vc-cui-ease),
-        min-width var(--vc-cui-transition) var(--vc-cui-ease),
-        min-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
-        max-width var(--vc-cui-transition) var(--vc-cui-ease),
-        max-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
-        flex-basis var(--vc-cui-transition) var(--vc-cui-ease);
-    --vc-cui-block-transition:
-        height var(--vc-cui-transition) var(--vc-cui-ease),
-        block-size var(--vc-cui-transition) var(--vc-cui-ease),
-        min-height var(--vc-cui-transition) var(--vc-cui-ease),
-        min-block-size var(--vc-cui-transition) var(--vc-cui-ease),
-        max-height var(--vc-cui-transition) var(--vc-cui-ease),
-        max-block-size var(--vc-cui-transition) var(--vc-cui-ease),
-        padding var(--vc-cui-transition) var(--vc-cui-ease)
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-8) {
-    --vc-cui-collapsed-size: 8px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-12) {
-    --vc-cui-collapsed-size: 12px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-16) {
-    --vc-cui-collapsed-size: 16px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-20) {
-    --vc-cui-collapsed-size: 20px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-24) {
-    --vc-cui-collapsed-size: 24px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-28) {
-    --vc-cui-collapsed-size: 28px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-32) {
-    --vc-cui-collapsed-size: 32px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-40) {
-    --vc-cui-collapsed-size: 40px
-}
-
-body:has(.vc-collapsible-ui-collapsed-size-48) {
-    --vc-cui-collapsed-size: 48px
-}
-
-body:has(.vc-collapsible-ui-transition-0) {
-    --vc-cui-transition: 0ms
-}
-
-body:has(.vc-collapsible-ui-transition-80) {
-    --vc-cui-transition: 80ms
-}
-
-body:has(.vc-collapsible-ui-transition-120) {
-    --vc-cui-transition: 120ms
-}
-
-body:has(.vc-collapsible-ui-transition-160) {
-    --vc-cui-transition: 160ms
-}
-
-body:has(.vc-collapsible-ui-transition-200) {
-    --vc-cui-transition: 200ms
-}
-
-body:has(.vc-collapsible-ui-transition-260) {
-    --vc-cui-transition: 260ms
-}
-
-body:has(.vc-collapsible-ui-transition-320) {
-    --vc-cui-transition: 320ms
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])) {
-    position: relative;
-    z-index: 1;
-    overflow: hidden !important;
-    transition: var(--vc-cui-inline-transition) !important
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) {
-    z-index: 3
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"]), :is(:hover, :focus-within), :is(.vc-betterFolders-sidebar-grid:has(.vc-betterFolders-sidebar:is(:hover, :focus-within)) nav[class*="guilds_"])) {
-    background: var(--background-gradient-low, var(--background-base-lowest)) !important;
-    border-start-end-radius: var(--radius-sm, 8px);
-    width: var(--vc-cui-collapsed-size) !important;
-    inline-size: var(--vc-cui-collapsed-size) !important;
-    min-width: var(--vc-cui-collapsed-size) !important;
-    min-inline-size: var(--vc-cui-collapsed-size) !important;
-    max-width: var(--vc-cui-collapsed-size) !important;
-    max-inline-size: var(--vc-cui-collapsed-size) !important;
-    flex: 0 0 var(--vc-cui-collapsed-size) !important
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar {
-    position: relative;
-    z-index: 1;
-    overflow: hidden !important;
-    transition: var(--vc-cui-inline-transition) !important
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within)) .vc-betterFolders-sidebar {
-    z-index: 3;
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:not(:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within))) .vc-betterFolders-sidebar {
-    width: 0 !important;
-    inline-size: 0 !important;
-    min-width: 0 !important;
-    min-inline-size: 0 !important;
-    max-width: 0 !important;
-    max-inline-size: 0 !important;
-    flex: 0 0 0 !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"] {
-    overflow: hidden !important;
-    transition: var(--vc-cui-inline-transition) !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"]:is(:hover, :focus-within) {
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"]:is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition);
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within))) [class*="sidebarList_"]:not(:is(:hover, :focus-within)) {
-    width: var(--vc-cui-collapsed-size) !important;
-    inline-size: var(--vc-cui-collapsed-size) !important;
-    min-width: var(--vc-cui-collapsed-size) !important;
-    min-inline-size: var(--vc-cui-collapsed-size) !important;
-    max-width: var(--vc-cui-collapsed-size) !important;
-    max-inline-size: var(--vc-cui-collapsed-size) !important;
-    flex: 0 0 var(--vc-cui-collapsed-size) !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"] {
-    overflow: hidden !important;
-    transition: var(--vc-cui-inline-transition) !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
-    width: var(--vc-cui-user-area-collapsed-width) !important;
-    inline-size: var(--vc-cui-user-area-collapsed-width) !important;
-    min-width: var(--vc-cui-user-area-collapsed-width) !important;
-    min-inline-size: var(--vc-cui-user-area-collapsed-width) !important;
-    max-width: var(--vc-cui-user-area-collapsed-width) !important;
-    max-inline-size: var(--vc-cui-user-area-collapsed-width) !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) .vc-collapsible-ui-user-area-controls {
-    max-width: 0 !important;
-    min-width: 0 !important;
-    overflow: hidden !important;
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-width var(--vc-cui-transition) var(--vc-cui-ease),
-        opacity var(--vc-cui-transition) var(--vc-cui-ease) !important
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within) .vc-collapsible-ui-user-area-controls {
-    opacity: 1;
-    pointer-events: auto
-}
-
-body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"] {
-    overflow: hidden !important;
-    transition: var(--vc-cui-inline-transition) !important
-}
-
-body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:is(:hover, :focus-within) {
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition);
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:not(:is(:hover, :focus-within)) {
-    width: var(--vc-cui-collapsed-size) !important;
-    min-width: var(--vc-cui-collapsed-size) !important;
-    max-width: var(--vc-cui-collapsed-size) !important
-}
-
-body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:not(:is(:hover, :focus-within)) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-
-body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition)
-}
-
-body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
-    height: var(--vc-cui-hover-peek) !important;
-    block-size: var(--vc-cui-hover-peek) !important;
-    min-height: var(--vc-cui-hover-peek) !important;
-    min-block-size: var(--vc-cui-hover-peek) !important;
-    max-height: var(--vc-cui-hover-peek) !important;
-    max-block-size: var(--vc-cui-hover-peek) !important;
-    overflow: hidden !important;
-    border-top-width: 0 !important;
-    padding-block: 0 !important;
-    transition: var(--vc-cui-block-transition) !important
-}
-
-body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed):has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
-    width: calc(var(--vc-cui-hover-peek) + 4px) !important;
-    inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
-    min-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
-    min-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
-    max-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
-    max-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important
-}
-
-body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"] {
-    overflow: hidden !important;
-    transition: var(--vc-cui-block-transition) !important
-}
-
-body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:is(:hover, :focus-within) {
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition);
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:not(:is(:hover, :focus-within)) {
-    height: var(--vc-cui-hover-peek) !important;
-    block-size: var(--vc-cui-hover-peek) !important;
-    min-height: var(--vc-cui-hover-peek) !important;
-    min-block-size: var(--vc-cui-hover-peek) !important;
-    max-height: var(--vc-cui-hover-peek) !important;
-    max-block-size: var(--vc-cui-hover-peek) !important;
-    padding-block: 0 !important
-}
-
-body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:not(:is(:hover, :focus-within)) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-
-/* stylelint-disable no-descending-specificity */
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]) {
-    position: relative;
-    z-index: 3;
-    overflow: hidden !important;
-    transition: var(--vc-cui-block-transition) !important
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="base_"]:has(> [class*="bar_"] > [class*="title_"]) {
-    /* stylelint-disable-next-line value-keyword-case */
-    grid-template-rows: [top] var(--vc-cui-hover-peek) [titleBarEnd] auto [noticeEnd] minmax(0, 1fr) [end] !important
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="base_"]:has(> [class*="bar_"]:is(:hover, :focus-within) > [class*="title_"]) {
-    /* stylelint-disable-next-line value-keyword-case */
-    grid-template-rows: [top] var(--vc-cui-header-bar-height) [titleBarEnd] auto [noticeEnd] minmax(0, 1fr) [end] !important
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):is(:hover, :focus-within) {
-    height: var(--vc-cui-header-bar-height) !important;
-    block-size: var(--vc-cui-header-bar-height) !important;
-    min-height: var(--vc-cui-header-bar-height) !important;
-    min-block-size: var(--vc-cui-header-bar-height) !important;
-    max-height: var(--vc-cui-header-bar-height) !important;
-    max-block-size: var(--vc-cui-header-bar-height) !important;
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition);
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):not(:is(:hover, :focus-within)) {
-    height: var(--vc-cui-hover-peek) !important;
-    block-size: var(--vc-cui-hover-peek) !important;
-    min-height: var(--vc-cui-hover-peek) !important;
-    min-block-size: var(--vc-cui-hover-peek) !important;
-    max-height: var(--vc-cui-hover-peek) !important;
-    max-block-size: var(--vc-cui-hover-peek) !important;
-    padding-block: 0 !important
-}
-
-body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):not(:is(:hover, :focus-within)) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-/* stylelint-enable no-descending-specificity */
-
-/* stylelint-disable no-descending-specificity */
-body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within)) .vc-betterFolders-sidebar > *,
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) > * {
-    opacity: 1;
-    pointer-events: auto;
-    transition: var(--vc-cui-fade-transition);
-    transition-delay: calc(var(--vc-cui-hover-delay) + var(--vc-cui-transition))
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) > [class*="unreadMentionsIndicator"] {
-    pointer-events: none
-}
-
-body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:not(:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within))) .vc-betterFolders-sidebar > *,
-body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"]), :is(:hover, :focus-within), :is(.vc-betterFolders-sidebar-grid:has(.vc-betterFolders-sidebar:is(:hover, :focus-within)) nav[class*="guilds_"])) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-
-body:has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within))) [class*="sidebarList_"]:not(:is(:hover, :focus-within)) > * {
-    opacity: 0;
-    pointer-events: none;
-    transition: var(--vc-cui-fade-transition)
-}
-/* stylelint-enable no-descending-specificity */
-
-.vc-collapsible-ui-chat-buttons {
-    display: flex;
-    align-items: center;
-    min-inline-size: 0
-}
-
-.vc-collapsible-ui-chat-buttons-collapsed {
-    min-inline-size: var(--vc-cui-hover-peek)
-}
-
-.vc-collapsible-ui-chat-buttons-items {
-    display: flex;
-    align-items: center;
-    min-inline-size: 0;
-    max-inline-size: var(--vc-cui-chat-buttons-width);
-    overflow: hidden;
-    transition:
-        max-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
-        opacity var(--vc-cui-transition) var(--vc-cui-ease),
-        margin var(--vc-cui-transition) var(--vc-cui-ease)
-}
-
-.vc-collapsible-ui-chat-buttons-collapsed .vc-collapsible-ui-chat-buttons-items {
-    max-inline-size: 0;
-    opacity: 0;
-    pointer-events: none
-}
-
-.vc-collapsible-ui-chat-buttons-collapsed:is(:hover, :focus-within) .vc-collapsible-ui-chat-buttons-items {
-    max-inline-size: var(--vc-cui-chat-buttons-width);
-    opacity: 1;
-    pointer-events: auto;
-    transition-delay: var(--vc-cui-hover-delay)
-}
-
-@media (prefers-reduced-motion: reduce) {
-    body:has(.vc-collapsible-ui-state) {
-        --vc-cui-transition: 0ms
-    }
-}
diff --git a/src/equicordplugins/commandPalette/CommandPicker.tsx b/src/equicordplugins/commandPalette/CommandPicker.tsx
index 9ff4db0b6..152ebcfc4 100644
--- a/src/equicordplugins/commandPalette/CommandPicker.tsx
+++ b/src/equicordplugins/commandPalette/CommandPicker.tsx
@@ -4,11 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Heading } from "@components/Heading";
 import { CogWheel } from "@components/Icons";
 import { classNameFactory } from "@utils/css";
 import { classes } from "@utils/misc";
-import { type ModalProps,ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { TextInput, useCallback, useEffect, useMemo, useRef, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, openModal, TextInput, useCallback, useEffect, useMemo, useRef, useState } from "@webpack/common";
 
 import {
     type CommandEntry, getCategoryGroupLabel, getCategoryWeight, getCommandSearchText, getRecentRank, getRegistryVersion, listCommands, subscribeRegistry
@@ -56,7 +57,7 @@ export function openCommandPicker(props: CommandPickerProps) {
     ));
 }
 
-function CommandPickerModal({ modalProps, commands: providedCommands, allowMultiple = false, initialQuery = "", initialSelectedIds = [], includeHiddenInSearch = false, emptyStateText = "No commands found", filter: filterPredicate, onSelect, onComplete, onClose }: CommandPickerProps & { modalProps: ModalProps; }) {
+function CommandPickerModal({ modalProps, commands: providedCommands, allowMultiple = false, initialQuery = "", initialSelectedIds = [], includeHiddenInSearch = false, emptyStateText = "No commands found", filter: filterPredicate, onSelect, onComplete, onClose }: CommandPickerProps & { modalProps: RenderModalProps; }) {
     const [query, setQuery] = useState(initialQuery);
     const [registryVersion, setRegistryVersion] = useState(() => getRegistryVersion());
     const [selectedIndex, setSelectedIndex] = useState(-1);
@@ -64,6 +65,7 @@ function CommandPickerModal({ modalProps, commands: providedCommands, allowMulti
     const [pickedIds, setPickedIds] = useState<string[]>(() => normalizedInitialSelected);
     const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
     const pickedIdsRef = useRef<string[]>([]);
+    const listRef = useRef<any>(null);
 
     useEffect(() => {
         if (providedCommands) return;
@@ -142,7 +144,12 @@ function CommandPickerModal({ modalProps, commands: providedCommands, allowMulti
 
             for (const entry of availableCommands) {
                 if (!includeHiddenInSearch && entry.hiddenInSearch) continue;
-                const searchText = getCommandSearchText(entry.id);
+                const searchText = getCommandSearchText(entry.id) || [
+                    entry.label,
+                    entry.description ?? "",
+                    ...entry.keywords ?? [],
+                    ...entry.tags ?? []
+                ].filter(Boolean).join(" ").toLowerCase();
                 if (!searchText.includes(lowerQuery)) continue;
 
                 const score = scoreCommand(entry);
@@ -203,8 +210,22 @@ function CommandPickerModal({ modalProps, commands: providedCommands, allowMulti
 
     useEffect(() => {
         if (selectedIndex < 0) return;
+        const rawContainer = listRef.current as any;
+        const container = rawContainer?.getScrollerNode ? rawContainer.getScrollerNode() : rawContainer;
         const node = itemRefs.current[selectedIndex];
-        node?.scrollIntoView({ block: "nearest" });
+        if (!container || !node) return;
+
+        const containerRect = container.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+
+        if (nodeRect.bottom > containerRect.bottom) {
+            container.scrollTop += nodeRect.bottom - containerRect.bottom;
+            return;
+        }
+
+        if (nodeRect.top < containerRect.top) {
+            container.scrollTop -= containerRect.top - nodeRect.top;
+        }
     }, [selectedIndex, items]);
 
     itemRefs.current = itemRefs.current.slice(0, items.length);
@@ -321,17 +342,26 @@ function CommandPickerModal({ modalProps, commands: providedCommands, allowMulti
     };
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.SMALL} className={classes(cn("vc-command-palette"), cl("picker"))}>
-            <div className={classes(cl("shell"), cl("picker-shell"))} onKeyDown={handleKeyDown}>
-                <div className={cl("input")}>
-                    <TextInput
-                        autoFocus
-                        value={query}
-                        onChange={setQuery}
-                        placeholder="Search commands"
-                        className={cl("main-input")}
-                    />
+        <Modal
+            {...modalProps}
+            size="lg"
+            scrollerRef={listRef}
+            title={
+                <div className={classes(cl("shell"), cl("picker-shell"), cn("vc-command-palette"), cl("picker"))} onKeyDown={handleKeyDown}>
+                    <Heading tag="h1" className={cl("title")}>Command Palette</Heading>
+
+                    <div className={cl("input")}>
+                        <TextInput
+                            autoFocus
+                            value={query}
+                            onChange={setQuery}
+                            placeholder="Search commands"
+                        />
+                    </div>
                 </div>
+            }
+        >
+            <div className={classes(cl("shell"), cl("picker-shell"), cn("vc-command-palette"), cl("picker"))} onKeyDown={handleKeyDown}>
                 <div className={cl("list")}>
                     {!hasCommands && <div className={cl("empty")}>{emptyStateText}</div>}
                     {items.map((item, index) => {
@@ -373,6 +403,6 @@ function CommandPickerModal({ modalProps, commands: providedCommands, allowMulti
                     })}
                 </div>
             </div>
-        </ModalRoot>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/commandPalette/index.tsx b/src/equicordplugins/commandPalette/index.tsx
index 77a87dcb8..c68d58b1c 100644
--- a/src/equicordplugins/commandPalette/index.tsx
+++ b/src/equicordplugins/commandPalette/index.tsx
@@ -230,5 +230,8 @@ export default definePlugin({
         });
     },
 
-    chatBarButtonWrapper: wrapChatBarChildren,
+    chatBarButtonWrapper: {
+        wrapper: wrapChatBarChildren,
+        priority: 0,
+    },
 });
diff --git a/src/equicordplugins/commandPalette/runtime/registryStore.ts b/src/equicordplugins/commandPalette/runtime/registryStore.ts
index 9a06a96de..030109615 100644
--- a/src/equicordplugins/commandPalette/runtime/registryStore.ts
+++ b/src/equicordplugins/commandPalette/runtime/registryStore.ts
@@ -20,7 +20,11 @@ export interface RegistryStore {
     getTreeCommandCache(): Map<string, CommandEntry[]>;
 }
 
+let instance: RegistryStore | null = null;
+
 export function createRegistryStore(): RegistryStore {
+    if (instance) return instance;
+
     let registryVersion = 0;
     let cachedSortedCommands: CommandEntry[] | null = null;
     const categoryCommandCache = new Map<string, CommandEntry[]>();
@@ -38,7 +42,7 @@ export function createRegistryStore(): RegistryStore {
         for (const listener of registryListeners) listener(registryVersion);
     };
 
-    return {
+    instance = {
         getRegistryVersion: () => registryVersion,
         bumpRegistryVersion: () => {
             registryVersion += 1;
@@ -77,4 +81,6 @@ export function createRegistryStore(): RegistryStore {
         getCategoryCommandCache: () => categoryCommandCache,
         getTreeCommandCache: () => treeCommandCache
     };
+
+    return instance;
 }
diff --git a/src/equicordplugins/commandPalette/style.css b/src/equicordplugins/commandPalette/style.css
index 86a74c731..752f468a9 100644
--- a/src/equicordplugins/commandPalette/style.css
+++ b/src/equicordplugins/commandPalette/style.css
@@ -6,9 +6,8 @@
 
 /* Command Palette Modal Container */
 .vc-command-palette {
-    --cp-bg: #0f0f10;
-    --cp-bg-secondary: #18181a;
-    --cp-bg-tertiary: #1f1f21;
+    --cp-bg-secondary: transparent;
+    --cp-bg-tertiary: transparent;
     --cp-bg-dropdown: #0b0b0d;
     --cp-bg-hover: #252528;
     --cp-bg-selected: #2a2a2e;
@@ -26,12 +25,6 @@
     --cp-radius-sm: 8px;
     --cp-shadow: 0 16px 44px rgb(0 0 0 / 38%), 0 6px 18px rgb(0 0 0 / 28%);
 
-    width: min(900px, 92vw) !important;
-    max-width: min(900px, 92vw) !important;
-    background: var(--cp-bg) !important;
-    border-radius: var(--cp-radius) !important;
-    box-shadow: var(--cp-shadow) !important;
-    border: 1px solid var(--cp-border) !important;
     overflow: visible !important;
     box-sizing: border-box;
     will-change: opacity, transform;
@@ -44,21 +37,19 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: 100%;
-    min-height: 67vh;
-    max-height: 67vh;
-    background: var(--cp-bg);
-    border-radius: var(--cp-radius);
     box-sizing: border-box;
     position: relative;
-    overflow: hidden;
 }
 
 /* Input Area */
 .vc-command-palette-input {
-    padding: 12px 22px 10px;
-    border-bottom: 1px solid var(--cp-border);
-    position: relative;
+    border-bottom: none;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    width: 105%;
+    box-sizing: border-box;
+    background: var(--bg-overlay-3, var(--background-secondary));
 }
 
 .vc-command-palette-main-input input {
@@ -303,21 +294,8 @@
 .vc-command-palette-list {
     flex: 1 1 auto;
     min-height: 0;
-    overflow-y: auto;
     padding: 0;
-}
-
-.vc-command-palette-list::-webkit-scrollbar {
-    width: 6px;
-}
-
-.vc-command-palette-list::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.vc-command-palette-list::-webkit-scrollbar-thumb {
-    background: var(--cp-bg-tertiary);
-    border-radius: 3px;
+    width: 100%;
 }
 
 /* Section Labels */
@@ -388,7 +366,7 @@
 }
 
 .vc-command-palette-row-subtitle {
-    font-size: 13px;
+    font-size: 14px;
     color: var(--cp-text-secondary);
     line-height: 1.4;
 }
@@ -435,22 +413,17 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px 20px;
-    background: var(--cp-bg);
-    border-top: 1px solid var(--cp-border);
     gap: 16px;
     min-height: 48px;
-}
-
-.vc-command-palette-picker .vc-command-palette-shell {
-    max-height: 62vh;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: var(--bg-overlay-3, var(--background-secondary));
 }
 
 .vc-command-palette-picker .vc-command-palette-input {
-    padding: 12px 16px 10px;
-}
-
-.vc-command-palette-picker .vc-command-palette-list {
-    max-height: 54vh;
+    width: 105%;
+    height: 100%;
 }
 
 .vc-command-palette-action-bar-action {
@@ -520,11 +493,13 @@
 .vc-command-palette-calculator {
     padding: 12px 16px;
     background: transparent;
-    border-bottom: 1px solid var(--cp-border);
+    border-bottom: none;
 }
 
+
+
 .vc-command-palette-calculator-title {
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 600;
     color: var(--cp-text-secondary);
     margin: 0 0 10px;
@@ -749,46 +724,7 @@
     font-size: 13px;
 }
 
-/* Compact Mode */
-.vc-command-palette-compact .vc-command-palette-shell {
-    max-height: fit-content;
-    min-height: 100%;
-    overflow: hidden;
-}
 
-.vc-command-palette-compact {
-    min-height: 0 !important;
-}
-
-.vc-command-palette-action-bar-logo {
-    display: flex;
-    align-items: center;
-    color: var(--cp-text-muted);
-}
-
-.vc-command-palette-compact .vc-command-palette-input {
-    border-bottom: none;
-}
-
-.vc-command-palette-action-bar-compact-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 12px;
-    background: var(--cp-bg-secondary);
-    border: 1px solid var(--cp-border);
-    border-radius: 8px;
-    color: var(--cp-text-secondary);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    line-height: 1;
-}
-
-.vc-command-palette-action-bar-compact-btn:hover {
-    background: var(--cp-bg-hover);
-    border-color: var(--cp-border-strong);
-}
 
 .vc-command-palette-keybind-input {
     display: flex;
@@ -1029,7 +965,7 @@
 }
 
 .vc-command-palette-picker .vc-command-palette-main-input input {
-    min-height: 40px !important;
+    width: 100px !important;
     height: 40px !important;
     font-size: 18px !important;
 }
@@ -1052,6 +988,11 @@
     outline: none !important;
 }
 
+.vc-command-palette-main-search-input {
+    width: 100%;
+    margin-left: 6px;
+}
+
 input.vc-command-palette-main-search-input:read-only,
 .vc-command-palette-main-search-input input:read-only {
     color: var(--cp-text-muted) !important;
diff --git a/src/equicordplugins/commandPalette/ui.tsx b/src/equicordplugins/commandPalette/ui.tsx
index 1ddf1233e..7f1ad3f32 100644
--- a/src/equicordplugins/commandPalette/ui.tsx
+++ b/src/equicordplugins/commandPalette/ui.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { closeModal, openModal } from "@utils/modal";
+import { closeModal, openModal } from "@webpack/common";
 
 import { CommandPaletteModal } from "./ui/CommandPaletteModal";
 
diff --git a/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx b/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx
index 8b8c6606e..e0645b216 100644
--- a/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx
+++ b/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx
@@ -4,40 +4,33 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { EquicordIcon } from "@equicordplugins/discordDevBanner/components";
 import { IS_MAC } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
-import { classes } from "@utils/misc";
+import { SVGProps } from "react";
 
 const cl = classNameFactory("vc-command-palette-");
 
 interface CommandPaletteActionBarProps {
     selectedLabel?: string;
     onOpenActions?(): void;
-    compact?: boolean;
-    onExpand?(): void;
 }
 
-export function CommandPaletteActionBar({ selectedLabel, onOpenActions, compact, onExpand }: CommandPaletteActionBarProps) {
-    const actionsShortcutLabel = IS_MAC ? "⌘L" : "Ctrl+L";
+const EquicordIcon = (props: React.PropsWithChildren<SVGProps<SVGSVGElement>>) => (
+    <svg
+        {...props}
+        fill="currentColor"
+        viewBox="0 0 930 930"
+        width="32px"
+        height="32px"
+    >
+        <path d="M836 465.5C836 670.121 670.121 836 465.5 836C260.879 836 95 670.121 95 465.5C95 260.879 260.879 95 465.5 95C670.121 95 836 260.879 836 465.5ZM242.322 465.5C242.322 588.758 342.242 688.678 465.5 688.678C588.758 688.678 688.678 588.758 688.678 465.5C688.678 342.242 588.758 242.322 465.5 242.322C342.242 242.322 242.322 342.242 242.322 465.5Z" />
+        <path d="M584.219 465.898C584.219 531.245 531.245 584.219 465.898 584.219C440.35 584.219 416.693 576.122 397.353 562.354L260.937 644.321C451.4 528.542 329.698 492.311 204.538 566.663L348.433 480.202C347.868 475.513 347.577 470.74 347.577 465.898C347.577 400.552 400.552 347.577 465.898 347.577C491.108 347.577 514.477 355.462 533.673 368.899L627.819 312.331C610.898 294.399 591.056 279.324 569.045 267.796C534.72 249.819 496.306 241.088 457.582 242.462C418.858 243.837 381.16 255.27 348.196 275.637C315.232 296.003 288.138 324.6 269.581 358.616C262.856 370.943 257.336 383.828 253.065 397.091C240.595 435.815 209.386 470.244 168.712 470.997C128.037 471.751 93.7099 439.084 101.005 399.061C108.06 360.359 121.262 322.87 140.254 288.06C171.06 231.591 216.039 184.116 270.763 150.306C325.486 116.495 388.07 97.5155 452.356 95.2335C516.641 92.9515 580.413 107.446 637.397 137.29C694.38 167.134 742.612 211.301 777.345 265.444C812.079 319.586 832.118 381.839 835.491 446.076C838.863 510.313 825.452 574.322 796.579 631.804C778.78 667.239 755.483 699.439 727.687 727.279C698.944 756.068 652.543 746.455 629.998 712.591C607.453 678.727 617.982 633.466 642.711 601.164C651.181 590.1 658.628 578.224 664.932 565.676C682.324 531.051 690.402 492.494 688.371 453.799C687.303 433.462 683.462 413.454 677.02 394.312L583.246 450.657C583.889 455.647 584.219 460.734 584.219 465.898ZM260.937 644.321C258.599 645.742 256.214 647.175 253.783 648.619L260.937 644.321Z" />
+        <path d="M470.711 406.73C493.342 393.132 522.712 400.455 536.311 423.086C549.909 445.718 542.587 475.088 519.955 488.687L253.783 648.619L204.538 566.663L470.711 406.73Z" />
+    </svg>
+);
 
-    if (compact) {
-        return (
-            <div className={cl("action-bar")}>
-                <div className={classes(cl("action-bar-label"), cl("action-bar-logo"))}>
-                    <EquicordIcon />
-                </div>
-                <button
-                    type="button"
-                    className={cl("action-bar-compact-btn")}
-                    onClick={onExpand}
-                >
-                    <span className={cl("action-bar-actions-label")}>Show More</span>
-                    <span>↓</span>
-                </button>
-            </div>
-        );
-    }
+export function CommandPaletteActionBar({ selectedLabel, onOpenActions }: CommandPaletteActionBarProps) {
+    const actionsShortcutLabel = IS_MAC ? "⌘L" : "Ctrl+L";
 
     return (
         <div className={cl("action-bar")}>
diff --git a/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx b/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx
index d531a8c18..2f8f232ea 100644
--- a/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx
+++ b/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx
@@ -6,13 +6,14 @@
 
 import "../style.css";
 
+import { Heading } from "@components/Heading";
 import { IS_MAC } from "@utils/constants";
 import { classNameFactory, classNameToSelector } from "@utils/css";
 import { copyWithToast } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import { classes } from "@utils/misc";
-import { type ModalProps, ModalRoot, ModalSize } from "@utils/modal";
-import { TextInput, Toasts, useEffect, useMemo, useRef, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, TextInput, Toasts, useEffect, useMemo, useRef, useState } from "@webpack/common";
 import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 
 import { buildQueryResolution } from "../actions/executors";
@@ -282,20 +283,18 @@ function createInitialPageState(ref: PalettePageRef): PalettePageValuesState {
     };
 }
 
-export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: ModalProps; instanceKey: number; }) {
+export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: RenderModalProps; instanceKey: number; }) {
     const {
-        compactStartEnabled = true,
         closeAfterExecute = true
     } = settings.use();
     const [query, setQuery] = useState("");
-    const [expanded, setExpanded] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const [selectedKey, setSelectedKey] = useState<string | null>(null);
     const [keyboardSelectedKey, setKeyboardSelectedKey] = useState<string | null>(null);
     const [registryVersion, setRegistryVersion] = useState(() => getRegistryVersion());
     const [pinnedIds, setPinnedIds] = useState<Set<string>>(new Set());
     const [navigationLevel, setNavigationLevel] = useState<NavigationLevel>(() => {
-        if (compactStartEnabled || !persistedCategoryId) return { type: "root" };
+        if (!persistedCategoryId) return { type: "root" };
         return buildNavigationLevelForCategory(persistedCategoryId);
     });
     const [activePromptCommand, setActivePromptCommand] = useState<CommandEntry | null>(null);
@@ -326,7 +325,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
 
     useEffect(() => {
         setQuery("");
-        setExpanded(false);
         setSelectedIndex(-1);
         setSelectedKey(null);
         setKeyboardSelectedKey(null);
@@ -343,38 +341,22 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         closeReasonRef.current = null;
         keyboardNavigationAtRef.current = 0;
         setNavigationLevel(() => {
-            if (compactStartEnabled || !persistedCategoryId) return { type: "root" };
+            if (!persistedCategoryId) return { type: "root" };
             return buildNavigationLevelForCategory(persistedCategoryId);
         });
-    }, [compactStartEnabled, instanceKey]);
+    }, [instanceKey]);
 
     useEffect(() => {
         return () => {
-            if (closeReasonRef.current === "explicit-root") {
-                clearPersistedNavigation();
-                return;
-            }
-
-            if (closeReasonRef.current === "programmatic") {
-                clearPersistedNavigation();
-                return;
-            }
-
-            if (navigationLevel.type === "category") {
-                persistedCategoryId = navigationLevel.categoryId;
-                return;
-            }
-
             clearPersistedNavigation();
         };
-    }, [navigationLevel]);
+    }, []);
 
     useEffect(() => {
         setIsActionsMenuOpen(false);
     }, [navigationLevel]);
 
     const trimmedQuery = query.trim();
-    const compact = compactStartEnabled && trimmedQuery.length === 0 && !expanded && navigationLevel.type === "root" && pageStack.length === 0;
 
     const allCommands = useMemo(() => listCommands(), [registryVersion]);
 
@@ -472,7 +454,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
             expandedItems.push({ type: "section", id: "section-breadcrumb", label: breadcrumb });
         }
 
-        if (!compact && navigationLevel.type === "root" && trimmedQuery.length === 0) {
+        if (navigationLevel.type === "root" && trimmedQuery.length === 0) {
             if (pinnedCandidates.length > 0) {
                 expandedItems.push({ type: "section", id: "section-pinned", label: "Pinned" });
                 expandedItems.push(...pinnedCandidates);
@@ -507,7 +489,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         }
 
         return expandedItems;
-    }, [compact, navigationLevel, pinnedCandidates, rankedCommandCandidates, recentCandidates, suggestedCandidates, trimmedQuery]);
+    }, [navigationLevel, pinnedCandidates, rankedCommandCandidates, recentCandidates, suggestedCandidates, trimmedQuery]);
 
     const emptyStateText = navigationLevel.type === "category" && navigationLevel.categoryId === MENTIONS_CATEGORY_ID
         ? "All caught up."
@@ -606,12 +588,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
     }, [queryCandidates, selectedPromptCandidateId]);
 
     useEffect(() => {
-        if (compact) {
-            setSelectedIndex(-1);
-            setSelectedKey(null);
-            return;
-        }
-
         if (!hasCommandItems) {
             setSelectedIndex(-1);
             setSelectedKey(null);
@@ -635,12 +611,13 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
 
         setSelectedIndex(firstSelectable);
         setSelectedKey(items[firstSelectable].id);
-    }, [hasCommandItems, items, selectedKey, compact]);
+    }, [hasCommandItems, items, selectedKey]);
 
     useEffect(() => {
         if (selectedIndex < 0) return;
         if (selectionSource !== "keyboard") return;
-        const container = listRef.current;
+        const rawContainer = listRef.current as any;
+        const container = rawContainer?.getScrollerNode ? rawContainer.getScrollerNode() : rawContainer;
         const node = itemRefs.current[selectedIndex];
         if (!container || !node) return;
 
@@ -662,16 +639,18 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         if (previous === trimmedQuery) return;
         lastTrimmedQueryRef.current = trimmedQuery;
 
-        if (compact || isPageOpen) return;
+        if (isPageOpen) return;
 
         setSelectedIndex(-1);
         setSelectedKey(null);
         setKeyboardSelectedKey(null);
 
-        if (listRef.current) {
-            listRef.current.scrollTop = 0;
+        const rawContainer = listRef.current as any;
+        const container = rawContainer?.getScrollerNode ? rawContainer.getScrollerNode() : rawContainer;
+        if (container) {
+            container.scrollTop = 0;
         }
-    }, [compact, isPageOpen, trimmedQuery]);
+    }, [isPageOpen, trimmedQuery]);
 
     useEffect(() => {
         if (!focusPromptInput) return;
@@ -768,7 +747,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         setSelectedKey(null);
         setKeyboardSelectedKey(null);
         setQuery("");
-        setExpanded(false);
     };
 
     const setActivePageValue = (fieldKey: string, value: string) => {
@@ -883,7 +861,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         setSelectedKey(null);
         setKeyboardSelectedKey(null);
         setQuery("");
-        setExpanded(false);
         return true;
     };
 
@@ -982,7 +959,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         setSelectedKey(null);
         setKeyboardSelectedKey(null);
         setQuery("");
-        setExpanded(false);
     };
 
     const updateSelection = (index: number, item: PaletteCandidate) => {
@@ -1055,7 +1031,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
         clearPromptState();
         setSelectedKey(null);
         setQuery("");
-        setExpanded(false);
     };
 
     const onKeyDown = async (event: ReactKeyboardEvent<HTMLDivElement>) => {
@@ -1256,17 +1231,12 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
 
         if (isMainInputTarget && event.key === "ArrowDown") {
             event.preventDefault();
-            if (compact) {
-                setExpanded(true);
-                return;
-            }
             moveSelection(1);
             return;
         }
 
         if (isMainInputTarget && event.key === "ArrowUp") {
             event.preventDefault();
-            if (compact) return;
             if (selectedIndex <= 0) {
                 focusSearchInput();
                 return;
@@ -1289,24 +1259,12 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
 
         if (event.key === "ArrowDown") {
             event.preventDefault();
-            if (compact) {
-                setExpanded(true);
-                return;
-            }
-
             moveSelection(1);
             return;
         }
 
         if (event.key === "ArrowUp") {
             event.preventDefault();
-            if (compact) return;
-
-            if (selectedIndex <= 0 && trimmedQuery.length === 0 && navigationLevel.type === "root") {
-                setExpanded(false);
-                return;
-            }
-
             moveSelection(-1);
             return;
         }
@@ -1368,14 +1326,8 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
                 return;
             }
 
-            if (!compact && trimmedQuery.length > 0) {
+            if (trimmedQuery.length > 0) {
                 setQuery("");
-                setExpanded(false);
-                return;
-            }
-
-            if (!compact) {
-                setExpanded(false);
                 return;
             }
 
@@ -1469,124 +1421,126 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
     }, [activePage, activePageFieldKey, activePageSpec, activePageState, activePageSuggestions]);
 
     return (
-        <ModalRoot
+        <Modal
             {...modalProps}
-            className={cn("vc-command-palette", compact && cl("compact"))}
-            size={compact ? ModalSize.SMALL : ModalSize.LARGE}
-        >
-            <div className={cl("shell")} onKeyDown={onKeyDown}>
-                {!isPageOpen && (
-                    <CommandPaletteInput
-                        inputRef={mainInputRef}
-                        autoFocus={!activePromptCommand}
-                        value={query}
-                        onChange={value => {
-                            if (activePromptCommand && value.length > 0) {
-                                clearPromptState();
-                            }
+            size="lg"
+            scrollerRef={listRef}
+            title={
+                <div className={cn("vc-command-palette", cl("shell"))} onKeyDown={onKeyDown}>
+                    <Heading tag="h1" className={cl("title")}>Command Palette</Heading>
 
-                            const next = value.trim();
-                            setQuery(value);
-
-                            if (next.length > 0) {
-                                setExpanded(true);
-                            } else {
-                                if (navigationLevel.type !== "root") {
-                                    goBack();
-                                    return;
+                    {!isPageOpen && (
+                        <CommandPaletteInput
+                            inputRef={mainInputRef}
+                            autoFocus={!activePromptCommand}
+                            value={query}
+                            onChange={value => {
+                                if (activePromptCommand && value.length > 0) {
+                                    clearPromptState();
                                 }
-                                setExpanded(false);
-                            }
-                        }}
-                        placeholder={mainInputPlaceholder}
-                        readOnly={false}
-                    >
-                        {shouldRenderPromptPreview && promptCommand && (
-                            <div
-                                ref={promptContainerRef}
-                                className={classes(cl("query-preview"), !shouldShowPromptCommandLabel && cl("query-preview-without-label"))}
-                            >
-                                {shouldShowPromptCommandLabel && (
-                                    <span className={cl("query-preview-command-label")}>{promptCommand.label}</span>
-                                )}
-                                <div className={cl("query-preview-prompt")} style={queryPreviewPromptStyle}>
-                                    {activePromptCommand ? (
-                                        <div
-                                            className={classes(cl("query-prompt-capsule"), cl("query-prompt-capsule-active"))}
-                                            style={promptChipStyle}
-                                            onMouseDown={() => setShowPromptDropdown(true)}
-                                        >
-                                            <TextInput
-                                                ref={promptInputRef}
-                                                className={cl("prompt-active-input")}
-                                                value={promptInputValue}
-                                                onChange={value => {
-                                                    setPromptInputValue(value);
-                                                    setShowPromptDropdown(true);
-                                                    if (selectedPromptCandidateId) {
-                                                        setSelectedPromptCandidateId(null);
-                                                    }
+
+                                const next = value.trim();
+                                setQuery(value);
+
+                                if (next.length === 0) {
+                                    if (navigationLevel.type !== "root") {
+                                        goBack();
+                                        return;
+                                    }
+                                }
+                            }}
+                            placeholder={mainInputPlaceholder}
+                            readOnly={false}
+                        >
+                            {shouldRenderPromptPreview && promptCommand && (
+                                <div
+                                    ref={promptContainerRef}
+                                    className={classes(cl("query-preview"), !shouldShowPromptCommandLabel && cl("query-preview-without-label"))}
+                                >
+                                    {shouldShowPromptCommandLabel && (
+                                        <span className={cl("query-preview-command-label")}>{promptCommand.label}</span>
+                                    )}
+                                    <div className={cl("query-preview-prompt")} style={queryPreviewPromptStyle}>
+                                        {activePromptCommand ? (
+                                            <div
+                                                className={classes(cl("query-prompt-capsule"), cl("query-prompt-capsule-active"))}
+                                                style={promptChipStyle}
+                                                onMouseDown={() => setShowPromptDropdown(true)}
+                                            >
+                                                <TextInput
+                                                    ref={promptInputRef}
+                                                    className={cl("prompt-active-input")}
+                                                    value={promptInputValue}
+                                                    onChange={value => {
+                                                        setPromptInputValue(value);
+                                                        setShowPromptDropdown(true);
+                                                        if (selectedPromptCandidateId) {
+                                                            setSelectedPromptCandidateId(null);
+                                                        }
+                                                    }}
+                                                    placeholder={selectedPromptCandidate ? "" : (promptCommand.queryPlaceholder ?? "Action")}
+                                                    onFocus={() => setShowPromptDropdown(true)}
+                                                    onBlur={() => {
+                                                        window.setTimeout(() => {
+                                                            const active = document.activeElement;
+                                                            if (promptContainerRef.current?.contains(active)) return;
+                                                            setShowPromptDropdown(false);
+                                                            if (selectedPromptCandidateId || promptInputValue.trim().length > 0) return;
+                                                            clearPromptState();
+                                                        }, 0);
+                                                    }}
+                                                />
+                                            </div>
+                                        ) : (
+                                            <button
+                                                type="button"
+                                                className={cl("query-prompt-capsule")}
+                                                style={promptChipStyle}
+                                                onMouseDown={event => event.preventDefault()}
+                                                onClick={() => activatePromptCommand(promptCommand, true)}
+                                            >
+                                                <span className={cl("query-prompt-capsule-label")}>{promptCommand.queryPlaceholder ?? "Action"}</span>
+                                            </button>
+                                        )}
+                                        {shouldShowPromptDropdown && (
+                                            <PaletteDropdown
+                                                className={cl("query-preview-dropdown")}
+                                                suggestions={promptDropdownSuggestions}
+                                                highlightedIndex={promptSelectedSuggestionIndex}
+                                                onHover={index => {
+                                                    const candidate = promptDropdownSuggestions[index];
+                                                    if (!candidate) return;
+                                                    setSelectedPromptCandidateId(candidate.id);
                                                 }}
-                                                placeholder={selectedPromptCandidate ? "" : (promptCommand.queryPlaceholder ?? "Action")}
-                                                onFocus={() => setShowPromptDropdown(true)}
-                                                onBlur={() => {
-                                                    window.setTimeout(() => {
-                                                        const active = document.activeElement;
-                                                        if (promptContainerRef.current?.contains(active)) return;
+                                                onPick={candidate => {
+                                                    setSelectedPromptCandidateId(candidate.id);
+                                                    if (activePromptIsSingleSelect) {
+                                                        setPromptInputValue(candidate.label);
+                                                    } else {
+                                                        setPromptInputValue("");
+                                                    }
+                                                    if (activePromptIsSingleSelect) {
                                                         setShowPromptDropdown(false);
-                                                        if (selectedPromptCandidateId || promptInputValue.trim().length > 0) return;
-                                                        clearPromptState();
-                                                    }, 0);
+                                                    }
+                                                    setFocusPromptInput(true);
                                                 }}
                                             />
-                                        </div>
-                                    ) : (
-                                        <button
-                                            type="button"
-                                            className={cl("query-prompt-capsule")}
-                                            style={promptChipStyle}
-                                            onMouseDown={event => event.preventDefault()}
-                                            onClick={() => activatePromptCommand(promptCommand, true)}
-                                        >
-                                            <span className={cl("query-prompt-capsule-label")}>{promptCommand.queryPlaceholder ?? "Action"}</span>
-                                        </button>
-                                    )}
-                                    {shouldShowPromptDropdown && (
-                                        <PaletteDropdown
-                                            className={cl("query-preview-dropdown")}
-                                            suggestions={promptDropdownSuggestions}
-                                            highlightedIndex={promptSelectedSuggestionIndex}
-                                            onHover={index => {
-                                                const candidate = promptDropdownSuggestions[index];
-                                                if (!candidate) return;
-                                                setSelectedPromptCandidateId(candidate.id);
-                                            }}
-                                            onPick={candidate => {
-                                                setSelectedPromptCandidateId(candidate.id);
-                                                if (activePromptIsSingleSelect) {
-                                                    setPromptInputValue(candidate.label);
-                                                } else {
-                                                    setPromptInputValue("");
-                                                }
-                                                if (activePromptIsSingleSelect) {
-                                                    setShowPromptDropdown(false);
-                                                }
-                                                setFocusPromptInput(true);
-                                            }}
-                                        />
-                                    )}
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
-                        )}
-                    </CommandPaletteInput>
-                )}
+                            )}
+                        </CommandPaletteInput>
+                    )}
 
-                {!compact && !isPageOpen && calculatorResult && (
-                    <CommandPaletteCalculatorCards result={calculatorResult} mode={calculatorViewMode} />
-                )}
-
-                {!compact && !isPageOpen && (
-                    <div ref={listRef} className={cl("list")}>
+                    {!isPageOpen && calculatorResult && (
+                        <CommandPaletteCalculatorCards result={calculatorResult} mode={calculatorViewMode} />
+                    )}
+                </div>
+            }
+        >
+            <div className={cn("vc-command-palette", cl("shell"))} onKeyDown={onKeyDown}>
+                {!isPageOpen && (
+                    <div className={cl("list")}>
                         {!hasCommandItems && <div className={cl("empty")}>{emptyStateText}</div>}
                         {items.map((item, index) => {
                             if (item.type === "section") {
@@ -1626,9 +1580,9 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
                     </div>
                 )}
 
-                {!compact && isPageOpen && activePageView}
+                {isPageOpen && activePageView}
 
-                {!compact && (isActionsMenuOpen || isActionsMenuClosing) && (
+                {(isActionsMenuOpen || isActionsMenuClosing) && (
                     <CommandPaletteActionsMenu
                         actions={paletteActions}
                         title={activePageSpec?.title ?? selectedLabel ?? "Actions"}
@@ -1651,11 +1605,9 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: M
                             setIsActionsMenuOpen(true);
                             setIsActionsMenuClosing(false);
                         }}
-                        compact={compact}
-                        onExpand={() => setExpanded(true)}
                     />
                 )}
             </div>
-        </ModalRoot>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/customFolderIcons/components.tsx b/src/equicordplugins/customFolderIcons/components.tsx
index 6143e8f05..330051416 100644
--- a/src/equicordplugins/customFolderIcons/components.tsx
+++ b/src/equicordplugins/customFolderIcons/components.tsx
@@ -4,8 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal";
-import { Button, Menu, Slider, TextInput, useState } from "@webpack/common";
+import { Button, closeModal, Menu, Modal,openModalLazy, Slider, TextInput, useState } from "@webpack/common";
 
 import { folderIconsData, settings } from "./settings";
 import { folderProp, int2rgba, setFolderData } from "./util";
@@ -95,17 +94,12 @@ export function makeContextItem(a: folderProp) {
             action={() => {
                 openModalLazy(async () => {
                     return props => (
-                        <ModalRoot {...props}>
-                            <ModalHeader >
-                                <div style={{
-                                    color: "white"
-                                }}>
-                                    Set a New Icon.
-                                </div>
-                            </ModalHeader>
-                            <ModalContent>
-                                <ImageModal folderId={a.folderId} folderColor={a.folderColor} />
-                            </ModalContent>
+                        <Modal
+                            {...props}
+                            size="sm"
+                            title="Set a New Icon."
+                        >
+                            <ImageModal folderId={a.folderId} folderColor={a.folderColor} />
                             <div style={{
                                 color: "white",
                                 margin: "2.5%",
@@ -113,7 +107,7 @@ export function makeContextItem(a: folderProp) {
                             }}>
                                 You might have to hover the folder after setting in order for it to refresh.
                             </div>
-                        </ModalRoot>
+                        </Modal>
                     );
                 },
                 {
diff --git a/src/equicordplugins/customUserColors/SetColorModal.tsx b/src/equicordplugins/customUserColors/SetColorModal.tsx
index ba51afa70..c57ce4b63 100644
--- a/src/equicordplugins/customUserColors/SetColorModal.tsx
+++ b/src/equicordplugins/customUserColors/SetColorModal.tsx
@@ -5,17 +5,17 @@
  */
 
 import { set } from "@api/DataStore";
-import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
+import { HeadingSecondary } from "@components/Heading";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { Button, ColorPicker, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { ColorPicker, Modal, React, useState } from "@webpack/common";
 
 import { colors, DATASTORE_KEY } from "./index";
 
 const cl = classNameFactory("vc-customColors-");
 
-export function SetColorModal({ id, modalProps }: { id: string, modalProps: ModalProps; }) {
+export function SetColorModal({ id, modalProps }: { id: string, modalProps: RenderModalProps; }) {
     const initialColor = parseInt(colors[id], 16) || 372735;
     // color picker default to current color set for user (if null it's 0x05afff :3 )
 
@@ -26,7 +26,7 @@ export function SetColorModal({ id, modalProps }: { id: string, modalProps: Moda
         setColorPickerColor(color);
     }
 
-    function handleKey(e: KeyboardEvent) {
+    function handleKey(e: React.KeyboardEvent) {
         if (e.key === "Enter")
             saveUserColor();
     }
@@ -44,14 +44,24 @@ export function SetColorModal({ id, modalProps }: { id: string, modalProps: Moda
     }
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <HeadingPrimary>
-                    Custom Color
-                </HeadingPrimary>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent className={cl("modal-content")} onKeyDown={handleKey}>
+        <Modal
+            {...modalProps}
+            size="sm"
+            title="Custom Color"
+            actions={[
+                {
+                    text: "Save",
+                    variant: "primary",
+                    onClick: saveUserColor
+                },
+                {
+                    text: "Delete Entry",
+                    variant: "dangerPrimary",
+                    onClick: deleteUserColor
+                }
+            ]}
+        >
+            <div onKeyDown={handleKey} className={cl("modal-content")}>
                 <section className={Margins.bottom16}>
                     <HeadingSecondary>
                         Pick a Color
@@ -62,22 +72,7 @@ export function SetColorModal({ id, modalProps }: { id: string, modalProps: Moda
                         showEyeDropper={false}
                     />
                 </section>
-            </ModalContent>
-
-            <ModalFooter className={cl("modal-footer")}>
-                <Button
-                    color={Button.Colors.RED}
-                    onClick={deleteUserColor}
-                >
-                    Delete Entry
-                </Button>
-                <Button
-                    color={Button.Colors.BRAND}
-                    onClick={saveUserColor}
-                >
-                    Save
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/customUserColors/index.tsx b/src/equicordplugins/customUserColors/index.tsx
index 41df07dcb..48aa3a08c 100644
--- a/src/equicordplugins/customUserColors/index.tsx
+++ b/src/equicordplugins/customUserColors/index.tsx
@@ -10,12 +10,11 @@ import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { get } from "@api/DataStore";
 import { definePluginSettings, Settings } from "@api/Settings";
 import { EquicordDevs } from "@utils/constants";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { Channel, User } from "@vencord/discord-types";
 import { extractAndLoadChunksLazy } from "@webpack";
-import { ChannelStore, Menu, SelectedChannelStore } from "@webpack/common";
+import { ChannelStore, Menu, openModal,SelectedChannelStore } from "@webpack/common";
 
 import { SetColorModal } from "./SetColorModal";
 
diff --git a/src/equicordplugins/declutter/index.tsx b/src/equicordplugins/declutter/index.tsx
index 7c6b8d1c4..e82292d86 100644
--- a/src/equicordplugins/declutter/index.tsx
+++ b/src/equicordplugins/declutter/index.tsx
@@ -7,7 +7,7 @@
 import "./style.css";
 
 import { isPluginEnabled } from "@api/PluginManager";
-import { definePluginSettings, migrateOldSettingToNewPlugin, migratePluginSetting, migratePluginSettings } from "@api/Settings";
+import { definePluginSettings, migratePluginSetting } from "@api/Settings";
 import { Divider } from "@components/Divider";
 import { HeadingSecondary } from "@components/Heading";
 import { Notice } from "@components/Notice";
@@ -18,21 +18,8 @@ import { t, Translate } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { Alerts } from "@webpack/common";
 
-migratePluginSettings("Declutter", "BetterUserArea", "Anammox");
-migrateOldSettingToNewPlugin("Declutter", "removeClanTag", "GuildTagSettings", "hideTags");
-
-const migrationsAnammox = [
-    ["dms", "removeShopAboveDM"],
-    ["quests", "removeQuestsAboveDM"],
-    ["serverBoost", "removeServerBoostInfo"],
-    ["billing", "removeBillingSettings"],
-    ["gift", "removeGiftButton"],
-    ["emojiList", "removeUnavailableEmojiPicker"],
-];
-
-for (const [oldKey, newKey] of migrationsAnammox) {
-    migratePluginSetting("Declutter", newKey, oldKey);
-}
+migratePluginSetting("Declutter", "removeShopAboveDms", "removeShopAboveDM");
+migratePluginSetting("Declutter", "removeQuestsAboveDms", "removeQuestsAboveDM");
 
 const cl = classNameFactory("vc-declutter-");
 
@@ -86,13 +73,13 @@ export const settings = definePluginSettings({
         type: OptionType.COMPONENT,
         component: () => SectionSeparator(t("equicord.declutter.headers.friendsList")),
     },
-    removeShopAboveDM: {
+    removeShopAboveDms: {
         type: OptionType.BOOLEAN,
         description: t("equicord.declutter.settings.removeShopAboveDM"),
         default: false,
         restartNeeded: true,
     },
-    removeQuestsAboveDM: {
+    removeQuestsAboveDms: {
         type: OptionType.BOOLEAN,
         description: t("equicord.declutter.settings.removeQuestsAboveDM"),
         default: false,
@@ -179,6 +166,15 @@ export default definePlugin({
             },
             predicate: () => settings.store.removeAvatarDecoration && !isPluginEnabled(decor.name),
         },
+        {
+            // Avatar decoration on dms list
+            find: "showCommunicationDisabledStyles",
+            replacement: {
+                match: /null==\i\|\|\i\?null:\(0,\i\.jsxs?\)\("img",\{className:\i\.\i,src:\i,alt:" ","aria-hidden":!0\}\)/,
+                replace: "null"
+            },
+            predicate: () => settings.store.removeAvatarDecoration && !isPluginEnabled(decor.name),
+        },
         {
             // Nameplate
             find: ".MINI_PREVIEW,[",
@@ -279,18 +275,18 @@ export default definePlugin({
                 {
                     match: /"nitro-tab-group"\)/,
                     replace: "$&&&undefined",
-                    predicate: () => settings.store.removeShopAboveDM,
+                    predicate: () => settings.store.removeShopAboveDms,
                 },
                 {
-                    match: /"discord-shop"\)/,
+                    match: /NAVIGATION_LINK\}\}\},"discord-shop"\)/,
                     replace: "$&&&undefined",
-                    predicate: () => settings.store.removeShopAboveDM
+                    predicate: () => settings.store.removeShopAboveDms
 
                 },
                 {
-                    match: /"quests"\)/,
+                    match: /\.QUEST_HOME\},"quests"\)/,
                     replace: "$&&&undefined",
-                    predicate: () => settings.store.removeQuestsAboveDM
+                    predicate: () => settings.store.removeQuestsAboveDms
                 },
             ],
         },
@@ -307,7 +303,7 @@ export default definePlugin({
                     replace: "/*$&*/",
                 },
             ],
-            predicate: () => settings.store.removeShopAboveDM,
+            predicate: () => settings.store.removeShopAboveDms,
         },
         {
             // Channel list server boost progress bar
diff --git a/src/equicordplugins/downloadAllAttachments/index.tsx b/src/equicordplugins/downloadAllAttachments/index.tsx
new file mode 100644
index 000000000..b3955139e
--- /dev/null
+++ b/src/equicordplugins/downloadAllAttachments/index.tsx
@@ -0,0 +1,101 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { CloudDownloadIcon } from "@components/Icons";
+import { EquicordDevs } from "@utils/constants";
+import { Logger } from "@utils/Logger";
+import { pluralise } from "@utils/misc";
+import definePlugin from "@utils/types";
+import { Message, MessageAttachment } from "@vencord/discord-types";
+import { ChannelStore, showToast, Toasts } from "@webpack/common";
+
+const logger = new Logger("DownloadAllAttachments");
+
+async function downloadAll(attachments: MessageAttachment[]) {
+    let dir: FileSystemDirectoryHandle;
+    try {
+        dir = await window.showDirectoryPicker({ mode: "readwrite" });
+    } catch (e) {
+        if (e instanceof DOMException && e.name === "AbortError") return;
+        logger.error("Failed to open directory picker:", e);
+        return;
+    }
+
+    const usedNames = new Map<string, number>();
+
+    function uniqueName(original: string): string {
+        const count = usedNames.get(original) ?? 0;
+        usedNames.set(original, count + 1);
+        if (count === 0) return original;
+        const dot = original.lastIndexOf(".");
+        return dot === -1
+            ? `${original}_${count}`
+            : `${original.slice(0, dot)}_${count}${original.slice(dot)}`;
+    }
+
+    const tasks = attachments.map(a => ({ attachment: a, filename: uniqueName(a.filename) }));
+
+    const results = await Promise.allSettled(tasks.map(async ({ attachment, filename }) => {
+        if (!attachment.proxy_url) throw new Error("Missing Proxy URL");
+
+        const res = await fetch(attachment.proxy_url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        if (!res.body) throw new Error("Response body is empty");
+
+        let fileHandle: FileSystemFileHandle | undefined;
+        try {
+            fileHandle = await dir.getFileHandle(filename, { create: true });
+            const writable = await fileHandle.createWritable();
+            try {
+                await res.body.pipeTo(writable);
+            } catch (e) {
+                await writable.abort();
+                throw e;
+            }
+        } catch (e) {
+            if (fileHandle) {
+                try { await dir.removeEntry(filename); } catch { }
+            }
+            throw e;
+        }
+    }));
+
+    const failed = results.filter(r => {
+        if (r.status === "rejected") {
+            logger.warn("Failed to download attachment:", r.reason);
+            return true;
+        }
+        return false;
+    }).length;
+
+    const succeeded = attachments.length - failed;
+
+    if (failed === 0)
+        showToast(`Downloaded ${pluralise(succeeded, "attachment")}.`, Toasts.Type.SUCCESS);
+    else
+        showToast(`Downloaded ${succeeded} of ${attachments.length} attachments. ${failed} failed.`, Toasts.Type.FAILURE);
+}
+
+export default definePlugin({
+    name: "DownloadAllAttachments",
+    description: "Adds a popover button to download all attachments in a message at once.",
+    tags: ["Utility", "Chat"],
+    authors: [EquicordDevs.dhopcs],
+    dependencies: ["MessagePopoverAPI"],
+    messagePopoverButton: {
+        icon: CloudDownloadIcon,
+        render(message: Message) {
+            if (!message.attachments.length) return null;
+            return {
+                label: "Download All Attachments",
+                icon: CloudDownloadIcon,
+                message,
+                channel: ChannelStore.getChannel(message.channel_id),
+                onClick: () => downloadAll(message.attachments)
+            };
+        }
+    }
+});
diff --git a/src/equicordplugins/fileUpload/utils/upload.ts b/src/equicordplugins/fileUpload/utils/upload.ts
index fb0bfd5f5..0d2cc4af1 100644
--- a/src/equicordplugins/fileUpload/utils/upload.ts
+++ b/src/equicordplugins/fileUpload/utils/upload.ts
@@ -28,7 +28,7 @@ const logger = new Logger("FileUpload", "#7cb7ff");
 function toProxyUrl(url: string): string {
     const corsProxyUrl = normalizeCorsProxyUrl((settings.store as { corsProxyUrl?: string; }).corsProxyUrl);
 
-    if (Native || url.startsWith(`${corsProxyUrl}?url=`)) {
+    if (url.startsWith(`${corsProxyUrl}?url=`)) {
         return url;
     }
 
diff --git a/src/equicordplugins/findReply/ReplyNavigator.tsx b/src/equicordplugins/findReply/ReplyNavigator.tsx
index 1c656d1ce..c5aa6b158 100644
--- a/src/equicordplugins/findReply/ReplyNavigator.tsx
+++ b/src/equicordplugins/findReply/ReplyNavigator.tsx
@@ -8,10 +8,11 @@ import "./styles.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Paginator, requirePaginator } from "@plugins/reviewDB/components/ReviewModal";
-import { ModalCloseButton } from "@utils/modal";
 import { Message } from "@vencord/discord-types";
-import { findCssClassesLazy } from "@webpack";
+import { findComponentByCodeLazy, findCssClassesLazy } from "@webpack";
 import { React, useRef, useState } from "@webpack/common";
+
+const CloseButton = findComponentByCodeLazy("CLOSE_BUTTON_LABEL");
 import { MutableRefObject } from "react";
 
 import { jumper } from "./index";
@@ -53,7 +54,7 @@ export default function ReplyNavigator({ replies }: { replies: Message[]; }) {
                     totalCount={replies.length}
                     onPageChange={processPageChange}
                 />
-                <ModalCloseButton className={"vc-findreply-close"} onClick={() => setVisible(false)} />
+                <CloseButton className={"vc-findreply-close"} onClick={() => setVisible(false)} />
             </div>
         </ErrorBoundary>
     );
diff --git a/src/equicordplugins/fontLoader/index.tsx b/src/equicordplugins/fontLoader/index.tsx
index 1f474e476..7cea658fb 100644
--- a/src/equicordplugins/fontLoader/index.tsx
+++ b/src/equicordplugins/fontLoader/index.tsx
@@ -72,7 +72,7 @@ async function searchGoogleFonts(query: string) {
 }
 
 const preloadFont = (family: string) =>
-    loadFontStyle(createGoogleFontUrl(family, "&text=The quick brown fox jumps over the lazy dog"));
+    loadFontStyle(createGoogleFontUrl(family, ":wght@400;700"));
 
 let styleElement: HTMLStyleElement | null = null;
 
@@ -136,14 +136,13 @@ function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) =
     return (
         <section>
             <HeadingSecondary>{t("equicord.fontLoader.ui.searchGoogleFonts")}</HeadingSecondary>
-            <Paragraph>{t("equicord.fontLoader.ui.clickToApply")}</Paragraph>
+            <Paragraph className={Margins.bottom8}>{t("equicord.fontLoader.ui.clickToApply")}</Paragraph>
 
             <TextInput
                 value={query}
                 onChange={e => handleSearch(e)}
                 placeholder={t("equicord.fontLoader.ui.searchFonts")}
                 disabled={loading}
-                className={Margins.bottom16}
             />
 
             {results.length > 0 && (
diff --git a/src/equicordplugins/friendCodes/FriendCodesPanel.tsx b/src/equicordplugins/friendCodes/FriendCodesPanel.tsx
index 9c85ff2de..0245a373d 100644
--- a/src/equicordplugins/friendCodes/FriendCodesPanel.tsx
+++ b/src/equicordplugins/friendCodes/FriendCodesPanel.tsx
@@ -8,11 +8,11 @@ import "./styles.css";
 
 import { BaseText } from "@components/BaseText";
 import { Flex } from "@components/Flex";
-import { HeadingTertiary } from "@components/Heading";
+import { Heading, HeadingTertiary } from "@components/Heading";
 import { copyToClipboard } from "@utils/clipboard";
 import { t } from "@utils/translation";
 import { findByPropsLazy, findCssClassesLazy } from "@webpack";
-import { Button, Forms, Parser, useEffect, useState } from "@webpack/common";
+import { Button, Parser, useEffect, useState } from "@webpack/common";
 
 import { FriendInvite } from "./types";
 
@@ -78,12 +78,12 @@ export default function FriendCodesPanel() {
     return (
         <>
             <header className={FormStyles.header}>
-                <Forms.FormTitle
+                <Heading
                     tag="h2"
                     className={FormStyles.title}
                 >
                     Your Friend Codes
-                </Forms.FormTitle>
+                </Heading>
 
                 <Flex
                     style={{ marginBottom: "16px" }}
diff --git a/src/equicordplugins/friendshipRanks/index.tsx b/src/equicordplugins/friendshipRanks/index.tsx
index 59281fbde..f114df62d 100644
--- a/src/equicordplugins/friendshipRanks/index.tsx
+++ b/src/equicordplugins/friendshipRanks/index.tsx
@@ -13,10 +13,10 @@ import { Flex } from "@components/Flex";
 import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
-import { ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
-import { Forms, RelationshipStore } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Forms, Modal,openModal, RelationshipStore } from "@webpack/common";
 
 interface rankInfo {
     title: string;
@@ -85,10 +85,12 @@ const ranks: rankInfo[] =
     ];
 
 function openRankModal(rank: rankInfo) {
-    openModal(props => (
+    openModal((props: RenderModalProps) => (
         <ErrorBoundary>
-            <ModalRoot {...props} size={ModalSize.DYNAMIC}>
-                <ModalHeader>
+            <Modal
+                {...props}
+                size="sm"
+                title={
                     <Flex className={cl("flex")}>
                         <Forms.FormTitle
                             className={cl("img")}
@@ -98,15 +100,14 @@ function openRankModal(rank: rankInfo) {
                             {rank.title}
                         </Forms.FormTitle>
                     </Flex>
-                </ModalHeader>
-                <ModalContent>
-                    <div className={cl("text")}>
-                        <Paragraph>
-                            {rank.description}
-                        </Paragraph>
-                    </div>
-                </ModalContent>
-            </ModalRoot>
+                }
+            >
+                <div className={cl("text")}>
+                    <Paragraph>
+                        {rank.description}
+                    </Paragraph>
+                </div>
+            </Modal>
         </ErrorBoundary >
     ));
 }
diff --git a/src/equicordplugins/ghosted/GhostedUsersModal.tsx b/src/equicordplugins/ghosted/GhostedUsersModal.tsx
index eb85658b5..ade418e6a 100644
--- a/src/equicordplugins/ghosted/GhostedUsersModal.tsx
+++ b/src/equicordplugins/ghosted/GhostedUsersModal.tsx
@@ -5,10 +5,9 @@
  */
 
 import { classNameFactory } from "@utils/css";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize } from "@utils/modal";
-import { Channel } from "@vencord/discord-types";
+import { Channel, RenderModalProps } from "@vencord/discord-types";
 import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
-import { Avatar, Button, ChannelStore, MessageStore, React, Text, UserStore } from "@webpack/common";
+import { Avatar, Button, ChannelStore, MessageStore, Modal,React, Text, UserStore } from "@webpack/common";
 
 const cl = classNameFactory("vc-boo-");
 
@@ -37,9 +36,8 @@ function GroupDmsIcon({ channel }: { channel: Channel; }) {
 }
 
 interface GhostedUsersModalProps {
-    modalProps: any;
+    modalProps: RenderModalProps;
     ghostedChannels: string[];
-    onClose: () => void;
     onClearGhost: (channelId: string) => void;
 }
 
@@ -57,14 +55,14 @@ export function getChannelDisplayName(channelId: string): string {
     return user?.username || "Unknown User";
 }
 
-export function GhostedUsersModal({ modalProps, ghostedChannels: initialChannels, onClose, onClearGhost }: GhostedUsersModalProps) {
+export function GhostedUsersModal({ modalProps, ghostedChannels: initialChannels, onClearGhost }: GhostedUsersModalProps) {
     const [ghostedChannels, setGhostedChannels] = React.useState(initialChannels);
 
     const handleChannelClick = (channelId: string) => {
         const channel = ChannelStore.getChannel(channelId);
         if (channel) {
             SelectedChannelActionCreators.selectPrivateChannel(channelId);
-            onClose();
+            modalProps.onClose();
         }
     };
 
@@ -83,77 +81,67 @@ export function GhostedUsersModal({ modalProps, ghostedChannels: initialChannels
     };
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <Text
-                    variant="heading-lg/semibold"
-                    className={cl("modal-header")}
-                >
-                    Ghosted Users ({ghostedChannels.length})
-                </Text>
-                {ghostedChannels.length > 0 && (
-                    <Button
-                        size={Button.Sizes.SMALL}
-                        color={Button.Colors.PRIMARY}
-                        onClick={handleClearAll}
-                        className={cl("clear")}
-                    >
-                        Clear All
-                    </Button>
-                )}
-                <ModalCloseButton onClick={onClose} />
-            </ModalHeader>
-            <ModalContent>
-                <div className={cl("modal-content")}>
-                    {ghostedChannels.length === 0 ? (
-                        <Text variant="text-md/normal">No ghosts here!</Text>
-                    ) : (
-                        ghostedChannels.map(channelId => {
-                            const channel = ChannelStore.getChannel(channelId);
-                            if (!channel) return null;
+        <Modal
+            {...modalProps}
+            size="md"
+            title={`Ghosted Users (${ghostedChannels.length})`}
+            actions={ghostedChannels.length > 0 ? [
+                {
+                    text: "Clear All",
+                    variant: "primary",
+                    onClick: handleClearAll
+                }
+            ] : []}
+        >
+            <div className={cl("modal-content")}>
+                {ghostedChannels.length === 0 ? (
+                    <Text variant="text-md/normal">No ghosts here!</Text>
+                ) : (
+                    ghostedChannels.map(channelId => {
+                        const channel = ChannelStore.getChannel(channelId);
+                        if (!channel) return null;
 
-                            const lastMessage = MessageStore.getMessages(channelId)?.last();
-                            const lastMessageDate = lastMessage?.timestamp ? formatMessageDate(lastMessage.timestamp) : "";
+                        const lastMessage = MessageStore.getMessages(channelId)?.last();
+                        const lastMessageDate = lastMessage?.timestamp ? formatMessageDate(lastMessage.timestamp) : "";
 
-                            const displayName = getChannelDisplayName(channel.id);
-                            const userId = channel?.recipients?.[0] ?? "";
-                            return (
-                                <div
-                                    key={channelId}
-                                    onClick={() => handleChannelClick(channelId)}
-                                    className={cl("ghosted-entry")}
-                                >
-                                    {channel.isGroupDM() ?
-                                        <GroupDmsIcon
-                                            channel={channel}
-                                        /> : <Avatar
-                                            src={UserStore.getUser(userId)?.getAvatarURL(undefined, 128, true)}
-                                            size="SIZE_40"
-                                            aria-label={displayName}
-                                        />}
-                                    <div className={cl("user-info")}>
-                                        <Text variant="text-md/normal">
-                                            {displayName}
+                        const displayName = getChannelDisplayName(channel.id);
+                        const userId = channel?.recipients?.[0] ?? "";
+                        return (
+                            <div
+                                key={channelId}
+                                onClick={() => handleChannelClick(channelId)}
+                                className={cl("ghosted-entry")}
+                            >
+                                {channel.isGroupDM() ?
+                                    <GroupDmsIcon
+                                        channel={channel}
+                                    /> : <Avatar
+                                        src={UserStore.getUser(userId)?.getAvatarURL(undefined, 128, true)}
+                                        size="SIZE_40"
+                                        aria-label={displayName}
+                                    />}
+                                <div className={cl("user-info")}>
+                                    <Text variant="text-md/normal">
+                                        {displayName}
+                                    </Text>
+                                    {lastMessageDate && (
+                                        <Text variant="text-xs/normal" className={cl("modal-text")}>
+                                            {lastMessageDate}
                                         </Text>
-                                        {lastMessageDate && (
-                                            <Text variant="text-xs/normal" className={cl("modal-text")}>
-                                                {lastMessageDate}
-                                            </Text>
-                                        )}
-                                    </div>
-                                    <Button
-                                        size={Button.Sizes.SMALL}
-                                        color={Button.Colors.PRIMARY}
-                                        onClick={e => handleClearClick(e, channelId)}
-                                    >
-                                        Clear
-                                    </Button>
+                                    )}
                                 </div>
-                            );
-                        })
-                    )}
-                </div>
-            </ModalContent>
-        </ModalRoot>
+                                <Button
+                                    size={Button.Sizes.SMALL}
+                                    color={Button.Colors.PRIMARY}
+                                    onClick={e => handleClearClick(e, channelId)}
+                                >
+                                    Clear
+                                </Button>
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/ghosted/index.tsx b/src/equicordplugins/ghosted/index.tsx
index bf974f891..0821bc77d 100644
--- a/src/equicordplugins/ghosted/index.tsx
+++ b/src/equicordplugins/ghosted/index.tsx
@@ -12,11 +12,10 @@ import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
-import { closeModal, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { Channel } from "@vencord/discord-types";
-import { Menu, Tooltip, useEffect, useState } from "@webpack/common";
+import { Menu, openModal,Tooltip, useEffect, useState } from "@webpack/common";
 
 import { Boo, clearChannelFromGhost, getBooCount, getGhostedChannels, onBooCountChange } from "./Boo";
 import { getChannelDisplayName, GhostedUsersModal } from "./GhostedUsersModal";
@@ -86,12 +85,11 @@ function BooIndicator() {
 
     const handleClick = () => {
         const ghostedChannels = getGhostedChannels();
-        const modalKey = openModal(modalProps => (
+        openModal(modalProps => (
             <ErrorBoundary>
                 <GhostedUsersModal
                     modalProps={modalProps}
                     ghostedChannels={ghostedChannels}
-                    onClose={() => closeModal(modalKey)}
                     onClearGhost={clearChannelFromGhost}
                 />
             </ErrorBoundary>
diff --git a/src/equicordplugins/gifCollections/components/modals.tsx b/src/equicordplugins/gifCollections/components/modals.tsx
index 3e36e52b6..7647544ff 100644
--- a/src/equicordplugins/gifCollections/components/modals.tsx
+++ b/src/equicordplugins/gifCollections/components/modals.tsx
@@ -8,8 +8,8 @@ import { Flex } from "@components/Flex";
 import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { classes } from "@utils/misc";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Button, FluxDispatcher, TextInput, useCallback, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Button, FluxDispatcher, Modal, openModal, TextInput, useCallback, useState } from "@webpack/common";
 
 import { settings } from "../settings";
 import { Collection, Gif } from "../types";
@@ -49,124 +49,116 @@ export function openRenameCollectionModal(name: string) {
     openModal(props => <RenameCollectionModal props={props} name={name} />);
 }
 
-function InfoModal({ props, title, rows }: { props: ModalProps; title: string; rows: { label: string; value: string; }[]; }) {
+function InfoModal({ props, title, rows }: { props: RenderModalProps; title: string; rows: { label: string; value: string; }[]; }) {
     return (
-        <ModalRoot {...props} size={ModalSize.SMALL} className={cl("modal")}>
-            <ModalHeader separator={false} className={cl("modal-header")}>
-                <Paragraph className={cl("modal-title")}>{title}</Paragraph>
-            </ModalHeader>
-            <ModalContent className={cl("modal-content")}>
-                <section>
-                    {rows.map(row => (
-                        <Flex key={row.label} className={cl("info-row")}>
-                            <Heading className={cl("info-title")}>{row.label}</Heading>
-                            <Paragraph className={cl("info-text")}>{row.value}</Paragraph>
-                        </Flex>
+        <Modal
+            {...props}
+            size="sm"
+            title={title}
+            actions={[
+                { text: "Close", variant: "secondary", onClick: props.onClose }
+            ]}
+        >
+            <section>
+                {rows.map(row => (
+                    <Flex key={row.label} className={cl("info-row")}>
+                        <Heading className={cl("info-title")}>{row.label}</Heading>
+                        <Paragraph className={cl("info-text")}>{row.value}</Paragraph>
+                    </Flex>
+                ))}
+            </section>
+        </Modal>
+    );
+}
+
+function MoveToCollectionModal({ props, gifId }: { props: RenderModalProps; gifId: string; }) {
+    return (
+        <Modal
+            {...props}
+            size="sm"
+            title="Move To Collection"
+            actions={[
+                { text: "Close", variant: "secondary", onClick: props.onClose }
+            ]}
+        >
+            <Heading style={{ marginBottom: "10px" }}>Select a collection to move the item to</Heading>
+            <div className={cl("buttons")}>
+                {cache_collections
+                    .filter(col => col.name !== getItemCollectionNameFromId(gifId))
+                    .map(col => (
+                        <Button
+                            key={col.name}
+                            className={cl("button")}
+                            onClick={async () => {
+                                const fromCollection = getItemCollectionNameFromId(gifId);
+                                if (!fromCollection) return;
+                                await moveGifToCollection(gifId, fromCollection, col.name);
+                                FluxDispatcher.dispatch({ type: "GIF_PICKER_QUERY", query: "" });
+                                FluxDispatcher.dispatch({ type: "GIF_PICKER_QUERY", query: fromCollection });
+                                props.onClose();
+                            }}
+                        >
+                            {stripPrefix(col.name)}
+                        </Button>
                     ))}
-                </section>
-            </ModalContent>
-            <ModalFooter className={cl("modal-footer")}>
-                <Button onClick={props.onClose}>Close</Button>
-            </ModalFooter>
-        </ModalRoot>
+            </div>
+        </Modal>
     );
 }
 
-function MoveToCollectionModal({ props, gifId }: { props: ModalProps; gifId: string; }) {
-    return (
-        <ModalRoot {...props} size={ModalSize.SMALL} className={cl("modal")}>
-            <ModalHeader separator={false} className={cl("modal-header")}>
-                <Paragraph className={cl("modal-title")}>Move To Collection</Paragraph>
-            </ModalHeader>
-            <ModalContent className={cl("modal-content")}>
-                <Heading>Select a collection to move the item to</Heading>
-                <div className={cl("buttons")}>
-                    {cache_collections
-                        .filter(col => col.name !== getItemCollectionNameFromId(gifId))
-                        .map(col => (
-                            <Button
-                                key={col.name}
-                                className={cl("button")}
-                                onClick={async () => {
-                                    const fromCollection = getItemCollectionNameFromId(gifId);
-                                    if (!fromCollection) return;
-                                    await moveGifToCollection(gifId, fromCollection, col.name);
-                                    FluxDispatcher.dispatch({ type: "GIF_PICKER_QUERY", query: "" });
-                                    FluxDispatcher.dispatch({ type: "GIF_PICKER_QUERY", query: fromCollection });
-                                    props.onClose();
-                                }}
-                            >
-                                {stripPrefix(col.name)}
-                            </Button>
-                        ))}
-                </div>
-            </ModalContent>
-            <ModalFooter className={cl("modal-footer")}>
-                <Button onClick={props.onClose}>Close</Button>
-            </ModalFooter>
-        </ModalRoot>
-    );
-}
-
-function CreateCollectionModal({ props, gif }: { props: ModalProps; gif: Gif; }) {
+function CreateCollectionModal({ props, gif }: { props: RenderModalProps; gif: Gif; }) {
     const [name, setName] = useState("");
-    const onSubmit = useCallback((e: React.FormEvent) => {
-        e.preventDefault();
+    const onSubmit = useCallback((e?: React.FormEvent) => {
+        e?.preventDefault();
         if (!name.length) return;
         createCollection(name, [gif]);
         props.onClose();
     }, [name, gif, props]);
 
     return (
-        <ModalRoot {...props}>
+        <Modal
+            {...props}
+            size="sm"
+            title="Create Collection"
+            actions={[
+                { text: "Create", onClick: onSubmit, disabled: !name.length, variant: "primary" }
+            ]}
+        >
             <form onSubmit={onSubmit}>
-                <ModalHeader>
-                    <Paragraph>Create Collection</Paragraph>
-                </ModalHeader>
-                <ModalContent>
-                    <Heading className={cl("rename-text")}>Collection Name</Heading>
-                    <TextInput onChange={setName} />
-                </ModalContent>
-                <ModalFooter>
-                    <Button type="submit" color={Button.Colors.GREEN} disabled={!name.length} onClick={onSubmit}>
-                        Create
-                    </Button>
-                </ModalFooter>
+                <Heading className={cl("rename-text")}>Collection Name</Heading>
+                <TextInput onChange={setName} />
             </form>
-        </ModalRoot>
+        </Modal>
     );
 }
 
-function RenameCollectionModal({ props, name }: { props: ModalProps; name: string; }) {
+function RenameCollectionModal({ props, name }: { props: RenderModalProps; name: string; }) {
     const prefix = settings.store.collectionPrefix;
     const strippedName = name.startsWith(prefix) ? name.slice(prefix.length) : name;
     const [newName, setNewName] = useState(strippedName);
     const tooLong = newName.length >= 25;
 
-    const onSubmit = useCallback(async (e: React.FormEvent) => {
-        e.preventDefault();
+    const onSubmit = useCallback(async (e?: React.FormEvent) => {
+        e?.preventDefault();
         if (!newName.length || tooLong) return;
         await renameCollection(name, newName);
         props.onClose();
     }, [newName, name, tooLong, props]);
 
     return (
-        <ModalRoot {...props}>
+        <Modal
+            {...props}
+            size="sm"
+            title="Rename Collection"
+            actions={[
+                { text: "Rename", onClick: onSubmit, disabled: !newName.length || tooLong, variant: "primary" }
+            ]}
+        >
             <form onSubmit={onSubmit}>
-                <ModalHeader>
-                    <Paragraph>Rename Collection</Paragraph>
-                </ModalHeader>
-                <ModalContent>
-                    <Paragraph className={cl("rename-text")}>New Collection Name</Paragraph>
-                    <TextInput value={newName} className={classes(cl("rename-input"), tooLong ? cl("input-warning") : "")} onChange={setNewName} />
-                    {tooLong && <Paragraph className={cl("warning-text")}>Name can't be longer than 24 characters</Paragraph>}
-                </ModalContent>
-                <ModalFooter>
-                    <Button type="submit" color={Button.Colors.GREEN} disabled={!newName.length || tooLong} onClick={onSubmit}>
-                        Rename
-                    </Button>
-                </ModalFooter>
+                <Paragraph className={cl("rename-text")}>New Collection Name</Paragraph>
+                <TextInput value={newName} className={classes(cl("rename-input"), tooLong ? cl("input-warning") : "")} onChange={setNewName} />
+                {tooLong && <Paragraph className={cl("warning-text")}>Name can't be longer than 24 characters</Paragraph>}
             </form>
-        </ModalRoot>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/githubRepos/components/ProfilePopoutComponent.tsx b/src/equicordplugins/githubRepos/components/ProfilePopoutComponent.tsx
index 1711cf7d0..0f415dfff 100644
--- a/src/equicordplugins/githubRepos/components/ProfilePopoutComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/ProfilePopoutComponent.tsx
@@ -9,10 +9,9 @@ import { Span } from "@components/Span";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "@equicordplugins/githubRepos/githubApi";
 import { GitHubRepo } from "@equicordplugins/githubRepos/types";
 import { classes } from "@utils/misc";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import { findCssClassesLazy } from "@webpack";
-import { Clickable, React, useEffect, UserProfileStore, useState } from "@webpack/common";
+import { Clickable, openModal,React, useEffect, UserProfileStore, useState } from "@webpack/common";
 
 import { ReposModal } from "./ReposModal";
 
diff --git a/src/equicordplugins/githubRepos/components/ProfileTabComponent.tsx b/src/equicordplugins/githubRepos/components/ProfileTabComponent.tsx
index 325c33002..00b109cfa 100644
--- a/src/equicordplugins/githubRepos/components/ProfileTabComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/ProfileTabComponent.tsx
@@ -7,9 +7,8 @@
 import { BaseText } from "@components/BaseText";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "@equicordplugins/githubRepos/githubApi";
 import { GitHubRepo } from "@equicordplugins/githubRepos/types";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
-import { React, useEffect, UserProfileStore, useState } from "@webpack/common";
+import { openModal, React, useEffect, UserProfileStore, useState } from "@webpack/common";
 
 import { cl, settings } from "..";
 import { RepoCard } from "./RepoCard";
diff --git a/src/equicordplugins/githubRepos/components/ReposModal.tsx b/src/equicordplugins/githubRepos/components/ReposModal.tsx
index 36bcc0902..885c9a643 100644
--- a/src/equicordplugins/githubRepos/components/ReposModal.tsx
+++ b/src/equicordplugins/githubRepos/components/ReposModal.tsx
@@ -4,12 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Button } from "@components/Button";
-import { HeadingPrimary } from "@components/Heading";
 import { getLanguageColor } from "@equicordplugins/githubRepos/colors";
 import { GitHubRepo } from "@equicordplugins/githubRepos/types";
-import { ModalContent, ModalFooter, ModalHeader, ModalRoot } from "@utils/modal";
-import { React } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, React } from "@webpack/common";
 
 import { cl } from "..";
 import { Star } from "./Star";
@@ -20,7 +18,7 @@ interface ReposModalProps {
     rootProps: any;
 }
 
-export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
+export function ReposModal({ repos, username, rootProps }: ReposModalProps & { rootProps: RenderModalProps; }) {
     const renderTableHeader = () => (
         <thead>
             <tr>
@@ -63,44 +61,38 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
     );
 
     return (
-        <ModalRoot className={cl("modal")} size="large" {...rootProps}>
-            <ModalHeader>
-                <HeadingPrimary className={cl("modal-title")}>
-                    {username}'s GitHub Repositories
-                </HeadingPrimary>
-            </ModalHeader>
-            <ModalContent className={cl("modal-content")}>
-                <div className={cl("table-container")}>
-                    <table className={cl("table")}>
-                        <colgroup>
-                            <col className={cl("header-repo")} />
-                            <col className={cl("header-description")} />
-                            <col className={cl("header-language")} />
-                            <col className={cl("header-stars")} />
-                        </colgroup>
-                        {renderTableHeader()}
-                        <tbody>
-                            {repos.map(renderTableRow)}
-                        </tbody>
-                    </table>
-                </div>
-            </ModalContent>
-            <ModalFooter className={cl("modal-footer")}>
-                <Button
-                    className={cl("modal-footer-github")}
-                    variant="link"
-                    onClick={() => window.open(`https://github.com/${username}?tab=repositories`, "_blank")}
-                >
-                    View on GitHub
-                </Button>
-                <Button
-                    className={cl("modal-footer-close")}
-                    variant="secondary"
-                    onClick={rootProps.onClose}
-                >
-                    Close
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...rootProps}
+            className={cl("modal")}
+            size="lg"
+            title={`${username}'s GitHub Repositories`}
+            actions={[
+                {
+                    text: "View on GitHub",
+                    variant: "link",
+                    onClick: () => window.open(`https://github.com/${username}?tab=repositories`, "_blank")
+                },
+                {
+                    text: "Close",
+                    variant: "secondary",
+                    onClick: rootProps.onClose
+                }
+            ]}
+        >
+            <div className={cl("table-container")}>
+                <table className={cl("table")}>
+                    <colgroup>
+                        <col className={cl("header-repo")} />
+                        <col className={cl("header-description")} />
+                        <col className={cl("header-language")} />
+                        <col className={cl("header-stars")} />
+                    </colgroup>
+                    {renderTableHeader()}
+                    <tbody>
+                        {repos.map(renderTableRow)}
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/githubRepos/index.tsx b/src/equicordplugins/githubRepos/index.tsx
index 52200df01..466839d54 100644
--- a/src/equicordplugins/githubRepos/index.tsx
+++ b/src/equicordplugins/githubRepos/index.tsx
@@ -65,13 +65,16 @@ export default definePlugin({
     shouldShowGitHub(userId: string) {
         return UserProfileStore.getUserProfile(userId)?.connectedAccounts?.some((c: any) => c.type === "github") ?? false;
     },
-    renderProfileCollection: (props: { user: User; displayProfile?: any; }) => {
-        return (
-            <ProfilePopoutComponent
-                {...props}
-                id={props.user.id}
-            />
-        );
+    renderProfileCollection: {
+        render: (props: { user: User; displayProfile?: any; }) => {
+            return (
+                <ProfilePopoutComponent
+                    {...props}
+                    id={props.user.id}
+                />
+            );
+        },
+        priority: 0,
     },
     renderProfileRepositoriesTab: ErrorBoundary.wrap((props: { user: User; displayProfile?: any; }) => {
         return (
diff --git a/src/equicordplugins/globalBadges/badgeModal.tsx b/src/equicordplugins/globalBadges/badgeModal.tsx
index e2c501b41..98a91ebec 100644
--- a/src/equicordplugins/globalBadges/badgeModal.tsx
+++ b/src/equicordplugins/globalBadges/badgeModal.tsx
@@ -4,14 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Button } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { HeadingTertiary } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { openInviteModal } from "@utils/discord";
-import { ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
-import { User } from "@vencord/discord-types";
-import { React, Tooltip } from "@webpack/common";
+import { RenderModalProps, User } from "@vencord/discord-types";
+import { Modal, openModal, React, Tooltip } from "@webpack/common";
 
 import { cl, GlobalBadges, INVITE_LINK } from "./utils";
 
@@ -37,20 +35,32 @@ export function openBadgeModal(user: User) {
         <BadgeModalComponent key={badge.key} tooltip={badge.tooltip} badge={badge.badge} />
     ));
 
-    openModal(modalprops => (
-        <ModalRoot {...modalprops}>
-            <ErrorBoundary>
-                <ModalHeader>
+    openModal((modalprops: RenderModalProps) => (
+        <Modal
+            {...modalprops}
+            size="sm"
+            title={
+                <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                     <img
                         className={cl("modal-avatar")}
                         src={user.getAvatarURL(undefined, 512, true)}
                         alt=""
                     />
-                    <HeadingTertiary className={cl("modal-name")}>
+                    <HeadingTertiary className={cl("modal-name")} style={{ color: "white" }}>
                         {user.username}
                     </HeadingTertiary>
-                </ModalHeader>
-                <ModalContent className={cl("modal-description")}>
+                </div>
+            }
+            actions={[
+                {
+                    text: "Join GlobalBadges Server",
+                    variant: "link",
+                    onClick: () => openInviteModal(INVITE_LINK)
+                }
+            ]}
+        >
+            <ErrorBoundary>
+                <div className={cl("modal-description")}>
                     {badgeDataElements.length ? (
                         <>
                             <Paragraph className={cl("modal-text")}>
@@ -66,16 +76,8 @@ export function openBadgeModal(user: User) {
                             No global badges.
                         </Paragraph>
                     )}
-                </ModalContent>
-                <ModalFooter>
-                    <Button
-                        variant="link"
-                        onClick={() => openInviteModal(INVITE_LINK)}
-                    >
-                        Join GlobalBadges Server
-                    </Button>
-                </ModalFooter>
+                </div>
             </ErrorBoundary>
-        </ModalRoot>
+        </Modal>
     ));
 }
diff --git a/src/equicordplugins/hideChatButtons/index.tsx b/src/equicordplugins/hideChatButtons/index.tsx
index 2eeffe6b2..3b2b99dac 100644
--- a/src/equicordplugins/hideChatButtons/index.tsx
+++ b/src/equicordplugins/hideChatButtons/index.tsx
@@ -89,8 +89,11 @@ export default definePlugin({
     dependencies: ["ChatInputButtonAPI"],
     settings: settings,
     startAt: StartAt.Init,
-    chatBarButtonWrapper: (buttons: ReactNode) => {
-        return <ButtonsInnerComponent buttons={buttons} />;
+    chatBarButtonWrapper: {
+        wrapper: (buttons: ReactNode) => {
+            return <ButtonsInnerComponent buttons={buttons} />;
+        },
+        priority: 0,
     },
     start() {
         hidechatbuttonsopen = settings.store.open;
diff --git a/src/equicordplugins/hideMessages/index.tsx b/src/equicordplugins/hideMessages/index.tsx
index d480a4d15..730e21bc5 100644
--- a/src/equicordplugins/hideMessages/index.tsx
+++ b/src/equicordplugins/hideMessages/index.tsx
@@ -5,13 +5,33 @@
  */
 
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
+import { isPluginEnabled } from "@api/PluginManager";
 import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { EyeIcon } from "@components/Icons";
+import pinDms from "@plugins/pinDms";
+import { isPinned } from "@plugins/pinDms/data";
 import { EquicordDevs } from "@utils/constants";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { Message } from "@vencord/discord-types";
-import { ChannelStore, FluxDispatcher, Menu } from "@webpack/common";
+import { Channel, Message } from "@vencord/discord-types";
+import { ChannelStore, Clickable, FluxDispatcher, Menu, Tooltip } from "@webpack/common";
+
+interface UserContextProps {
+    channel?: Channel;
+}
+
+interface PrivateChannelsListInstance {
+    forceUpdate(callback?: () => void): void;
+}
+
+const hiddenDmIds = new Set<string>();
+let privateChannelsListInstance: PrivateChannelsListInstance | null = null;
+let showHiddenDms = false;
+
+function notifyHiddenDmsUpdate() {
+    privateChannelsListInstance?.forceUpdate();
+}
 
 const hideMessage = (messageId: string, channelId: string) => {
     FluxDispatcher.dispatch({
@@ -22,6 +42,17 @@ const hideMessage = (messageId: string, channelId: string) => {
     });
 };
 
+function toggleDm(channelId: string) {
+    if (hiddenDmIds.has(channelId)) {
+        hiddenDmIds.delete(channelId);
+        if (!hiddenDmIds.size) showHiddenDms = false;
+    } else {
+        hiddenDmIds.add(channelId);
+    }
+
+    notifyHiddenDmsUpdate();
+}
+
 const messageCtxPatch: NavContextMenuPatchCallback = (children, { message }: { message: Message; }) => {
     const group = findGroupChildrenByChildId("copy-text", children);
     if (!group) return;
@@ -36,6 +67,25 @@ const messageCtxPatch: NavContextMenuPatchCallback = (children, { message }: { m
     ));
 };
 
+const userCtxPatch: NavContextMenuPatchCallback = (children, { channel }: UserContextProps) => {
+    if (!channel?.isDM()) return;
+    if (isPluginEnabled(pinDms.name) && isPinned(channel.id)) return;
+
+    const group = findGroupChildrenByChildId("close-dm", children);
+    if (!group) return;
+
+    const hidden = hiddenDmIds.has(channel.id);
+
+    group.splice(group.findIndex(c => c?.props?.id === "close-dm"), 0, (
+        <Menu.MenuItem
+            id="vc-hidemessages-dm"
+            label={hidden ? "Unhide DM" : "Hide DM"}
+            icon={EyeIcon}
+            action={() => toggleDm(channel.id)}
+        />
+    ));
+};
+
 const settings = definePluginSettings({
     hidePopoverButton: {
         type: OptionType.BOOLEAN,
@@ -50,10 +100,71 @@ export default definePlugin({
     dependencies: ["MessagePopoverAPI"],
     tags: ["Chat", "Utility"],
     authors: [EquicordDevs.yash],
+    patches: [
+        {
+            find: '"dm-quick-launcher"===',
+            replacement: [
+                {
+                    match: /render\(\)\{/,
+                    replace: "$&this.props.privateChannelIds=$self.filterPrivateChannelIds(this.props.privateChannelIds,this);"
+                },
+                {
+                    match: /renderRow=\i=>\{/,
+                    replace: "$&this.props.privateChannelIds=$self.filterPrivateChannelIds(this.props.privateChannelIds,this);"
+                },
+                {
+                    match: /renderDM=\(\i,\i\)=>\{/,
+                    replace: "$&this.props.privateChannelIds=$self.filterPrivateChannelIds(this.props.privateChannelIds,this);"
+                },
+                {
+                    match: /#{intl::DIRECT_MESSAGES}\)\}\),/,
+                    replace: "$&$self.renderHiddenMessagesToggle(),"
+                }
+            ]
+        }
+    ],
     contextMenus: {
-        "message": messageCtxPatch
+        "message": messageCtxPatch,
+        "user-context": userCtxPatch
     },
     settings,
+    stop() {
+        hiddenDmIds.clear();
+        showHiddenDms = false;
+        notifyHiddenDmsUpdate();
+        privateChannelsListInstance = null;
+    },
+    filterPrivateChannelIds(privateChannelIds: string[], instance?: PrivateChannelsListInstance) {
+        privateChannelsListInstance = instance ?? privateChannelsListInstance;
+        return showHiddenDms ? privateChannelIds : privateChannelIds.filter(id => !hiddenDmIds.has(id));
+    },
+    renderHiddenMessagesToggle: ErrorBoundary.wrap(() => {
+        const hasHiddenDms = hiddenDmIds.size > 0;
+        const label = !hasHiddenDms ? "No Hidden DMs" : showHiddenDms ? "Hide Hidden DMs" : "Show Hidden DMs";
+
+        return (
+            <Tooltip text={label}>
+                {tooltipProps => (
+                    <Clickable
+                        {...tooltipProps}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={label}
+                        aria-disabled={!hasHiddenDms}
+                        onClick={event => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            if (!hasHiddenDms) return;
+                            showHiddenDms = !showHiddenDms;
+                            notifyHiddenDmsUpdate();
+                        }}
+                    >
+                        <EyeIcon width={18} height={18} />
+                    </Clickable>
+                )}
+            </Tooltip>
+        );
+    }, { noop: true }),
     messagePopoverButton: {
         icon: EyeIcon,
         render(message: Message) {
diff --git a/src/equicordplugins/hideServers/components/HiddenServersMenu.tsx b/src/equicordplugins/hideServers/components/HiddenServersMenu.tsx
index cdf840d10..863a6b848 100644
--- a/src/equicordplugins/hideServers/components/HiddenServersMenu.tsx
+++ b/src/equicordplugins/hideServers/components/HiddenServersMenu.tsx
@@ -10,40 +10,21 @@ import { HiddenServersStore } from "@equicordplugins/hideServers/HiddenServersSt
 import { classNameFactory } from "@utils/css";
 import { getGuildAcronym } from "@utils/discord";
 import { classes } from "@utils/misc";
-import {
-    closeModal,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalProps,
-    ModalRoot,
-    ModalSize,
-    openModal,
-} from "@utils/modal";
-import { Guild } from "@vencord/discord-types";
+import { Guild, RenderModalProps } from "@vencord/discord-types";
 import { findCssClassesLazy } from "@webpack";
-import { Button, IconUtils, useStateFromStores } from "@webpack/common";
+import { Button, closeModal, IconUtils, Modal,openModal, useStateFromStores } from "@webpack/common";
 
 import { SortedGuildStore } from "..";
 
 const cl = classNameFactory("vc-hideservers-");
 const IconClasses = findCssClassesLazy("icon", "acronym", "childWrapper");
 
-function HiddenServersModal({ modalProps, close }: { modalProps: ModalProps; close(): void; }) {
+function HiddenServersModal({ modalProps, close }: { modalProps: RenderModalProps; close(): void; }) {
     const guilds = useStateFromStores([HiddenServersStore], () => HiddenServersStore.hiddenGuildsDetail());
     return (
-        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>
-                    Hidden Servers
-                </BaseText>
-                <ModalCloseButton onClick={close} />
-            </ModalHeader>
-
-            <ModalContent>
-                <HiddenServersMenu guilds={guilds} />
-            </ModalContent>
-        </ModalRoot>
+        <Modal {...modalProps} size="lg" title="Hidden Servers">
+            <HiddenServersMenu guilds={guilds} />
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/iconViewer/components/Modals.tsx b/src/equicordplugins/iconViewer/components/Modals.tsx
index 67cc8e8fb..7dfa433fb 100644
--- a/src/equicordplugins/iconViewer/components/Modals.tsx
+++ b/src/equicordplugins/iconViewer/components/Modals.tsx
@@ -5,7 +5,6 @@
  */
 
 import { BaseText } from "@components/BaseText";
-import { Button } from "@components/Button";
 import { CodeBlock } from "@components/CodeBlock";
 import { Flex } from "@components/Flex";
 import { HeadingSecondary } from "@components/Heading";
@@ -13,18 +12,8 @@ import { Paragraph } from "@components/Paragraph";
 import { TooltipContainer } from "@components/TooltipContainer";
 import { copyWithToast, getIntlMessage } from "@utils/discord";
 import { Logger } from "@utils/Logger";
-import {
-    CloseButton,
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalProps,
-    ModalRoot,
-    ModalSize,
-    openModal
-} from "@utils/modal";
 import { saveFile } from "@utils/web";
-import { Icon } from "@vencord/discord-types";
+import { Icon, RenderModalProps } from "@vencord/discord-types";
 import { findComponentByCodeLazy } from "@webpack";
 import {
     Clickable,
@@ -32,6 +21,8 @@ import {
     createRoot,
     FluxDispatcher,
     Menu,
+    Modal,
+    openModal,
     ReactDOM,
     useCallback,
     useEffect,
@@ -226,7 +217,7 @@ function OtherContextMenu({ iconName, Icon, color }: { iconName: string; Icon: I
     );
 }
 
-function IconModal({ iconName, Icon, onClose, transitionState }: { iconName: string; Icon: Icon; } & ModalProps) {
+function IconModal({ iconName, Icon, onClose, transitionState }: { iconName: string; Icon: Icon; } & RenderModalProps) {
     const [color, setColor] = useColorNavigation(209);
     const colorData = cssColors[color];
     const colorKeys = useMemo(() => getCssColorKeys(), []);
@@ -247,62 +238,59 @@ function IconModal({ iconName, Icon, onClose, transitionState }: { iconName: str
         });
     }, [colorKeys.length, setColor]);
 
-    const openOtherMenu = (e: React.MouseEvent) => {
-        ContextMenuApi.openContextMenu(e, () => (
+    const openOtherMenu = (e?: React.MouseEvent) => {
+        if (e) ContextMenuApi.openContextMenu(e, () => (
             <OtherContextMenu iconName={iconName} Icon={Icon} color={color} />
         ));
     };
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
-            <ModalHeader separator={false} className="vc-ic-modal-header">
-                <div className="vc-ic-modal-header-content">
-                    <BaseText size="lg" weight="semibold" className="vc-ic-modal-title">{iconName}</BaseText>
+        <Modal
+            transitionState={transitionState}
+            onClose={onClose}
+            size="md"
+            title={iconName}
+            actions={[
+                {
+                    text: "Actions",
+                    variant: "primary",
+                    onClick: openOtherMenu
+                }
+            ]}
+        >
+            <Flex className="vc-ic-modal-main">
+                <div
+                    className="vc-ic-icon-preview"
+                    aria-label={colorData?.name}
+                    onContextMenu={openColorMenu}
+                    onWheel={onWheel}
+                >
+                    <Icon className="vc-ic-icon-large" color={colorData?.css} fill={fill} />
                 </div>
-                <div className="vc-ic-modal-header-trailing">
-                    <CloseButton onClick={onClose} />
-                </div>
-            </ModalHeader>
-            <ModalContent className="vc-ic-modal-content">
-                <Flex className="vc-ic-modal-main">
-                    <div
-                        className="vc-ic-icon-preview"
-                        aria-label={colorData?.name}
-                        onContextMenu={openColorMenu}
-                        onWheel={onWheel}
-                    >
-                        <Icon className="vc-ic-icon-large" color={colorData?.css} fill={fill} />
-                    </div>
-                    <Flex flexDirection="column" className="vc-ic-icon-info">
-                        <Flex className="vc-ic-icon-sizes">
-                            {iconSizes.map(size => (
-                                <TooltipContainer text={size} key={size}>
-                                    <Icon size={size} color={colorData?.css} fill={fill} />
-                                </TooltipContainer>
-                            ))}
-                        </Flex>
-                        <TooltipContainer text="Right-click icon to change">
-                            <BaseText size="sm" color="text-muted" className="vc-ic-color-label">
-                                {colorData?.name}
-                            </BaseText>
-                        </TooltipContainer>
+                <Flex flexDirection="column" className="vc-ic-icon-info">
+                    <Flex className="vc-ic-icon-sizes">
+                        {iconSizes.map(size => (
+                            <TooltipContainer text={size} key={size}>
+                                <Icon size={size} color={colorData?.css} fill={fill} />
+                            </TooltipContainer>
+                        ))}
                     </Flex>
+                    <TooltipContainer text="Right-click icon to change">
+                        <BaseText size="sm" color="text-muted" className="vc-ic-color-label">
+                            {colorData?.name}
+                        </BaseText>
+                    </TooltipContainer>
                 </Flex>
-                <div className="vc-ic-use-as">
-                    <BaseText size="md" weight="semibold">Usage</BaseText>
-                    <BaseText size="sm" color="text-muted">Click to copy</BaseText>
-                </div>
-                {/* for some reason i cant make this shit codeblock full width, FF 15 */}
-                <Clickable className="vc-ic-codeblock-wrapper" onClick={() => copyWithToast(findCode, "Copied!")}>
-                    <CodeBlock content={findCode} lang="ts" />
-                </Clickable>
-            </ModalContent>
-            <ModalFooter className="vc-ic-modal-footer">
-                <Button variant="primary" onClick={openOtherMenu}>
-                    Actions
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+            </Flex>
+            <div className="vc-ic-use-as">
+                <BaseText size="md" weight="semibold">Usage</BaseText>
+                <BaseText size="sm" color="text-muted">Click to copy</BaseText>
+            </div>
+            {/* for some reason i cant make this shit codeblock full width, FF 15 */}
+            <Clickable className="vc-ic-codeblock-wrapper" onClick={() => copyWithToast(findCode, "Copied!")}>
+                <CodeBlock content={findCode} lang="ts" />
+            </Clickable>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/iconViewer/index.tsx b/src/equicordplugins/iconViewer/index.tsx
index 7a75f35d5..b7d253b33 100644
--- a/src/equicordplugins/iconViewer/index.tsx
+++ b/src/equicordplugins/iconViewer/index.tsx
@@ -22,7 +22,7 @@ export default definePlugin({
     description: t("equicord.iconViewer.description"),
     tags: ["Developers"],
     authors: [EquicordDevs.iamme],
-    dependencies: ["Settings"],
+    dependencies: ["Settings", "ConcatenatedModules"],
     startAt: StartAt.WebpackReady,
     toolboxActions: {
         [t("equicord.iconViewer.ui.openIconsTab")]() {
diff --git a/src/equicordplugins/ignoreCalls/index.tsx b/src/equicordplugins/ignoreCalls/index.tsx
index 8e508c40f..5245a94ae 100644
--- a/src/equicordplugins/ignoreCalls/index.tsx
+++ b/src/equicordplugins/ignoreCalls/index.tsx
@@ -39,8 +39,7 @@ const filterOngoingRings = (currentUserId: string): CallUpdate["ongoingRings"] =
     args.ongoingRings.filter((id: string) => id !== currentUserId);
 
 const ContextMenuPatch: NavContextMenuPatchCallback = (children, { channel }: { channel: Channel; }) => {
-    if (!channel || (!channel.isDM() && !channel.isGroupDM())) return;
-
+    if (!channel) return;
     const permanentlyIgnoredUsers = settings.store.permanentlyIgnoredUsers.split(",").map(s => s.trim()).filter(Boolean);
 
     const [tempChecked, setTempChecked] = React.useState(ignoredChannelIds.has(channel.id));
diff --git a/src/equicordplugins/inRole/RoleMembersModal.tsx b/src/equicordplugins/inRole/RoleMembersModal.tsx
index 6483b105b..c628f985d 100644
--- a/src/equicordplugins/inRole/RoleMembersModal.tsx
+++ b/src/equicordplugins/inRole/RoleMembersModal.tsx
@@ -7,38 +7,35 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Paragraph } from "@components/Paragraph";
 import { classNameFactory } from "@utils/css";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { GuildMember } from "@vencord/discord-types";
-import { Parser } from "@webpack/common";
+import { GuildMember, RenderModalProps } from "@vencord/discord-types";
+import { Modal,openModal, Parser, React } from "@webpack/common";
 
 const cl = classNameFactory("vc-inrole-");
 
 export function showInRoleModal(members: GuildMember[], roleId: string, channelId: string) {
-    openModal(props =>
-        <>
-            <ErrorBoundary>
-                <ModalRoot {...props} size={ModalSize.DYNAMIC} fullscreenOnMobile={true} >
-                    <ModalHeader className={cl("header")}>
-                        <Paragraph style={{ fontSize: "1.2rem", fontWeight: "bold", marginRight: "7px" }}>Members of role {
-                            Parser.parse(`<@&${roleId}>`, true, { channelId, viewingChannelId: channelId })
-                        } ({members.length})</Paragraph>
-                        <ModalCloseButton onClick={props.onClose} className={cl("close")} />
-                    </ModalHeader>
-                    <ModalContent>
-                        <div style={{ padding: "13px 20px" }} className={cl("member-list")}>
-                            {
-                                members.length !== 0 ? members.map(member =>
-                                    <>
-                                        <Paragraph className={cl("modal-member")}>
-                                            {Parser.parse(`<@${member.userId}>`, true, { channelId, viewingChannelId: channelId })}
-                                        </Paragraph>
-                                    </>
-                                ) : <Paragraph>Looks like no online cached members with that role were found. Try scrolling down on your member list to cache more users!</Paragraph>
-                            }
-                        </div>
-                    </ModalContent>
-                </ModalRoot>
-            </ErrorBoundary>
-        </>
+    openModal((props: RenderModalProps) =>
+        <ErrorBoundary>
+            <Modal
+                {...props}
+                size="md"
+                title={
+                    <Paragraph style={{ fontSize: "1.2rem", fontWeight: "bold", marginRight: "7px" }}>
+                        Members of role {Parser.parse(`<@&${roleId}>`, true, { channelId, viewingChannelId: channelId })} ({members.length})
+                    </Paragraph>
+                }
+            >
+                <div style={{ padding: "13px 20px" }} className={cl("member-list")}>
+                    {
+                        members.length !== 0 ? members.map(member =>
+                            <React.Fragment key={member.userId}>
+                                <Paragraph className={cl("modal-member")}>
+                                    {Parser.parse(`<@${member.userId}>`, true, { channelId, viewingChannelId: channelId })}
+                                </Paragraph>
+                            </React.Fragment>
+                        ) : <Paragraph>Looks like no online cached members with that role were found. Try scrolling down on your member list to cache more users!</Paragraph>
+                    }
+                </div>
+            </Modal>
+        </ErrorBoundary>
     );
 }
diff --git a/src/equicordplugins/invisibleChat.desktop/components/DecryptionModal.tsx b/src/equicordplugins/invisibleChat.desktop/components/DecryptionModal.tsx
index 7c8601c38..23a379b85 100644
--- a/src/equicordplugins/invisibleChat.desktop/components/DecryptionModal.tsx
+++ b/src/equicordplugins/invisibleChat.desktop/components/DecryptionModal.tsx
@@ -16,60 +16,50 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Heading, HeadingTertiary } from "@components/Heading";
-import {
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalRoot,
-    openModal,
-} from "@utils/modal";
+import { Heading } from "@components/Heading";
 import { t } from "@utils/translation";
-import { Button, React, TextInput } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, openModal, React, TextInput } from "@webpack/common";
 
 import { buildEmbed, decrypt } from "../index";
 
-export function DecModal(props: any) {
+export function DecModal(props: RenderModalProps & { message: any; }) {
     const encryptedMessage: string = props?.message?.content;
     const [password, setPassword] = React.useState("password");
 
+    const onDecrypt = () => {
+        const toSend = decrypt(encryptedMessage, password, true);
+        if (!toSend || !props?.message) return;
+        buildEmbed(props?.message, toSend);
+        props.onClose();
+    };
+
     return (
-        <ModalRoot {...props}>
-            <ModalHeader>
-                <HeadingTertiary>Decrypt Message</HeadingTertiary>
-            </ModalHeader>
-
-            <ModalContent>
-                <Heading style={{ marginTop: "10px" }}>Message with Encryption</Heading>
-                <TextInput defaultValue={encryptedMessage} disabled={true}></TextInput>
-                <Heading style={{ marginTop: "10px" }}>Password</Heading>
-                <TextInput
-                    style={{ marginBottom: "20px" }}
-                    onChange={setPassword}
-                />
-            </ModalContent>
-
-            <ModalFooter>
-                <Button
-                    color={Button.Colors.GREEN}
-                    onClick={() => {
-                        const toSend = decrypt(encryptedMessage, password, true);
-                        if (!toSend || !props?.message) return;
-                        buildEmbed(props?.message, toSend);
-                        props.onClose();
-                    }}>
-                    Decrypt
-                </Button>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.LINK}
-                    style={{ left: 15, position: "absolute" }}
-                    onClick={props.onClose}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...props}
+            size="sm"
+            title="Decrypt Message"
+            actions={[
+                {
+                    text: "Decrypt",
+                    variant: "primary",
+                    onClick: onDecrypt
+                },
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: props.onClose
+                }
+            ]}
+        >
+            <Heading style={{ marginTop: "10px" }}>Message with Encryption</Heading>
+            <TextInput defaultValue={encryptedMessage} disabled={true}></TextInput>
+            <Heading style={{ marginTop: "10px" }}>Password</Heading>
+            <TextInput
+                style={{ marginBottom: "20px" }}
+                onChange={setPassword}
+            />
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/invisibleChat.desktop/components/EncryptionModal.tsx b/src/equicordplugins/invisibleChat.desktop/components/EncryptionModal.tsx
index 5f07a1442..f61b4eb8a 100644
--- a/src/equicordplugins/invisibleChat.desktop/components/EncryptionModal.tsx
+++ b/src/equicordplugins/invisibleChat.desktop/components/EncryptionModal.tsx
@@ -17,22 +17,15 @@
 */
 
 import { FormSwitch } from "@components/FormSwitch";
-import { Heading, HeadingTertiary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { insertTextIntoChatInputBox } from "@utils/discord";
-import {
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalProps,
-    ModalRoot,
-    openModal,
-} from "@utils/modal";
 import { t } from "@utils/translation";
-import { Button, React, TextInput } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, openModal, React, TextInput } from "@webpack/common";
 
 import { encrypt } from "../index";
 
-function EncModal(props: ModalProps) {
+function EncModal(props: RenderModalProps) {
     const [secret, setSecret] = React.useState("");
     const [cover, setCover] = React.useState("");
     const [password, setPassword] = React.useState("password");
@@ -40,72 +33,65 @@ function EncModal(props: ModalProps) {
 
     const isValid = secret && (noCover || (cover && cover.trim().split(" ").length > 1));
 
+    const onSend = () => {
+        if (!isValid) return;
+        const encrypted = encrypt(secret, password, noCover ? "d d" : cover);
+        const toSend = noCover ? encrypted.replaceAll("d", "") : encrypted;
+        if (!toSend) return;
+
+        insertTextIntoChatInputBox(toSend);
+
+        props.onClose();
+    };
+
     return (
-        <ModalRoot {...props}>
-            <ModalHeader>
-                <HeadingTertiary>Encrypt Message</HeadingTertiary>
-            </ModalHeader>
-
-            <ModalContent>
-                <Heading style={{ marginTop: "10px" }}>Secret</Heading>
-                <TextInput
-                    onChange={(e: string) => {
-                        setSecret(e);
-                    }}
-                />
-                <Heading style={{ marginTop: "10px" }}>Cover (2 or more Words!!)</Heading>
-                <TextInput
-                    disabled={noCover}
-                    onChange={(e: string) => {
-                        setCover(e);
-                    }}
-                />
-                <Heading style={{ marginTop: "10px" }}>Password</Heading>
-                <TextInput
-                    style={{ marginBottom: "20px" }}
-                    defaultValue={"password"}
-                    onChange={(e: string) => {
-                        setPassword(e);
-                    }}
-                />
-                <FormSwitch
-                    title="Don't use a Cover"
-                    value={noCover}
-                    onChange={(e: boolean) => {
-                        setNoCover(e);
-                    }}
-                />
-            </ModalContent>
-
-            <ModalFooter>
-                <Button
-                    color={Button.Colors.GREEN}
-                    disabled={!isValid}
-                    onClick={() => {
-                        if (!isValid) return;
-                        const encrypted = encrypt(secret, password, noCover ? "d d" : cover);
-                        const toSend = noCover ? encrypted.replaceAll("d", "") : encrypted;
-                        if (!toSend) return;
-
-                        insertTextIntoChatInputBox(toSend);
-
-                        props.onClose();
-                    }}
-                >
-                    Send
-                </Button>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.LINK}
-                    style={{ left: 15, position: "absolute" }}
-                    onClick={() => {
-                        props.onClose();
-                    }}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...props}
+            size="sm"
+            title="Encrypt Message"
+            actions={[
+                {
+                    text: "Send",
+                    variant: "primary",
+                    disabled: !isValid,
+                    onClick: onSend
+                },
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: props.onClose
+                }
+            ]}
+        >
+            <Heading style={{ marginTop: "10px" }}>Secret</Heading>
+            <TextInput
+                onChange={(e: string) => {
+                    setSecret(e);
+                }}
+            />
+            <Heading style={{ marginTop: "10px" }}>Cover (2 or more Words!!)</Heading>
+            <TextInput
+                disabled={noCover}
+                onChange={(e: string) => {
+                    setCover(e);
+                }}
+            />
+            <Heading style={{ marginTop: "10px" }}>Password</Heading>
+            <TextInput
+                style={{ marginBottom: "20px" }}
+                defaultValue={"password"}
+                onChange={(e: string) => {
+                    setPassword(e);
+                }}
+            />
+            <FormSwitch
+                title="Don't use a Cover"
+                value={noCover}
+                onChange={(e: boolean) => {
+                    setNoCover(e);
+                }}
+            />
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/keyboardNavigation/components/CommandPalette.tsx b/src/equicordplugins/keyboardNavigation/components/CommandPalette.tsx
index d860aeace..5ea75ed67 100644
--- a/src/equicordplugins/keyboardNavigation/components/CommandPalette.tsx
+++ b/src/equicordplugins/keyboardNavigation/components/CommandPalette.tsx
@@ -9,14 +9,14 @@ import "./style.css";
 import { actions } from "@equicordplugins/keyboardNavigation/commands";
 import { classNameFactory } from "@utils/css";
 import { Logger } from "@utils/Logger";
-import { closeAllModals, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { React, TextInput, useEffect, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { closeAllModals, Modal,openModal, React, TextInput, useEffect, useState } from "@webpack/common";
 
 import { settings } from "..";
 
 const logger = new Logger("CommandPalette", "#e5c890");
 
-export function CommandPalette({ modalProps }) {
+export function CommandPalette({ modalProps }: { modalProps: RenderModalProps; }) {
     const cl = classNameFactory("vc-command-palette-");
     const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
     const [startIndex, setStartIndex] = useState(0);
@@ -100,8 +100,8 @@ export function CommandPalette({ modalProps }) {
     }, [queryEh]);
 
     return (
-        <ModalRoot className={cl("root")} {...modalProps} size={ModalSize.MEDIUM} onKeyDown={handleKeyDown} onWheel={handleWheel}>
-            <div>
+        <Modal {...modalProps} size="md" title="Command Palette">
+            <div className={cl("root")} onKeyDown={handleKeyDown} onWheel={handleWheel}>
                 <TextInput
                     value={queryEh}
                     onChange={e => setQuery(e)}
@@ -123,7 +123,7 @@ export function CommandPalette({ modalProps }) {
                     ))}
                 </div>
             </div>
-        </ModalRoot>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/keyboardNavigation/components/MultipleChoice.tsx b/src/equicordplugins/keyboardNavigation/components/MultipleChoice.tsx
index 2929f1a94..b8a0a48fa 100644
--- a/src/equicordplugins/keyboardNavigation/components/MultipleChoice.tsx
+++ b/src/equicordplugins/keyboardNavigation/components/MultipleChoice.tsx
@@ -8,13 +8,13 @@ import "./style.css";
 
 import { ButtonAction } from "@equicordplugins/keyboardNavigation/commands";
 import { classNameFactory } from "@utils/css";
-import { closeAllModals, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { React, TextInput, useEffect, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { closeAllModals, Modal,openModal, React, TextInput, useEffect, useState } from "@webpack/common";
 
 import { settings } from "..";
 
 interface MultipleChoiceProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     onSelect: (selectedValue: any) => void;
     choices: ButtonAction[];
 }
@@ -99,9 +99,8 @@ export function MultipleChoice({ modalProps, onSelect, choices }: MultipleChoice
     }, [queryEh]);
 
     return (
-        // @ts-ignore
-        <ModalRoot className={cl("root")} {...modalProps} size={ModalSize.MEDIUM} onKeyDown={handleKeyDown} onWheel={handleWheel}>
-            <div>
+        <Modal {...modalProps} size="md" title="Multiple Choice">
+            <div className={cl("root")} onKeyDown={handleKeyDown} onWheel={handleWheel}>
                 <TextInput
                     value={queryEh}
                     onChange={e => setQuery(e)}
@@ -123,7 +122,7 @@ export function MultipleChoice({ modalProps, onSelect, choices }: MultipleChoice
                     ))}
                 </div>
             </div>
-        </ModalRoot>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/keyboardNavigation/components/TextInput.tsx b/src/equicordplugins/keyboardNavigation/components/TextInput.tsx
index a070137ac..3198ce4b6 100644
--- a/src/equicordplugins/keyboardNavigation/components/TextInput.tsx
+++ b/src/equicordplugins/keyboardNavigation/components/TextInput.tsx
@@ -6,11 +6,11 @@
 
 import "./style.css";
 
-import { closeAllModals, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { React, TextInput, useEffect, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { closeAllModals, Modal,openModal, React, TextInput, useEffect, useState } from "@webpack/common";
 
 interface SimpleTextInputProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     onSelect: (inputValue: string) => void;
     placeholder?: string;
     info?: string;
@@ -35,16 +35,17 @@ export function SimpleTextInput({ modalProps, onSelect, placeholder, info }: Sim
     }, []);
 
     return (
-        // @ts-ignore
-        <ModalRoot className="vc-command-palette-simple-text" {...modalProps} size={ModalSize.DYNAMIC} onKeyDown={handleKeyDown}>
-            <TextInput
-                value={inputValue}
-                onChange={e => setInputValue(e as unknown as string)}
-                style={{ width: "30vw", borderRadius: "5px" }}
-                placeholder={placeholder ?? "Type and press Enter"}
-            />
-            {info && <div className="vc-command-palette-textinfo">{info}</div>}
-        </ModalRoot>
+        <Modal {...modalProps} size="sm" title="Text Input">
+            <div className="vc-command-palette-simple-text" onKeyDown={handleKeyDown}>
+                <TextInput
+                    value={inputValue}
+                    onChange={e => setInputValue(e as unknown as string)}
+                    style={{ width: "30vw", borderRadius: "5px" }}
+                    placeholder={placeholder ?? "Type and press Enter"}
+                />
+                {info && <div className="vc-command-palette-textinfo">{info}</div>}
+            </div>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/keyboardNavigation/index.tsx b/src/equicordplugins/keyboardNavigation/index.tsx
index 9fb8534f3..462920723 100644
--- a/src/equicordplugins/keyboardNavigation/index.tsx
+++ b/src/equicordplugins/keyboardNavigation/index.tsx
@@ -7,10 +7,9 @@
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
-import { closeAllModals } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { SettingsRouter, useState } from "@webpack/common";
+import { closeAllModals,SettingsRouter, useState } from "@webpack/common";
 
 import { registerAction } from "./commands";
 import { openCommandPalette } from "./components/CommandPalette";
diff --git a/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx b/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
index 302640d56..f6da905fa 100644
--- a/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
+++ b/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
@@ -9,9 +9,6 @@ import { QrCodeIcon } from "@components/Icons";
 import { wrapTab } from "@components/settings";
 import loginWithQR from "@equicordplugins/loginWithQR";
 import { images } from "@equicordplugins/loginWithQR/images";
-import {
-    ModalProps,
-} from "@utils/modal";
 import { findByPropsLazy } from "@webpack";
 import {
     RestAPI,
@@ -135,7 +132,7 @@ const handleProcessImage = (file: File, modalPropsRef: QrModalPropsRef) => {
     reader.readAsDataURL(file);
 };
 
-function QrModal(props: ModalProps) {
+function QrModal() {
     const [state, setState] = useState(LoginStateType.Idle);
     const [preview, setPreview] = useState<Preview | null>(null);
     const error = useRef<string | null>(null);
diff --git a/src/equicordplugins/loginWithQR/ui/modals/VerifyModal.tsx b/src/equicordplugins/loginWithQR/ui/modals/VerifyModal.tsx
index f988367a5..5c239be74 100644
--- a/src/equicordplugins/loginWithQR/ui/modals/VerifyModal.tsx
+++ b/src/equicordplugins/loginWithQR/ui/modals/VerifyModal.tsx
@@ -8,21 +8,15 @@ import { BaseText } from "@components/BaseText";
 import { Button, TextButton } from "@components/Button";
 import { images } from "@equicordplugins/loginWithQR/images";
 import { getIntlMessage } from "@utils/discord";
-import {
-    ModalContent,
-    ModalFooter,
-    ModalProps,
-    ModalRoot,
-    ModalSize,
-    openModal,
-} from "@utils/modal";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findByPropsLazy } from "@webpack";
 import {
+    Modal,
+    openModal,
     RestAPI,
     useEffect,
     useRef,
-    useState,
-} from "@webpack/common";
+    useState } from "@webpack/common";
 
 import { cl } from "..";
 
@@ -41,7 +35,7 @@ function VerifyModal({
 }: {
     token: string | null;
     onAbort: () => void;
-} & ModalProps) {
+} & RenderModalProps) {
     const [state, setState] = useState(
         !token ? VerifyState.NotFound : VerifyState.Verifying
     );
@@ -112,8 +106,8 @@ function VerifyModal({
     }, [state]);
 
     return (
-        <ModalRoot size={ModalSize.DYNAMIC} {...props}>
-            <ModalContent scrollbarType="none" className={cl("device-content")}>
+        <Modal size="sm" {...props} title="Verify Login">
+            <div className={cl("device-content")}>
                 {state === VerifyState.LoggedIn ? (
                     <>
                         <img
@@ -191,7 +185,7 @@ function VerifyModal({
                             variant="dangerPrimary"
                             className={cl("device-confirm")}
                             style={{
-                                ["--duration" as any]: `${holdDuration}ms`,
+                                ["--progress" as any]: `${holdDuration}ms`,
                             }}
                             onPointerDown={startInput}
                             onPointerUp={endInput}
@@ -202,8 +196,8 @@ function VerifyModal({
                         </Button>
                     </>
                 )}
-            </ModalContent>
-            <ModalFooter className={cl("device-footer")}>
+            </div>
+            <div className={cl("device-footer")} style={{ marginTop: "20px", display: "flex", justifyContent: "flex-end", gap: "10px" }}>
                 {state === VerifyState.LoggedIn ? (
                     <Button onClick={props.onClose}>
                         {getIntlMessage("QR_CODE_LOGIN_FINISH_BUTTON")}
@@ -218,8 +212,8 @@ function VerifyModal({
                             : getIntlMessage("CANCEL")}
                     </TextButton>
                 )}
-            </ModalFooter>
-        </ModalRoot>
+            </div>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/markdownTables/index.tsx b/src/equicordplugins/markdownTables/index.tsx
new file mode 100644
index 000000000..aa8df3ddb
--- /dev/null
+++ b/src/equicordplugins/markdownTables/index.tsx
@@ -0,0 +1,374 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { EquicordDevs } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
+import definePlugin from "@utils/types";
+import { waitFor } from "@webpack";
+import { Parser, useLayoutEffect, useRef, useState } from "@webpack/common";
+import type { ReactNode } from "react";
+
+import { type MarkdownTableMatch, parseMarkdownTableMatch, type TableAlignment } from "./parser";
+import managedStyle from "./styles.css?managed";
+
+const TABLE_RULE = "markdownTable";
+const cl = classNameFactory("vc-markdownTables-");
+
+type ScrollDirection = "left" | "right" | null;
+type ParsedCell = unknown[];
+type ParserState = Record<string, unknown> & { inline?: boolean; messageId?: string; };
+type ParserParse = (source: string, state: ParserState) => ParsedCell;
+type ParserOutput = (node: unknown, state: ParserState) => ReactNode;
+type MarkdownTableCapture = RegExpExecArray & { markdownTable: MarkdownTableMatch; };
+
+interface MarkdownTableNode {
+    before: unknown[];
+    raw: string;
+    header: ParsedCell[];
+    alignments: TableAlignment[];
+    rows: ParsedCell[][];
+}
+
+interface MarkdownRule {
+    order: number;
+    match(source: string, state: ParserState): MarkdownTableCapture | null;
+    parse(capture: MarkdownTableCapture, parse: ParserParse, state: ParserState): MarkdownTableNode;
+    react(node: MarkdownTableNode, output: ParserOutput, state: ParserState): ReactNode;
+}
+
+interface ScrollMaskState {
+    left: boolean;
+    right: boolean;
+    direction: ScrollDirection;
+}
+
+interface MarkdownTableRendererProps {
+    node: MarkdownTableNode;
+    output: ParserOutput;
+    state: ParserState;
+}
+
+let shouldInstallTableRule = false;
+let installedRules: MarkdownRules | null = null;
+
+type MarkdownRules = Record<string, Partial<MarkdownRule> | undefined>;
+
+function alignmentClass(alignment: TableAlignment) {
+    if (alignment === "left") return cl("align-left");
+    if (alignment === "center") return cl("align-center");
+    if (alignment === "right") return cl("align-right");
+    return undefined;
+}
+
+function createTableCapture(markdownTable: MarkdownTableMatch, input: string): MarkdownTableCapture {
+    return Object.assign([markdownTable.raw] as RegExpExecArray, {
+        index: 0,
+        input,
+        groups: undefined,
+        markdownTable,
+    });
+}
+
+function renderParsedNodes(nodes: ParsedCell, output: ParserOutput, state: ParserState) {
+    return nodes.map(node => output(node, state));
+}
+
+function TableBlock({
+    output,
+    outputState,
+    table,
+}: {
+    output: ParserOutput;
+    outputState: ParserState;
+    table: MarkdownTableNode;
+}) {
+    const [showRaw, setShowRaw] = useState(false);
+
+    return (
+        <div className={cl("root")}>
+            <div className={cl("toolbar")} role="group" aria-label="Markdown table view">
+                <button
+                    aria-pressed={!showRaw}
+                    className={cl("toggle", { "toggle-active": !showRaw })}
+                    onClick={event => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setShowRaw(false);
+                    }}
+                    type="button"
+                >
+                    Table
+                </button>
+                <button
+                    aria-pressed={showRaw}
+                    className={cl("toggle", { "toggle-active": showRaw })}
+                    onClick={event => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setShowRaw(true);
+                    }}
+                    type="button"
+                >
+                    Raw
+                </button>
+            </div>
+            {showRaw
+                ? (
+                    <pre className={cl("raw")}>
+                        <code>{table.raw}</code>
+                    </pre>
+                )
+                : <TableScrollFrame output={output} outputState={outputState} table={table} />}
+        </div>
+    );
+}
+
+function TableScrollFrame({
+    output,
+    outputState,
+    table,
+}: {
+    output: ParserOutput;
+    outputState: ParserState;
+    table: MarkdownTableNode;
+}) {
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const lastScrollLeftRef = useRef(0);
+    const frameRef = useRef(0);
+    const directionResetRef = useRef(0);
+    const [maskState, setMaskState] = useState<ScrollMaskState>({
+        left: false,
+        right: false,
+        direction: null,
+    });
+
+    useLayoutEffect(() => {
+        const scrollElement = scrollRef.current;
+        if (!scrollElement) return;
+
+        function updateMask(trackDirection = false) {
+            const maxScrollLeft = Math.max(0, scrollElement!.scrollWidth - scrollElement!.clientWidth);
+            const scrollLeft = Math.min(Math.max(scrollElement!.scrollLeft, 0), maxScrollLeft);
+            let nextDirection: ScrollDirection = null;
+
+            if (trackDirection && scrollLeft > lastScrollLeftRef.current) {
+                nextDirection = "right";
+            } else if (trackDirection && scrollLeft < lastScrollLeftRef.current) {
+                nextDirection = "left";
+            }
+
+            lastScrollLeftRef.current = scrollLeft;
+
+            setMaskState(previousState => {
+                const nextState: ScrollMaskState = {
+                    left: scrollLeft > 1,
+                    right: maxScrollLeft - scrollLeft > 1,
+                    direction: nextDirection ?? previousState.direction,
+                };
+
+                if (!nextState.left && !nextState.right) {
+                    nextState.direction = null;
+                }
+
+                return previousState.left === nextState.left
+                    && previousState.right === nextState.right
+                    && previousState.direction === nextState.direction
+                    ? previousState
+                    : nextState;
+            });
+
+            if (nextDirection) {
+                window.clearTimeout(directionResetRef.current);
+                directionResetRef.current = window.setTimeout(() => {
+                    setMaskState(previousState => previousState.direction
+                        ? { ...previousState, direction: null }
+                        : previousState);
+                }, 450);
+            }
+        }
+
+        function scheduleMaskUpdate(trackDirection = false) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = window.requestAnimationFrame(() => updateMask(trackDirection));
+        }
+
+        function handleScroll() {
+            scheduleMaskUpdate(true);
+        }
+
+        function handleResize() {
+            scheduleMaskUpdate();
+        }
+
+        const resizeObserver = new ResizeObserver(() => scheduleMaskUpdate());
+        resizeObserver.observe(scrollElement);
+        if (scrollElement.firstElementChild) resizeObserver.observe(scrollElement.firstElementChild);
+
+        updateMask();
+        scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            resizeObserver.disconnect();
+            scrollElement.removeEventListener("scroll", handleScroll);
+            window.removeEventListener("resize", handleResize);
+            window.cancelAnimationFrame(frameRef.current);
+            window.clearTimeout(directionResetRef.current);
+        };
+    }, []);
+
+    return (
+        <div
+            className={cl(
+                "scrollFrame",
+                {
+                    "mask-left": maskState.left,
+                    "mask-right": maskState.right,
+                    "scroll-left": maskState.direction === "left",
+                    "scroll-right": maskState.direction === "right",
+                },
+            )}
+        >
+            <div className={cl("scroll")} ref={scrollRef}>
+                <table className={cl("table")}>
+                    {table.header.length > 0 && (
+                        <thead>
+                            <tr>
+                                {table.header.map((cell, cellIndex) => (
+                                    <th className={alignmentClass(table.alignments[cellIndex])} key={cellIndex} scope="col">
+                                        {renderParsedNodes(cell, output, outputState)}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                    )}
+                    <tbody>
+                        {table.rows.map((row, rowIndex) => (
+                            <tr key={rowIndex}>
+                                {row.map((cell, cellIndex) => (
+                                    <td className={alignmentClass(table.alignments[cellIndex])} key={cellIndex}>
+                                        {renderParsedNodes(cell, output, outputState)}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+function parseCellContent(cells: string[], parse: ParserParse, state: ParserState) {
+    const inlineState: ParserState = {
+        ...state,
+        inline: true,
+    };
+
+    return cells.map(cell => parse(cell, inlineState));
+}
+
+function shouldSkipTableRule(state: ParserState) {
+    return state.inline && !state.messageId;
+}
+
+const MarkdownTableRenderer = ErrorBoundary.wrap(function MarkdownTableRenderer({
+    node,
+    output,
+    state,
+}: MarkdownTableRendererProps) {
+    return (
+        <>
+            {renderParsedNodes(node.before, output, state)}
+            <TableBlock output={output} outputState={state} table={node} />
+        </>
+    );
+}, { noop: true });
+
+function createTableRule(order: number): MarkdownRule {
+    return {
+        order,
+        match(source, state) {
+            if (shouldSkipTableRule(state)) return null;
+
+            const parsed = parseMarkdownTableMatch(source);
+            return parsed ? createTableCapture(parsed, source) : null;
+        },
+        parse(capture, parse, state) {
+            const parsed = capture.markdownTable;
+
+            return {
+                before: parsed.leadingMarkdown ? parse(parsed.leadingMarkdown, state) : [],
+                raw: parsed.tableRaw,
+                alignments: parsed.table.alignments,
+                header: parseCellContent(parsed.table.header, parse, state),
+                rows: parsed.table.rows.map(row => parseCellContent(row, parse, state)),
+            };
+        },
+        react(node, output, state) {
+            return <MarkdownTableRenderer node={node} output={output} state={state} />;
+        },
+    };
+}
+function scheduleTableRuleInstall(parser: { defaultRules?: MarkdownRules; }) {
+    window.setTimeout(() => installTableRuleForParser(parser), 0);
+}
+
+function installTableRuleForParser(parser: { defaultRules?: MarkdownRules; }) {
+    if (!shouldInstallTableRule) return;
+
+    const rules = parser.defaultRules;
+    if (!rules || rules[TABLE_RULE]) return;
+
+    installedRules = rules;
+    const paragraphOrder = typeof rules.paragraph?.order === "number" ? rules.paragraph.order : 1;
+    rules[TABLE_RULE] = createTableRule(paragraphOrder - 0.5);
+}
+
+export default definePlugin({
+    name: "MarkdownTables",
+    description: "Render GitHub-style markdown tables in Discord messages.",
+    tags: ["Chat", "Appearance"],
+    authors: [EquicordDevs.yafyx],
+    managedStyle,
+    patches: [
+        {
+            find: "simple-markdown: Invalid order for rule",
+            replacement: {
+                match: /paragraph:\{order:/,
+                replace: "markdownTable:$self.getTableRule(),$&",
+            },
+        },
+        {
+            find: "Unknown markdown rule:",
+            replacement: {
+                match: /paragraph:{type:/,
+                replace: 'markdownTable:{type:"block"},$&',
+            },
+        },
+    ],
+
+    start() {
+        shouldInstallTableRule = true;
+
+        if (Parser?.defaultRules) {
+            scheduleTableRuleInstall(Parser);
+        }
+
+        waitFor("parseTopic", scheduleTableRuleInstall);
+    },
+
+    stop() {
+        shouldInstallTableRule = false;
+        if (installedRules) delete installedRules[TABLE_RULE];
+        installedRules = null;
+    },
+
+    getTableRule(paragraphOrder = 1) {
+        return createTableRule(paragraphOrder - 0.5);
+    },
+});
diff --git a/src/equicordplugins/markdownTables/parser.ts b/src/equicordplugins/markdownTables/parser.ts
new file mode 100644
index 000000000..5e0786de7
--- /dev/null
+++ b/src/equicordplugins/markdownTables/parser.ts
@@ -0,0 +1,410 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export type TableAlignment = "left" | "center" | "right" | null;
+
+export interface MarkdownTable {
+    header: string[];
+    alignments: TableAlignment[];
+    rows: string[][];
+    startLine: number;
+    endLine: number;
+}
+
+export interface MarkdownTableBlock {
+    raw: string;
+    table: MarkdownTable;
+}
+
+export interface MarkdownTableMatch {
+    raw: string;
+    leadingMarkdown: string;
+    tableRaw: string;
+    table: MarkdownTable;
+}
+
+interface SeparatorParseResult {
+    alignments: TableAlignment[];
+}
+
+const separatorCellRe = /^:?-{3,}:?$/;
+
+function isEscapedAt(value: string, index: number) {
+    let slashCount = 0;
+
+    for (let i = index - 1; i >= 0 && value[i] === "\\"; i--) {
+        slashCount++;
+    }
+
+    return slashCount % 2 === 1;
+}
+
+function countEscapedPipes(line: string) {
+    let count = 0;
+
+    for (let i = 0; i < line.length; i++) {
+        if (line[i] === "|" && isEscapedAt(line, i)) count++;
+    }
+
+    return count;
+}
+
+function hasUnescapedTableDelimiter(line: string) {
+    for (let i = 0; i < line.length; i++) {
+        if (line[i] === "|" && !isEscapedAt(line, i)) return true;
+    }
+
+    return false;
+}
+
+function hasEscapedTableDelimiters(line: string) {
+    return countEscapedPipes(line) >= 2;
+}
+
+function hasTableDelimiter(line: string) {
+    return hasUnescapedTableDelimiter(line) || hasEscapedTableDelimiters(line);
+}
+
+function isIndentedCodeLine(line: string) {
+    return /^(?: {4,}|\t)/.test(line);
+}
+
+function isFenceLine(line: string) {
+    return /^(?: {0,3})(`{3,}|~{3,})/.test(line);
+}
+
+function canBeTableLine(line: string) {
+    return line.trim() !== ""
+        && !isIndentedCodeLine(line)
+        && !isFenceLine(line)
+        && hasTableDelimiter(line);
+}
+
+function stripOuterPipes(line: string) {
+    const trimmed = line.trim();
+    let start = 0;
+    let end = trimmed.length;
+
+    if (trimmed[start] === "|") start++;
+    if (trimmed[end - 1] === "|" && !isEscapedAt(trimmed, end - 1)) end--;
+
+    return trimmed.slice(start, end);
+}
+
+function hasOuterTablePipes(line: string) {
+    const trimmed = line.trim();
+
+    return (trimmed.startsWith("|") || trimmed.startsWith("\\|"))
+        && (trimmed.endsWith("|") || trimmed.endsWith("\\|"));
+}
+
+export function splitTableRow(line: string) {
+    const cells: string[] = [];
+    const row = stripOuterPipes(hasUnescapedTableDelimiter(line) ? line : line.replace(/\\\|/g, "|"));
+    let current = "";
+
+    for (let i = 0; i < row.length; i++) {
+        const char = row[i];
+
+        if (char === "\\" && row[i + 1] === "|" && !isEscapedAt(row, i)) {
+            current += "|";
+            i++;
+            continue;
+        }
+
+        if (char === "|" && !isEscapedAt(row, i)) {
+            cells.push(current.trim());
+            current = "";
+            continue;
+        }
+
+        current += char;
+    }
+
+    cells.push(current.trim());
+    return cells;
+}
+
+function parseAlignment(cell: string): TableAlignment | undefined {
+    const value = cell.trim();
+
+    if (!separatorCellRe.test(value)) return undefined;
+    if (value.startsWith(":") && value.endsWith(":")) return "center";
+    if (value.startsWith(":")) return "left";
+    if (value.endsWith(":")) return "right";
+
+    return null;
+}
+
+function parseSeparator(line: string): SeparatorParseResult | null {
+    if (!canBeTableLine(line)) return null;
+
+    const cells = splitTableRow(line);
+    if (cells.length < 2) return null;
+
+    const alignments = cells.map(parseAlignment);
+    if (alignments.some(alignment => alignment === undefined)) return null;
+
+    return {
+        alignments: alignments as TableAlignment[],
+    };
+}
+
+function normaliseCells(cells: string[], width: number) {
+    return Array.from({ length: width }, (_, index) => cells[index] ?? "");
+}
+
+function isBlankLine(line: string) {
+    return line.trim() === "";
+}
+
+function nextContentLine(lines: string[], cursor: number, fenced?: boolean[]) {
+    for (let index = cursor; index < lines.length; index++) {
+        if (fenced?.[index]) return -1;
+        if (!isBlankLine(lines[index])) return index;
+    }
+
+    return -1;
+}
+
+function canStartTableAt(lines: string[], lineIndex: number, fenced?: boolean[]) {
+    if (lineIndex < 0 || lineIndex >= lines.length - 1) return false;
+    if (fenced?.[lineIndex] || fenced?.[lineIndex + 1]) return false;
+
+    return canBeTableLine(lines[lineIndex]) && parseSeparator(lines[lineIndex + 1]) !== null;
+}
+
+function getFenceMask(lines: string[]) {
+    const mask = new Array<boolean>(lines.length).fill(false);
+    let fenceChar: "`" | "~" | null = null;
+    let fenceLength = 0;
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const openingMatch = /^(?: {0,3})(`{3,}|~{3,})/.exec(line);
+
+        if (!fenceChar) {
+            if (openingMatch) {
+                fenceChar = openingMatch[1][0] as "`" | "~";
+                fenceLength = openingMatch[1].length;
+                mask[i] = true;
+            }
+
+            continue;
+        }
+
+        mask[i] = true;
+
+        const trimmed = line.trimStart();
+        let closingLength = 0;
+
+        while (trimmed[closingLength] === fenceChar) {
+            closingLength++;
+        }
+
+        if (closingLength >= fenceLength && trimmed.slice(closingLength).trim() === "") {
+            fenceChar = null;
+            fenceLength = 0;
+        }
+    }
+
+    return mask;
+}
+
+function parseTableAtLine(lines: string[], lineIndex: number, fenced?: boolean[]) {
+    if (lineIndex >= lines.length - 1) return null;
+    if (fenced?.[lineIndex] || fenced?.[lineIndex + 1]) return null;
+    if (!canBeTableLine(lines[lineIndex]) || !canBeTableLine(lines[lineIndex + 1])) return null;
+
+    const headerCells = splitTableRow(lines[lineIndex]);
+    if (headerCells.length < 2) return null;
+
+    const separator = parseSeparator(lines[lineIndex + 1]);
+    if (!separator) return null;
+
+    const width = separator.alignments.length;
+    const rows: string[][] = [];
+    let cursor = lineIndex + 2;
+
+    while (cursor < lines.length && !fenced?.[cursor]) {
+        const line = lines[cursor];
+
+        if (canBeTableLine(line)) {
+            rows.push(normaliseCells(splitTableRow(line), width));
+            cursor++;
+            continue;
+        }
+
+        if (rows.length > 0 && isBlankLine(line)) {
+            const nextLineIndex = nextContentLine(lines, cursor + 1, fenced);
+            const nextLine = nextLineIndex >= 0 ? lines[nextLineIndex] : "";
+
+            if (nextLineIndex >= 0 && canBeTableLine(nextLine) && !canStartTableAt(lines, nextLineIndex, fenced) && !parseSeparator(nextLine)) {
+                cursor = nextLineIndex;
+                continue;
+            }
+        }
+
+        const nextLineIndex = nextContentLine(lines, cursor + 1, fenced);
+        const nextLine = nextLineIndex >= 0 ? lines[nextLineIndex] : "";
+
+        if (rows.length > 0 && !isBlankLine(line) && nextLineIndex >= 0 && canBeTableLine(nextLine) && !canStartTableAt(lines, nextLineIndex, fenced) && !parseSeparator(nextLine)) {
+            rows[rows.length - 1][width - 1] = `${rows[rows.length - 1][width - 1]}\n${line.trim()}`.trim();
+            cursor++;
+            continue;
+        }
+
+        break;
+    }
+
+    while (cursor > lineIndex + 2 && isBlankLine(lines[cursor - 1])) {
+        cursor--;
+    }
+
+    if (rows.length === 0) {
+        return null;
+    }
+
+    return {
+        table: {
+            header: normaliseCells(headerCells, width),
+            alignments: separator.alignments,
+            rows,
+            startLine: lineIndex,
+            endLine: cursor - 1,
+        },
+        nextLineIndex: cursor,
+    };
+}
+
+function parseLooseRowsAtLine(lines: string[], lineIndex: number, fenced?: boolean[]) {
+    if (fenced?.[lineIndex] || !canBeTableLine(lines[lineIndex]) || !hasOuterTablePipes(lines[lineIndex])) return null;
+
+    const firstRow = splitTableRow(lines[lineIndex]);
+    const width = firstRow.length;
+    const rows: string[][] = [];
+    let cursor = lineIndex;
+
+    if (width < 3) return null;
+
+    while (cursor < lines.length && !fenced?.[cursor] && canBeTableLine(lines[cursor]) && hasOuterTablePipes(lines[cursor])) {
+        const cells = splitTableRow(lines[cursor]);
+        if (cells.length < 3) break;
+
+        rows.push(normaliseCells(cells, width));
+        cursor++;
+    }
+
+    if (rows.length < 2) return null;
+
+    return {
+        table: {
+            header: [],
+            alignments: Array.from({ length: width }, () => null),
+            rows,
+            startLine: lineIndex,
+            endLine: cursor - 1,
+        },
+        nextLineIndex: cursor,
+    };
+}
+
+function stripLineEnding(line: string) {
+    return line.endsWith("\r\n")
+        ? line.slice(0, -2)
+        : line.endsWith("\n")
+            ? line.slice(0, -1)
+            : line.endsWith("\r")
+                ? line.slice(0, -1)
+                : line;
+}
+
+function sourceLines(markdown: string) {
+    const lines: Array<{ raw: string; text: string; }> = [];
+    let start = 0;
+
+    for (let i = 0; i < markdown.length; i++) {
+        if (markdown[i] !== "\n") continue;
+
+        const raw = markdown.slice(start, i + 1);
+        lines.push({
+            raw,
+            text: stripLineEnding(raw),
+        });
+        start = i + 1;
+    }
+
+    if (start < markdown.length) {
+        const raw = markdown.slice(start);
+        lines.push({
+            raw,
+            text: stripLineEnding(raw),
+        });
+    }
+
+    return lines;
+}
+
+function rawTableBlock(lines: Array<{ raw: string; }>, nextLineIndex: number) {
+    return lines
+        .slice(0, nextLineIndex)
+        .map((line, index) => index === nextLineIndex - 1 ? stripLineEnding(line.raw) : line.raw)
+        .join("");
+}
+
+export function parseMarkdownTableBlock(markdown: string): MarkdownTableBlock | null {
+    const lines = sourceLines(markdown);
+    const parsed = parseTableAtLine(lines.map(line => line.text), 0);
+
+    if (!parsed) return null;
+
+    return {
+        raw: rawTableBlock(lines, parsed.nextLineIndex),
+        table: parsed.table,
+    };
+}
+
+export function parseMarkdownTableMatch(markdown: string): MarkdownTableMatch | null {
+    const lines = sourceLines(markdown);
+    const textLines = lines.map(line => line.text);
+    const fenced = getFenceMask(textLines);
+
+    for (let lineIndex = 0; lineIndex < textLines.length - 1; lineIndex++) {
+        const parsed = parseTableAtLine(textLines, lineIndex, fenced) ?? parseLooseRowsAtLine(textLines, lineIndex, fenced);
+        if (!parsed) continue;
+
+        const leadingMarkdown = lines
+            .slice(0, lineIndex)
+            .map(line => line.raw)
+            .join("");
+        const tableRaw = rawTableBlock(lines.slice(lineIndex), parsed.nextLineIndex - lineIndex);
+
+        return {
+            raw: `${leadingMarkdown}${tableRaw}`,
+            leadingMarkdown,
+            tableRaw,
+            table: parsed.table,
+        };
+    }
+
+    return null;
+}
+
+export function parseMarkdownTables(markdown: string): MarkdownTable[] {
+    const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+    const fenced = getFenceMask(lines);
+    const tables: MarkdownTable[] = [];
+
+    for (let lineIndex = 0; lineIndex < lines.length - 1; lineIndex++) {
+        const parsed = parseTableAtLine(lines, lineIndex, fenced);
+        if (!parsed) continue;
+
+        tables.push(parsed.table);
+        lineIndex = parsed.nextLineIndex - 1;
+    }
+
+    return tables;
+}
diff --git a/src/equicordplugins/markdownTables/styles.css b/src/equicordplugins/markdownTables/styles.css
new file mode 100644
index 000000000..866f537ca
--- /dev/null
+++ b/src/equicordplugins/markdownTables/styles.css
@@ -0,0 +1,246 @@
+.vc-markdownTables-root {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-width: 100%;
+    margin: 0.25rem 0;
+}
+
+.vc-markdownTables-toolbar {
+    display: inline-flex;
+    align-self: flex-start;
+    padding: 2px;
+    border: 1px solid var(--background-modifier-accent);
+    border-radius: 4px;
+    background: var(--background-secondary);
+}
+
+.vc-markdownTables-toggle {
+    min-width: 44px;
+    padding: 2px 8px;
+    border: 0;
+    border-radius: 3px;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    background: transparent;
+    cursor: pointer;
+}
+
+.vc-markdownTables-toggle:hover {
+    color: var(--text-normal);
+    background: var(--background-modifier-hover);
+}
+
+.vc-markdownTables-toggle-active,
+.vc-markdownTables-toggle-active:hover {
+    color: var(--interactive-active);
+    background: var(--background-modifier-selected);
+}
+
+.vc-markdownTables-raw {
+    max-width: 100%;
+    margin: 0;
+    padding: 8px 10px;
+    border: 1px solid var(--background-modifier-accent);
+    border-radius: 4px;
+    overflow-x: auto;
+    color: inherit;
+    background: var(--background-secondary);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    scrollbar-width: thin;
+    scrollbar-color: gray transparent;
+    white-space: pre;
+}
+
+.vc-markdownTables-scrollFrame {
+    --vc-markdown-tables-mask-size: 42px;
+    --vc-markdown-tables-fade-color: var(--background-primary);
+    --vc-markdown-tables-fade-mid: color-mix(in srgb, var(--vc-markdown-tables-fade-color) 74%, transparent);
+    --vc-markdown-tables-fade-soft: color-mix(in srgb, var(--vc-markdown-tables-fade-color) 36%, transparent);
+
+    position: relative;
+    max-width: 100%;
+    border: 1px solid var(--background-modifier-accent);
+    border-radius: 4px;
+    background: transparent;
+    overflow: hidden;
+}
+
+.vc-markdownTables-scrollFrame::before,
+.vc-markdownTables-scrollFrame::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    width: var(--vc-markdown-tables-mask-size);
+    content: "";
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 180ms ease,
+        width 180ms ease;
+}
+
+.vc-markdownTables-scrollFrame::before {
+    left: 0;
+    background: linear-gradient(to right,
+            var(--vc-markdown-tables-fade-color) 0,
+            var(--vc-markdown-tables-fade-mid) 42%,
+            var(--vc-markdown-tables-fade-soft) 70%,
+            transparent 100%);
+}
+
+.vc-markdownTables-scrollFrame::after {
+    right: 0;
+    background: linear-gradient(to left,
+            var(--vc-markdown-tables-fade-color) 0,
+            var(--vc-markdown-tables-fade-mid) 42%,
+            var(--vc-markdown-tables-fade-soft) 70%,
+            transparent 100%);
+}
+
+.vc-markdownTables-mask-left::before,
+.vc-markdownTables-mask-right::after {
+    opacity: 1;
+}
+
+.vc-markdownTables-scroll-left::before,
+.vc-markdownTables-scroll-right::after {
+    width: calc(var(--vc-markdown-tables-mask-size) + 10px);
+}
+
+.vc-markdownTables-scroll {
+    max-width: 100%;
+    overflow-x: auto;
+    background: transparent;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    scrollbar-width: thin;
+    scrollbar-color: gray transparent;
+}
+
+.vc-markdownTables-mask-left .vc-markdownTables-scroll {
+    mask-image: linear-gradient(to right,
+            transparent 0,
+            black var(--vc-markdown-tables-mask-size),
+            black 100%);
+}
+
+.vc-markdownTables-mask-right .vc-markdownTables-scroll {
+    mask-image: linear-gradient(to right,
+            black 0,
+            black calc(100% - var(--vc-markdown-tables-mask-size)),
+            transparent 100%);
+}
+
+.vc-markdownTables-mask-left.vc-markdownTables-mask-right .vc-markdownTables-scroll {
+    mask-image: linear-gradient(to right,
+            transparent 0,
+            black var(--vc-markdown-tables-mask-size),
+            black calc(100% - var(--vc-markdown-tables-mask-size)),
+            transparent 100%);
+}
+
+.vc-markdownTables-table {
+    width: max-content;
+    min-width: 100%;
+    border-collapse: collapse;
+    color: inherit;
+    font-size: 0.9375rem;
+    line-height: 1.25rem;
+}
+
+.vc-markdownTables-table th,
+.vc-markdownTables-table td {
+    max-width: 440px;
+    padding: 6px 10px;
+    border-right: 1px solid var(--background-modifier-accent);
+    border-bottom: 1px solid var(--background-modifier-accent);
+    vertical-align: top;
+    white-space: pre-wrap;
+}
+
+.vc-markdownTables-table th {
+    font-weight: 600;
+    background: var(--background-modifier-hover);
+}
+
+.vc-markdownTables-table tbody tr:hover {
+    background: var(--background-modifier-hover);
+}
+
+.vc-markdownTables-table th:last-child,
+.vc-markdownTables-table td:last-child {
+    border-right: 0;
+}
+
+.vc-markdownTables-table tr:last-child td {
+    border-bottom: 0;
+}
+
+@supports (color: color-mix(in srgb, white, black)) {
+    .vc-markdownTables-scrollFrame {
+        border-color: color-mix(in srgb, currentcolor 24%, transparent);
+    }
+
+    .vc-markdownTables-toolbar,
+    .vc-markdownTables-raw {
+        border-color: color-mix(in srgb, currentcolor 18%, transparent);
+    }
+
+    .vc-markdownTables-table th,
+    .vc-markdownTables-table td {
+        border-right-color: color-mix(in srgb, currentcolor 18%, transparent);
+        border-bottom-color: color-mix(in srgb, currentcolor 18%, transparent);
+    }
+
+    .vc-markdownTables-table th {
+        background: color-mix(in srgb, currentcolor 7%, transparent);
+    }
+
+    .vc-markdownTables-table tbody tr:hover {
+        background: color-mix(in srgb, currentcolor 5%, transparent);
+    }
+}
+
+.vc-markdownTables-scrollFrame:is(.theme-dark *) {
+    --vc-markdown-tables-fade-color: color-mix(in srgb, var(--background-primary) 88%, black);
+}
+
+.vc-markdownTables-scrollFrame:is(.theme-light *) {
+    --vc-markdown-tables-fade-color: color-mix(in srgb, var(--background-primary) 88%, white);
+}
+
+.vc-markdownTables-raw::-webkit-scrollbar,
+.vc-markdownTables-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.vc-markdownTables-raw::-webkit-scrollbar-thumb,
+.vc-markdownTables-scroll::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: gray;
+}
+
+.vc-markdownTables-raw::-webkit-scrollbar-track,
+.vc-markdownTables-scroll::-webkit-scrollbar-track,
+.vc-markdownTables-raw::-webkit-scrollbar-corner,
+.vc-markdownTables-scroll::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+.vc-markdownTables-align-left {
+    text-align: left;
+}
+
+.vc-markdownTables-align-center {
+    text-align: center;
+}
+
+.vc-markdownTables-align-right {
+    text-align: right;
+}
\ No newline at end of file
diff --git a/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx b/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
index f2aeab4f7..6f49a1bc2 100644
--- a/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
@@ -8,14 +8,12 @@ import { BaseText } from "@components/BaseText";
 import { Button } from "@components/Button";
 import { Flex } from "@components/Flex";
 import { InfoIcon } from "@components/Icons";
-import { Link } from "@components/Link";
 import { copyWithToast, openUserProfile } from "@utils/discord";
-import { closeAllModals, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { LazyComponent } from "@utils/react";
 import { t } from "@utils/translation";
-import { type User } from "@vencord/discord-types";
+import { RenderModalProps, type User } from "@vencord/discord-types";
 import { find, findByCode, findByCodeLazy } from "@webpack";
-import { Alerts, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, Menu, NavigationRouter, React, TabBar, TextInput, Tooltip, useMemo, useRef, useState } from "@webpack/common";
+import { Alerts, ChannelStore, closeAllModals, ContextMenuApi, FluxDispatcher, GuildStore, Menu, Modal, NavigationRouter, openModal, React, TabBar, TextInput, Tooltip, useMemo, useRef, useState } from "@webpack/common";
 
 import { DBMessageRecord, deleteMessageIDB, deleteMessagesBulkIDB } from "../db";
 import { cl, clearLogs, settings } from "../index";
@@ -63,7 +61,7 @@ export enum LogTabs {
 }
 
 interface Props {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     initalQuery?: string;
 }
 
@@ -77,46 +75,98 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
     const { messages, total, statusTotal, pending, reset } = useMessages(queryEh, currentTab, sortNewest, numDisplayedMessages);
 
     return (
-        <ModalRoot className={cl("modal-root")} {...modalProps} size={ModalSize.LARGE}>
-            <ModalHeader className={cl("modal-header")}>
-                <TextInput value={queryEh} onChange={e => setQuery(e)} style={{ width: "100%" }} placeholder="Filter Messages" />
-                <TabBar
-                    type="top"
-                    look="brand"
-                    className={cl("modal-tab-bar")}
-                    selectedItem={currentTab}
-                    onItemSelect={e => {
-                        setCurrentTab(e);
-                        setNumDisplayedMessages(settings.store.messagesToDisplayAtOnceInLogs);
+        <Modal
+            {...modalProps}
+            size="lg"
+            title={
+                <div className={cl("modal")}>
+                    <TabBar
+                        type="top"
+                        look="brand"
+                        className={cl("modal-tab-bar")}
+                        selectedItem={currentTab}
+                        onItemSelect={e => {
+                            setCurrentTab(e);
+                            setNumDisplayedMessages(settings.store.messagesToDisplayAtOnceInLogs);
+                            contentRef.current?.firstElementChild?.scrollTo(0, 0);
+                        }}
+                    >
+                        <TabBar.Item
+                            className={cl("modal-tab-bar-item")}
+                            id={LogTabs.DELETED}
+                        >
+                            Deleted
+                        </TabBar.Item>
+                        <TabBar.Item
+                            className={cl("modal-tab-bar-item")}
+                            id={LogTabs.EDITED}
+                        >
+                            Edited
+                        </TabBar.Item>
+                        <TabBar.Item
+                            className={cl("modal-tab-bar-item")}
+                            id={LogTabs.GHOST_PING}
+                        >
+                            Ghost Pinged
+                        </TabBar.Item>
+                    </TabBar>
+                    <div className={cl("modal-filter")}>
+                        <TextInput value={queryEh} onChange={e => setQuery(e)} placeholder="Filter Messages" />
+                    </div>
+                </div>
+            }
+            actions={[
+                {
+                    text: `Sort ${sortNewest ? "Oldest First" : "Newest First"}`,
+                    variant: "secondary",
+                    onClick: () => {
+                        setSortNewest(e => {
+                            const val = !e;
+                            settings.store.sortNewest = val;
+                            return val;
+                        });
                         contentRef.current?.firstElementChild?.scrollTo(0, 0);
-                    }}
-                >
-                    <TabBar.Item
-                        className={cl("modal-tab-bar-item")}
-                        id={LogTabs.DELETED}
-                    >
-                        Deleted
-                    </TabBar.Item>
-                    <TabBar.Item
-                        className={cl("modal-tab-bar-item")}
-                        id={LogTabs.EDITED}
-                    >
-                        Edited
-                    </TabBar.Item>
-                    <TabBar.Item
-                        className={cl("modal-tab-bar-item")}
-                        id={LogTabs.GHOST_PING}
-                    >
-                        Ghost Pinged
-                    </TabBar.Item>
-                </TabBar>
-            </ModalHeader>
-            <div style={{ opacity: modalProps.transitionState === 1 ? "1" : "0" }} className={cl("modal-content-container")} ref={contentRef}>
+                    }
+                },
+                {
+                    text: t("vencord.logs.clearLogs"),
+                    variant: "critical-secondary",
+                    disabled: messages?.length === 0,
+                    onClick: () => Alerts.show({
+                        title: t("vencord.logs.clearLogs"),
+                        body: t("vencord.logs.clearLogsConfirmationNum", { count: messages.length }),
+                        confirmText: "Clear",
+                        // @ts-expect-error not typed
+                        confirmVariant: "critical-primary",
+                        cancelText: t("vencord.cancel"),
+                        onConfirm: async () => {
+                            await deleteMessagesBulkIDB(messages.map(e => e.message_id));
+                            reset();
+                        }
+                    })
+                },
+                {
+                    text: t("vencord.logs.clearAllLogs"),
+                    variant: "critical-primary",
+                    onClick: () => Alerts.show({
+                        title: t("vencord.logs.clearAllLogs"),
+                        body: t("vencord.logs.clearAllLogsConfirmation"),
+                        confirmText: "Clear",
+                        // @ts-expect-error not typed
+                        confirmVariant: "critical-primary",
+                        cancelText: t("vencord.cancel"),
+                        onConfirm: async () => {
+                            await clearLogs();
+                            reset();
+                        }
+                    })
+                }
+            ]}
+        >
+            <div style={{ opacity: modalProps.transitionState === 1 ? "1" : "0" }} className={`${cl("modal-content-container")} ${cl("modal-root")}`} ref={contentRef}>
                 {
                     modalProps.transitionState === 1 &&
-                    <ModalContent
-                        className={cl("modal-content")}
-                    >
+                    <div>
                         {messages != null && total === 0 && (
                             <EmptyLogs
                                 hasQuery={queryEh.length !== 0}
@@ -134,62 +184,10 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
                                 handleLoadMore={() => setNumDisplayedMessages(e => e + settings.store.messagesToDisplayAtOnceInLogs)}
                             />
                         )}
-                    </ModalContent>
+                    </div>
                 }
             </div>
-            <ModalFooter className={cl("footer")}>
-                <Button
-                    variant="dangerPrimary"
-                    onClick={() => Alerts.show({
-                        title: t("vencord.logs.clearAllLogs"),
-                        body: t("vencord.logs.clearAllLogsConfirmation"),
-                        confirmText: "Clear",
-                        // @ts-expect-error not typed
-                        confirmVariant: "critical-primary",
-                        cancelText: t("vencord.cancel"),
-                        onConfirm: async () => {
-                            await clearLogs();
-                            reset();
-                        }
-
-                    })}
-                >
-                    Clear All Logs
-                </Button>
-                <Button
-                    style={{ marginRight: "16px" }}
-                    variant="dangerSecondary"
-                    disabled={messages?.length === 0}
-                    onClick={() => Alerts.show({
-                        title: t("vencord.logs.clearLogs"),
-                        body: t("vencord.logs.clearLogsConfirmationNum", { count: messages.length }),
-                        confirmText: "Clear",
-                        // @ts-expect-error not typed
-                        confirmVariant: "critical-primary",
-                        cancelText: t("vencord.cancel"),
-                        onConfirm: async () => {
-                            await deleteMessagesBulkIDB(messages.map(e => e.message_id));
-                            reset();
-                        }
-                    })}
-                >
-                    Clear Visible Logs
-                </Button>
-                <Link
-                    style={{ marginRight: "1rem" }}
-                    onClick={() => {
-                        setSortNewest(e => {
-                            const val = !e;
-                            settings.store.sortNewest = val;
-                            return val;
-                        });
-                        contentRef.current?.firstElementChild?.scrollTo(0, 0);
-                    }}
-                >
-                    Sort {sortNewest ? "Oldest First" : "Newest First"}
-                </Link>
-            </ModalFooter>
-        </ModalRoot>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/messageLoggerEnhanced/styles.css b/src/equicordplugins/messageLoggerEnhanced/styles.css
index 41f555423..3373480a6 100644
--- a/src/equicordplugins/messageLoggerEnhanced/styles.css
+++ b/src/equicordplugins/messageLoggerEnhanced/styles.css
@@ -1,8 +1,6 @@
 .vc-msg-logger-enhanced-modal-root {
-    max-height: 80vh;
-    min-height: 80vh;
-    min-width: 85vw;
-    max-width: 85vw;
+    max-height: 100%;
+    max-width: 100%;
 }
 
 .vc-msg-logger-enhanced-modal-empty-logs {
@@ -19,16 +17,11 @@
     cursor: pointer;
 }
 
-.vc-msg-logger-enhanced-modal-header {
-    flex-direction: column;
-
-    /* width: 100%; */
-}
-
 .vc-msg-logger-enhanced-modal-content-container {
     /* max-height: 80vh; */
     overflow: hidden;
     height: 100%;
+    width: 100%;
     transition: opacity 100ms ease-in;
 }
 
@@ -43,18 +36,15 @@
     height: 100%;
 }
 
-.vc-msg-logger-enhanced-modal-header > div:has(input) {
-    width: 100%;
-}
-
 .vc-msg-logger-enhanced-modal-tab-bar-item {
     padding-bottom: 16px;
     margin-bottom: -2px;
 }
 
 .vc-msg-logger-enhanced-modal-tab-bar {
-    margin-top: 20px;
-    width: 100%;
+    margin-bottom: 12px;
+    margin-left: -24px;
+    width: 114.5%;
     justify-content: space-around;
 }
 
@@ -100,4 +90,16 @@
 
 .vc-updater-modal-content {
     padding: 1rem 2rem;
+}
+
+.vc-msg-logger-enhanced-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    padding-right: 20px;
+}
+
+.vc-msg-logger-enhanced-modal-filter {
+    width: 106%;
 }
\ No newline at end of file
diff --git a/src/equicordplugins/middleClickTweaks/index.ts b/src/equicordplugins/middleClickTweaks/index.ts
index 9c3d7dcd6..f7ccf038e 100644
--- a/src/equicordplugins/middleClickTweaks/index.ts
+++ b/src/equicordplugins/middleClickTweaks/index.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { definePluginSettings, SettingsStore } from "@api/Settings";
+import { definePluginSettings } from "@api/Settings";
 import { EquicordDevs } from "@utils/index";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
@@ -76,33 +76,13 @@ const settings = definePluginSettings({
     }
 });
 
-function migrate() {
-    const { plugins } = SettingsStore.plain;
-    const oldPlugin = plugins?.LimitMiddleClickPaste;
-
-    if (!oldPlugin) return;
-
-    const newPlugin = plugins.MiddleClickTweaks ??= { enabled: false };
-    const { scope, threshold, preventLinkOpen } = oldPlugin;
-
-    if (scope) newPlugin.pasteScope = scope;
-    if (threshold) newPlugin.pasteThreshold = threshold;
-    if (preventLinkOpen) newPlugin.openScope = "both";
-    if (oldPlugin.enabled) newPlugin.enabled = true;
-
-    delete plugins.LimitMiddleClickPaste;
-    SettingsStore.markAsChanged();
-}
-
-migrate();
-
 export default definePlugin({
     name: "MiddleClickTweaks",
     description: t("equicord.middleClickTweaks.description"),
-    tags: ["Utility"],
     authors: [EquicordDevs.Etorix, EquicordDevs.korzi],
     settings,
 
+    tags: ["Utility"],
     searchTerms: ["LimitMiddleClickPaste"],
 
     isPastingDisabled(isInput: boolean) {
@@ -116,11 +96,7 @@ export default definePlugin({
         return false;
     },
 
-    start() {
-        migrate();
-        updateListeners();
-    },
-
+    start() { updateListeners(); },
     stop() { updateListeners(false); },
 
     patches: [
@@ -133,10 +109,10 @@ export default definePlugin({
             }
         },
         {
-            // Detects paste events triggered inside of Discord's text input.
+            // Detects paste events triggered inside of Discord's text inputs.
             find: ",origin:\"clipboard\"});",
             replacement: {
-                match: /(?<=handlePaste=(\i)=>{)(?=let)/,
+                match: /(?<=handlePaste=(\i)=>{)(?=let)/g,
                 replace: "if($self.isPastingDisabled(true)){$1.preventDefault?.();$1.stopPropagation?.();return;}"
             }
         },
diff --git a/src/equicordplugins/moreCommands/index.ts b/src/equicordplugins/moreCommands/index.ts
index 993682786..d16597fbf 100644
--- a/src/equicordplugins/moreCommands/index.ts
+++ b/src/equicordplugins/moreCommands/index.ts
@@ -34,7 +34,6 @@ import {
     generatePoissonDiskPosition,
     getCuteAnimeBoys,
     getCuteNeko,
-    getCutePats,
     getMessage,
     isMorse,
     loadFriendImage,
@@ -350,13 +349,6 @@ export default definePlugin({
                 }
             },
         },
-        {
-            name: "pat",
-            description: "Sends a headpat gif",
-            execute: async () => ({
-                content: await getCutePats()
-            })
-        },
         {
             name: "nekos",
             description: "Send Neko",
diff --git a/src/equicordplugins/moreCommands/utils.ts b/src/equicordplugins/moreCommands/utils.ts
index 0dd7ae3a1..4d34b41be 100644
--- a/src/equicordplugins/moreCommands/utils.ts
+++ b/src/equicordplugins/moreCommands/utils.ts
@@ -46,12 +46,6 @@ export async function getCuteNeko(): Promise<string> {
     return url ?? "";
 }
 
-export async function getCutePats(): Promise<string> {
-    const res = await fetch("https://api.waifu.pics/sfw/pat");
-    const url = (await res.json()).url as string | null;
-    return url ?? "";
-}
-
 export function mock(input: string): string {
     let output = "";
     for (let i = 0; i < input.length; i++) {
diff --git a/src/equicordplugins/moreStickers/components/picker.tsx b/src/equicordplugins/moreStickers/components/picker.tsx
index 6c652a3c8..c8e373584 100644
--- a/src/equicordplugins/moreStickers/components/picker.tsx
+++ b/src/equicordplugins/moreStickers/components/picker.tsx
@@ -4,13 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { HeadingPrimary } from "@components/Heading";
 import { PickerContent, PickerContentHeader, PickerContentRow, PickerContentRowGrid, PickerHeaderProps, SidebarProps, Sticker, StickerCategoryType, StickerPack } from "@equicordplugins/moreStickers/types";
 import { sendSticker } from "@equicordplugins/moreStickers/upload";
 import { clPicker, FFmpegStateContext } from "@equicordplugins/moreStickers/utils";
 import { debounce } from "@shared/debounce";
-import { ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { React, TextInput } from "@webpack/common";
+import { Modal,openModal, React, TextInput } from "@webpack/common";
 import { JSX } from "react";
 
 import { CategoryImage, CategoryScroller, CategoryWrapper, StickerCategory } from "./categories";
@@ -72,14 +70,9 @@ export const PickerSidebar = ({ packMetas, onPackSelect }: SidebarProps) => {
                     onClick={() => {
                         openModal(modalProps => {
                             return (
-                                <ModalRoot size={ModalSize.LARGE} {...modalProps}>
-                                    <ModalHeader>
-                                        <HeadingPrimary>Stickers+</HeadingPrimary>
-                                    </ModalHeader>
-                                    <ModalContent>
-                                        <Packs />
-                                    </ModalContent>
-                                </ModalRoot>
+                                <Modal size="lg" title="Stickers+" {...modalProps}>
+                                    <Packs />
+                                </Modal>
                             );
                         });
                     }}
diff --git a/src/equicordplugins/moreStickers/style.css b/src/equicordplugins/moreStickers/style.css
index e3b25876e..e532b6697 100644
--- a/src/equicordplugins/moreStickers/style.css
+++ b/src/equicordplugins/moreStickers/style.css
@@ -80,15 +80,6 @@
     margin-left: 48px;
 }
 
-.vc-more-stickers-picker-content:has(.temporary-text-will-be-removed) {
-    display: flex;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    width: 90%;
-    height: 80%;
-}
-
 .vc-more-stickers-category-scroller {
     overflow: hidden scroll;
     padding-right: 0;
diff --git a/src/equicordplugins/musicControls/spotify/lyrics/components/lyrics.tsx b/src/equicordplugins/musicControls/spotify/lyrics/components/lyrics.tsx
index c4b15fa64..d028ded7f 100644
--- a/src/equicordplugins/musicControls/spotify/lyrics/components/lyrics.tsx
+++ b/src/equicordplugins/musicControls/spotify/lyrics/components/lyrics.tsx
@@ -9,8 +9,7 @@ import { TooltipContainer } from "@components/TooltipContainer";
 import { settings } from "@equicordplugins/musicControls/settings";
 import { SpotifyLrcStore } from "@equicordplugins/musicControls/spotify/lyrics/providers/store";
 import { SpotifyStore } from "@equicordplugins/musicControls/spotify/SpotifyStore";
-import { openModal } from "@utils/modal";
-import { ContextMenuApi, React, useEffect, useState, useStateFromStores } from "@webpack/common";
+import { ContextMenuApi, openModal,React, useEffect, useState, useStateFromStores } from "@webpack/common";
 
 import { LyricsContextMenu } from "./ctxMenu";
 import { LyricsModal } from "./modal";
diff --git a/src/equicordplugins/musicControls/spotify/lyrics/components/modal.tsx b/src/equicordplugins/musicControls/spotify/lyrics/components/modal.tsx
index 71141e9a8..ef39de086 100644
--- a/src/equicordplugins/musicControls/spotify/lyrics/components/modal.tsx
+++ b/src/equicordplugins/musicControls/spotify/lyrics/components/modal.tsx
@@ -7,8 +7,8 @@
 import { BaseText } from "@components/BaseText";
 import { SpotifyStore, Track } from "@equicordplugins/musicControls/spotify/SpotifyStore";
 import { openImageModal } from "@utils/discord";
-import { ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { React } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal,React } from "@webpack/common";
 
 import { cl, NoteSvg, scrollClasses, useLyrics } from "./util";
 
@@ -18,72 +18,63 @@ const formatTime = (time: number) => {
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 };
 
-function ModalHeaderContent({ track }: { track: Track | null; }) {
+function getTitleNode(track: Track | null) {
     if (!track) {
-        return (
-            <ModalHeader>
-                <BaseText size="sm" weight="semibold">No track playing</BaseText>
-            </ModalHeader>
-        );
+        return <BaseText size="sm" weight="semibold">No track playing</BaseText>;
     }
     return (
-        <ModalHeader>
-            <div className={cl("header-content")}>
-                {track?.album?.image?.url && (
-                    <img
-                        src={track.album.image.url}
-                        alt={track.album.name}
-                        className={cl("album-image")}
-                        onClick={() => openImageModal({
-                            url: track.album.image.url,
-                            width: track.album.image.width,
-                            height: track.album.image.height,
-                        })}
-                    />
-                )}
-                <div>
-                    <BaseText size="sm" weight="semibold">{track.name}</BaseText>
-                    <BaseText size="sm">by {track.artists.map(a => a.name).join(", ")}</BaseText>
-                    <BaseText size="sm">on {track.album.name}</BaseText>
-                </div>
+        <div className={cl("header-content")}>
+            {track?.album?.image?.url && (
+                <img
+                    src={track.album.image.url}
+                    alt={track.album.name}
+                    className={cl("album-image")}
+                    onClick={() => openImageModal({
+                        url: track.album.image.url,
+                        width: track.album.image.width,
+                        height: track.album.image.height,
+                    })}
+                />
+            )}
+            <div>
+                <BaseText size="sm" weight="semibold">{track.name}</BaseText>
+                <BaseText size="sm">by {track.artists.map(a => a.name).join(", ")}</BaseText>
+                <BaseText size="sm">on {track.album.name}</BaseText>
             </div>
-        </ModalHeader>
+        </div>
     );
 }
 
 const modalCurrentLine = cl("modal-line-current");
 const modalLine = cl("modal-line");
 
-export function LyricsModal({ props }: { props: ModalProps; }) {
+export function LyricsModal({ props }: { props: RenderModalProps; }) {
     const { track, lyricsInfo, currLrcIndex } = useLyrics({ scroll: false });
     const currentLyrics = lyricsInfo?.lyricsVersions[lyricsInfo.useLyric];
 
     return (
-        <ModalRoot {...props}>
-            <ModalHeaderContent track={track} />
-            <ModalContent>
-                <div className={`${cl("lyrics-modal-container")} ${scrollClasses.auto}`}>
-                    {currentLyrics ? (
-                        currentLyrics.map((line, i) => (
-                            <BaseText
-                                key={i}
-                                size={currLrcIndex === i ? "md" : "sm"}
-                                weight={currLrcIndex === i ? "semibold" : "normal"}
-                                className={currLrcIndex === i ? modalCurrentLine : modalLine}
-                            >
-                                <span className={cl("modal-timestamp")} onClick={() => SpotifyStore.seek(line.time * 1000)}>
-                                    {formatTime(line.time)}
-                                </span>
-                                {line.text || NoteSvg()}
-                            </BaseText>
-                        ))
-                    ) : (
-                        <BaseText size="sm" className={cl("modal-no-lyrics")}>
-                            No lyrics available :(
+        <Modal {...props} size="md" title={getTitleNode(track)}>
+            <div className={`${cl("lyrics-modal-container")} ${scrollClasses.auto}`}>
+                {currentLyrics ? (
+                    currentLyrics.map((line, i) => (
+                        <BaseText
+                            key={i}
+                            size={currLrcIndex === i ? "md" : "sm"}
+                            weight={currLrcIndex === i ? "semibold" : "normal"}
+                            className={currLrcIndex === i ? modalCurrentLine : modalLine}
+                        >
+                            <span className={cl("modal-timestamp")} onClick={() => SpotifyStore.seek(line.time * 1000)}>
+                                {formatTime(line.time)}
+                            </span>
+                            {line.text || NoteSvg()}
                         </BaseText>
-                    )}
-                </div>
-            </ModalContent>
-        </ModalRoot>
+                    ))
+                ) : (
+                    <BaseText size="sm" className={cl("modal-no-lyrics")}>
+                        No lyrics available :(
+                    </BaseText>
+                )}
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx b/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx
index 702393a4f..772d4c427 100644
--- a/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx
+++ b/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx
@@ -9,8 +9,7 @@ import { TooltipContainer } from "@components/TooltipContainer";
 import { settings } from "@equicordplugins/musicControls/settings";
 import { TidalLrcStore } from "@equicordplugins/musicControls/tidal/lyrics/providers/store";
 import { TidalStore } from "@equicordplugins/musicControls/tidal/TidalStore";
-import { openModal } from "@utils/modal";
-import { ContextMenuApi, useEffect, useState, useStateFromStores } from "@webpack/common";
+import { ContextMenuApi, openModal,useEffect, useState, useStateFromStores } from "@webpack/common";
 
 import { LyricsContextMenu } from "./ctxMenu";
 import { LyricsModal } from "./modal";
diff --git a/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx b/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx
index c5337e5c4..8aa6a6aa2 100644
--- a/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx
+++ b/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx
@@ -6,7 +6,8 @@
 
 import { BaseText } from "@components/BaseText";
 import { TidalStore, Track } from "@equicordplugins/musicControls/tidal/TidalStore";
-import { ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal,React } from "@webpack/common";
 
 import { cl, NoteSvg, scrollClasses, useLyrics } from "./util";
 
@@ -16,58 +17,54 @@ const formatTime = (time: number) => {
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 };
 
-function ModalHeaderContent({ track }: { track: Track; }) {
+function getTitleNode(track: Track | null) {
+    if (!track) return null;
     return (
-        <ModalHeader>
-            <div className={cl("header-content")}>
-                {track?.imageSrc && (
-                    <img
-                        src={track.imageSrc}
-                        alt={track.album || track.name}
-                        className={cl("album-image")}
-                    />
-                )}
-                <div>
-                    <BaseText size="sm" weight="semibold">{track.name}</BaseText>
-                    <BaseText size="sm">by {track.artist}</BaseText>
-                    {track.album && <BaseText size="sm">on {track.album}</BaseText>}
-                </div>
+        <div className={cl("header-content")}>
+            {track?.imageSrc && (
+                <img
+                    src={track.imageSrc}
+                    alt={track.album || track.name}
+                    className={cl("album-image")}
+                />
+            )}
+            <div>
+                <BaseText size="sm" weight="semibold">{track.name}</BaseText>
+                <BaseText size="sm">by {track.artist}</BaseText>
+                {track.album && <BaseText size="sm">on {track.album}</BaseText>}
             </div>
-        </ModalHeader>
+        </div>
     );
 }
 
-export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) {
+export function LyricsModal({ rootProps }: { rootProps: RenderModalProps; }) {
     const { track, lyrics, currLrcIndex } = useLyrics({ scroll: false });
     const currentLyrics = lyrics || null;
     const position = track ? TidalStore.mPosition : 0;
 
     return (
-        <ModalRoot {...rootProps}>
-            {track && <ModalHeaderContent track={track} />}
-            <ModalContent>
-                <div className={cl("lyrics-modal-container") + ` ${scrollClasses.auto}`}>
-                    {currentLyrics ? (
-                        currentLyrics.map((line, i) => (
-                            <BaseText
-                                key={i}
-                                size={currLrcIndex === i ? "md" : "sm"}
-                                weight={currLrcIndex === i ? "semibold" : "normal"}
-                                className={currLrcIndex === i ? cl("modal-line-current") : cl("modal-line")}
+        <Modal {...rootProps} size="md" title={getTitleNode(track)}>
+            <div className={cl("lyrics-modal-container") + ` ${scrollClasses.auto}`}>
+                {currentLyrics ? (
+                    currentLyrics.map((line, i) => (
+                        <BaseText
+                            key={i}
+                            size={currLrcIndex === i ? "md" : "sm"}
+                            weight={currLrcIndex === i ? "semibold" : "normal"}
+                            className={currLrcIndex === i ? cl("modal-line-current") : cl("modal-line")}
+                        >
+                            <span className={cl("modal-timestamp")}
+                                onClick={() => TidalStore.seek(line.time * 1000)}
                             >
-                                <span className={cl("modal-timestamp")}
-                                    onClick={() => TidalStore.seek(line.time * 1000)}
-                                >
-                                    {formatTime(line.time)}
-                                </span>
-                                {line.text || NoteSvg(cl("modal-note"))}
-                            </BaseText>
-                        ))
-                    ) : (
-                        <BaseText size="sm" className={cl("modal-no-lyrics")}>No lyrics available :(</BaseText>
-                    )}
-                </div>
-            </ModalContent>
-        </ModalRoot>
+                                {formatTime(line.time)}
+                            </span>
+                            {line.text || NoteSvg(cl("modal-note"))}
+                        </BaseText>
+                    ))
+                ) : (
+                    <BaseText size="sm" className={cl("modal-no-lyrics")}>No lyrics available :(</BaseText>
+                )}
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/newPluginsManager/NewPluginsModal.tsx b/src/equicordplugins/newPluginsManager/NewPluginsModal.tsx
index 22f683a06..2bfecf6f5 100644
--- a/src/equicordplugins/newPluginsManager/NewPluginsModal.tsx
+++ b/src/equicordplugins/newPluginsManager/NewPluginsModal.tsx
@@ -8,17 +8,15 @@ import "./styles.css";
 
 import { Settings, useSettings } from "@api/Settings";
 import { BaseText } from "@components/BaseText";
-import { Button } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
 import { PluginDependencyList } from "@components/settings/tabs/plugins";
 import { PluginCard } from "@components/settings/tabs/plugins/PluginCard";
 import { ChangeList } from "@utils/ChangeList";
 import { classNameFactory } from "@utils/css";
-import { CloseButton, closeModal, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useForceUpdater } from "@utils/react";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findComponentByCodeLazy } from "@webpack";
-import { Tooltip, useMemo } from "@webpack/common";
+import { closeModal, Modal, openModal, Tooltip, useMemo } from "@webpack/common";
 import { ReactNode } from "react";
 
 import Plugins from "~plugins";
@@ -32,7 +30,7 @@ const Checkbox = findComponentByCodeLazy('"data-toggleable-component":"checkbox'
 let hasSeen = false;
 
 interface ModalComponentProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     newPlugins: Set<string>;
     newSettings: KnownPluginSettingsMap;
 }
@@ -121,8 +119,10 @@ function NewPluginsModal({ modalProps, newPlugins, newSettings }: ModalComponent
     };
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <ModalHeader separator={false} className={cl("header")}>
+        <Modal
+            {...modalProps}
+            size="md"
+            title={
                 <div className={cl("header-content")}>
                     <BaseText size="lg" weight="semibold" className={cl("title")}>
                         New Plugins and Settings ({totalCount})
@@ -131,53 +131,27 @@ function NewPluginsModal({ modalProps, newPlugins, newSettings }: ModalComponent
                         New plugins have been added since your last visit. Enable any you'd like or continue to dismiss.
                     </BaseText>
                 </div>
-                <div className={cl("header-trailing")}>
-                    <CloseButton onClick={modalProps.onClose} />
-                </div>
-            </ModalHeader>
-
-            <ModalContent>
-                <div className={cl("grid")}>
-                    {pluginCards}
-                    {requiredPluginCards}
-                </div>
-            </ModalContent>
-
-            <ModalFooter>
-                <Flex className={cl("footer")}>
-                    <Tooltip
-                        text={
-                            <>
-                                The following plugins require a restart:
-                                <ul className={cl("restart-list")}>
-                                    {changes.map(p => <li key={p}>{p}</li>)}
-                                </ul>
-                            </>
-                        }
-                        shouldShow={changes.hasChanges}
-                    >
-                        {tooltipProps => (
-                            <Button
-                                {...tooltipProps}
-                                onClick={handleContinue}
-                            >
-                                {changes.hasChanges ? "Restart" : "Continue"}
-                            </Button>
-                        )}
-                    </Tooltip>
-
-                    <Checkbox
-                        type="inverted"
-                        value={!settings?.plugins?.NewPluginsManager?.enabled}
-                        onChange={() => {
-                            Settings.plugins.NewPluginsManager.enabled = !settings?.plugins?.NewPluginsManager?.enabled;
-                        }}
-                    >
-                        Don't show this again
-                    </Checkbox>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+            }
+            actions={[
+                {
+                    text: "Don't show this again",
+                    onClick: () => {
+                        Settings.plugins.NewPluginsManager.enabled = !settings?.plugins?.NewPluginsManager?.enabled;
+                    },
+                    variant: "secondary"
+                },
+                {
+                    text: changes.hasChanges ? "Restart" : "Continue",
+                    onClick: handleContinue,
+                    variant: "primary"
+                }
+            ]}
+        >
+            <div className={cl("grid")}>
+                {pluginCards}
+                {requiredPluginCards}
+            </div>
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/platformSpoofer/index.tsx b/src/equicordplugins/platformSpoofer/index.tsx
index 05d5bd032..6c66b499f 100644
--- a/src/equicordplugins/platformSpoofer/index.tsx
+++ b/src/equicordplugins/platformSpoofer/index.tsx
@@ -76,12 +76,14 @@ export default definePlugin({
             ]
         },
         {
-            find: ".ORBS,label:",
-            replacement: {
-                match: /\{enabled:(\i).{0,25}"collectibles_shop_header_bar"\}\)/,
-                replace: "$1=true"
-            }
-        }
+            find: '"2025-01-virtual-currency-rollout"',
+            replacement: [
+                {
+                    match: /(?<=\}\),)(\i)/g,
+                    replace: "$1=e=>({enabled:true}),_equicord_$1"
+                }
+            ]
+        },
     ],
     getPlatform(bypass, userId?: any) {
         const platform = settings.store.platform ?? "desktop";
diff --git a/src/equicordplugins/profileSets/components/confirmModal.tsx b/src/equicordplugins/profileSets/components/confirmModal.tsx
index 76da537d0..2d507b138 100644
--- a/src/equicordplugins/profileSets/components/confirmModal.tsx
+++ b/src/equicordplugins/profileSets/components/confirmModal.tsx
@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Button } from "@components/Button";
-import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-interface ConfirmModalProps extends ModalProps {
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, React } from "@webpack/common";
+
+interface ConfirmModalProps extends RenderModalProps {
     title: string;
     message: string;
     confirmText: string;
@@ -17,7 +17,7 @@ interface ConfirmModalProps extends ModalProps {
     onCancel: () => void;
 }
 
-interface ImportProfilesModalProps extends ModalProps {
+interface ImportProfilesModalProps extends RenderModalProps {
     title: string;
     message: string;
     onOverride: () => void;
@@ -25,57 +25,65 @@ interface ImportProfilesModalProps extends ModalProps {
     onCancel: () => void;
 }
 
-export function ConfirmModal({ title, message, confirmText, cancelText, onConfirm, onCancel, onClose, transitionState }: ConfirmModalProps) {
+export function ConfirmModal({ title, message, confirmText, cancelText, onConfirm, onCancel, ...props }: ConfirmModalProps) {
     const closeAfter = (action: () => void) => () => {
         action();
-        onClose();
+        props.onClose();
     };
 
     return (
-        <ModalRoot transitionState={transitionState}>
-            <ModalHeader>
-                <Heading tag="h2">{title}</Heading>
-            </ModalHeader>
-            <ModalContent>
-                <Paragraph>{message}</Paragraph>
-            </ModalContent>
-            <ModalFooter>
-                <Button onClick={closeAfter(onConfirm)}>
-                    {confirmText}
-                </Button>
-                <Button variant="secondary" onClick={closeAfter(onCancel)}>
-                    {cancelText}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...props}
+            size="sm"
+            title={title}
+            actions={[
+                {
+                    text: confirmText,
+                    variant: "primary",
+                    onClick: closeAfter(onConfirm)
+                },
+                {
+                    text: cancelText,
+                    variant: "secondary",
+                    onClick: closeAfter(onCancel)
+                }
+            ]}
+        >
+            <Paragraph>{message}</Paragraph>
+        </Modal>
     );
 }
 
-export function ImportProfilesModal({ title, message, onOverride, onMerge, onCancel, onClose, transitionState }: ImportProfilesModalProps) {
+export function ImportProfilesModal({ title, message, onOverride, onMerge, onCancel, ...props }: ImportProfilesModalProps) {
     const closeAfter = (action: () => void) => () => {
         action();
-        onClose();
+        props.onClose();
     };
 
     return (
-        <ModalRoot transitionState={transitionState}>
-            <ModalHeader>
-                <Heading tag="h2">{title}</Heading>
-            </ModalHeader>
-            <ModalContent>
-                <Paragraph>{message}</Paragraph>
-            </ModalContent>
-            <ModalFooter>
-                <Button onClick={closeAfter(onOverride)}>
-                    Override
-                </Button>
-                <Button onClick={closeAfter(onMerge)}>
-                    Merge
-                </Button>
-                <Button variant="secondary" onClick={closeAfter(onCancel)}>
-                    Cancel
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...props}
+            size="sm"
+            title={title}
+            actions={[
+                {
+                    text: "Override",
+                    variant: "primary",
+                    onClick: closeAfter(onOverride)
+                },
+                {
+                    text: "Merge",
+                    variant: "primary",
+                    onClick: closeAfter(onMerge)
+                },
+                {
+                    text: "Cancel",
+                    variant: "secondary",
+                    onClick: closeAfter(onCancel)
+                }
+            ]}
+        >
+            <Paragraph>{message}</Paragraph>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/profileSets/components/presetManager.tsx b/src/equicordplugins/profileSets/components/presetManager.tsx
index 74f2c5bc8..7207a7525 100644
--- a/src/equicordplugins/profileSets/components/presetManager.tsx
+++ b/src/equicordplugins/profileSets/components/presetManager.tsx
@@ -7,8 +7,7 @@
 import { Button } from "@components/Button";
 import { Heading } from "@components/Heading";
 import { classes } from "@utils/misc";
-import { openModal } from "@utils/modal";
-import { React, SelectedGuildStore, TextInput, useStateFromStores } from "@webpack/common";
+import { openModal,React, SelectedGuildStore, TextInput, useStateFromStores } from "@webpack/common";
 
 import { cl, settings } from "../index";
 import { exportPresets, ImportDecision, importPresets, savePreset } from "../utils/actions";
diff --git a/src/equicordplugins/profileSets/styles.css b/src/equicordplugins/profileSets/styles.css
index ea2b79f85..ab12ccf87 100644
--- a/src/equicordplugins/profileSets/styles.css
+++ b/src/equicordplugins/profileSets/styles.css
@@ -26,6 +26,34 @@
     width: 100%;
     max-width: 500px;
     min-width: 0;
+    height: 38px;
+    padding: 1px 12px;
+    background: transparent;
+    color: var(--text-normal);
+    border: none;
+    outline: none;
+    box-shadow: none;
+    box-sizing: border-box;
+    font-size: 16px;
+    line-height: normal;
+}
+
+.vc-profile-presets-text-input input {
+    width: 100%;
+    height: 38px;
+    padding: 1px 12px;
+    background: transparent;
+    color: var(--text-normal);
+    border: none;
+    outline: none;
+    box-shadow: none;
+    box-sizing: border-box;
+    font-size: 16px;
+    line-height: normal;
+}
+
+.vc-profile-presets-text-input input::placeholder {
+    color: var(--text-muted);
 }
 
 .vc-profile-presets-search {
@@ -206,4 +234,4 @@
     border: 2px solid var(--background-modifier-accent);
     border-radius: 4px;
     color: var(--text-default);
-}
\ No newline at end of file
+}
diff --git a/src/equicordplugins/questify/components/questButtonSettings.tsx b/src/equicordplugins/questify/components/questButtonSettings.tsx
index 6378bc130..e70ca09d2 100644
--- a/src/equicordplugins/questify/components/questButtonSettings.tsx
+++ b/src/equicordplugins/questify/components/questButtonSettings.tsx
@@ -7,6 +7,7 @@
 import { QuestRewardType, QuestTaskType } from "@vencord/discord-types/enums";
 import type { JSX } from "react";
 
+import { enabledOnStartup } from "..";
 import { getQuestifySettings, useQuestifySettings } from "../settings/access";
 import { type QuestButtonAction, type QuestButtonDisplayMode, type QuestButtonIncludedTypes, type QuestButtonIndicatorMode } from "../settings/def";
 import { startAutoFetchingQuests } from "../settings/fetching";
@@ -142,7 +143,7 @@ export function QuestButtonSetting(): JSX.Element {
                     <SettingsHeader> Quest Button </SettingsHeader>
                     <SettingsDescription> Show a Quest Button in the server list with an optional indicator for unclaimed and unignored Quests. </SettingsDescription>
                 </SettingsRowItem>
-                <SettingsRowItem width="content">
+                {enabledOnStartup && <SettingsRowItem width="content">
                     <DummyQuestButton
                         badgeColor={questButton.questButtonBadgeColor}
                         leftClickAction={questButton.questButtonLeftClickAction}
@@ -152,7 +153,7 @@ export function QuestButtonSetting(): JSX.Element {
                         showPill={canShowPill(questButton.questButtonIndicator)}
                         visible={canShowButton(questButton.questButtonDisplay)}
                     />
-                </SettingsRowItem>
+                </SettingsRowItem>}
             </SettingsRow>
             <SettingsSubheader className="no-top-margin"> Button Behavior </SettingsSubheader>
             <SettingsRow>
diff --git a/src/equicordplugins/questify/components/settingsModal.tsx b/src/equicordplugins/questify/components/settingsModal.tsx
index 4b741c9d3..2a8019a25 100644
--- a/src/equicordplugins/questify/components/settingsModal.tsx
+++ b/src/equicordplugins/questify/components/settingsModal.tsx
@@ -5,8 +5,8 @@
  */
 
 import PluginModal from "@components/settings/tabs/plugins/PluginModal";
-import { openModal } from "@utils/modal";
 import type { Plugin } from "@utils/types";
+import { openModal } from "@webpack/common";
 
 import { promptToRestartIfDirty } from "../settings/restartTracking";
 import { setSettingsModalOpen } from "../state";
diff --git a/src/equicordplugins/questify/components/shared.tsx b/src/equicordplugins/questify/components/shared.tsx
index dbdedd0eb..2343ac53a 100644
--- a/src/equicordplugins/questify/components/shared.tsx
+++ b/src/equicordplugins/questify/components/shared.tsx
@@ -351,6 +351,8 @@ function SettingsTooltip({
                 position={position}
                 color="brand"
                 tooltipStyle={{ maxWidth: wider ? "602px" : "350px" }}
+                tooltipClassName={q("settings-tooltip")}
+                tooltipPointerClassName={q("settings-tooltip-pointer")}
                 tooltipContentClassName={q("settings-tooltip-content")}
                 delay={50}
             >
diff --git a/src/equicordplugins/questify/index.tsx b/src/equicordplugins/questify/index.tsx
index a1a6f10cf..43d984bfe 100644
--- a/src/equicordplugins/questify/index.tsx
+++ b/src/equicordplugins/questify/index.tsx
@@ -8,7 +8,7 @@ import "./styles.css";
 
 import { playAudio } from "@api/AudioPlayer";
 import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
-import { Settings } from "@api/Settings";
+import { PlainSettings, Settings } from "@api/Settings";
 import { ErrorBoundary } from "@components/index";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin, { StartAt } from "@utils/types";
@@ -23,7 +23,7 @@ import { getQuestifySettings } from "./settings/access";
 import { resetQuestsToResume, startAutoFetchingQuests, stopAutoFetchingQuests } from "./settings/fetching";
 import { validateIgnoredQuests } from "./settings/ignoredQuests";
 import { rerenderQuests, useQuestRerender } from "./settings/rerender";
-import { disposeRestartTracking, initializeRestartTracking, promptToRestartIfDirty } from "./settings/restartTracking";
+import { disposeRestartTracking, initializeRestartTracking, promptToRestartIfDirty, setRestartDirty } from "./settings/restartTracking";
 import { settings } from "./settings/store";
 import { getSettingsModalOpen, initialQuestDataFetched, setInitialQuestDataFetched, setSettingsModalOpen } from "./state";
 import { canAutoCompleteQuest, getActiveAutoCompletes, getQuestAutoCompleteProgress, getQuestButtonProps, getQuestPanelSubtitleText, hasEnabledAutoCompleteQuestTypes, processQuestForAutoComplete, resumeInterruptedAutoCompletes, setHeartbeatStackTracePatchSucceeded, setVideoProgressStackTracePatchSucceeded, stopAllAutoCompletes, stopAutoCompletesForRunningGames, stopQuestAutoComplete } from "./utils/completion";
@@ -37,6 +37,7 @@ import { formatLowerBadge, QUEST_PAGE } from "./utils/ui";
 let isSwitchingAccount = false;
 let didAttemptAutoCompleteResume = false;
 const notifiedCompletedQuests = new Set<string>();
+export const enabledOnStartup = PlainSettings.plugins.Questify?.enabled;
 
 function setOnQuestsPage(force?: boolean): void {
     getQuestifySettings().isOnQuestsPage = force ?? (window.location.pathname === QUEST_PAGE);
@@ -207,15 +208,13 @@ export default definePlugin({
         },
         {
             // Hides the sponsored banner on the Quests page.
-            find: "resetSortingFiltering(),requestAnimationFrame",
-            group: true,
+            find: "QUEST_HOME)},[]),",
             predicate: () => !getQuestifySettings().disableQuestsEverything && getQuestifySettings().disableSponsoredBanner,
-            replacement: [
-                {
-                    match: /(?<=(\i),isLoading:(\i)}=\(0,\i.\i\)\(\);)/,
-                    replace: "if(true){$1=null;$2=false;};"
-                }
-            ]
+            replacement: {
+                match: /(?<=(\i),isLoading:(\i)}=\(0,\i.\i\)\(\i\);)/,
+                replace: "if(true){$1=null;$2=false;};"
+            }
+
         },
         {
             // Hides the Quest & Orbs badges on user profiles.
@@ -246,12 +245,12 @@ export default definePlugin({
             replacement: [
                 {
                     // QUESTS_FETCH_CURRENT_QUESTS_BEGIN
-                    match: /(?=if\(!\i.\i.isFetchingCurrentQuests\))/,
-                    replace: "return;"
+                    match: /(?<=if\(\i.\i.isFetchingCurrentQuests)/,
+                    replace: "||true"
                 },
                 {
                     // QUESTS_FETCH_QUEST_TO_DELIVER_BEGIN
-                    match: /(?=let.{0,150}QUESTS_FETCH_QUEST_TO_DELIVER_BEGIN)/,
+                    match: /(?=let \i=Date.now\(\);\i.recordQuestRequestAttempt.{0,50}QUESTS_FETCH_QUEST_TO_DELIVER_BEGIN)/,
                     replace: "return;"
                 }
             ]
@@ -306,7 +305,7 @@ export default definePlugin({
             ]
         },
         {
-            find: "resetSortingFiltering(),requestAnimationFrame",
+            find: "QUEST_HOME)},[]),",
             group: true,
             predicate: () => !getQuestifySettings().disableQuestsEverything,
             replacement: [
@@ -323,17 +322,12 @@ export default definePlugin({
                 {
                     // Set the initial filters and update the filters and sort method when they change.
                     match: /(get\(\i\)\)\?\?)(\i,\[)(\i)(\]\),\i=\i.useCallback\((\i)=>{)(.{0,60}?useCallback\((\i)=>{)/,
-                    replace: "$1$self.getLastFilterChoices()??$2$3,questRerenderTrigger$4$self.setLastSortChoice($5);$6$self.setLastFilterChoices($7);$self.rerenderQuests();"
+                    replace: "$1$self.getLastFilterChoices()??$2$3$4$self.setLastSortChoice($5);$6$self.setLastFilterChoices($7);$self.rerenderQuests();"
                 },
                 {
                     // Update the last used sort and filter choices when the toggle setting for either is changed.
                     match: /(?<=ALL,\i.useMemo\(\(\)=>\()({sortMethod:(\i),filters:(\i))/,
                     replace: "$self.setLastSortChoice($2),$self.setLastFilterChoices($3),$1"
-                },
-                {
-                    // Makes the reset action return to the Questify sort option.
-                    match: /(?<=resetSortingFiltering:\(\)=>{\i\(\),\i\()\i.\i.SUGGESTED/,
-                    replace: '"questify"'
                 }
             ]
         },
@@ -360,7 +354,7 @@ export default definePlugin({
             predicate: () => !getQuestifySettings().disableQuestsEverything && hasEnabledAutoCompleteQuestTypes(),
             replacement: {
                 match: /(?<=SELECT&&!\i&&!\i,(\i)=null;)(return )(\i\?\i=\(0,\i.\i\)\(\i,{quest:(\i))/,
-                replace: "const questifyButton=$self.enrolledIncompleteButton({quest:$4});$2questifyButton?$1=questifyButton:$3"
+                replace: "const questifyButton=$self.enrolledIncompleteButton({quest:$4,size:\"sm\"});$2questifyButton?$1=questifyButton:$3"
             }
         },
         {
@@ -373,10 +367,15 @@ export default definePlugin({
             }
         },
         {
-            find: ".rowIndex,trackGuildAndChannelMetadata",
+            find: "return`quest-tile-",
             group: true,
             predicate: () => !getQuestifySettings().disableQuestsEverything,
             replacement: [
+                {
+                    // Alias the selected platform dropdown state before exposing CTA buttons.
+                    match: /(?<=var \i;)(?=let \i,\i,{quest:\i,questContent:)/,
+                    replace: "let questifySelectedPlatformDropdownVisible;"
+                },
                 {
                     // Prevent the platform selector if the Quest is auto-completable.
                     match: /(?<=ACCEPTED,\i=)(?=\i&&)/,
@@ -385,41 +384,39 @@ export default definePlugin({
                 {
                     // Prevent the platform selector if the Quest is auto-completable.
                     match: /(?<=SELECT,\i=)(?=\i&&)/,
-                    replace: "!$self.canAutoCompleteQuest(arguments[0].quest)&&"
+                    replace: "questifySelectedPlatformDropdownVisible=!$self.canAutoCompleteQuest(arguments[0].quest)&&"
                 },
-                // If this group becomes unruly due to Discord refactoring and is unfixable,
-                // the 2nd, 3rd, and 4th can be commented out in favor of just the 1st at the
-                // expense of not seeing CTA buttons on completed but unclaimed Quests.
                 {
-                    // Always expose the CTA button when available instead of only for videos and activities.
-                    match: /(?<=wrap:!1,children:\[)\i&&[^?]+/,
-                    replace: "!!arguments[0].quest.config.ctaConfig"
+                    // Always expose the CTA button when available instead of only for videos and activities,
+                    // unless the selected platform dropdown is already taking the secondary slot.
+                    match: /(?<=wrap:!1,children:\[)(\i&&[^?]+)/,
+                    replace: "((!!arguments[0].quest.config.ctaConfig&&!questifySelectedPlatformDropdownVisible)||($1))"
                 },
                 {
                     // Let completed/claimed expired Quests with CTAs use the CTA-aware completed branch.
-                    match: /(?<=return\()(?=\i.enabled&&\i===\i\.\i\.EXPIRED_CLAIMABLE&&\i\.\i\.has\(\i\))/,
-                    replace: "!arguments[0].quest.config.ctaConfig&&"
+                    match: /(return\()(?=\i.enabled&&\i===\i\.\i\.EXPIRED_CLAIMABLE&&\i\.\i\.has\(\i\))/,
+                    replace: "$1!arguments[0].quest.config.ctaConfig&&"
                 },
                 {
                     // Let completed/claimed expired Quests with CTAs use the CTA-aware completed branch.
-                    match: /(?<=\):\i\?\i=)(\i)(?=\?\(0,\i\.jsx\)\(\i,\{quest:\i,sourceQuestContent:\i,onClick:\i,text:\i\}\):\(0,\i\.\i\)\(\i\)\?)/,
-                    replace: "arguments[0].quest.config.ctaConfig||$1"
+                    match: /(?<=\):\i\?\i=)(\i)(?=\?\(0,\i\.jsx\)\(\i,\{quest:\i,sourceQuestContent:\i,onClick:\i,text:\i\}\):)/,
+                    replace: "(arguments[0].quest.config.ctaConfig||$1)"
                 },
                 {
                     // Force the CTA-aware complete branch.
-                    match: /(?<=analyticsCtxQuestContentRowIndex:\i}\)}\):\i&&\i)(.{0,200}?fullWidth:!0}\)}\):)(\i.enabled)(.{0,50}?CLAIMED\))&&\i.\i.has\(\i\)(\?\i=)\i/,
-                    replace: "&&false$1arguments[0].quest.config.ctaConfig&&arguments[0].quest.userStatus?.completedAt&&($2||true)$3$4true"
+                    match: /(?<=analyticsCtxQuestContentRowIndex:\i}\)}\):\i&&\i)(.{0,200}?fullWidth:!0}\)}\):)(\i.enabled.{0,50}?CLAIMED\)&&\i.\i.has\(\i\))(\?\i=)(\i)/,
+                    replace: "&&false$1((arguments[0].quest.config.ctaConfig&&arguments[0].quest.userStatus?.completedAt)||($2))$3(true||$4)"
                 }
             ]
         },
         {
-            find: ".rowIndex,trackGuildAndChannelMetadata",
+            find: "return`quest-tile-",
             group: true,
             predicate: () => !getQuestifySettings().disableQuestsEverything,
             replacement: [
                 {
                     // Subscribes each Quest tile to Questify's manual rerender trigger.
-                    match: /(?=return\(0,\i\.\i\)\("div",\{id:`quest-tile-\$\{\i\.id\}`)/,
+                    match: /(?=return\(0,\i\.\i\)\("article",\{id:)/,
                     replace: "void $self.useQuestRerender();"
                 },
                 {
@@ -622,8 +619,15 @@ export default definePlugin({
     renderQuestifyButton: ErrorBoundary.wrap(QuestButton, { noop: true }),
 
     start() {
+        if (!enabledOnStartup && PlainSettings.plugins.Questify?.enabled) {
+            setRestartDirty(true);
+        }
+
         initializeRestartTracking(settings);
-        addServerListElement(ServerListRenderPosition.Above, this.renderQuestifyButton);
+
+        if (enabledOnStartup) {
+            addServerListElement(ServerListRenderPosition.Above, this.renderQuestifyButton);
+        }
 
         onceReady.then(() => {
             if (!getQuestifySettings().disableQuestsEverything) {
diff --git a/src/equicordplugins/questify/settings/restartTracking.ts b/src/equicordplugins/questify/settings/restartTracking.ts
index 19aa59c03..93acdbe99 100644
--- a/src/equicordplugins/questify/settings/restartTracking.ts
+++ b/src/equicordplugins/questify/settings/restartTracking.ts
@@ -48,6 +48,10 @@ export function isRestartDirty(): boolean {
     return restartDirty;
 }
 
+export function setRestartDirty(dirty: boolean): void {
+    restartDirty = dirty;
+}
+
 export function promptToRestartIfDirty(): boolean {
     if (!restartDirty) {
         return false;
diff --git a/src/equicordplugins/questify/styles.css b/src/equicordplugins/questify/styles.css
index 788b92ddf..99348eb8c 100644
--- a/src/equicordplugins/questify/styles.css
+++ b/src/equicordplugins/questify/styles.css
@@ -74,7 +74,7 @@
     line-height: 0.2em;
 }
 
-[class*="clickTrapContainer"] > div > div:has(.questify-settings-tooltip-content) {
+[class*="clickTrapContainer"] > div > .questify-settings-tooltip {
     margin-right: 4px;
 }
 
@@ -585,4 +585,4 @@ div[id^="quest-tile-"] div[class^="confetti__"] {
 
 .questify-quest-button-container {
     position: relative;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/quoter/index.tsx b/src/equicordplugins/quoter/index.tsx
index 2540e7ef9..c96e646f2 100644
--- a/src/equicordplugins/quoter/index.tsx
+++ b/src/equicordplugins/quoter/index.tsx
@@ -5,15 +5,13 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
 import { FormSwitch } from "@components/FormSwitch";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { Message } from "@vencord/discord-types";
-import { Button, IconUtils, Menu, TextInput, UploadHandler, useEffect, useState } from "@webpack/common";
+import { Message, RenderModalProps } from "@vencord/discord-types";
+import { IconUtils, Menu, Modal, openModal, TextInput, UploadHandler, useEffect, useState } from "@webpack/common";
 
 import { QuoteIcon } from "./components/QuoteIcon";
 import { QuoteFont } from "./types";
@@ -90,7 +88,7 @@ export default definePlugin({
     }
 });
 
-function QuoteModal({ message, ...props }: ModalProps & { message: Message; }) {
+function QuoteModal({ message, ...props }: RenderModalProps & { message: Message; }) {
     const [gray, setGray] = useState(settings.store.grayscale);
     const [showWatermark, setShowWatermark] = useState(settings.store.showWatermark);
     const [saveAsGif, setSaveAsGif] = useState(settings.store.saveAsGif);
@@ -167,49 +165,48 @@ function QuoteModal({ message, ...props }: ModalProps & { message: Message; }) {
     };
 
     return (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader separator={false}>
-                <BaseText color="text-strong" size="lg" weight="semibold" tag="h1" style={{ flexGrow: 1 }}>
-                    Catch Them In 4K.
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-            <ModalContent scrollbarType="none">
-                <img alt="Quote preview" src="" id="quoterPreview" style={{ borderRadius: "20px", width: "100%", marginBottom: "20px" }} />
+        <Modal
+            {...props}
+            size="md"
+            title="Catch Them In 4K."
+            actions={[
+                {
+                    text: "Export",
+                    variant: "primary",
+                    onClick: handleExport
+                },
+                {
+                    text: "Send",
+                    variant: "primary",
+                    onClick: handleSendInChat
+                }
+            ]}
+        >
+            <img alt="Quote preview" src="" id="quoterPreview" style={{ borderRadius: "20px", width: "100%", marginBottom: "20px" }} />
 
-                <FormSwitch title="Grayscale" value={gray} onChange={setGray} />
-                <FormSwitch
-                    title="Save as GIF"
-                    value={saveAsGif}
-                    onChange={setSaveAsGif}
-                    description="Saves/Sends the image as a GIF instead of a PNG"
-                />
-                <FormSwitch
-                    title="Show Watermark"
-                    value={showWatermark}
-                    onChange={setShowWatermark}
-                    hideBorder={showWatermark}
-                />
-                {showWatermark && (
-                    <div style={{ marginTop: "8px", marginBottom: "20px" }}>
-                        <TextInput
-                            value={watermarkText}
-                            onChange={setWatermarkText}
-                            placeholder="Watermark text (max 32 characters)"
-                            maxLength={32}
-                        />
-                    </div>
-                )}
-
-                <div style={{ display: "flex", gap: "8px", marginTop: "16px", marginBottom: "16px" }}>
-                    <Button color={Button.Colors.BRAND} size={Button.Sizes.MEDIUM} onClick={handleExport}>
-                        Export
-                    </Button>
-                    <Button color={Button.Colors.BRAND} size={Button.Sizes.MEDIUM} onClick={handleSendInChat}>
-                        Send
-                    </Button>
+            <FormSwitch title="Grayscale" value={gray} onChange={setGray} />
+            <FormSwitch
+                title="Save as GIF"
+                value={saveAsGif}
+                onChange={setSaveAsGif}
+                description="Saves/Sends the image as a GIF instead of a PNG"
+            />
+            <FormSwitch
+                title="Show Watermark"
+                value={showWatermark}
+                onChange={setShowWatermark}
+                hideBorder={showWatermark}
+            />
+            {showWatermark && (
+                <div style={{ marginTop: "8px", marginBottom: "20px" }}>
+                    <TextInput
+                        value={watermarkText}
+                        onChange={setWatermarkText}
+                        placeholder="Watermark text (max 32 characters)"
+                        maxLength={32}
+                    />
                 </div>
-            </ModalContent>
-        </ModalRoot>
+            )}
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/randomVoice/index.tsx b/src/equicordplugins/randomVoice/index.tsx
index 5a0a8c0e1..f50b1e472 100644
--- a/src/equicordplugins/randomVoice/index.tsx
+++ b/src/equicordplugins/randomVoice/index.tsx
@@ -4,22 +4,33 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
 import { definePluginSettings } from "@api/Settings";
 import { UserAreaButton, UserAreaRenderProps } from "@api/UserArea";
+import { Button } from "@components/Button";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Switch } from "@components/Switch";
 import { debounce } from "@shared/debounce";
-import { Devs, EquicordDevs } from "@utils/constants";
+import { Devs, EquicordDevs, IS_MAC } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
 import { t } from "@utils/translation";
 import definePlugin, { makeRange, OptionType } from "@utils/types";
 import type { Channel, VoiceState } from "@vencord/discord-types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { ChannelActions, ChannelRouter, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, MediaEngineStore, Menu, PermissionsBits, PermissionStore, React, RelationshipStore, SelectedChannelStore, Toasts, UserStore, VoiceActions, VoiceStateStore } from "@webpack/common";
+import { ChannelActions, ChannelRouter, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, MediaEngineStore, Menu, PermissionsBits, PermissionStore, React, RelationshipStore, SelectedChannelStore, Toasts, useEffect, UserStore, useState, VoiceActions, VoiceStateStore } from "@webpack/common";
 
 const startStream = findByCodeLazy('type:"STREAM_START"');
 const getDesktopSources = findByCodeLazy("desktop sources");
 const { isVideoEnabled } = findByPropsLazy("isVideoEnabled");
 const NO_SERVERS = "__NONE__";
+const DEFAULT_KEYBIND = IS_MAC ? ["Meta", "Shift", "R"] : ["Control", "Shift", "R"];
+const MODIFIER_KEYS = new Set(["control", "ctrl", "shift", "alt", "option", "meta", "cmd", "command", "mod"]);
 
-type RandomVoiceOperation = "<" | ">" | "==";
+let isRecordingKeybind = false;
+const cl = classNameFactory("vc-random-voice-");
+
+type RandomVoiceOperation = "<" | ">" | "==" | string;
 type StateFilterKey = "mute" | "deafen" | "video" | "stream";
 type SelfSettingKey = "selfMute" | "selfDeafen" | "autoCamera" | "autoStream" | "leaveEmpty" | "autoNavigate" | "avoidStages" | "avoidAfk" | "prioritizeFriends";
 type PostJoinAction = () => void | Promise<void>;
@@ -69,12 +80,178 @@ interface RandomVoiceStateLike {
     selfVideo?: boolean | null;
 }
 
+function RandomVoiceKeybindSettings() {
+    const [isListening, setIsListening] = useState(false);
+    const { keybind, keybindEnabled } = settings.use();
+
+    useEffect(() => {
+        isRecordingKeybind = isListening;
+        if (!isListening) return;
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (isModifierKey(event.key)) return;
+
+            settings.store.keybind = eventToKeybind(event);
+            setIsListening(false);
+        };
+
+        const handleBlur = () => setIsListening(false);
+
+        document.addEventListener("keydown", handleKeyDown, true);
+        window.addEventListener("blur", handleBlur);
+
+        return () => {
+            isRecordingKeybind = false;
+            document.removeEventListener("keydown", handleKeyDown, true);
+            window.removeEventListener("blur", handleBlur);
+        };
+    }, [isListening]);
+
+    return (
+        <div className={cl("record")}>
+            <div className={cl("keybind")}>Keybind</div>
+            <Switch checked={keybindEnabled} onChange={value => { settings.store.keybindEnabled = value; }} />
+            {keybindEnabled && (
+                <div className={cl("recording")}>
+                    <Button type="button" variant="secondary" onClick={() => setIsListening(true)} disabled={isListening}>
+                        {isListening ? "Recording..." : formatKeybind(keybind)}
+                    </Button>
+                    <Button type="button" variant="secondary" onClick={() => { settings.store.keybind = DEFAULT_KEYBIND; }} disabled={isListening}>
+                        Reset
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+function formatKeybind(keybind: string | string[]) {
+    const keybindString = Array.isArray(keybind) ? keybind.join("+") : keybind;
+    return IS_MAC
+        ? keybindString.replace(/Control/gi, "^").replace(/Meta|Command|Cmd/gi, "⌘").replace(/Alt|Option/gi, "⌥").replace(/Shift/gi, "⇧")
+        : keybindString;
+}
+
+function eventToKeybind(event: KeyboardEvent) {
+    const keys: string[] = [];
+    addPressedModifiers(event, keys);
+    keys.push(normalizeKey(event.key));
+    return keys;
+}
+
+function getConfiguredKeybind() {
+    const raw = settings.store.keybind;
+    if (Array.isArray(raw) && raw.some(key => !isModifierKey(key))) return raw;
+    return DEFAULT_KEYBIND;
+}
+
+function matchesKeybind(event: KeyboardEvent) {
+    const keybind = getConfiguredKeybind().map(key => key.toLowerCase());
+    const pressed = normalizeKey(event.key).toLowerCase();
+    const code = normalizeCode(event.code);
+    let nonModifierMatched = false;
+
+    if (!matchesModifiers(event, keybind)) return false;
+
+    for (const key of keybind) {
+        if (isModifierKey(key)) continue;
+
+        if (pressed !== key && code !== key) return false;
+        nonModifierMatched = true;
+    }
+
+    return nonModifierMatched;
+}
+
+function isModifierKey(key: string) {
+    return MODIFIER_KEYS.has(key.toLowerCase());
+}
+
+function matchesModifiers(event: KeyboardEvent, keybind: string[]) {
+    const expected = new Set(keybind.map(getModifierKey).filter(key => key !== null));
+    const pressed = new Set<string>();
+
+    if (event.ctrlKey) pressed.add("control");
+    if (event.shiftKey) pressed.add("shift");
+    if (event.altKey) pressed.add("alt");
+    if (event.metaKey) pressed.add("meta");
+
+    return expected.size === pressed.size && [...expected].every(key => pressed.has(key));
+}
+
+function getModifierKey(key: string) {
+    switch (key) {
+        case "mod":
+            return IS_MAC ? "meta" : "control";
+        case "control":
+        case "ctrl":
+            return "control";
+        case "shift":
+            return "shift";
+        case "alt":
+        case "option":
+            return "alt";
+        case "meta":
+        case "cmd":
+        case "command":
+            return "meta";
+        default:
+            return null;
+    }
+}
+
+function addPressedModifiers(event: KeyboardEvent, keys: string[]) {
+    if (event.metaKey) keys.push("Meta");
+    if (event.ctrlKey) keys.push("Control");
+    if (event.shiftKey) keys.push("Shift");
+    if (event.altKey) keys.push("Alt");
+}
+
+function keybindUsesModifier() {
+    return getConfiguredKeybind().some(isModifierKey);
+}
+
+function normalizeKey(key: string) {
+    if (key === " ") return "Space";
+    if (key === "Esc") return "Escape";
+    return key.length === 1 ? key.toUpperCase() : key;
+}
+
+function normalizeCode(code: string) {
+    return code
+        .toLowerCase()
+        .replace(/^key/, "")
+        .replace(/^digit/, "")
+        .replace(/^numpad/, "");
+}
+
+function shouldIgnoreKeybindTarget(target: EventTarget | null) {
+    return target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+}
+
 const settings = definePluginSettings({
+    keybind: {
+        type: OptionType.COMPONENT,
+        default: DEFAULT_KEYBIND,
+        component: ErrorBoundary.wrap(RandomVoiceKeybindSettings),
+    },
+    keybindEnabled: {
+        description: "Show the random voice keybind controls",
+        type: OptionType.BOOLEAN,
+        default: false,
+        hidden: true,
+    },
     UserAmountOperation: {
         description: "Select an operation for the amounts of users",
         type: OptionType.SELECT,
-        options: [...operationOptions],
-        default: "<",
+        options: [
+            { label: "More than", value: "<", default: true },
+            { label: "Less than", value: ">", default: false },
+            { label: "Equal to", value: "==", default: false },
+        ],
     },
     UserAmount: {
         description: "Select amount of users",
@@ -86,8 +263,11 @@ const settings = definePluginSettings({
     spacesLeftOperation: {
         description: "Select an operation for the maximum amounts of users",
         type: OptionType.SELECT,
-        options: [...operationOptions],
-        default: "<",
+        options: [
+            { label: "More than", value: "<", default: true },
+            { label: "Less than", value: ">", default: false },
+            { label: "Equal to", value: "==", default: false },
+        ],
     },
     spacesLeft: {
         description: "Select amount of max users",
@@ -99,8 +279,11 @@ const settings = definePluginSettings({
     vcLimitOperation: {
         description: "Select an operation for the voice-channel.",
         type: OptionType.SELECT,
-        options: [...operationOptions],
-        default: "<",
+        options: [
+            { label: "More than", value: "<", default: true },
+            { label: "Less than", value: ">", default: false },
+            { label: "Equal to", value: "==", default: false },
+        ],
     },
     vcLimit: {
         description: "Select a voice-channel limit",
@@ -682,6 +865,25 @@ export default definePlugin({
         render: RandomVoiceButton,
     },
 
+    start() {
+        window.addEventListener("keydown", this.onKeyDown, true);
+    },
+
+    stop() {
+        window.removeEventListener("keydown", this.onKeyDown, true);
+    },
+
+    onKeyDown(event: KeyboardEvent) {
+        if (isRecordingKeybind) return;
+        if (!settings.store.keybindEnabled) return;
+        if (shouldIgnoreKeybindTarget(event.target) && !keybindUsesModifier()) return;
+        if (!matchesKeybind(event)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        void joinRandomVoice();
+    },
+
     flux: {
         VOICE_STATE_UPDATES({ voiceStates }: { voiceStates: VoiceState[]; }) {
             const currentUserId = getCurrentUserId();
diff --git a/src/equicordplugins/randomVoice/styles.css b/src/equicordplugins/randomVoice/styles.css
new file mode 100644
index 000000000..5241bb47e
--- /dev/null
+++ b/src/equicordplugins/randomVoice/styles.css
@@ -0,0 +1,15 @@
+.vc-random-voice-record {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.vc-random-voice-keybind {
+    color: "var(--text-muted)"
+}
+
+.vc-random-voice-recording {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/equicordplugins/recentDMSwitcher/index.tsx b/src/equicordplugins/recentDMSwitcher/index.tsx
index 99e7fcaae..2449e93fc 100644
--- a/src/equicordplugins/recentDMSwitcher/index.tsx
+++ b/src/equicordplugins/recentDMSwitcher/index.tsx
@@ -10,10 +10,9 @@ import * as DataStore from "@api/DataStore";
 import { definePluginSettings } from "@api/Settings";
 import { EquicordDevs, IS_MAC } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
-import { closeModal, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { makeRange, OptionType } from "@utils/types";
-import { Button, ChannelRouter, ChannelStore, IconUtils, React, RelationshipStore, SelectedChannelStore, Toasts, UserStore } from "@webpack/common";
+import { Button, ChannelRouter, ChannelStore, closeModal, IconUtils, openModal,React, RelationshipStore, SelectedChannelStore, Toasts, UserStore } from "@webpack/common";
 
 const STORAGE_KEY = "RDMSwitch_history";
 
diff --git a/src/equicordplugins/remix/RemixModal.tsx b/src/equicordplugins/remix/RemixModal.tsx
index c77414f47..1ad9912cc 100644
--- a/src/equicordplugins/remix/RemixModal.tsx
+++ b/src/equicordplugins/remix/RemixModal.tsx
@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
-import { Button } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, React } from "@webpack/common";
 
 import { sendRemix } from ".";
 import { brushCanvas, canvas, cropCanvas, ctx, exportImg, shapeCanvas } from "./editor/components/Canvas";
@@ -15,7 +14,7 @@ import { resetBounds } from "./editor/tools/crop";
 import { SendIcon } from "./icons/SendIcon";
 
 type Props = {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     close: () => void;
     url?: string;
 };
@@ -38,18 +37,28 @@ async function closeModal(closeFunc: () => void, save?: boolean) {
 
 export default function RemixModal({ modalProps, close, url }: Props) {
     return (
-        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Remix</BaseText>
-                <ModalCloseButton onClick={() => closeModal(close)} />
-            </ModalHeader>
-            <ModalContent>
-                <Editor url={url} />
-            </ModalContent>
-            <ModalFooter className="vc-remix-modal-footer">
-                <Button onClick={() => closeModal(close, true)} className="vc-remix-send"><SendIcon /> Send</Button>
-                <Button onClick={() => closeModal(close)} color={Button.Colors.RED}>Close</Button>
-            </ModalFooter>
-        </ModalRoot>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Remix"
+            actions={[
+                {
+                    text: (
+                        <span style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                            <SendIcon /> Send
+                        </span>
+                    ) as any,
+                    variant: "primary",
+                    onClick: () => closeModal(close, true)
+                },
+                {
+                    text: "Close",
+                    variant: "dangerPrimary",
+                    onClick: () => closeModal(close)
+                }
+            ]}
+        >
+            <Editor url={url} />
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/remix/index.tsx b/src/equicordplugins/remix/index.tsx
index d0d9066d9..cfda0c50a 100644
--- a/src/equicordplugins/remix/index.tsx
+++ b/src/equicordplugins/remix/index.tsx
@@ -8,11 +8,10 @@ import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/Co
 import { disableStyle, enableStyle } from "@api/Styles";
 import { PaintbrushIcon } from "@components/Icons";
 import { EquicordDevs } from "@utils/constants";
-import { closeModal, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { extractAndLoadChunksLazy } from "@webpack";
-import { ChannelStore, DraftType, FluxDispatcher, Menu, PendingReplyStore, SelectedChannelStore, UploadHandler } from "@webpack/common";
+import { ChannelStore, closeModal, DraftType, FluxDispatcher, Menu, openModal,PendingReplyStore, SelectedChannelStore, UploadHandler } from "@webpack/common";
 
 import RemixModal from "./RemixModal";
 import css from "./styles.css?managed";
diff --git a/src/equicordplugins/scheduledMessages/components/ScheduleTimeModal.tsx b/src/equicordplugins/scheduledMessages/components/ScheduleTimeModal.tsx
index 95f4348af..d9126e8bf 100644
--- a/src/equicordplugins/scheduledMessages/components/ScheduleTimeModal.tsx
+++ b/src/equicordplugins/scheduledMessages/components/ScheduleTimeModal.tsx
@@ -8,9 +8,9 @@ import { Button } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Heading } from "@components/Heading";
 import { classNameFactory } from "@utils/css";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findByPropsLazy } from "@webpack";
-import { ChannelStore, DraftType, showToast, TextInput, Toasts, UploadManager, useState } from "@webpack/common";
+import { ChannelStore, closeModal, DraftType, Modal, openModal, showToast, TextInput, Toasts, UploadManager, useState } from "@webpack/common";
 
 import { ScheduledAttachment } from "../types";
 import { addScheduledMessage, getChannelDisplayInfo } from "../utils";
@@ -23,7 +23,7 @@ function ScheduleTimeModalInner({ channelId, content, attachments, rootProps, cl
     channelId: string;
     content: string;
     attachments?: ScheduledAttachment[];
-    rootProps: ModalProps;
+    rootProps: RenderModalProps;
     close: () => void;
 }) {
     const [scheduleType, setScheduleType] = useState<"delay" | "time">("delay");
@@ -69,74 +69,78 @@ function ScheduleTimeModalInner({ channelId, content, attachments, rootProps, cl
     };
 
     return (
-        <ModalRoot {...rootProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <Heading tag="h2" className={cl("modal-title")}>Schedule Message</Heading>
-                <ModalCloseButton onClick={close} />
-            </ModalHeader>
+        <Modal
+            {...rootProps}
+            size="sm"
+            title="Schedule Message"
+            actions={[
+                {
+                    text: "Schedule",
+                    variant: "primary",
+                    onClick: handleSchedule
+                },
+                {
+                    text: "Cancel",
+                    variant: "secondary",
+                    onClick: close
+                }
+            ]}
+        >
+            <div className={cl("channel-info")}>
+                {avatar && <img src={avatar} className={cl("channel-avatar")} alt="" />}
+                <span className={cl("channel-text")}>
+                    Scheduling for: <strong>{isDM ? name : `#${name}`}</strong>
+                </span>
+            </div>
 
-            <ModalContent className={cl("modal-content")}>
-                <div className={cl("channel-info")}>
-                    {avatar && <img src={avatar} className={cl("channel-avatar")} alt="" />}
-                    <span className={cl("channel-text")}>
-                        Scheduling for: <strong>{isDM ? name : `#${name}`}</strong>
-                    </span>
+            <Heading tag="h5" className={cl("field-label")}>Schedule Type</Heading>
+            <div className={cl("schedule-type-buttons")}>
+                <Button
+                    size="small"
+                    variant={scheduleType === "delay" ? "primary" : "secondary"}
+                    onClick={() => setScheduleType("delay")}
+                >
+                    Delay
+                </Button>
+                <Button
+                    size="small"
+                    variant={scheduleType === "time" ? "primary" : "secondary"}
+                    onClick={() => setScheduleType("time")}
+                >
+                    Specific Time
+                </Button>
+            </div>
+
+            {scheduleType === "delay" ? (
+                <>
+                    <Heading tag="h5" className={cl("field-label")}>Delay (minutes)</Heading>
+                    <TextInput
+                        value={delayMinutes}
+                        onChange={setDelayMinutes}
+                        placeholder="5"
+                        type="number"
+                    />
+                </>
+            ) : (
+                <>
+                    <Heading tag="h5" className={cl("field-label")}>Date & Time</Heading>
+                    <input
+                        type="datetime-local"
+                        className={cl("datetime-input")}
+                        value={scheduledDateTime}
+                        onChange={e => setScheduledDateTime(e.target.value)}
+                        min={new Date().toISOString().slice(0, 16)}
+                    />
+                </>
+            )}
+
+            {error && (
+                <div className={cl("error")}>
+                    <ErrorIcon />
+                    <span>{error}</span>
                 </div>
-
-                <Heading tag="h5" className={cl("field-label")}>Schedule Type</Heading>
-                <div className={cl("schedule-type-buttons")}>
-                    <Button
-                        size="small"
-                        variant={scheduleType === "delay" ? "primary" : "secondary"}
-                        onClick={() => setScheduleType("delay")}
-                    >
-                        Delay
-                    </Button>
-                    <Button
-                        size="small"
-                        variant={scheduleType === "time" ? "primary" : "secondary"}
-                        onClick={() => setScheduleType("time")}
-                    >
-                        Specific Time
-                    </Button>
-                </div>
-
-                {scheduleType === "delay" ? (
-                    <>
-                        <Heading tag="h5" className={cl("field-label")}>Delay (minutes)</Heading>
-                        <TextInput
-                            value={delayMinutes}
-                            onChange={setDelayMinutes}
-                            placeholder="5"
-                            type="number"
-                        />
-                    </>
-                ) : (
-                    <>
-                        <Heading tag="h5" className={cl("field-label")}>Date & Time</Heading>
-                        <input
-                            type="datetime-local"
-                            className={cl("datetime-input")}
-                            value={scheduledDateTime}
-                            onChange={e => setScheduledDateTime(e.target.value)}
-                            min={new Date().toISOString().slice(0, 16)}
-                        />
-                    </>
-                )}
-
-                {error && (
-                    <div className={cl("error")}>
-                        <ErrorIcon />
-                        <span>{error}</span>
-                    </div>
-                )}
-            </ModalContent>
-
-            <ModalFooter className={cl("modal-footer")}>
-                <Button onClick={handleSchedule} variant="positive">Schedule</Button>
-                <Button variant="secondary" onClick={close}>Cancel</Button>
-            </ModalFooter>
-        </ModalRoot>
+            )}
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/scheduledMessages/components/ViewScheduledModal.tsx b/src/equicordplugins/scheduledMessages/components/ViewScheduledModal.tsx
index 1c41e9dbe..0fb99f605 100644
--- a/src/equicordplugins/scheduledMessages/components/ViewScheduledModal.tsx
+++ b/src/equicordplugins/scheduledMessages/components/ViewScheduledModal.tsx
@@ -6,10 +6,9 @@
 
 import { Button } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Heading } from "@components/Heading";
 import { classNameFactory } from "@utils/css";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
-import { ChannelStore, showToast, Toasts, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { ChannelStore, closeModal, Modal, openModal, showToast, Toasts, useState } from "@webpack/common";
 
 import { clearAllScheduledMessages, getChannelDisplayInfo, getScheduledMessages, removeScheduledMessage } from "../utils";
 import { CalendarIcon, TimerIcon } from "./Icons";
@@ -17,7 +16,7 @@ import { CalendarIcon, TimerIcon } from "./Icons";
 const cl = classNameFactory("vc-scheduled-msg-");
 
 interface ViewScheduledModalProps {
-    rootProps: ModalProps;
+    rootProps: RenderModalProps;
     close: () => void;
 }
 
@@ -36,69 +35,74 @@ function ViewScheduledModalInner({ rootProps, close }: ViewScheduledModalProps)
         showToast("All scheduled messages cleared", Toasts.Type.SUCCESS);
     };
 
+    const actions = [
+        {
+            text: "Close",
+            variant: "secondary",
+            onClick: close
+        }
+    ];
+
+    if (messages.length > 0) {
+        actions.unshift({
+            text: "Clear All",
+            variant: "dangerPrimary",
+            onClick: handleClearAll
+        });
+    }
+
     return (
-        <ModalRoot {...rootProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <Heading tag="h2" className={cl("modal-title")}>Scheduled Messages</Heading>
-                {messages.length > 0 && (
-                    <Button size="small" variant="dangerPrimary" onClick={handleClearAll}>
-                        Clear All
-                    </Button>
-                )}
-                <ModalCloseButton onClick={close} />
-            </ModalHeader>
+        <Modal
+            {...rootProps}
+            size="md"
+            title="Scheduled Messages"
+            actions={actions}
+        >
+            {!messages.length ? (
+                <div className={cl("empty-state")}>
+                    <CalendarIcon width={48} height={48} />
+                    <span>No scheduled messages</span>
+                </div>
+            ) : (
+                <div className={cl("message-list")}>
+                    {messages.map(msg => {
+                        const { name, avatar } = getChannelDisplayInfo(msg.channelId);
+                        const channel = ChannelStore.getChannel(msg.channelId);
+                        if (!channel) return null;
 
-            <ModalContent className={cl("modal-content")}>
-                {!messages.length ? (
-                    <div className={cl("empty-state")}>
-                        <CalendarIcon width={48} height={48} />
-                        <span>No scheduled messages</span>
-                    </div>
-                ) : (
-                    <div className={cl("message-list")}>
-                        {messages.map(msg => {
-                            const { name, avatar } = getChannelDisplayInfo(msg.channelId);
-                            const channel = ChannelStore.getChannel(msg.channelId);
-                            if (!channel) return null;
+                        const isDM = channel.isPrivate();
+                        const displayContent = msg.content.length > 200
+                            ? msg.content.slice(0, 200) + "..."
+                            : msg.content;
 
-                            const isDM = channel.isPrivate();
-                            const displayContent = msg.content.length > 200
-                                ? msg.content.slice(0, 200) + "..."
-                                : msg.content;
-
-                            return (
-                                <div key={msg.id} className={cl("message-item")}>
-                                    <div className={cl("message-info")}>
-                                        <div className={cl("message-header")}>
-                                            {avatar && <img src={avatar} className={cl("message-avatar")} alt="" />}
-                                            <span className={cl("message-channel")}>
-                                                {isDM ? name : `#${name}`}
-                                            </span>
-                                        </div>
-                                        <div className={cl("message-time")}>
-                                            <TimerIcon width={14} height={14} />
-                                            <span>{new Date(msg.scheduledTime).toLocaleString()}</span>
-                                        </div>
-                                        <div className={cl("message-content")}>{displayContent}</div>
+                        return (
+                            <div key={msg.id} className={cl("message-item")}>
+                                <div className={cl("message-info")}>
+                                    <div className={cl("message-header")}>
+                                        {avatar && <img src={avatar} className={cl("message-avatar")} alt="" />}
+                                        <span className={cl("message-channel")}>
+                                            {isDM ? name : `#${name}`}
+                                        </span>
                                     </div>
-                                    <Button
-                                        size="small"
-                                        variant="dangerPrimary"
-                                        onClick={() => handleDelete(msg.id)}
-                                    >
-                                        Delete
-                                    </Button>
+                                    <div className={cl("message-time")}>
+                                        <TimerIcon width={14} height={14} />
+                                        <span>{new Date(msg.scheduledTime).toLocaleString()}</span>
+                                    </div>
+                                    <div className={cl("message-content")}>{displayContent}</div>
                                 </div>
-                            );
-                        })}
-                    </div>
-                )}
-            </ModalContent>
-
-            <ModalFooter className={cl("modal-footer")}>
-                <Button onClick={close} variant="secondary">Close</Button>
-            </ModalFooter>
-        </ModalRoot>
+                                <Button
+                                    size="small"
+                                    variant="dangerPrimary"
+                                    onClick={() => handleDelete(msg.id)}
+                                >
+                                    Delete
+                                </Button>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/sekaiStickers/Components/Picker.tsx b/src/equicordplugins/sekaiStickers/Components/Picker.tsx
index 4a50e703d..1be2c7239 100644
--- a/src/equicordplugins/sekaiStickers/Components/Picker.tsx
+++ b/src/equicordplugins/sekaiStickers/Components/Picker.tsx
@@ -4,13 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
 import { Flex } from "@components/Flex";
 import { characters } from "@equicordplugins/sekaiStickers/characters.json";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
-import { React, ScrollerThin, TextInput } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal,React, ScrollerThin, TextInput } from "@webpack/common";
 
-export default function CharSelectModal({ modalProps, setCharacter }: { modalProps: ModalProps; setCharacter?: any; }) {
+export default function CharSelectModal({ modalProps, setCharacter }: { modalProps: RenderModalProps; setCharacter?: any; }) {
     const [search, setSearch] = React.useState<string>("");
 
     const memoedSearchChar = React.useMemo(() => {
@@ -30,22 +29,15 @@ export default function CharSelectModal({ modalProps, setCharacter }: { modalPro
         });
     }, [search, characters]);
     return (
-        <ModalRoot {...modalProps} size={ModalSize.DYNAMIC}>
-            <ModalHeader>
-                <BaseText size="lg" weight="bold" style={{ flexGrow: 1 }}>Select character menu</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} ></ModalCloseButton>
-            </ModalHeader>
-            <ModalContent>
-                <Flex flexDirection="column" style={{ paddingTop: 12 }}>
-                    <TextInput content="mafuyu" placeholder="Mafuyu" onChange={(e: string) => setSearch(e)} />
-                    <ScrollerThin style={{ height: 520 }}>
-                        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 330px)", rowGap: 6, columnGap: 5, gridTemplateRows: "repeat(3, 256px)" }}>
-                            {memoedSearchChar}
-                        </div>
-                    </ScrollerThin>
-                </Flex>
-
-            </ModalContent>
-        </ModalRoot>
+        <Modal {...modalProps} size="lg" title="Select character menu">
+            <Flex flexDirection="column" style={{ paddingTop: 12 }}>
+                <TextInput content="mafuyu" placeholder="Mafuyu" onChange={(e: string) => setSearch(e)} />
+                <ScrollerThin style={{ height: 520 }}>
+                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 330px)", rowGap: 6, columnGap: 5, gridTemplateRows: "repeat(3, 256px)" }}>
+                        {memoedSearchChar}
+                    </div>
+                </ScrollerThin>
+            </Flex>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
index 3b75dcbb9..da0465f84 100644
--- a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
+++ b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
@@ -4,18 +4,17 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
 import { Flex } from "@components/Flex";
 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 { RenderModalProps } from "@vencord/discord-types";
+import { ChannelStore, Modal, openModal, React, SelectedChannelStore, Slider, TextArea, UploadHandler } from "@webpack/common";
 
 import Canvas from "./Canvas";
 import CharSelectModal from "./Picker";
 
-export default function SekaiStickersModal({ modalProps, settings }: { modalProps: ModalProps; settings: any; }) {
+export default function SekaiStickersModal({ modalProps, settings }: { modalProps: RenderModalProps; settings: any; }) {
     const [text, setText] = React.useState<string>("奏でーかわいい");
     const [character, setChracter] = React.useState<number>(49);
     const [fontSize, setFontSize] = React.useState<number>(characters[character].defaultText.s);
@@ -97,45 +96,51 @@ export default function SekaiStickersModal({ modalProps, settings }: { modalProp
         }
     };
     return (
-        <ModalRoot {...modalProps} size={ModalSize.DYNAMIC}>
-            <ModalHeader>
-                <BaseText size="lg" weight="bold" style={{ flexGrow: 1 }}>Sekai Stickers</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} ></ModalCloseButton>
-            </ModalHeader>
-            <ModalContent>
-                <Flex flexDirection="row" style={{ paddingTop: 12 }}>
-                    <div style={{ marginRight: 30 }}>
-                        <Canvas draw={draw} id="SekaiCard_Canvas" />
-                        <Heading>Text Y Pos</Heading>
-                        <Slider minValue={0} maxValue={256} asValueChanges={va => { va = Math.round(va); setPosition({ x: position.x, y: curve ? 256 + fontSize * 3 - va : 256 - va }); }} initialValue={curve ? 256 - position.y + fontSize * 3 : 256 - position.y} orientation={"vertical"} onValueRender={va => String(Math.round(va))} />
-                        <Heading>Text XZ Pos</Heading>
-                        <Slider minValue={0} maxValue={296} asValueChanges={va => { va = Math.round(va); setPosition({ y: position.y, x: va }); }} initialValue={position.x} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
-                    </div>
-                    <div style={{ marginRight: 10, width: "30vw" }}>
-                        <Heading>Text</Heading>
-                        <TextArea 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>
-                        <Slider minValue={10} asValueChanges={val => setFontSize(Math.round(val))} maxValue={100} initialValue={fontSize} keyboardStep={1} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
-                        <Heading>Spacing</Heading>
-                        <Slider markers={[18, 36, 72, 100]} stickToMarkers={false} minValue={18} maxValue={100} initialValue={spaceSize} asValueChanges={e => setSpaceSize(e)} onValueRender={e => String(Math.round(e))} />
-                        <FormSwitch title="Enable curve" value={curve} onChange={val => setCurve(val)} />
-                        <Button onClick={() => openModal(props => <CharSelectModal modalProps={props} setCharacter={setChracter} />)}>Switch Character</Button>
-                    </div>
-                </Flex>
-            </ModalContent>
-            <ModalFooter>
-                <Flex flexDirection="row" style={{ gap: 12 }}>
-                    <Button onClick={() => {
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Sekai Stickers"
+            actions={[
+                {
+                    text: "Switch Character",
+                    variant: "primary",
+                    onClick: () => {
+                        openModal(props => <CharSelectModal modalProps={props} setCharacter={setChracter} />);
+                    }
+                },
+                {
+                    text: "Upload as Attachment",
+                    variant: "primary",
+                    onClick: () => {
                         if (settings.store.AutoCloseModal) modalProps.onClose();
                         canvast.toBlob(blob => {
                             const file = new File([blob as Blob], `${characters[character].character}-sekai_cards.png`, { type: "image/png" });
                             UploadHandler.promptToUpload([file], ChannelStore.getChannel(SelectedChannelStore.getChannelId()), 0);
                         });
-                    }}>Upload as Attachment</Button>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+                    }
+                }
+            ]}
+        >
+            <Flex flexDirection="row" style={{ paddingTop: 12 }}>
+                <div style={{ marginRight: 30 }}>
+                    <Canvas draw={draw} id="SekaiCard_Canvas" />
+                    <Heading>Text Y Pos</Heading>
+                    <Slider minValue={0} maxValue={256} asValueChanges={va => { va = Math.round(va); setPosition({ x: position.x, y: curve ? 256 + fontSize * 3 - va : 256 - va }); }} initialValue={curve ? 256 - position.y + fontSize * 3 : 256 - position.y} orientation={"vertical"} onValueRender={va => String(Math.round(va))} />
+                    <Heading>Text XZ Pos</Heading>
+                    <Slider minValue={0} maxValue={296} asValueChanges={va => { va = Math.round(va); setPosition({ y: position.y, x: va }); }} initialValue={position.x} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
+                </div>
+                <div style={{ marginRight: 10, width: "30vw" }}>
+                    <Heading>Text</Heading>
+                    <TextArea 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>
+                    <Slider minValue={10} asValueChanges={val => setFontSize(Math.round(val))} maxValue={100} initialValue={fontSize} keyboardStep={1} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
+                    <Heading>Spacing</Heading>
+                    <Slider markers={[18, 36, 72, 100]} stickToMarkers={false} minValue={18} maxValue={100} initialValue={spaceSize} asValueChanges={e => setSpaceSize(e)} onValueRender={e => String(Math.round(e))} />
+                    <FormSwitch title="Enable curve" value={curve} onChange={val => setCurve(val)} />
+                </div>
+            </Flex>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/sekaiStickers/index.tsx b/src/equicordplugins/sekaiStickers/index.tsx
index bea2ed1c7..ff777b09a 100644
--- a/src/equicordplugins/sekaiStickers/index.tsx
+++ b/src/equicordplugins/sekaiStickers/index.tsx
@@ -7,9 +7,9 @@
 import { ChatBarButton, ChatBarButtonFactory } from "@api/ChatButtons";
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
+import { openModal } from "@webpack/common";
 
 import SekaiStickersModal from "./Components/SekaiStickersModal";
 import { kanadeSvg } from "./kanade.svg";
diff --git a/src/equicordplugins/soggy/index.tsx b/src/equicordplugins/soggy/index.tsx
index 133765c71..813cd8051 100644
--- a/src/equicordplugins/soggy/index.tsx
+++ b/src/equicordplugins/soggy/index.tsx
@@ -8,10 +8,10 @@ import { AudioPlayerInterface, createAudioPlayer } from "@api/AudioPlayer";
 import { HeaderBarButton } from "@api/HeaderBar";
 import { definePluginSettings } from "@api/Settings";
 import { EquicordDevs } from "@utils/constants";
-import { ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { React } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal,openModal, React } from "@webpack/common";
 let boopSound: AudioPlayerInterface;
 let song: AudioPlayerInterface;
 
@@ -27,7 +27,7 @@ function assignBoop(url: string, volume: number) {
     boopSound.load();
 }
 
-function SoggyModal(props: ModalProps) {
+function SoggyModal(props: RenderModalProps) {
     if (settings.store.songVolume !== 0) {
         React.useEffect(() => {
             song?.loop();
@@ -55,14 +55,13 @@ function SoggyModal(props: ModalProps) {
     };
 
     return (
-        <ModalRoot {...props}>
+        <Modal {...props} size="dynamic" title="Soggy Cat">
             <img
                 src={settings.store.imageLink}
                 onClick={boop}
                 style={{ display: "block" }}
-
             />
-        </ModalRoot >
+        </Modal>
     );
 }
 
diff --git a/src/equicordplugins/songLink.desktop/SongLinker.tsx b/src/equicordplugins/songLink.desktop/SongLinker.tsx
index 158baad3d..decc26843 100644
--- a/src/equicordplugins/songLink.desktop/SongLinker.tsx
+++ b/src/equicordplugins/songLink.desktop/SongLinker.tsx
@@ -12,19 +12,28 @@ import { Button, useEffect, useState } from "@webpack/common";
 import pl, { Native, settings, SongLinkResult } from ".";
 import { Providers } from "./Providers";
 
-export default function SongLinker({ url }: { url: string; }) {
+interface SongLinkerProps {
+    url: string;
+    onResolved?: (url: string, result: SongLinkResult) => void;
+}
+
+export default function SongLinker({ url, onResolved }: SongLinkerProps) {
     const [songData, setSongData] = useState<SongLinkResult>();
 
     useEffect(() => {
         async function doStuff() {
-            if (pl.cache[url]) return void setSongData(pl.cache[url]);
-
-            const sd = await Native.getTrackData(url);
+            let sd: SongLinkResult;
+            if (pl.cache[url]) {
+                sd = pl.cache[url];
+            } else {
+                sd = await Native.getTrackData(url);
+                pl.addToCache(url, sd);
+            }
             setSongData(sd);
-            pl.addToCache(url, sd);
+            onResolved?.(url, sd);
         }
         doStuff();
-    });
+    }, [url]);
 
     return <BaseText>
         {
diff --git a/src/equicordplugins/songLink.desktop/index.tsx b/src/equicordplugins/songLink.desktop/index.tsx
index 39062b7d6..22a62595a 100644
--- a/src/equicordplugins/songLink.desktop/index.tsx
+++ b/src/equicordplugins/songLink.desktop/index.tsx
@@ -10,6 +10,7 @@ import { Devs, EquicordDevs } from "@utils/constants";
 import { sendMessage } from "@utils/discord";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType, PluginNative } from "@utils/types";
+import { useEffect, useState } from "@webpack/common";
 
 import { Providers } from "./Providers";
 import { Settings } from "./Settings";
@@ -84,6 +85,43 @@ function formatMessage(data: SongLinkResult): string | null {
     return parts.join("\n");
 }
 
+function SongLinkerList({ urls }: { urls: string[]; }) {
+    const [resolvedKeys, setResolvedKeys] = useState<Record<string, string | null>>(
+        () => Object.fromEntries(urls.map(u => [u, null]))
+    );
+
+    useEffect(() => {
+        setResolvedKeys(Object.fromEntries(urls.map(u => [u, null])));
+    }, [urls.join("\n")]);
+
+    function onResolved(url: string, result: SongLinkResult) {
+        const key = result.info
+            ? `${result.info.title}\0${result.info.artist}`
+            : url;
+        setResolvedKeys(prev => prev[url] === key ? prev : { ...prev, [url]: key });
+    }
+
+    const seenKeys = new Set<string>();
+    const dedupedUrls = urls.filter(url => {
+        const key = resolvedKeys[url];
+        if (key === null) return true;
+        if (seenKeys.has(key)) return false;
+        seenKeys.add(key);
+        return true;
+    });
+
+    return <div style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        marginTop: "7px"
+    }}>
+        {dedupedUrls.map(url => (
+            <SongLinker key={url} url={url} onResolved={onResolved} />
+        ))}
+    </div>;
+}
+
 export default definePlugin({
     name: "SongLink",
     description: t("equicord.songLink.description"),
@@ -108,19 +146,12 @@ export default definePlugin({
             /https:\/\/music\.youtube\.com\/watch\?v=[0-9A-Za-z_-]+/, // yt music
             /https:\/\/tidal\.com\/track\/[0-9]+\/u/ // tidal
         ];
-        const musicLinks = content.match(new RegExp(regexes.map(r => r.source).join("|"), "g"));
-        if (!musicLinks?.length) return;
+        const allMatches = content.match(new RegExp(regexes.map(r => r.source).join("|"), "g"));
+        if (!allMatches?.length) return;
 
-        return <div style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "10px",
-            marginTop: "7px"
-        }}>
-            {
-                musicLinks.map(item => <SongLinker key={item} url={item} />)
-            }
-        </div>;
+        const musicLinks = [...new Set(allMatches)];
+
+        return <SongLinkerList urls={musicLinks} />;
     },
     commands: [
         {
diff --git a/src/equicordplugins/songSpotlight.desktop/index.tsx b/src/equicordplugins/songSpotlight.desktop/index.tsx
index b870b58db..8e9f99f40 100644
--- a/src/equicordplugins/songSpotlight.desktop/index.tsx
+++ b/src/equicordplugins/songSpotlight.desktop/index.tsx
@@ -58,6 +58,9 @@ export default definePlugin({
         useAuthorizationStore.persist.rehydrate();
     },
 
-    renderProfileCollection: ProfileSongs,
+    renderProfileCollection: {
+        render: ProfileSongs,
+        priority: 0,
+    },
     renderWidgetSongs: ErrorBoundary.wrap(WidgetSongs, { noop: true }),
 });
diff --git a/src/equicordplugins/songSpotlight.desktop/lib/oauth2.tsx b/src/equicordplugins/songSpotlight.desktop/lib/oauth2.tsx
index 7bf8e2847..2cee55f1f 100644
--- a/src/equicordplugins/songSpotlight.desktop/lib/oauth2.tsx
+++ b/src/equicordplugins/songSpotlight.desktop/lib/oauth2.tsx
@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { openModal } from "@utils/modal";
 import { ApplicationIntegrationType } from "@vencord/discord-types/enums";
-import { OAuth2AuthorizeModal, showToast, Toasts } from "@webpack/common";
+import { OAuth2AuthorizeModal, openModal,showToast, Toasts } from "@webpack/common";
 
 import { apiConstants, authFetch, getData } from "./api";
 import { useAuthorizationStore } from "./stores/AuthorizationStore";
diff --git a/src/equicordplugins/songSpotlight.desktop/ui/settings/AddSong.tsx b/src/equicordplugins/songSpotlight.desktop/ui/settings/AddSong.tsx
index 9b0767daa..7085a5fb5 100644
--- a/src/equicordplugins/songSpotlight.desktop/ui/settings/AddSong.tsx
+++ b/src/equicordplugins/songSpotlight.desktop/ui/settings/AddSong.tsx
@@ -5,7 +5,6 @@
  */
 
 import { BaseText } from "@components/BaseText";
-import { Button } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { PlusIcon } from "@components/Icons";
@@ -13,11 +12,11 @@ import { cl, logger } from "@equicordplugins/songSpotlight.desktop/lib/utils";
 import { Native } from "@equicordplugins/songSpotlight.desktop/service";
 import { parsers } from "@song-spotlight/api/handlers";
 import { Song } from "@song-spotlight/api/structs";
-import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
-import { Clickable, TextInput, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Clickable, closeModal, Modal, openModal, TextInput, useState } from "@webpack/common";
 
 interface AddSongModalProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     close(): void;
     onAdd(song: Song): string | undefined;
 }
@@ -29,64 +28,60 @@ function AddSongModal({ modalProps, close, onAdd }: AddSongModalProps) {
 
     return (
         <ErrorBoundary>
-            <ModalRoot {...modalProps}>
-                <ModalHeader>
-                    <BaseText size="xl" weight="bold">Add a new song</BaseText>
-                </ModalHeader>
-                <ModalContent>
-                    <Flex flexDirection="column" gap="10px">
-                        <BaseText size="md" weight="normal" className={cl("sub")}>
-                            Song Spotlight supports these services: <b>{parsers.map(x => x.label).join(", ")}</b>
-                        </BaseText>
-                        <TextInput
-                            placeholder="https://open.spotify.com/..."
-                            error={error}
-                            onChange={value => {
-                                setURL(value);
-                                try {
-                                    if (value) new URL(value);
-                                    setError(undefined);
-                                } catch {
-                                    setError("Invalid URL");
+            <Modal
+                {...modalProps}
+                size="md"
+                title="Add a new song"
+                actions={[
+                    {
+                        text: "Add song",
+                        variant: "primary",
+                        disabled: !url || !!error || pending,
+                        onClick: async () => {
+                            setPending(true);
+                            try {
+                                const parsed = await Native.parseLink(url);
+                                if (!parsed) {
+                                    setError("Invalid link");
+                                    return setPending(false);
                                 }
-                            }}
-                        />
-                    </Flex>
-                </ModalContent>
-                <ModalFooter>
-                    <Flex justifyContent="flex-end" gap={0}>
-                        <Button
-                            variant="primary"
-                            onClick={async () => {
-                                setPending(true);
-                                try {
-                                    const parsed = await Native.parseLink(url);
-                                    if (!parsed) {
-                                        setError("Invalid link");
-                                        return setPending(false);
-                                    }
 
-                                    const result = onAdd(parsed);
-                                    if (result) {
-                                        setError(result);
-                                        return setPending(false);
-                                    }
-
-                                    close();
-                                } catch (error) {
-                                    logger.error("parseLink error", error);
-
-                                    setError("Failed to parse link");
-                                    setPending(false);
+                                const result = onAdd(parsed);
+                                if (result) {
+                                    setError(result);
+                                    return setPending(false);
                                 }
-                            }}
-                            disabled={!url || !!error || pending}
-                        >
-                            Add song
-                        </Button>
-                    </Flex>
-                </ModalFooter>
-            </ModalRoot>
+
+                                close();
+                            } catch (error) {
+                                logger.error("parseLink error", error);
+
+                                setError("Failed to parse link");
+                                setPending(false);
+                            }
+                        }
+                    }
+                ]}
+            >
+                <Flex flexDirection="column" gap="10px">
+                    <BaseText size="md" weight="normal" className={cl("sub")}>
+                        Song Spotlight supports these services: <b>{parsers.map(x => x.label).join(", ")}</b>
+                    </BaseText>
+                    <TextInput
+                        placeholder="https://open.spotify.com/..."
+                        error={error}
+                        onChange={value => {
+                            setURL(value);
+                            try {
+                                if (value) new URL(value);
+                                setError(undefined);
+                            } catch {
+                                setError("Invalid URL");
+                            }
+                        }}
+                    />
+                </Flex>
+            </Modal>
         </ErrorBoundary>
     );
 }
diff --git a/src/equicordplugins/songSpotlight.desktop/ui/settings/index.tsx b/src/equicordplugins/songSpotlight.desktop/ui/settings/index.tsx
index 7a36d6f73..9f88f7f9c 100644
--- a/src/equicordplugins/songSpotlight.desktop/ui/settings/index.tsx
+++ b/src/equicordplugins/songSpotlight.desktop/ui/settings/index.tsx
@@ -20,8 +20,8 @@ import { UserData, UserDataSchema } from "@song-spotlight/api/structs";
 import { sid } from "@song-spotlight/api/util";
 import { readClipboard } from "@utils/clipboard";
 import { copyWithToast } from "@utils/discord";
-import { ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Alerts, Parser, showToast, Toasts, useCallback, useEffect, useMemo, useRef, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Alerts, Modal,openModal, Parser, showToast, Toasts, useCallback, useEffect, useMemo, useRef, useState } from "@webpack/common";
 
 interface ImportButtonProps {
     overwrite: boolean;
@@ -210,19 +210,14 @@ export default function Settings({ templateData }: SettingsProps) {
     );
 }
 
-export function SettingsModal({ modalProps, ...props }: SettingsProps & { modalProps: ModalProps; }) {
+export function SettingsModal({ modalProps, ...props }: SettingsProps & { modalProps: RenderModalProps; }) {
     return (
         <ErrorBoundary>
-            <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <BaseText size="xl" weight="bold">Song Spotlight</BaseText>
-                </ModalHeader>
-                <ModalContent>
-                    <div style={{ marginBottom: "20px" }}>
-                        <Settings {...props} />
-                    </div>
-                </ModalContent>
-            </ModalRoot>
+            <Modal {...modalProps} size="lg" title="Song Spotlight">
+                <div style={{ marginBottom: "20px" }}>
+                    <Settings {...props} />
+                </div>
+            </Modal>
         </ErrorBoundary>
     );
 }
diff --git a/src/equicordplugins/statusPresets/index.tsx b/src/equicordplugins/statusPresets/index.tsx
index ca9d6321b..a43bb1b88 100644
--- a/src/equicordplugins/statusPresets/index.tsx
+++ b/src/equicordplugins/statusPresets/index.tsx
@@ -23,12 +23,11 @@ import { getUserSettingLazy } from "@api/UserSettings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { EquicordDevs } from "@utils/constants";
 import { proxyLazy } from "@utils/lazy";
-import { openModalLazy } from "@utils/modal";
 import { useForceUpdater } from "@utils/react";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
 import { extractAndLoadChunksLazy, findComponentByCodeLazy, findModuleId, wreq } from "@webpack";
-import { Menu, OverridePremiumTypeStore, Toasts } from "@webpack/common";
+import { Menu, openModalLazy,OverridePremiumTypeStore, Toasts } from "@webpack/common";
 
 interface Emoji {
     animated: boolean;
diff --git a/src/equicordplugins/streaks/constants.ts b/src/equicordplugins/streaks/constants.ts
new file mode 100644
index 000000000..157fd7d8f
--- /dev/null
+++ b/src/equicordplugins/streaks/constants.ts
@@ -0,0 +1,10 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export const BASE_URL = "https://streaks.equicord.org";
+export const API_URL = `${BASE_URL}/api`;
+export const AUTHORIZE_URL = `${API_URL}/authorize`;
+export const CLIENT_ID = "1243063117852835941";
diff --git a/src/equicordplugins/streaks/index.tsx b/src/equicordplugins/streaks/index.tsx
new file mode 100644
index 000000000..4e4fe5d63
--- /dev/null
+++ b/src/equicordplugins/streaks/index.tsx
@@ -0,0 +1,130 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./style.css";
+
+import { DecoratorProps } from "@api/MemberListDecorators";
+import { iconsModule } from "@equicordplugins/_core/concatenatedModules";
+import { Devs, EquicordDevs } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
+import definePlugin from "@utils/types";
+import { Message } from "@vencord/discord-types";
+import { ChannelStore, moment, Tooltip, UserStore } from "@webpack/common";
+
+import { settings } from "./settings";
+import { useAuthorizationStore } from "./stores/AuthorizationStore";
+import { useStreaksStore } from "./stores/StreaksStore";
+
+const cl = classNameFactory("vc-streaks-");
+
+const STREAK_THRESHOLDS = {
+    ELITE: 100,
+    DIAMOND: 60,
+    PLATINUM: 45,
+    GOLD: 30,
+    SILVER: 14,
+    BRONZE: 7
+};
+
+const colorFor = (streak: number) => {
+    if (streak >= STREAK_THRESHOLDS.ELITE) return settings.store.eliteColor;
+    if (streak >= STREAK_THRESHOLDS.DIAMOND) return settings.store.diamondColor;
+    if (streak >= STREAK_THRESHOLDS.PLATINUM) return settings.store.platinumColor;
+    if (streak >= STREAK_THRESHOLDS.GOLD) return settings.store.goldColor;
+    if (streak >= STREAK_THRESHOLDS.SILVER) return settings.store.silverColor;
+    if (streak >= STREAK_THRESHOLDS.BRONZE) return settings.store.bronzeColor;
+    return settings.store.defaultColor;
+};
+
+const StreakBadge = ({ userId }: { userId: string; }) => {
+    const streaks = useStreaksStore(state => state.streaks);
+    const streak = streaks[userId];
+
+    if (!streak || streak.count < 1) return null;
+
+    const today = moment().format("YYYY-MM-DD");
+    const active = streak.last_streak_date === today;
+
+    const FireIcon = iconsModule?.FireIcon;
+    const color = active ? colorFor(streak.count) : "#9ca3af";
+
+    return (
+        <Tooltip text={`${streak.count} day streak`}>
+            {tooltipProps => (
+                <span {...tooltipProps} className={cl("badge")} style={{ color }}>
+                    {FireIcon && <FireIcon size="xs" color={color} />}
+                    <span className={cl("count")}>{streak.count}</span>
+                </span>
+            )}
+        </Tooltip>
+    );
+};
+
+export default definePlugin({
+    name: "Streaks",
+    description: "Shows a streak next to a user when you exchange DMs with them on consecutive days.",
+    authors: [EquicordDevs.Moowi, Devs.thororen],
+    tags: ["Friends", "Fun"],
+    dependencies: ["MessageDecorationsAPI", "MemberListDecoratorsAPI", "ConcatenatedModules"],
+    settings,
+
+    flux: {
+        async CONNECTION_OPEN() {
+            useAuthorizationStore.getState().init();
+            if (useAuthorizationStore.getState().isAuthorized()) {
+                await useStreaksStore.getState().migrate();
+                await useStreaksStore.getState().fetch();
+            }
+        },
+        async MESSAGE_CREATE({ optimistic, type, message, channelId }: { optimistic: boolean; type: string; message: Message; channelId: string; }) {
+            if (optimistic || type !== "MESSAGE_CREATE" || message.state === "SENDING") return;
+            if (message.author?.bot) return;
+
+            const channel = ChannelStore.getChannel(channelId);
+            if (!channel.isDM()) return;
+
+            const recipientId = channel.recipients[0];
+            if (!recipientId) return;
+
+            const me = UserStore.getCurrentUser()?.id;
+            if (!useAuthorizationStore.getState().isAuthorized()) return;
+
+            const today = moment().format("YYYY-MM-DD");
+            const cached = useStreaksStore.getState().streaks[recipientId];
+            const myFlag = cached && cached.today_date === today && (cached.user_a_id === me ? cached.user_a_today : cached.user_b_today);
+            const theirFlag = cached && cached.today_date === today && (cached.user_a_id === me ? cached.user_b_today : cached.user_a_today);
+
+            if (message.author.id === me) {
+                if (!myFlag) {
+                    useStreaksStore.getState().update(recipientId);
+                }
+            } else if (message.author.id === recipientId) {
+                if (!theirFlag) {
+                    setTimeout(async () => {
+                        const before = useStreaksStore.getState().streaks[recipientId]?.count;
+                        await useStreaksStore.getState().refresh(recipientId);
+                        const after = useStreaksStore.getState().streaks[recipientId]?.count;
+
+                        if (before === after) {
+                            useStreaksStore.getState().update(recipientId);
+                        }
+                    }, 1000);
+                }
+            }
+        },
+    },
+
+    renderMessageDecoration({ message }) {
+        const userId = message?.author?.id;
+        if (!userId || userId === UserStore.getCurrentUser()?.id) return null;
+        return <StreakBadge userId={userId} />;
+    },
+
+    renderMemberListDecorator({ user, type }: DecoratorProps) {
+        if (type !== "dm" || !user || user.id === UserStore.getCurrentUser()?.id) return null;
+        return <StreakBadge userId={user.id} />;
+    },
+});
diff --git a/src/equicordplugins/streaks/settings.tsx b/src/equicordplugins/streaks/settings.tsx
new file mode 100644
index 000000000..96983f6ad
--- /dev/null
+++ b/src/equicordplugins/streaks/settings.tsx
@@ -0,0 +1,84 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { Button } from "@components/Button";
+import { Flex } from "@components/Flex";
+import { OptionType } from "@utils/types";
+import { UserStore } from "@webpack/common";
+
+import { useAuthorizationStore } from "./stores/AuthorizationStore";
+import { useStreaksStore } from "./stores/StreaksStore";
+
+export const settings = definePluginSettings({
+    account: {
+        type: OptionType.COMPONENT,
+        description: "Log in or out of the Streaks API.",
+        component() {
+            const { isAuthorized, authorize, remove } = useAuthorizationStore();
+
+            if (isAuthorized()) {
+                return (
+                    <Flex>
+                        <Button
+                            onClick={() => remove(UserStore.getCurrentUser()?.id)}
+                            variant="dangerPrimary"
+                        >
+                            Log Out of Streaks API
+                        </Button>
+                    </Flex>
+                );
+            } else {
+                return (
+                    <Flex>
+                        <Button onClick={async () => {
+                            await authorize();
+                            await useStreaksStore.getState().migrate();
+                            await useStreaksStore.getState().fetch();
+                        }}>
+                            Log In to Streaks API
+                        </Button>
+                    </Flex>
+                );
+            }
+        }
+    },
+    eliteColor: {
+        type: OptionType.STRING,
+        description: "Elite Streak Color (100+ days)",
+        default: "#9b39fe"
+    },
+    diamondColor: {
+        type: OptionType.STRING,
+        description: "Diamond Streak Color (60+ days)",
+        default: "#f7409c"
+    },
+    platinumColor: {
+        type: OptionType.STRING,
+        description: "Platinum Streak Color (45+ days)",
+        default: "#856bfe"
+    },
+    goldColor: {
+        type: OptionType.STRING,
+        description: "Gold Streak Color (30+ days)",
+        default: "#f75340"
+    },
+    silverColor: {
+        type: OptionType.STRING,
+        description: "Silver Streak Color (14+ days)",
+        default: "#f57b0b"
+    },
+    bronzeColor: {
+        type: OptionType.STRING,
+        description: "Bronze Streak Color (7+ days)",
+        default: "#b08d57"
+    },
+    defaultColor: {
+        type: OptionType.STRING,
+        description: "Default Streak Color (1+ days)",
+        default: "#f59e0b"
+    }
+});
diff --git a/src/equicordplugins/streaks/stores/AuthorizationStore.tsx b/src/equicordplugins/streaks/stores/AuthorizationStore.tsx
new file mode 100644
index 000000000..970f3b064
--- /dev/null
+++ b/src/equicordplugins/streaks/stores/AuthorizationStore.tsx
@@ -0,0 +1,118 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import * as DataStore from "@api/DataStore";
+import { proxyLazy } from "@utils/lazy";
+import { Logger } from "@utils/Logger";
+import { OAuth2AuthorizeModal, openModal,showToast, Toasts, UserStore, zustandCreate, zustandPersist } from "@webpack/common";
+
+import { AUTHORIZE_URL, CLIENT_ID } from "../constants";
+import { useStreaksStore } from "./StreaksStore";
+
+interface AuthorizationState {
+    token: string | null;
+    tokens: Record<string, string>;
+    init: () => void;
+    authorize: () => Promise<void>;
+    setToken: (token: string) => void;
+    remove: (id: string) => void;
+    isAuthorized: () => boolean;
+}
+
+const indexedDBStorage = {
+    async getItem(name: string): Promise<string | null> {
+        return DataStore.get(name).then(v => v ?? null);
+    },
+    async setItem(name: string, value: string): Promise<void> {
+        await DataStore.set(name, value);
+    },
+    async removeItem(name: string): Promise<void> {
+        await DataStore.del(name);
+    },
+};
+
+export const useAuthorizationStore = proxyLazy(() => zustandCreate(
+    zustandPersist(
+        (set: any, get: any) => ({
+            token: null,
+            tokens: {},
+            init: () => { set({ token: get().tokens[UserStore.getCurrentUser()?.id] ?? null }); },
+            setToken: (token: string) => {
+                const id = UserStore.getCurrentUser()?.id;
+                if (!id) return;
+                set({ token, tokens: { ...get().tokens, [id]: token } });
+            },
+            remove: (id: string) => {
+                const { tokens, init } = get();
+                const newTokens = { ...tokens };
+                delete newTokens[id];
+                set({ tokens: newTokens });
+
+                init();
+            },
+            async authorize() {
+                return new Promise((resolve, reject) => {
+                    let hasCallbackStarted = false;
+                    openModal(props =>
+                        <OAuth2AuthorizeModal
+                            {...props}
+                            scopes={["identify"]}
+                            responseType="code"
+                            redirectUri={AUTHORIZE_URL}
+                            permissions={0n}
+                            clientId={CLIENT_ID}
+                            cancelCompletesFlow={false}
+                            callback={async (response: any) => {
+                                hasCallbackStarted = true;
+                                try {
+                                    const url = new URL(response.location);
+                                    const code = url.searchParams.get("code");
+                                    if (!code) throw new Error("No code in redirect");
+
+                                    const req = await fetch(`${AUTHORIZE_URL}?code=${code}`);
+
+                                    if (req?.ok) {
+                                        const token = await req.text();
+                                        get().setToken(token);
+                                    } else {
+                                        throw new Error("Request not OK");
+                                    }
+                                    resolve(void 0);
+                                } catch (e) {
+                                    if (e instanceof Error) {
+                                        showToast(`Failed to authorize: ${e.message}`, Toasts.Type.FAILURE);
+                                        new Logger("Streaks").error("Failed to authorize", e);
+                                        reject(e);
+                                    }
+                                }
+                            }}
+                        />, {
+                        onCloseCallback() {
+                            if (!hasCallbackStarted) {
+                                reject(new Error("Authorization cancelled"));
+                            }
+                        },
+                    });
+                });
+            },
+            isAuthorized: () => !!get().token,
+        } as AuthorizationState),
+        {
+            name: "vc-streaks-auth",
+            storage: indexedDBStorage,
+            partialize: state => ({ tokens: state.tokens }),
+            onRehydrateStorage: () => async state => {
+                if (!state) return;
+                state.init();
+                if (state.isAuthorized()) {
+                    useStreaksStore.getState().clear();
+                    await useStreaksStore.getState().migrate();
+                    await useStreaksStore.getState().fetch();
+                }
+            }
+        }
+    )
+));
diff --git a/src/equicordplugins/streaks/stores/StreaksStore.ts b/src/equicordplugins/streaks/stores/StreaksStore.ts
new file mode 100644
index 000000000..119dab752
--- /dev/null
+++ b/src/equicordplugins/streaks/stores/StreaksStore.ts
@@ -0,0 +1,117 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import * as DataStore from "@api/DataStore";
+import { proxyLazy } from "@utils/lazy";
+import { UserStore, zustandCreate } from "@webpack/common";
+
+import { API_URL } from "../constants";
+import { useAuthorizationStore } from "./AuthorizationStore";
+
+export interface RemoteStreak {
+    id: string;
+    user_a_id: string;
+    user_b_id: string;
+    count: number;
+    last_streak_date: string | null;
+    user_a_today: boolean;
+    user_b_today: boolean;
+    today_date: string;
+}
+
+export interface StreaksState {
+    streaks: Record<string, RemoteStreak>;
+    fetch: () => Promise<void>;
+    update: (recipientId: string) => Promise<void>;
+    refresh: (recipientId: string) => Promise<void>;
+    migrate: () => Promise<void>;
+    clear: () => void;
+}
+
+export const useStreaksStore = proxyLazy(() => zustandCreate((set: any, get: any) => ({
+    streaks: {},
+    clear: () => set({ streaks: {} }),
+    async fetch() {
+        const { token } = useAuthorizationStore.getState();
+        if (!token) return;
+
+        try {
+            const res = await fetch(`${API_URL}/streaks`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            if (res.ok) {
+                const data: RemoteStreak[] = await res.json();
+                const myId = UserStore.getCurrentUser()?.id;
+                const streaksMap: Record<string, RemoteStreak> = {};
+                for (const s of data) {
+                    const otherId = s.user_a_id === myId ? s.user_b_id : s.user_a_id;
+                    streaksMap[otherId] = s;
+                }
+                set({ streaks: streaksMap });
+            }
+        } catch (e) {
+            console.error("Failed to fetch streaks", e);
+        }
+    },
+    async update(recipientId: string) {
+        const { token } = useAuthorizationStore.getState();
+        if (!token) return;
+
+        try {
+            const res = await fetch(`${API_URL}/streaks/${recipientId}`, {
+                method: "POST",
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            if (res.ok) {
+                const streak: RemoteStreak = await res.json();
+                set({ streaks: { ...get().streaks, [recipientId]: streak } });
+            }
+        } catch (e) {
+            console.error("Failed to update streak", e);
+        }
+    },
+    async refresh(recipientId: string) {
+        const { token } = useAuthorizationStore.getState();
+        if (!token) return;
+
+        try {
+            const res = await fetch(`${API_URL}/streaks/${recipientId}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            if (res.ok) {
+                const streak: RemoteStreak = await res.json();
+                set({ streaks: { ...get().streaks, [recipientId]: streak } });
+            }
+        } catch (e) {
+            console.error("Failed to refresh streak", e);
+        }
+    },
+    async migrate() {
+        const { token } = useAuthorizationStore.getState();
+        if (!token) return;
+
+        const legacyData = await DataStore.get("vc-streaks-data");
+        if (!legacyData || Object.keys(legacyData).length === 0) return;
+
+        try {
+            const res = await fetch(`${API_URL}/streaks/migrate`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(legacyData)
+            });
+
+            if (res.ok) {
+                await DataStore.del("vc-streaks-data");
+                console.log("Successfully migrated local streaks to API");
+            }
+        } catch (e) {
+            console.error("Failed to migrate streaks", e);
+        }
+    }
+} as StreaksState)));
diff --git a/src/equicordplugins/streaks/style.css b/src/equicordplugins/streaks/style.css
new file mode 100644
index 000000000..fc153cd8e
--- /dev/null
+++ b/src/equicordplugins/streaks/style.css
@@ -0,0 +1,13 @@
+.vc-streaks-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: 4px;
+    vertical-align: middle;
+}
+
+.vc-streaks-count {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+}
diff --git a/src/equicordplugins/themeLibrary/components/ThemeCard.tsx b/src/equicordplugins/themeLibrary/components/ThemeCard.tsx
index c265fb20e..8c2b78733 100644
--- a/src/equicordplugins/themeLibrary/components/ThemeCard.tsx
+++ b/src/equicordplugins/themeLibrary/components/ThemeCard.tsx
@@ -8,15 +8,14 @@ import { generateId } from "@api/Commands";
 import { Settings } from "@api/Settings";
 import { Button } from "@components/Button";
 import { Card } from "@components/Card";
-import { HeadingPrimary, HeadingTertiary } from "@components/Heading";
+import { HeadingPrimary } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import type { Theme, ThemeLikeProps } from "@equicordplugins/themeLibrary/types";
 import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
-import { ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import { User } from "@vencord/discord-types";
-import { FluxDispatcher, Parser, React, UserStore, UserUtils } from "@webpack/common";
+import { FluxDispatcher, Modal, openModal, Parser, React, UserStore, UserUtils } from "@webpack/common";
 import { Constructor } from "type-fest";
 
 import { LikesComponent } from "./LikesComponent";
@@ -66,36 +65,32 @@ export const ThemeCard: React.FC<ThemeCardProps> = ({ theme, themeLinks, likedTh
 
         if (requiresThemeAttributes && !Settings.plugins.ThemeAttributes.enabled) {
             openModal(modalProps => (
-                <ModalRoot {...modalProps} size={ModalSize.SMALL}>
-                    <ModalHeader>
-                        <HeadingTertiary>Hold on!</HeadingTertiary>
-                    </ModalHeader>
-                    <ModalContent>
-                        <Paragraph style={{ padding: "8px" }}>
-                            <p>This theme requires the <b>ThemeAttributes</b> plugin to work properly!</p>
-                            <p>Do you want to enable it?</p>
-                        </Paragraph>
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button
-                            variant="positive"
-                            onClick={() => {
+                <Modal
+                    {...modalProps}
+                    size="sm"
+                    title="Hold on!"
+                    actions={[
+                        {
+                            text: "Enable Plugin",
+                            variant: "primary",
+                            onClick: () => {
                                 Settings.plugins.ThemeAttributes.enabled = true;
                                 modalProps.onClose();
                                 handleAddRemoveTheme();
-                            }}
-                        >
-                            Enable Plugin
-                        </Button>
-                        <Button
-                            variant="dangerPrimary"
-                            className={Margins.right8}
-                            onClick={() => modalProps.onClose()}
-                        >
-                            {t("vencord.cancel")}
-                        </Button>
-                    </ModalFooter>
-                </ModalRoot>
+                            }
+                        },
+                        {
+                            text: t("vencord.cancel"),
+                            variant: "secondary",
+                            onClick: () => modalProps.onClose()
+                        }
+                    ]}
+                >
+                    <Paragraph style={{ padding: "8px" }}>
+                        <p>This theme requires the <b>ThemeAttributes</b> plugin to work properly!</p>
+                        <p>Do you want to enable it?</p>
+                    </Paragraph>
+                </Modal>
             ));
         } else {
             handleAddRemoveTheme();
diff --git a/src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx b/src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx
index d88cc7e3c..c35a0a4d3 100644
--- a/src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx
+++ b/src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx
@@ -5,20 +5,18 @@
  */
 
 import { CodeBlock } from "@components/CodeBlock";
-import { Heading, HeadingTertiary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { Heart } from "@components/Heart";
 import { Paragraph } from "@components/Paragraph";
 import { Theme, ThemeInfoModalProps } from "@equicordplugins/themeLibrary/types";
-import { ClockIcon, DownloadIcon, WarningIcon } from "@equicordplugins/themeLibrary/utils/Icons";
+import { ClockIcon, WarningIcon } from "@equicordplugins/themeLibrary/utils/Icons";
 import { copyToClipboard } from "@utils/clipboard";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
-import { ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import type { PluginNative } from "@utils/types";
 import { findComponentByCodeLazy } from "@webpack";
-import { Button, Parser, React, showToast, Toasts } from "@webpack/common";
+import { Button, Modal, openModal, Parser, React, showToast, Toasts } from "@webpack/common";
 
 import { logger } from "./ThemeTab";
 
@@ -49,212 +47,192 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
     const lastUpdated = Math.floor(new Date(last_updated ?? 0).getTime() / 1000);
 
     return (
-        <ModalRoot {...props}>
-            <ModalHeader>
-                <HeadingTertiary>{type} Details</HeadingTertiary>
-            </ModalHeader>
-            <ModalContent>
-                <Heading style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Heading>
-                <div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
-                    <div>
-                        <div style={{ display: "flex", alignItems: "center" }}>
-                            <UserSummaryItem
-                                users={authors}
-                                count={authors.length}
-                                guildId={undefined}
-                                renderIcon={false}
-                                max={4}
-                                size={32}
-                                showDefaultAvatarsForNullUsers
-                                showUserPopout
-                                className={Margins.right8}
-                            />
-                            <Paragraph style={{ maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                                {authors.map(author => author.username).join(", ")}
-                            </Paragraph>
-                        </div>
-                        {version && (
-                            <>
-                                <Heading style={{ marginTop: "10px" }}>Version</Heading>
-                                <Paragraph>
-                                    {version}
-                                </Paragraph>
-                            </>
-                        )}
-                        <Heading style={{ marginTop: "10px" }}>Likes</Heading>
-                        <Paragraph>
-                            {likes === 0 ? `Nobody liked this ${type} yet.` : `${likes} users liked this ${type}!`}
-                        </Paragraph>
-                        {donate && (
-                            <>
-                                <Heading style={{ marginTop: "10px" }}>{t("vencord.donate")}</Heading>
-                                <Paragraph>
-                                    You can support the author by donating below!
-                                </Paragraph>
-                                <Paragraph style={{ marginTop: "10px" }}>
-                                    <Button onClick={() => VencordNative.native.openExternal(donate)}>
-                                        <Heart />
-                                        {t("vencord.donate")}
-                                    </Button>
-                                </Paragraph>
-                            </>
-                        )}
-                        {(guild || invite) && (
-                            <>
-                                <Heading style={{ marginTop: "10px" }}>Support Server</Heading>
-                                {guild && (
-                                    <Paragraph>
-                                        {guild.name}
-                                    </Paragraph>
-                                )}
-                                <Paragraph>
-                                    <Button
-                                        color={Button.Colors.BRAND}
-                                        look={Button.Looks.FILLED}
-                                        className={Margins.top8}
-                                        onClick={async e => {
-                                            e.preventDefault();
-                                            const useInvite = guild ? guild.invite_link?.split("discord.gg/")[1] : invite;
-                                            useInvite != null && openInviteModal(useInvite).catch(() => showToast("Invalid or expired invite!", Toasts.Type.FAILURE));
-                                        }}
-                                    >
-                                        Join Discord Server
-                                    </Button>
-                                </Paragraph>
-                            </>
-                        )}
-                        <Heading style={{ marginTop: "10px" }}>Source</Heading>
-                        <Paragraph>
-                            <Button
-                                disabled={!theme.content || theme.id === "preview"}
-                                onClick={() => openModal(modalProps => (
-                                    <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-                                        <ModalHeader>
-                                            <HeadingTertiary>Theme Source</HeadingTertiary>
-                                        </ModalHeader>
-                                        <ModalContent>
-                                            <Paragraph style={{
-                                                padding: "8px",
-                                            }}>
-                                                <CodeBlock lang="css" content={themeContent} />
-                                            </Paragraph>
-                                        </ModalContent>
-                                        <ModalFooter>
-                                            <Button
-                                                color={Button.Colors.RED}
-                                                look={Button.Looks.FILLED}
-                                                onClick={() => modalProps.onClose()}
-                                            >
-                                                Close
-                                            </Button>
-                                            <Button className={Margins.right8}
-                                                onClick={() => {
-                                                    copyToClipboard(themeContent);
-                                                    showToast("Copied to Clipboard", Toasts.Type.SUCCESS);
-                                                }}>Copy to Clipboard</Button>
-                                        </ModalFooter>
-                                    </ModalRoot>
-                                ))}
-                            >
-                                View Theme Source
-                            </Button>
-                        </Paragraph>
-                        {tags && (
-                            <>
-                                <Heading style={{ marginTop: "10px" }}>Tags</Heading>
-                                <Paragraph>
-                                    {tags.map(tag => (
-                                        <span className="vce-theme-info-tag" key={"vce-theme-info-tag"}>
-                                            {tag}
-                                        </span>
-                                    ))}
-                                </Paragraph>
-                            </>
-                        )}
-                        {requiresThemeAttributes && (
-                            <Paragraph style={{ marginTop: "10px" }}>
-                                <WarningIcon /> This theme requires the <b>ThemeAttributes</b> plugin!
-                            </Paragraph>
-                        )}
-                        {last_updated && (
-                            <Paragraph style={{ marginTop: "10px" }}>
-                                <ClockIcon /> This theme was last updated {Parser.parse("<t:" + lastUpdated + ":F>")} ({Parser.parse("<t:" + lastUpdated + ":R>")})
-                            </Paragraph>
-                        )}
-                    </div>
-                </div>
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    color={Button.Colors.RED}
-                    look={Button.Looks.FILLED}
-                    onClick={() => props.onClose()}
-                >
-                    Close
-                </Button>
-                <Button
-                    color={Button.Colors.GREEN}
-                    look={Button.Looks.FILLED}
-                    className={classes("vce-button", Margins.right8)}
-                    disabled={!theme.content || theme.id === "preview"}
-                    onClick={async () => {
+        <Modal
+            {...props}
+            size="md"
+            title={`${type} Details`}
+            actions={[
+                {
+                    text: "Close",
+                    variant: "dangerPrimary",
+                    onClick: () => props.onClose()
+                },
+                {
+                    text: "Download",
+                    variant: "positive",
+                    disabled: !theme.content || theme.id === "preview",
+                    onClick: async () => {
                         const themesDir = await VencordNative.themes.getThemesDir();
                         const exists = await Native.themeExists(themesDir, theme);
-                        // using another function so we get the proper file path instead of just guessing
-                        // which slash to use (im looking at you windows)
                         const validThemesDir = await Native.getThemesDir(themesDir, theme);
-                        // check if theme exists, and ask if they want to overwrite
                         if (exists) {
                             openModal(modalProps => (
-                                <ModalRoot {...modalProps} size={ModalSize.SMALL}>
-                                    <ModalHeader>
-                                        <HeadingTertiary>Conflict!</HeadingTertiary>
-                                    </ModalHeader>
-                                    <ModalContent>
-                                        <Paragraph style={{
-                                            padding: "8px",
-                                        }}>
-                                            <div style={{ display: "flex", flexDirection: "column" }}>
-                                                <p>A theme with the same name <b>already exist</b> in your themes directory! Do you want to overwrite it?</p>
-                                                <div className="vce-overwrite-modal">
-                                                    <code style={{ wordWrap: "break-word" }}>
-                                                        {validThemesDir}
-                                                    </code>
-                                                </div>
-                                            </div>
-                                        </Paragraph>
-                                    </ModalContent>
-                                    <ModalFooter>
-                                        <Button
-                                            look={Button.Looks.FILLED}
-                                            color={Button.Colors.RED}
-                                            onClick={async () => {
+                                <Modal
+                                    {...modalProps}
+                                    size="sm"
+                                    title="Conflict!"
+                                    actions={[
+                                        {
+                                            text: "Overwrite",
+                                            variant: "dangerPrimary",
+                                            onClick: async () => {
                                                 await downloadTheme(themesDir, theme);
                                                 modalProps.onClose();
-                                            }}
-                                        >
-                                            Overwrite
-                                        </Button>
-                                        <Button
-                                            color={Button.Colors.GREEN}
-                                            look={Button.Looks.FILLED}
-                                            className={Margins.right8} onClick={() => modalProps.onClose()}
-                                        >
-                                            Keep my file
-                                        </Button>
-                                    </ModalFooter>
-                                </ModalRoot>
+                                            }
+                                        },
+                                        {
+                                            text: "Keep my file",
+                                            variant: "positive",
+                                            onClick: () => modalProps.onClose()
+                                        }
+                                    ]}
+                                >
+                                    <Paragraph style={{ padding: "8px" }}>
+                                        <div style={{ display: "flex", flexDirection: "column" }}>
+                                            <p>A theme with the same name <b>already exists</b> in your themes directory! Do you want to overwrite it?</p>
+                                            <div className="vce-overwrite-modal">
+                                                <code style={{ wordWrap: "break-word" }}>
+                                                    {validThemesDir}
+                                                </code>
+                                            </div>
+                                        </div>
+                                    </Paragraph>
+                                </Modal>
                             ));
                         } else {
                             await downloadTheme(themesDir, theme);
                         }
-                    }}
-                >
+                    }
+                }
+            ]}
+        >
+            <Heading style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Heading>
+            <div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
+                <div>
                     <div style={{ display: "flex", alignItems: "center" }}>
-                        Download <DownloadIcon style={{ marginLeft: "5px" }} />
+                        <UserSummaryItem
+                            users={authors}
+                            count={authors.length}
+                            guildId={undefined}
+                            renderIcon={false}
+                            max={4}
+                            size={32}
+                            showDefaultAvatarsForNullUsers
+                            showUserPopout
+                            className={Margins.right8}
+                        />
+                        <Paragraph style={{ maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                            {authors.map(author => author.username).join(", ")}
+                        </Paragraph>
                     </div>
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    {version && (
+                        <>
+                            <Heading style={{ marginTop: "10px" }}>Version</Heading>
+                            <Paragraph>
+                                {version}
+                            </Paragraph>
+                        </>
+                    )}
+                    <Heading style={{ marginTop: "10px" }}>Likes</Heading>
+                    <Paragraph>
+                        {likes === 0 ? `Nobody liked this ${type} yet.` : `${likes} users liked this ${type}!`}
+                    </Paragraph>
+                    {donate && (
+                        <>
+                            <Heading style={{ marginTop: "10px" }}>{t("vencord.donate")}</Heading>
+                            <Paragraph>
+                                You can support the author by donating below!
+                            </Paragraph>
+                            <Paragraph style={{ marginTop: "10px" }}>
+                                <Button onClick={() => VencordNative.native.openExternal(donate)}>
+                                    <Heart />
+                                    {t("vencord.donate")}
+                                </Button>
+                            </Paragraph>
+                        </>
+                    )}
+                    {(guild || invite) && (
+                        <>
+                            <Heading style={{ marginTop: "10px" }}>Support Server</Heading>
+                            {guild && (
+                                <Paragraph>
+                                    {guild.name}
+                                </Paragraph>
+                            )}
+                            <Paragraph>
+                                <Button
+                                    color={Button.Colors.BRAND}
+                                    look={Button.Looks.FILLED}
+                                    className={Margins.top8}
+                                    onClick={async e => {
+                                        e.preventDefault();
+                                        const useInvite = guild ? guild.invite_link?.split("discord.gg/")[1] : invite;
+                                        useInvite != null && openInviteModal(useInvite).catch(() => showToast("Invalid or expired invite!", Toasts.Type.FAILURE));
+                                    }}
+                                >
+                                    Join Discord Server
+                                </Button>
+                            </Paragraph>
+                        </>
+                    )}
+                    <Heading style={{ marginTop: "10px" }}>Source</Heading>
+                    <Paragraph>
+                        <Button
+                            disabled={!theme.content || theme.id === "preview"}
+                            onClick={() => openModal(modalProps => (
+                                <Modal
+                                    {...modalProps}
+                                    size="lg"
+                                    title="Theme Source"
+                                    actions={[
+                                        {
+                                            text: "Close",
+                                            variant: "dangerPrimary",
+                                            onClick: () => modalProps.onClose()
+                                        },
+                                        {
+                                            text: "Copy to Clipboard",
+                                            variant: "primary",
+                                            onClick: () => {
+                                                copyToClipboard(themeContent);
+                                                showToast("Copied to Clipboard", Toasts.Type.SUCCESS);
+                                            }
+                                        }
+                                    ]}
+                                >
+                                    <Paragraph style={{ padding: "8px" }}>
+                                        <CodeBlock lang="css" content={themeContent} />
+                                    </Paragraph>
+                                </Modal>
+                            ))}
+                        >
+                            View Theme Source
+                        </Button>
+                    </Paragraph>
+                    {tags && (
+                        <>
+                            <Heading style={{ marginTop: "10px" }}>Tags</Heading>
+                            <Paragraph>
+                                {tags.map(tag => (
+                                    <span className="vce-theme-info-tag" key={"vce-theme-info-tag"}>
+                                        {tag}
+                                    </span>
+                                ))}
+                            </Paragraph>
+                        </>
+                    )}
+                    {requiresThemeAttributes && (
+                        <Paragraph style={{ marginTop: "10px" }}>
+                            <WarningIcon /> This theme requires the <b>ThemeAttributes</b> plugin!
+                        </Paragraph>
+                    )}
+                    {last_updated && (
+                        <Paragraph style={{ marginTop: "10px" }}>
+                            <ClockIcon /> This theme was last updated {Parser.parse("<t:" + lastUpdated + ":F>")} ({Parser.parse("<t:" + lastUpdated + ":R>")})
+                        </Paragraph>
+                    )}
+                </div>
+            </div>
+        </Modal>
     );
 };
diff --git a/src/equicordplugins/themeLibrary/types.ts b/src/equicordplugins/themeLibrary/types.ts
index 85edf8fc1..80760fa26 100644
--- a/src/equicordplugins/themeLibrary/types.ts
+++ b/src/equicordplugins/themeLibrary/types.ts
@@ -4,8 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { ModalProps } from "@utils/modal";
-import { User } from "@vencord/discord-types";
+import { RenderModalProps, User } from "@vencord/discord-types";
 
 type Author = {
     github_name?: string;
@@ -35,7 +34,7 @@ export interface Theme {
     requiresThemeAttributes?: boolean;
 }
 
-export interface ThemeInfoModalProps extends ModalProps {
+export interface ThemeInfoModalProps extends RenderModalProps {
     author: User | User[];
     theme: Theme;
 }
diff --git a/src/equicordplugins/themeLibrary/utils/auth.tsx b/src/equicordplugins/themeLibrary/utils/auth.tsx
index 9aba2d576..a39d1c358 100644
--- a/src/equicordplugins/themeLibrary/utils/auth.tsx
+++ b/src/equicordplugins/themeLibrary/utils/auth.tsx
@@ -7,8 +7,7 @@
 import * as DataStore from "@api/DataStore";
 import { showNotification } from "@api/Notifications";
 import { logger, themeRequest } from "@equicordplugins/themeLibrary/components/ThemeTab";
-import { openModal } from "@utils/modal";
-import { OAuth2AuthorizeModal, Toasts, UserStore } from "@webpack/common";
+import { OAuth2AuthorizeModal, openModal,Toasts, UserStore } from "@webpack/common";
 
 export async function authorizeUser(triggerModal: boolean = true) {
     const isAuthorized = await getAuthorization();
diff --git a/src/equicordplugins/timezones/TimezoneModal.tsx b/src/equicordplugins/timezones/TimezoneModal.tsx
index e6c7116ff..7aa21096e 100644
--- a/src/equicordplugins/timezones/TimezoneModal.tsx
+++ b/src/equicordplugins/timezones/TimezoneModal.tsx
@@ -5,11 +5,11 @@
  */
 
 import * as DataStore from "@api/DataStore";
-import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
+import { HeadingSecondary } from "@components/Heading";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { Button, SearchableSelect, useEffect, useMemo, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, SearchableSelect, useEffect, useMemo, useState } from "@webpack/common";
 
 import { DATASTORE_KEY, getSystemTimezone, resolveUserTimezone, settings, timezones } from ".";
 import { setTimezone, setUserDatabaseTimezone } from "./database";
@@ -21,7 +21,7 @@ export async function setUserTimezone(userId: string, timezone: string | null) {
 
 const cl = classNameFactory("vc-timezone-");
 
-export function SetTimezoneModal({ userId, modalProps, database }: { userId: string, modalProps: ModalProps; database?: boolean; }) {
+export function SetTimezoneModal({ userId, modalProps, database }: { userId: string, modalProps: RenderModalProps; database?: boolean; }) {
     const [currentValue, setCurrentValue] = useState<string | null>(null);
 
     useEffect(() => {
@@ -39,63 +39,59 @@ export function SetTimezoneModal({ userId, modalProps, database }: { userId: str
         });
     }, []);
 
+    const actions = [
+        {
+            text: "Save",
+            variant: "primary",
+            disabled: currentValue === null,
+            onClick: async () => {
+                if (database) {
+                    const success = await setTimezone(currentValue!);
+                    if (success) {
+                        await setUserDatabaseTimezone(userId, currentValue);
+                    }
+                } else {
+                    await setUserTimezone(userId, currentValue);
+                }
+
+                modalProps.onClose();
+            }
+        }
+    ];
+
+    if (!database) {
+        actions.unshift({
+            text: "Delete Timezone",
+            variant: "dangerPrimary",
+            disabled: false,
+            onClick: async () => {
+                await setUserTimezone(userId, null);
+                modalProps.onClose();
+            }
+        });
+    }
+
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <HeadingPrimary>
-                    Timezones
-                </HeadingPrimary>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
+        <Modal
+            {...modalProps}
+            size="sm"
+            title="Timezones"
+            actions={actions}
+        >
+            <section className={Margins.bottom16}>
+                <HeadingSecondary>
+                    Select Timezone
+                </HeadingSecondary>
 
-            <ModalContent className={cl("modal-content")}>
-                <section className={Margins.bottom16}>
-                    <HeadingSecondary>
-                        Select Timezone
-                    </HeadingSecondary>
-
-                    <SearchableSelect
-                        options={options}
-                        value={options.find(o => o.value === currentValue)?.value}
-                        placeholder={"Select a Timezone"}
-                        maxVisibleItems={5}
-                        closeOnSelect={true}
-                        onChange={v => setCurrentValue(v)}
-                    />
-                </section>
-            </ModalContent>
-
-            <ModalFooter className={cl("modal-footer")}>
-                {!database && (
-                    <Button
-                        color={Button.Colors.RED}
-                        onClick={async () => {
-                            await setUserTimezone(userId, null);
-                            modalProps.onClose();
-                        }}
-                    >
-                        Delete Timezone
-                    </Button>
-                )}
-                <Button
-                    color={Button.Colors.BRAND}
-                    disabled={currentValue === null}
-                    onClick={async () => {
-                        if (database) {
-                            const success = await setTimezone(currentValue!);
-                            if (success) {
-                                await setUserDatabaseTimezone(userId, currentValue);
-                            }
-                        } else {
-                            await setUserTimezone(userId, currentValue);
-                        }
-
-                        modalProps.onClose();
-                    }}
-                >
-                    Save
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                <SearchableSelect
+                    options={options}
+                    value={options.find(o => o.value === currentValue)?.value}
+                    placeholder={"Select a Timezone"}
+                    maxVisibleItems={5}
+                    closeOnSelect={true}
+                    onChange={v => setCurrentValue(v)}
+                />
+            </section>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/timezones/index.tsx b/src/equicordplugins/timezones/index.tsx
index ca523ba19..5a547f037 100644
--- a/src/equicordplugins/timezones/index.tsx
+++ b/src/equicordplugins/timezones/index.tsx
@@ -11,12 +11,11 @@ import * as DataStore from "@api/DataStore";
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { Message, User } from "@vencord/discord-types";
 import { findByPropsLazy, findCssClassesLazy } from "@webpack";
-import { Button, Menu, showToast, Toasts, Tooltip, useEffect, UserStore, useState } from "@webpack/common";
+import { Button, Menu, openModal,showToast, Toasts, Tooltip, useEffect, UserStore, useState } from "@webpack/common";
 
 import { deleteTimezone, getTimezone, loadDatabaseTimezones, setUserDatabaseTimezone } from "./database";
 import { SetTimezoneModal } from "./TimezoneModal";
diff --git a/src/equicordplugins/userpfp/AvatarModal.tsx b/src/equicordplugins/userpfp/AvatarModal.tsx
index bd730895f..6e28e0544 100644
--- a/src/equicordplugins/userpfp/AvatarModal.tsx
+++ b/src/equicordplugins/userpfp/AvatarModal.tsx
@@ -5,13 +5,11 @@
  */
 
 import { set } from "@api/DataStore";
-import { Button } from "@components/Button";
-import { Flex } from "@components/Flex";
 import { Heading } from "@components/Heading";
 import { Margins } from "@components/margins";
 import { classNameFactory } from "@utils/css";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { IconUtils, React, TextInput, Toasts, UserStore, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { IconUtils, Modal, React, TextInput, Toasts, UserStore, useState } from "@webpack/common";
 
 import { data, KEY_DATASTORE } from ".";
 
@@ -26,7 +24,7 @@ function fileToDataUrl(file: File): Promise<string> {
     });
 }
 
-export function SetAvatarModal({ userId, modalProps }: { userId: string; modalProps: ModalProps; }) {
+export function SetAvatarModal({ userId, modalProps }: { userId: string; modalProps: RenderModalProps; }) {
     const { avatars } = data;
     const user = UserStore.getUser(userId);
     const originalAvatar = IconUtils.getUserAvatarURL(user, true, 128) || "";
@@ -36,7 +34,7 @@ export function SetAvatarModal({ userId, modalProps }: { userId: string; modalPr
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = React.useRef<HTMLInputElement>(null);
 
-    function handleKey(e: KeyboardEvent) {
+    function handleKey(e: React.KeyboardEvent) {
         if (e.key === "Enter") saveUserAvatar();
     }
 
@@ -78,15 +76,30 @@ export function SetAvatarModal({ userId, modalProps }: { userId: string; modalPr
         modalProps.onClose();
     }
 
+    const actions = [
+        {
+            text: "Save",
+            variant: "primary",
+            onClick: saveUserAvatar
+        }
+    ];
+
+    if (avatars[userId]) {
+        actions.unshift({
+            text: "Delete",
+            variant: "dangerPrimary",
+            onClick: deleteUserAvatar
+        });
+    }
+
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <Heading tag="h3">Custom Avatar</Heading>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-
-            <ModalContent className={cl("modal-content")} onKeyDown={handleKey}>
-
+        <Modal
+            {...modalProps}
+            size="sm"
+            title="Custom Avatar"
+            actions={actions}
+        >
+            <div onKeyDown={handleKey}>
                 {/* Preview */}
                 <div className={cl("preview-row")}>
                     <div className={cl("preview-box")}>
@@ -141,17 +154,7 @@ export function SetAvatarModal({ userId, modalProps }: { userId: string; modalPr
                         }}
                     />
                 </div>
-
-            </ModalContent>
-
-            <ModalFooter className={cl("modal-footer")}>
-                <Flex gap="8px">
-                    {avatars[userId] && (
-                        <Button variant="dangerPrimary" onClick={deleteUserAvatar}>Delete</Button>
-                    )}
-                    <Button onClick={saveUserAvatar}>Save</Button>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+            </div>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/userpfp/index.tsx b/src/equicordplugins/userpfp/index.tsx
index e437b03fa..fa9a8793a 100644
--- a/src/equicordplugins/userpfp/index.tsx
+++ b/src/equicordplugins/userpfp/index.tsx
@@ -17,12 +17,11 @@ import { Notice } from "@components/Notice";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { openInviteModal } from "@utils/discord";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { User } from "@vencord/discord-types";
 import { extractAndLoadChunksLazy } from "@webpack";
-import { IconUtils, Menu, UserStore } from "@webpack/common";
+import { IconUtils, Menu, openModal,UserStore } from "@webpack/common";
 
 import { SetAvatarModal } from "./AvatarModal";
 
@@ -178,4 +177,4 @@ export default definePlugin({
             .then(remote => remote?.avatars && Object.assign(data.avatars, remote.avatars))
             .catch(() => null);
     }
-});
\ No newline at end of file
+});
diff --git a/src/equicordplugins/userpluginInstaller.dev/components/SettingsTab.tsx b/src/equicordplugins/userpluginInstaller.dev/components/SettingsTab.tsx
index 2f064b382..621ceb902 100644
--- a/src/equicordplugins/userpluginInstaller.dev/components/SettingsTab.tsx
+++ b/src/equicordplugins/userpluginInstaller.dev/components/SettingsTab.tsx
@@ -19,9 +19,8 @@ import {
     wrapTab,
 } from "@components/settings/tabs/BaseTab";
 import { classes, isObjectEmpty } from "@utils/misc";
-import { closeAllModals } from "@utils/modal";
 import { relaunch } from "@utils/native";
-import { Alerts, NavigationRouter, Toasts, useEffect, useState } from "@webpack/common";
+import { Alerts, closeAllModals,NavigationRouter, Toasts, useEffect, useState } from "@webpack/common";
 
 import userpluginInstaller, { Native } from "..";
 import {
diff --git a/src/equicordplugins/vcNarratorCustom/index.tsx b/src/equicordplugins/vcNarratorCustom/index.tsx
index 5d0f82082..578e117db 100644
--- a/src/equicordplugins/vcNarratorCustom/index.tsx
+++ b/src/equicordplugins/vcNarratorCustom/index.tsx
@@ -11,36 +11,29 @@ import { definePluginSettings } from "@api/Settings";
 import { Button } from "@components/Button";
 import { Divider } from "@components/Divider";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
+import { HeadingSecondary } from "@components/Heading";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
-import {
-    ModalCloseButton,
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalProps,
-    ModalRoot,
-    ModalSize,
-    openModal,
-} from "@utils/modal";
+import { useForceUpdater } from "@utils/react";
 import { wordsToTitle } from "@utils/text";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import type { User } from "@vencord/discord-types";
+import { RenderModalProps, type User } from "@vencord/discord-types";
 import { ChannelType } from "@vencord/discord-types/enums";
 import {
-    Button as DiscordButton,
     ChannelStore,
     Forms,
     GuildMemberStore,
     IconUtils,
     Menu,
+    Modal,
+    openModal,
     React,
     SearchableSelect,
     SelectedChannelStore,
     SelectedGuildStore,
+    showToast,
     useMemo,
     UserStore,
     VoiceStateStore,
@@ -70,6 +63,8 @@ import {
 const cl = classNameFactory("vc-narrator-");
 
 const API_BASE = "https://tiktok-tts-aio.exampleuser.workers.dev";
+const AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "wma"];
+const SOUND_PLACEHOLDER = "{{SOUND}}";
 
 type LastApiCallStatus = {
     at: number;
@@ -176,6 +171,98 @@ function TroubleshootingSettings() {
     );
 }
 
+function CustomSoundSettings({ soundKey, nameKey }: { soundKey: string; nameKey: string; }) {
+    const fileInputRef = React.useRef<HTMLInputElement>(null);
+    const [busy, setBusy] = React.useState(false);
+    const forceUpdate = useForceUpdater();
+    const customSound = settings.store[soundKey];
+    const customSoundName = settings.store[nameKey] ?? "";
+    const hasCustomSound = typeof customSound === "string" && customSound.startsWith("data:audio/");
+
+    const uploadSound = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.currentTarget.files?.[0];
+        if (!file) return;
+
+        const extension = file.name.split(".").pop()?.toLowerCase();
+        if (!extension || !AUDIO_EXTENSIONS.includes(extension)) {
+            showToast("Please choose an audio file.");
+            event.currentTarget.value = "";
+            return;
+        }
+
+        setBusy(true);
+        try {
+            const dataUri = await new Promise<string>((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onloadend = () => resolve(String(reader.result ?? ""));
+                reader.onerror = reject;
+                reader.readAsDataURL(file);
+            });
+
+            if (!dataUri.startsWith("data:audio/")) {
+                showToast("Please choose an audio file.");
+                return;
+            }
+
+            settings.store[soundKey] = dataUri;
+            settings.store[nameKey] = file.name;
+            forceUpdate();
+            showToast("Custom sound saved.");
+        } catch {
+            showToast("Could not load that audio file.");
+        } finally {
+            event.currentTarget.value = "";
+            setBusy(false);
+        }
+    };
+
+    const previewSound = () => {
+        if (!hasCustomSound) return;
+
+        setBusy(true);
+        const audio = new Audio(customSound);
+        audio.volume = settings.store.volume;
+        audio.onended = () => setBusy(false);
+        audio.onerror = () => setBusy(false);
+        audio.play().catch(() => setBusy(false));
+    };
+
+    return (
+        <div className={cl("custom-sound")}>
+            <Forms.FormText className={cl("custom-sound-text")}>
+                {hasCustomSound ? `Selected: ${customSoundName || "Custom audio"}` : "No custom sound selected."}
+            </Forms.FormText>
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept=".mp3,.wav,.ogg,.m4a,.aac,.flac,.webm,.wma,.mp4"
+                className={cl("file-input")}
+                onChange={uploadSound}
+            />
+            <div className={cl("buttons")}>
+                <Button variant="secondary" size="small" disabled={busy} onClick={() => fileInputRef.current?.click()}>
+                    Choose file
+                </Button>
+                <Button variant="secondary" size="small" disabled={busy || !hasCustomSound} onClick={previewSound}>
+                    Preview
+                </Button>
+                <Button
+                    variant="dangerPrimary"
+                    size="small"
+                    disabled={busy || !hasCustomSound}
+                    onClick={() => {
+                        settings.store[soundKey] = "";
+                        settings.store[nameKey] = "";
+                        forceUpdate();
+                    }}
+                >
+                    Clear
+                </Button>
+            </div>
+        </div>
+    );
+}
+
 interface VoiceState {
     userId: string;
     channelId?: string;
@@ -193,6 +280,7 @@ interface QueueItem {
     userId?: string;
     interruptKey?: string;
     useDefaultVoice?: boolean;
+    sound?: string;
 }
 const mainQueue: QueueItem[] = [];
 const stateQueue: QueueItem[] = [];
@@ -275,6 +363,7 @@ async function processQueue() {
             userId: intro.userId,
             interruptKey: action.interruptKey,
             useDefaultVoice: false,
+            sound: intro.sound ?? action.sound,
         };
         mainQueue.push(combined);
     }
@@ -285,7 +374,7 @@ async function processQueue() {
     onQueueChange?.();
 
     try {
-        await speak(item.text, item.userId, item.interruptKey, item.useDefaultVoice);
+        await speak(item.text, item.userId, item.interruptKey, item.useDefaultVoice, item.sound);
     } catch (e) {
         console.error("TTS Error:", e);
     }
@@ -298,7 +387,7 @@ async function processQueue() {
     }, delay);
 }
 
-function queueSpeak(text: string, userId?: string, interruptKey?: string, queue: "main" | "state" = "main", useDefaultVoice?: boolean) {
+function queueSpeak(text: string, userId?: string, interruptKey?: string, queue: "main" | "state" = "main", useDefaultVoice?: boolean, sound?: string) {
     if (text.trim().length === 0) return;
 
     const targetQueue = queue === "state" ? stateQueue : mainQueue;
@@ -315,48 +404,45 @@ function queueSpeak(text: string, userId?: string, interruptKey?: string, queue:
         interruptPlayback(interruptKey);
     }
 
-    targetQueue.push({ text, userId, interruptKey, useDefaultVoice });
+    targetQueue.push({ text, userId, interruptKey, useDefaultVoice, sound });
     onQueueChange?.();
     processQueue();
 }
 
-async function speak(text: string, userId?: string, interruptKey?: string, useDefaultVoice?: boolean): Promise<void> {
+async function speak(text: string, userId?: string, interruptKey?: string, useDefaultVoice?: boolean, sound?: string): Promise<void> {
     return new Promise(resolve => {
-        const onEnd = () => {
-            if (currentStop === onEnd) {
-                currentAudio = null;
-                currentInterruptKey = undefined;
-                currentStop = null;
-            }
-            resolve();
-        };
-
-        const playAudio = (url: string) => {
+        const playAudio = (url: string, playbackRate: number) => new Promise<boolean>(resolveAudio => {
             const audio = new Audio(url);
+            let settled = false;
+
+            const finish = (completed: boolean) => {
+                if (settled) return;
+                settled = true;
+                if (currentStop === stop) {
+                    currentAudio = null;
+                    currentInterruptKey = undefined;
+                    currentStop = null;
+                }
+                resolveAudio(completed);
+            };
+
+            const stop = () => finish(false);
+
             audio.volume = settings.store.volume;
-            audio.playbackRate = settings.store.rate;
-            audio.onended = onEnd;
-            audio.onerror = onEnd;
+            audio.playbackRate = playbackRate;
+            audio.onended = () => finish(true);
+            audio.onerror = stop;
             currentAudio = audio;
             currentInterruptKey = interruptKey;
-            currentStop = onEnd;
-            audio.play().catch(onEnd);
-        };
+            currentStop = stop;
+            audio.play().catch(stop);
+        });
 
-        void (async () => {
-            const voice = useDefaultVoice
-                ? DEFAULT_VOICE
-                : getVoiceForUser(userId, {
-                    userVoiceMap: settings.store.userVoiceMap,
-                    customVoice: settings.store.customVoice,
-                    defaultVoice: DEFAULT_VOICE,
-                });
-
-            const cacheKey = `${voice}_${text}`;
+        const getTtsUrl = async (speechText: string, voice: string) => {
+            const cacheKey = `${voice}_${speechText}`;
 
             if (ttsCache.has(cacheKey)) {
-                playAudio(ttsCache.get(cacheKey)!);
-                return;
+                return ttsCache.get(cacheKey)!;
             }
 
             try {
@@ -364,8 +450,7 @@ async function speak(text: string, userId?: string, interruptKey?: string, useDe
                 if (cachedBlob) {
                     const url = URL.createObjectURL(cachedBlob);
                     ttsCache.set(cacheKey, url);
-                    playAudio(url);
-                    return;
+                    return url;
                 }
             } catch (err) {
                 console.error("Error accessing IndexedDB:", err);
@@ -379,7 +464,7 @@ async function speak(text: string, userId?: string, interruptKey?: string, useDe
                     headers: { "Content-Type": "application/json" },
                     referrerPolicy: "no-referrer",
                     body: JSON.stringify({
-                        text: text,
+                        text: speechText,
                         voice: voice,
                         base64: true,
                     }),
@@ -388,8 +473,7 @@ async function speak(text: string, userId?: string, interruptKey?: string, useDe
 
                 if (!response.ok) {
                     console.error(`TTS failed: ${response.status}`);
-                    resolve();
-                    return;
+                    return null;
                 }
 
                 const audioData = atob((await response.text()).trim());
@@ -404,13 +488,50 @@ async function speak(text: string, userId?: string, interruptKey?: string, useDe
                 ttsCache.set(cacheKey, url);
                 setCachedVoiceInDB(cacheKey, blob).catch(console.error);
 
-                playAudio(url);
+                return url;
             } catch (e) {
                 recordApiError(e);
                 console.error("TTS Network Error:", e);
-                resolve();
+                return null;
             }
-        })().catch(onEnd);
+        };
+
+        const playSpeech = async (speechText: string, voice: string) => {
+            const trimmedText = speechText.trim();
+            if (!trimmedText) return true;
+
+            const url = await getTtsUrl(trimmedText, voice);
+            return !url || await playAudio(url, settings.store.rate);
+        };
+
+        void (async () => {
+            const voice = useDefaultVoice
+                ? DEFAULT_VOICE
+                : getVoiceForUser(userId, {
+                    userVoiceMap: settings.store.userVoiceMap,
+                    customVoice: settings.store.customVoice,
+                    defaultVoice: DEFAULT_VOICE,
+                });
+
+            const soundUrl = typeof sound === "string" && sound.startsWith("data:audio/") ? sound : "";
+            const soundIndex = text.indexOf(SOUND_PLACEHOLDER);
+
+            if (!soundUrl || soundIndex === -1) {
+                await playSpeech(text.replaceAll(SOUND_PLACEHOLDER, ""), voice);
+                resolve();
+                return;
+            }
+
+            const beforeSound = text.slice(0, soundIndex);
+            const afterSound = text.slice(soundIndex + SOUND_PLACEHOLDER.length).replaceAll(SOUND_PLACEHOLDER, "");
+
+            if (await playSpeech(beforeSound, voice)) {
+                const soundCompleted = await playAudio(soundUrl, 1);
+                if (soundCompleted) await playSpeech(afterSound, voice);
+            }
+
+            resolve();
+        })().catch(() => resolve());
     });
 }
 
@@ -562,7 +683,12 @@ function playSample(tempSettings: any, type: string) {
             currentUser.globalName ?? currentUser.username,
             (myGuildId ? GuildMemberStore.getNick(myGuildId, currentUser.id) : null) ?? currentUser.username,
             settingsobj.latinOnly
-        )
+        ),
+        undefined,
+        undefined,
+        "main",
+        undefined,
+        settingsobj[type + "Sound"]
     );
 }
 
@@ -605,19 +731,52 @@ const settings = definePluginSettings({
     },
     joinMessage: {
         type: OptionType.STRING,
-        description: "Placeholders: {{USER}}, {{DISPLAY_NAME}}, {{NICKNAME}}, {{CHANNEL}}",
+        description: "Placeholders: {{USER}}, {{DISPLAY_NAME}}, {{NICKNAME}}, {{CHANNEL}}, {{SOUND}}.",
         default: "{{DISPLAY_NAME}} joined",
     },
+    joinSound: {
+        type: OptionType.COMPONENT,
+        component: () => <CustomSoundSettings soundKey="joinSound" nameKey="joinSoundName" />,
+        default: "",
+    },
+    joinSoundName: {
+        type: OptionType.STRING,
+        description: "Join sound file name.",
+        default: "",
+        hidden: true,
+    },
     leaveMessage: {
         type: OptionType.STRING,
-        description: "Leave Message",
+        description: "Placeholders: {{USER}}, {{DISPLAY_NAME}}, {{NICKNAME}}, {{CHANNEL}}, {{SOUND}}.",
         default: "{{DISPLAY_NAME}} left",
     },
+    leaveSound: {
+        type: OptionType.COMPONENT,
+        component: () => <CustomSoundSettings soundKey="leaveSound" nameKey="leaveSoundName" />,
+        default: "",
+    },
+    leaveSoundName: {
+        type: OptionType.STRING,
+        description: "Leave sound file name.",
+        default: "",
+        hidden: true,
+    },
     moveMessage: {
         type: OptionType.STRING,
-        description: "Move Message",
+        description: "Placeholders: {{USER}}, {{DISPLAY_NAME}}, {{NICKNAME}}, {{CHANNEL}}, {{SOUND}}.",
         default: "{{DISPLAY_NAME}} moved to {{CHANNEL}}",
     },
+    moveSound: {
+        type: OptionType.COMPONENT,
+        component: () => <CustomSoundSettings soundKey="moveSound" nameKey="moveSoundName" />,
+        default: "",
+    },
+    moveSoundName: {
+        type: OptionType.STRING,
+        description: "Move sound file name.",
+        default: "",
+        hidden: true,
+    },
     announceOthersMute: {
         description: "Announce when other users mute/unmute in your current VC",
         type: OptionType.BOOLEAN,
@@ -687,7 +846,7 @@ interface UserContextProps {
     user: User;
 }
 
-function VoiceSelectModal({ modalProps, user }: { modalProps: ModalProps; user: User; }) {
+function VoiceSelectModal({ modalProps, user }: { modalProps: RenderModalProps; user: User; }) {
     const DEFAULT_VALUE = "__default__";
 
     const options = useMemo(() => {
@@ -742,80 +901,72 @@ function VoiceSelectModal({ modalProps, user }: { modalProps: ModalProps; user:
     };
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <HeadingPrimary className={cl("modal-title")}>VC Narrator Voice</HeadingPrimary>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
+        <Modal
+            {...modalProps}
+            size="md"
+            title="VC Narrator Voice"
+            actions={[
+                {
+                    text: "Cancel",
+                    variant: "secondary",
+                    onClick: modalProps.onClose
+                },
+                {
+                    text: "Save",
+                    variant: "primary",
+                    onClick: () => {
+                        if (currentValue === DEFAULT_VALUE) {
+                            settings.store.userVoiceMap = removeUserVoiceFromMap(settings.store.userVoiceMap, user.id);
+                        } else {
+                            settings.store.userVoiceMap = upsertUserVoiceMap(settings.store.userVoiceMap, user.id, currentValue);
+                        }
+                        modalProps.onClose();
+                    }
+                }
+            ]}
+        >
+            <section className={Margins.bottom16}>
+                <HeadingSecondary>Select voice for {user.username}</HeadingSecondary>
+                <SearchableSelect
+                    options={options}
+                    value={options.find(o => o.value === currentValue)?.value}
+                    placeholder="Select a voice"
+                    maxVisibleItems={6}
+                    closeOnSelect={true}
+                    onChange={v => setCurrentValue(v as any)}
+                />
 
-            <ModalContent>
-                <section className={Margins.bottom16}>
-                    <HeadingSecondary>Select voice for {user.username}</HeadingSecondary>
-                    <SearchableSelect
-                        options={options}
-                        value={options.find(o => o.value === currentValue)?.value}
-                        placeholder="Select a voice"
-                        maxVisibleItems={6}
-                        closeOnSelect={true}
-                        onChange={v => setCurrentValue(v as any)}
-                    />
-
-                    <Forms.FormText className={cl("preview-hint")}>
-                        Preview how this voice sounds with their name:
-                    </Forms.FormText>
-                    <div className={cl("preview-buttons")}>
-                        <Button
-                            variant="secondary"
-                            size="small"
-                            disabled={busy}
-                            onClick={() => previewVoice(clean(displayName, settings.store.latinOnly) || "Someone")}
-                        >
-                            {busy ? "Playing..." : `"${clean(displayName, settings.store.latinOnly) || "Someone"}"`}
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            size="small"
-                            disabled={busy}
-                            onClick={() => previewVoice(`${clean(displayName, settings.store.latinOnly) || "Someone"} joined`)}
-                        >
-                            Joined
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            size="small"
-                            disabled={busy}
-                            onClick={() => previewVoice(`${clean(displayName, settings.store.latinOnly) || "Someone"} left`)}
-                        >
-                            Left
-                        </Button>
-                    </div>
-                </section>
-            </ModalContent>
-
-            <ModalFooter>
-                <div className={cl("modal-footer")}>
-                    <DiscordButton
-                        color={DiscordButton.Colors.PRIMARY}
-                        onClick={modalProps.onClose}
+                <Forms.FormText className={cl("preview-hint")}>
+                    Preview how this voice sounds with their name:
+                </Forms.FormText>
+                <div className={cl("preview-buttons")}>
+                    <Button
+                        variant="secondary"
+                        size="small"
+                        disabled={busy}
+                        onClick={() => previewVoice(clean(displayName, settings.store.latinOnly) || "Someone")}
                     >
-                        Cancel
-                    </DiscordButton>
-                    <DiscordButton
-                        color={DiscordButton.Colors.BRAND}
-                        onClick={() => {
-                            if (currentValue === DEFAULT_VALUE) {
-                                settings.store.userVoiceMap = removeUserVoiceFromMap(settings.store.userVoiceMap, user.id);
-                            } else {
-                                settings.store.userVoiceMap = upsertUserVoiceMap(settings.store.userVoiceMap, user.id, currentValue);
-                            }
-                            modalProps.onClose();
-                        }}
+                        {busy ? "Playing..." : `"${clean(displayName, settings.store.latinOnly) || "Someone"}"`}
+                    </Button>
+                    <Button
+                        variant="secondary"
+                        size="small"
+                        disabled={busy}
+                        onClick={() => previewVoice(`${clean(displayName, settings.store.latinOnly) || "Someone"} joined`)}
                     >
-                        Save
-                    </DiscordButton>
+                        Joined
+                    </Button>
+                    <Button
+                        variant="secondary"
+                        size="small"
+                        disabled={busy}
+                        onClick={() => previewVoice(`${clean(displayName, settings.store.latinOnly) || "Someone"} left`)}
+                    >
+                        Left
+                    </Button>
                 </div>
-            </ModalFooter>
-        </ModalRoot>
+            </section>
+        </Modal>
     );
 }
 
@@ -897,7 +1048,7 @@ export default definePlugin({
     name: "VcNarratorCustom",
     description: t("equicord.vcNarratorCustom.description"),
     tags: ["Accessibility", "Voice"],
-    authors: [Devs.Ven, Devs.Nyako, EquicordDevs.Loukios, EquicordDevs.examplegit],
+    authors: [Devs.Ven, Devs.Nyako, EquicordDevs.Loukios, EquicordDevs.examplegit, EquicordDevs.qdnx],
     settings,
     contextMenus: {
         "user-context": UserContextMenuPatch,
@@ -997,7 +1148,14 @@ export default definePlugin({
                             const nickname = u && ((myGuildId ? GuildMemberStore.getNick(myGuildId, userId) : null) ?? displayName);
                             const channel = ChannelStore.getChannel(id)?.name ?? "channel";
 
-                            queueSpeak(formatText(template, u, channel, displayName, nickname, settings.store.latinOnly), userId);
+                            queueSpeak(
+                                formatText(template, u, channel, displayName, nickname, settings.store.latinOnly),
+                                userId,
+                                undefined,
+                                "main",
+                                undefined,
+                                settings.store[type + "Sound"]
+                            );
                         }
                     }
 
diff --git a/src/equicordplugins/vcNarratorCustom/styles.css b/src/equicordplugins/vcNarratorCustom/styles.css
index be0eac08b..32767303f 100644
--- a/src/equicordplugins/vcNarratorCustom/styles.css
+++ b/src/equicordplugins/vcNarratorCustom/styles.css
@@ -53,6 +53,21 @@
     color: var(--text-muted);
 }
 
+.vc-narrator-custom-sound {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.vc-narrator-custom-sound-text {
+    margin: 0;
+    opacity: 0.85;
+}
+
+.vc-narrator-file-input {
+    display: none;
+}
+
 /* Voice select modal */
 .vc-narrator-modal-title {
     flex-grow: 1;
@@ -137,4 +152,4 @@
     flex-wrap: wrap;
     gap: 6px;
     justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/src/equicordplugins/viewRawVariant/index.tsx b/src/equicordplugins/viewRawVariant/index.tsx
index f8c9466fa..4153abcea 100644
--- a/src/equicordplugins/viewRawVariant/index.tsx
+++ b/src/equicordplugins/viewRawVariant/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
-import { BaseText } from "@components/BaseText";
 import { CodeBlock } from "@components/CodeBlock";
 import { Divider } from "@components/Divider";
 import ErrorBoundary from "@components/ErrorBoundary";
@@ -13,19 +12,10 @@ import { Heading } from "@components/Heading";
 import { Devs } from "@utils/constants";
 import { getIntlMessage } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import {
-    closeModal,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalRoot,
-    ModalSize,
-    openModal,
-} from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { Message } from "@vencord/discord-types";
-import { Menu } from "@webpack/common";
+import { Menu, Modal,openModal } from "@webpack/common";
 
 type CustomMessage = Message & {
     editHistory?: any;
@@ -61,38 +51,34 @@ function cleanMessage(msg: CustomMessage) {
 }
 
 function openViewRawModal(obj: any, type: string, isMessage?: boolean) {
-    const key = openModal(props => (
+    openModal(props => (
         <ErrorBoundary>
-            <ModalRoot {...props} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>
-                        View Raw {type}
-                    </BaseText>
-                    <ModalCloseButton onClick={() => closeModal(key)} />
-                </ModalHeader>
-                <ModalContent>
-                    <div style={{ padding: "16px 0" }}>
-                        {isMessage && (
-                            <>
-                                <Heading>
-                                    Content
-                                </Heading>
-                                <CodeBlock
-                                    content={obj.content}
-                                    lang="markdown"
-                                />
-                                <Divider className={Margins.bottom20} />
-                            </>
-                        )}
+            <Modal
+                {...props}
+                size="lg"
+                title={`View Raw ${type}`}
+            >
+                <div style={{ padding: "16px 0" }}>
+                    {isMessage && (
+                        <>
+                            <Heading>
+                                Content
+                            </Heading>
+                            <CodeBlock
+                                content={obj.content}
+                                lang="markdown"
+                            />
+                            <Divider className={Margins.bottom20} />
+                        </>
+                    )}
 
-                        <Heading>{type} Data</Heading>
-                        <CodeBlock
-                            content={JSON.stringify(obj, null, 4)}
-                            lang="json"
-                        />
-                    </div>
-                </ModalContent>
-            </ModalRoot>
+                    <Heading>{type} Data</Heading>
+                    <CodeBlock
+                        content={JSON.stringify(obj, null, 4)}
+                        lang="json"
+                    />
+                </div>
+            </Modal>
         </ErrorBoundary>
     ));
 }
diff --git a/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogEntryComponent.tsx b/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogEntryComponent.tsx
index e343de4ef..3e3ccf26f 100644
--- a/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogEntryComponent.tsx
+++ b/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogEntryComponent.tsx
@@ -7,9 +7,8 @@
 import "./VoiceChannelLogEntryComponent.css";
 
 import { openUserProfile } from "@utils/discord";
-import { closeAllModals } from "@utils/modal";
 import { Channel } from "@vencord/discord-types";
-import { ApplicationStore, Clickable, IconUtils, NavigationRouter, Timestamp, Tooltip, UserStore } from "@webpack/common";
+import { ApplicationStore, Clickable, closeAllModals,IconUtils, NavigationRouter, Timestamp, Tooltip, UserStore } from "@webpack/common";
 
 import { getCallStartTime } from "../logs";
 import { VoiceChannelLogEntry } from "../types";
diff --git a/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogModal.tsx b/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogModal.tsx
index 8437dc03d..60bf5a793 100644
--- a/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogModal.tsx
+++ b/src/equicordplugins/voiceChannelLog/components/VoiceChannelLogModal.tsx
@@ -4,12 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
 import { classes } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Channel } from "@vencord/discord-types";
+import { Channel, RenderModalProps } from "@vencord/discord-types";
 import { findStoreLazy } from "@webpack";
-import { Button, React, ScrollerThin } from "@webpack/common";
+import { Modal, openModal, React, ScrollerThin } from "@webpack/common";
 
 import { clearLogs, getVcLogs, vcLogSubscribe } from "../logs";
 import { cl } from "../utils";
@@ -23,47 +21,43 @@ export function openVoiceChannelLog(channel: Channel) {
     ));
 }
 
-export function VoiceChannelLogModal({ channel, props }: { channel: Channel; props: ModalProps; }) {
+export function VoiceChannelLogModal({ channel, props }: { channel: Channel; props: RenderModalProps; }) {
     const logs = React.useSyncExternalStore(vcLogSubscribe, () => getVcLogs(channel.id));
 
     return (
-        <ModalRoot {...props} size={ModalSize.LARGE}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" className={cl("header")} style={{ flexGrow: 1 }}>
-                    {channel.name} logs
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-
-            <ModalContent>
-                <ScrollerThin fade className={classes(cl("scroller"), `group-spacing-${AccessibilityStore.messageGroupSpacing}`)}>
-                    {logs.length > 0 ? logs.map((entry, i) => {
-                        const elements: React.ReactNode[] = [];
-
-                        if (i === 0 || entry.timestamp.toDateString() !== logs[i - 1].timestamp.toDateString()) {
-                            elements.push(
-                                <div key={`sep-${i}`} className={cl("date-separator")} role="separator" aria-label={entry.timestamp.toDateString()}>
-                                    <span>{entry.timestamp.toDateString()}</span>
-                                </div>
-                            );
-                        }
+        <Modal
+            {...props}
+            size="lg"
+            title={`${channel.name} logs`}
+            actions={[
+                {
+                    text: "Clear logs",
+                    variant: "dangerPrimary",
+                    onClick: () => clearLogs(channel.id)
+                }
+            ]}
+        >
+            <ScrollerThin fade className={classes(cl("scroller"), `group-spacing-${AccessibilityStore.messageGroupSpacing}`)}>
+                {logs.length > 0 ? logs.map((entry, i) => {
+                    const elements: React.ReactNode[] = [];
 
+                    if (i === 0 || entry.timestamp.toDateString() !== logs[i - 1].timestamp.toDateString()) {
                         elements.push(
-                            <VoiceChannelLogEntryComponent key={`entry-${i}`} logEntry={entry} channel={channel} />
+                            <div key={`sep-${i}`} className={cl("date-separator")} role="separator" aria-label={entry.timestamp.toDateString()}>
+                                <span>{entry.timestamp.toDateString()}</span>
+                            </div>
                         );
+                    }
 
-                        return elements;
-                    }) : (
-                        <div className={cl("empty")}>No logs to display.</div>
-                    )}
-                </ScrollerThin>
-            </ModalContent>
+                    elements.push(
+                        <VoiceChannelLogEntryComponent key={`entry-${i}`} logEntry={entry} channel={channel} />
+                    );
 
-            <ModalFooter>
-                <Button color={Button.Colors.RED} onClick={() => clearLogs(channel.id)}>
-                    Clear logs
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    return elements;
+                }) : (
+                    <div className={cl("empty")}>No logs to display.</div>
+                )}
+            </ScrollerThin>
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/voiceMessageTranscriber.desktop/index.tsx b/src/equicordplugins/voiceMessageTranscriber.desktop/index.tsx
index d8531031e..09c2c8aed 100644
--- a/src/equicordplugins/voiceMessageTranscriber.desktop/index.tsx
+++ b/src/equicordplugins/voiceMessageTranscriber.desktop/index.tsx
@@ -16,11 +16,11 @@ import { Heading } from "@components/Heading";
 import { Span } from "@components/Span";
 import { copyToClipboard } from "@utils/clipboard";
 import { Devs } from "@utils/constants";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType, PluginNative } from "@utils/types";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findComponentByCodeLazy } from "@webpack";
-import { lodash, ScrollerAuto, SearchableSelect, useEffect, useRef, useState } from "@webpack/common";
+import { lodash, Modal, openModal, ScrollerAuto, SearchableSelect, useEffect, useRef, useState } from "@webpack/common";
 
 import { cl, decodeAudio, LANGUAGES, TranscriptionWorker } from "./utils";
 const Native = VencordNative.pluginHelpers.VoiceMessageTranscriber as PluginNative<typeof import("./native")>;
@@ -94,7 +94,7 @@ const settings = definePluginSettings({
     }
 });
 
-function LanguageSelectionModal(props: { modalProps: ModalProps, src: string; }) {
+function LanguageSelectionModal(props: { modalProps: RenderModalProps, src: string; }) {
     const { modalProps, src } = props;
     const [language, setLanguage] = useState<string>("auto");
     const [task, setTask] = useState<string>("transcribe");
@@ -119,51 +119,52 @@ function LanguageSelectionModal(props: { modalProps: ModalProps, src: string; })
     };
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="bold" style={{ flexGrow: 1 }}>Transcription Options</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent style={{ padding: "16px" }}>
-                <Flex flexDirection="column" gap={20}>
-                    <div>
-                        <BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
-                            Audio Language
-                        </BaseText>
-                        <SearchableSelect
-                            options={languageOptions}
-                            value={languageOptions.find(o => o.value === language)?.value}
-                            onChange={setLanguage}
-                        />
-                    </div>
+        <Modal
+            {...modalProps}
+            size="md"
+            title="Transcription Options"
+            actions={[
+                {
+                    text: "Start",
+                    variant: "primary",
+                    onClick: start
+                }
+            ]}
+        >
+            <Flex flexDirection="column" gap={20} style={{ padding: "16px" }}>
+                <div>
+                    <BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
+                        Audio Language
+                    </BaseText>
+                    <SearchableSelect
+                        options={languageOptions}
+                        value={languageOptions.find(o => o.value === language)?.value}
+                        onChange={setLanguage}
+                    />
+                </div>
 
-                    <div>
-                        <BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
-                            Action
-                        </BaseText>
-                        <ManaBaseRadioGroup
-                            options={[{
-                                name: "Transcribe",
-                                value: "transcribe"
-                            }, {
-                                name: "Translate to English",
-                                value: "translate"
-                            }]}
-                            value={task}
-                            onChange={v => setTask(v as string)}
-                        />
-                    </div>
-
-                    <Button onClick={start} variant="primary">
-                        Start
-                    </Button>
-                </Flex>
-            </ModalContent>
-        </ModalRoot>
+                <div>
+                    <BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
+                        Action
+                    </BaseText>
+                    <ManaBaseRadioGroup
+                        options={[{
+                            name: "Transcribe",
+                            value: "transcribe"
+                        }, {
+                            name: "Translate to English",
+                            value: "translate"
+                        }]}
+                        value={task}
+                        onChange={v => setTask(v as string)}
+                    />
+                </div>
+            </Flex>
+        </Modal>
     );
 }
 
-function TranscriptionModal(props: { modalProps: ModalProps, src: string, options: { language: string, task: string; }; }) {
+function TranscriptionModal(props: { modalProps: RenderModalProps, src: string, options: { language: string, task: string; }; }) {
     const { modalProps, src, options } = props;
     const [status, setStatus] = useState<string>("initializing");
     const [result, setResult] = useState<{ text: string, chunks: { timestamp: [number, number], text: string; }[]; } | null>(null);
@@ -253,61 +254,71 @@ function TranscriptionModal(props: { modalProps: ModalProps, src: string, option
             : result.text
     ) : "";
 
-    return <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-        <ModalHeader>
-            <BaseText size="lg" weight="bold" style={{ flexGrow: 1 }}>Transcription</BaseText>
-            <ModalCloseButton onClick={modalProps.onClose} />
-        </ModalHeader>
-        <ModalContent className={cl("content")}>
-            {error ? (
-                <Flex flexDirection="column" gap={16} style={{ padding: "20px 0" }}>
-                    <Heading tag="h3" style={{ color: "var(--red-360)" }}>Error</Heading>
-                    <Span style={{ whiteSpace: "pre-wrap" }}>{error}</Span>
-                    <Button onClick={retry}>
-                        Retry
-                    </Button>
-                </Flex>
-            ) : (status === "complete" || (status === "transcribing" && result)) ? (
-                <Flex flexDirection="column" gap={16} style={{ paddingBottom: "20px" }}>
-                    {status === "transcribing" && (
-                        <Span size="sm" color="text-muted">Transcribing in progress...</Span>
-                    )}
-                    <ScrollerAuto className={cl("result")}>
-                        <Span>{displayText}</Span>
-                    </ScrollerAuto>
-                    <Flex flexDirection="row" gap={12} alignItems="center">
-                        <div style={{ flexGrow: 1 }}>
-                            <FormSwitch
-                                title="Show Timestamps"
-                                value={showTimestamps}
-                                onChange={setShowTimestamps}
-                            />
-                        </div>
+    const actions: any[] = [];
+    if (error) {
+        actions.push({
+            text: "Retry",
+            variant: "primary",
+            onClick: retry
+        });
+    } else if (status === "complete" || (status === "transcribing" && result)) {
+        actions.push({
+            text: copied ? "Copied!" : "Copy to Clipboard",
+            variant: "primary",
+            disabled: status === "transcribing" || copied,
+            onClick: () => {
+                copyToClipboard(displayText);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+            }
+        });
+    }
+
+    return (
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Transcription"
+            actions={actions}
+        >
+            <div className={cl("content")}>
+                {error ? (
+                    <Flex flexDirection="column" gap={16} style={{ padding: "20px 0" }}>
+                        <Heading tag="h3" style={{ color: "var(--red-360)" }}>Error</Heading>
+                        <Span style={{ whiteSpace: "pre-wrap" }}>{error}</Span>
                     </Flex>
-                    <Button
-                        disabled={status === "transcribing" || copied}
-                        onClick={() => {
-                            copyToClipboard(displayText);
-                            setCopied(true);
-                            setTimeout(() => setCopied(false), 2000);
-                        }}
-                    >
-                        {copied ? "Copied!" : "Copy to Clipboard"}
-                    </Button>
-                </Flex>
-            ) : (
-                <Flex flexDirection="column" gap={16} style={{ padding: "20px 0", alignItems: "center" }}>
-                    <Heading tag="h3">
-                        {status === "initializing" && "Initializing..."}
-                        {status === "downloading_audio" && "Downloading Audio..."}
-                        {status === "processing_audio" && "Processing Audio..."}
-                        {status === "loading" && "Loading Model..."}
-                        {status === "transcribing" && "Transcribing..."}
-                    </Heading>
-                </Flex>
-            )}
-        </ModalContent>
-    </ModalRoot>;
+                ) : (status === "complete" || (status === "transcribing" && result)) ? (
+                    <Flex flexDirection="column" gap={16} style={{ paddingBottom: "20px" }}>
+                        {status === "transcribing" && (
+                            <Span size="sm" color="text-muted">Transcribing in progress...</Span>
+                        )}
+                        <ScrollerAuto className={cl("result")}>
+                            <Span>{displayText}</Span>
+                        </ScrollerAuto>
+                        <Flex flexDirection="row" gap={12} alignItems="center">
+                            <div style={{ flexGrow: 1 }}>
+                                <FormSwitch
+                                    title="Show Timestamps"
+                                    value={showTimestamps}
+                                    onChange={setShowTimestamps}
+                                />
+                            </div>
+                        </Flex>
+                    </Flex>
+                ) : (
+                    <Flex flexDirection="column" gap={16} style={{ padding: "20px 0", alignItems: "center" }}>
+                        <Heading tag="h3">
+                            {status === "initializing" && "Initializing..."}
+                            {status === "downloading_audio" && "Downloading Audio..."}
+                            {status === "processing_audio" && "Processing Audio..."}
+                            {status === "loading" && "Loading Model..."}
+                            {status === "transcribing" && "Transcribing..."}
+                        </Heading>
+                    </Flex>
+                )}
+            </div>
+        </Modal>
+    );
 }
 
 export default definePlugin({
diff --git a/src/equicordplugins/voiceStats/index.tsx b/src/equicordplugins/voiceStats/index.tsx
index 5d8c8a39b..555904e6c 100644
--- a/src/equicordplugins/voiceStats/index.tsx
+++ b/src/equicordplugins/voiceStats/index.tsx
@@ -140,7 +140,10 @@ export default definePlugin({
     tags: ["Voice", "Friends"],
     authors: [EquicordDevs.Moowi],
     dependencies: ["ProfileSectionsAPI"],
-    renderProfileSection: VoiceStatsSection,
+    renderProfileSection: {
+        render: VoiceStatsSection,
+        priority: 0,
+    },
     flux: {
         VOICE_STATE_UPDATES({ voiceStates }: { voiceStates: VoiceState[]; }) {
             const myId = UserStore.getCurrentUser()?.id;
@@ -159,8 +162,8 @@ export default definePlugin({
                     continue;
                 }
 
-                const joinedMyChannel = channelId === trackedChannelId && oldChannelId !== trackedChannelId;
-                const leftMyChannel = oldChannelId === trackedChannelId && channelId !== trackedChannelId;
+                const joinedMyChannel = trackedChannelId !== null && channelId === trackedChannelId && oldChannelId !== trackedChannelId;
+                const leftMyChannel = trackedChannelId !== null && oldChannelId === trackedChannelId && channelId !== trackedChannelId;
 
                 if (joinedMyChannel) {
                     sessionStarts.set(userId, Date.now());
diff --git a/src/equicordplugins/webpackTarball/index.tsx b/src/equicordplugins/webpackTarball/index.tsx
index acfd907ea..5db5742fc 100644
--- a/src/equicordplugins/webpackTarball/index.tsx
+++ b/src/equicordplugins/webpackTarball/index.tsx
@@ -8,14 +8,14 @@ import { definePluginSettings } from "@api/Settings";
 import { BaseText } from "@components/BaseText";
 import { Flex } from "@components/Flex";
 import { FormSwitch } from "@components/FormSwitch";
-import { Heading, HeadingPrimary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { Devs } from "@utils/constants";
 import { makeLazy } from "@utils/lazy";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findByProps, wreq } from "@webpack";
-import { Button, Timestamp, useState } from "@webpack/common";
+import { Button, Modal,openModal, Timestamp, useState } from "@webpack/common";
 
 import TarFile from "./tar";
 import * as Webpack from "./webpack";
@@ -38,10 +38,9 @@ export default definePlugin({
 
     toolboxActions: {
         "Webpack Tarball"() {
-            const key = openModal(props => (
+            openModal(props => (
                 <TarModal
                     modalProps={props}
-                    close={() => closeModal(key)}
                 />
             ));
         }
@@ -84,7 +83,7 @@ async function saveTar(patched: boolean) {
     tar.save(`${root}.tar`);
 }
 
-function TarModal({ modalProps, close }: { modalProps: ModalProps; close(): void; }) {
+function TarModal({ modalProps }: { modalProps: RenderModalProps; }) {
     const webpackRequire = wreq as any;
     const { buildNumber, builtAt } = getBuildNumber();
     const [, rerender] = useState({});
@@ -100,66 +99,63 @@ function TarModal({ modalProps, close }: { modalProps: ModalProps; close(): void
     const { patched } = settings.use(["patched"]);
     const WEBPACK_CHUNK = "webpackChunkdiscord_app";
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <HeadingPrimary>
-                    Webpack Tarball
-                </HeadingPrimary>
+        <Modal
+            {...modalProps}
+            size="md"
+            title="Webpack Tarball"
+            actions={[
+                {
+                    text: "Create",
+                    variant: "primary",
+                    onClick: () => {
+                        saveTar(patched);
+                        modalProps.onClose();
+                    }
+                }
+            ]}
+        >
+            <div style={{ marginBottom: "16px" }}>
                 <BaseText size="md">
                     <Timestamp timestamp={new Date(builtAt)} isInline={false}>
                         {"Build number "}
                         {buildNumber}
                     </Timestamp>
                 </BaseText>
-                <ModalCloseButton onClick={close} />
-            </ModalHeader>
+            </div>
 
-            <ModalContent>
-                <div style={{ marginTop: "8px", marginBottom: "24px" }}>
-                    <Heading>
-                        Lazy chunks
-                    </Heading>
-                    <Flex alignItems="center">
-                        <BaseText
-                            size="md"
-                            style={{ flexGrow: 1 }}
-                        >
-                            {loaded}/{all}
-                            {errored ? ` (${errored} errors)` : null}
-                        </BaseText>
-                        <Button
-                            disabled={loading === all || isLoading}
-                            onClick={async () => {
-                                setLoading(true);
-                                // @ts-ignore
-                                await Webpack.protectWebpack(window[WEBPACK_CHUNK], async () => {
-                                    await Webpack.forceLoadAll(webpackRequire, rerender);
-                                });
-                            }}
-                        >
-                            {loaded === all ? "Loaded" : loading === all ? "Loading" : "Load all"}
-                        </Button>
-                    </Flex>
-                </div>
+            <div style={{ marginTop: "8px", marginBottom: "24px" }}>
+                <Heading>
+                    Lazy chunks
+                </Heading>
+                <Flex alignItems="center">
+                    <BaseText
+                        size="md"
+                        style={{ flexGrow: 1 }}
+                    >
+                        {loaded}/{all}
+                        {errored ? ` (${errored} errors)` : null}
+                    </BaseText>
+                    <Button
+                        disabled={loading === all || isLoading}
+                        onClick={async () => {
+                            setLoading(true);
+                            // @ts-ignore
+                            await Webpack.protectWebpack(window[WEBPACK_CHUNK], async () => {
+                                await Webpack.forceLoadAll(webpackRequire, rerender);
+                            });
+                        }}
+                    >
+                        {loaded === all ? "Loaded" : loading === all ? "Loading" : "Load all"}
+                    </Button>
+                </Flex>
+            </div>
 
-                <FormSwitch
-                    value={patched}
-                    onChange={v => settings.store.patched = v}
-                    title={settings.def.patched.description}
-                    hideBorder
-                />
-            </ModalContent>
-
-            <ModalFooter>
-                <Button
-                    onClick={() => {
-                        saveTar(patched);
-                        close();
-                    }}
-                >
-                    Create
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+            <FormSwitch
+                value={patched}
+                onChange={v => settings.store.patched = v}
+                title={settings.def.patched.description}
+                hideBorder
+            />
+        </Modal>
     );
 }
diff --git a/src/equicordplugins/zipPreview/components.tsx b/src/equicordplugins/zipPreview/components.tsx
index 5dc9cffbd..da2944bfc 100644
--- a/src/equicordplugins/zipPreview/components.tsx
+++ b/src/equicordplugins/zipPreview/components.tsx
@@ -4,16 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Button } from "@components/Button";
 import { CodeBlock } from "@components/CodeBlock";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
-import { Heading } from "@components/Heading";
 import { ChevronSmallDownIcon, ChevronSmallUpIcon, FolderIcon } from "@components/Icons";
 import { classNameFactory } from "@utils/css";
 import { copyWithToast } from "@utils/discord";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { useEffect, useMemo, useRef, useState } from "@webpack/common";
+import { Modal,openModal, useEffect, useMemo, useRef, useState } from "@webpack/common";
 
 import {
     createImageObjectUrl,
@@ -312,52 +308,50 @@ function openZipEntryModal(entry: ZipEntry) {
 
 function openTextEntryModal(entry: ZipEntry) {
     const content = readTextEntry(entry);
-    const key = openModal(modalProps => (
+    openModal(modalProps => (
         <ErrorBoundary>
-            <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <Heading tag="h2" className={cl("modal-title")}>{entry.name}</Heading>
-                    <ModalCloseButton onClick={() => closeModal(key)} />
-                </ModalHeader>
-                <ModalContent className={cl("modal-content")}>
-                    <div className={cl("code-wrap")}>
-                        <CodeBlock content={content} lang={getCodeLanguage(entry)} />
-                    </div>
-                </ModalContent>
-                <ModalFooter>
-                    <Flex gap={8} justifyContent="flex-end">
-                        <Button variant="secondary" onClick={() => copyWithToast(content, "File contents copied to clipboard!")}>
-                            Copy
-                        </Button>
-                        <Button onClick={() => makeDownload(entry)}>
-                            Download
-                        </Button>
-                    </Flex>
-                </ModalFooter>
-            </ModalRoot>
+            <Modal
+                {...modalProps}
+                size="lg"
+                title={entry.name}
+                actions={[
+                    {
+                        text: "Copy",
+                        variant: "secondary",
+                        onClick: () => copyWithToast(content, "File contents copied to clipboard!")
+                    },
+                    {
+                        text: "Download",
+                        variant: "primary",
+                        onClick: () => makeDownload(entry)
+                    }
+                ]}
+            >
+                <div className={cl("code-wrap")}>
+                    <CodeBlock content={content} lang={getCodeLanguage(entry)} />
+                </div>
+            </Modal>
         </ErrorBoundary>
     ));
 }
 
 function openImageEntryModal(entry: ZipEntry) {
-    const key = openModal(modalProps => (
+    openModal(modalProps => (
         <ErrorBoundary>
-            <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <Heading tag="h2" className={cl("modal-title")}>{entry.name}</Heading>
-                    <ModalCloseButton onClick={() => closeModal(key)} />
-                </ModalHeader>
-                <ModalContent className={cl("modal-content")}>
-                    <ZipImagePreview entry={entry} />
-                </ModalContent>
-                <ModalFooter>
-                    <Flex gap={8} justifyContent="flex-end">
-                        <Button onClick={() => makeDownload(entry)}>
-                            Download
-                        </Button>
-                    </Flex>
-                </ModalFooter>
-            </ModalRoot>
+            <Modal
+                {...modalProps}
+                size="lg"
+                title={entry.name}
+                actions={[
+                    {
+                        text: "Download",
+                        variant: "primary",
+                        onClick: () => makeDownload(entry)
+                    }
+                ]}
+            >
+                <ZipImagePreview entry={entry} />
+            </Modal>
         </ErrorBoundary>
     ));
 }
diff --git a/src/fixWeirdAppRegionBug.css b/src/fixWeirdAppRegionBug.css
new file mode 100644
index 000000000..bb4bb663e
--- /dev/null
+++ b/src/fixWeirdAppRegionBug.css
@@ -0,0 +1,4 @@
+/* Works around a very strange issue where *something* (electron?) will inject body { app-region: drag } when using online themes */
+body {
+    app-region: no-drag;
+}
\ No newline at end of file
diff --git a/src/main/applyHostPatch.ts b/src/main/applyHostPatch.ts
index 14d5a22c2..8f2dcd258 100644
--- a/src/main/applyHostPatch.ts
+++ b/src/main/applyHostPatch.ts
@@ -1,5 +1,5 @@
 /*
- * Vencord, a modification for Discord's desktop app
+ * Vencord, a Discord client mod
  * Copyright (c) 2026 Vendicated and contributors
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
diff --git a/src/main/hostUpdateHook.ts b/src/main/hostUpdateHook.ts
index bf359f0b5..fa063058c 100644
--- a/src/main/hostUpdateHook.ts
+++ b/src/main/hostUpdateHook.ts
@@ -1,5 +1,5 @@
 /*
- * Vencord, a modification for Discord's desktop app
+ * Vencord, a Discord client mod
  * Copyright (c) 2026 Vendicated and contributors
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
diff --git a/src/main/ipcMain.ts b/src/main/ipcMain.ts
index dc5160cec..247ab7995 100644
--- a/src/main/ipcMain.ts
+++ b/src/main/ipcMain.ts
@@ -26,6 +26,7 @@ import { app, BrowserWindow, dialog, ipcMain, nativeTheme, shell, systemPreferen
 import monacoHtml from "file://monacoWin.html?minify&base64";
 import { FSWatcher, mkdirSync, readFileSync, watch, writeFileSync } from "fs";
 import { open, readdir, readFile, unlink } from "fs/promises";
+import { release } from "os";
 import { join, normalize } from "path";
 
 import { registerCspIpcHandlers } from "./csp/manager";
@@ -192,3 +193,7 @@ if (IS_DISCORD_DESKTOP) {
         e.returnValue = readFileSync(join(__dirname, "renderer.js"), "utf-8");
     });
 }
+
+ipcMain.on(IpcEvents.SUPPORTS_WINDOWS_MATERIAL, e => {
+    e.returnValue = process.platform === "win32" && Number(release().split(".")[2]) >= 22621;
+});
diff --git a/src/main/patchWin32Updater.ts b/src/main/patchWin32Updater.ts
index d42f6db62..14e328baf 100644
--- a/src/main/patchWin32Updater.ts
+++ b/src/main/patchWin32Updater.ts
@@ -1,6 +1,6 @@
 /*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
diff --git a/src/main/patcher.ts b/src/main/patcher.ts
index f067bbaaf..10069e6dd 100644
--- a/src/main/patcher.ts
+++ b/src/main/patcher.ts
@@ -84,50 +84,54 @@ if (!IS_VANILLA) {
 
     class BrowserWindow extends electron.BrowserWindow {
         constructor(options: BrowserWindowConstructorOptions) {
-            if (options?.webPreferences?.preload && options.title) {
-                const original = options.webPreferences.preload;
-                const isMainWindow = options.title === "Discord";
-                options.webPreferences.preload = join(__dirname, "preload.js");
-                options.webPreferences.sandbox = false;
-                // work around discord unloading when in background
-                options.webPreferences.backgroundThrottling = false;
-
-                if (settings.frameless) {
-                    options.frame = false;
-                } else if (settings.mainWindowFrameless && isMainWindow) {
-                    options.frame = false;
-                } else if (process.platform === "win32" && settings.winNativeTitleBar) {
-                    delete options.frame;
-                }
-
-                if (settings.transparent) {
-                    options.transparent = true;
-                    options.backgroundColor = "#00000000";
-                }
-
-                if (settings.disableMinSize) {
-                    options.minWidth = 0;
-                    options.minHeight = 0;
-                }
-
-                const needsVibrancy = process.platform === "darwin" && settings.macosVibrancyStyle;
-
-                if (needsVibrancy) {
-                    options.backgroundColor = "#00000000";
-                    if (settings.macosVibrancyStyle) {
-                        options.vibrancy = settings.macosVibrancyStyle;
-                    }
-                }
-
-                process.env.DISCORD_PRELOAD = original;
-
+            if (!options?.webPreferences?.preload || !options.title) {
                 super(options);
+                return;
+            }
 
-                if (settings.disableMinSize) {
-                    // Disable the Electron call entirely so that Discord can't dynamically change the size
-                    this.setMinimumSize = (width: number, height: number) => { };
-                }
-            } else super(options);
+            const { frameless, mainWindowFrameless, winNativeTitleBar, disableMinSize, transparent, macosVibrancyStyle, windowsMaterial } = settings;
+
+            const original = options.webPreferences.preload;
+            const isMainWindow = options.title === "Discord";
+            options.webPreferences.preload = join(__dirname, "preload.js");
+            options.webPreferences.sandbox = false;
+            // work around discord unloading when in background
+            options.webPreferences.backgroundThrottling = false;
+
+            if (mainWindowFrameless && isMainWindow) {
+                options.frame = false;
+            } else if (frameless) {
+                options.frame = false;
+            } else if (process.platform === "win32" && winNativeTitleBar) {
+                delete options.frame;
+            }
+
+            if (disableMinSize) {
+                options.minWidth = 0;
+                options.minHeight = 0;
+            }
+
+            if (transparent) {
+                options.transparent = true;
+                options.backgroundColor = "#00000000";
+            }
+            if (process.platform === "darwin" && macosVibrancyStyle) {
+                options.vibrancy = macosVibrancyStyle;
+                options.backgroundColor = "#00000000";
+            }
+            if (process.platform === "win32" && windowsMaterial && windowsMaterial !== "none") {
+                options.backgroundMaterial = windowsMaterial;
+                options.backgroundColor = "#00000000";
+            }
+
+            process.env.DISCORD_PRELOAD = original;
+
+            super(options);
+
+            if (disableMinSize) {
+                // Disable the Electron call entirely so that Discord can't dynamically change the size
+                this.setMinimumSize = (_width: number, _height: number) => { };
+            }
         }
     }
     Object.assign(BrowserWindow, electron.BrowserWindow);
diff --git a/src/plugins/_api/badges/modals.tsx b/src/plugins/_api/badges/modals.tsx
index 816b58575..3ae93ceda 100644
--- a/src/plugins/_api/badges/modals.tsx
+++ b/src/plugins/_api/badges/modals.tsx
@@ -6,23 +6,25 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { HeadingPrimary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { Heart } from "@components/Heart";
 import { Paragraph } from "@components/Paragraph";
 import { DonateButton, TranslateButton } from "@components/settings";
 import { Margins } from "@utils/margins";
-import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 import { Translate } from "@utils/translation";
+import { Modal, openModal } from "@webpack/common";
 
 export function VencordDonorModal() {
-    const modalKey = openModal(props => (
+    openModal(props => (
         <ErrorBoundary noop onError={() => {
-            closeModal(modalKey);
+            props.onClose();
             VencordNative.native.openExternal("https://github.com/sponsors/Vendicated");
         }}>
-            <ModalRoot {...props}>
-                <ModalHeader>
-                    <HeadingPrimary
+            <Modal
+                {...props}
+                title={
+                    <Heading
+                        tag="h2"
                         style={{
                             width: "100%",
                             textAlign: "center",
@@ -35,9 +37,10 @@ export function VencordDonorModal() {
                                 Vencord Donor
                             </Translate>
                         </Flex>
-                    </HeadingPrimary>
-                </ModalHeader>
-                <ModalContent>
+                    </Heading>
+                }
+            >
+                <div>
                     <Flex>
                         <img
                             role="presentation"
@@ -54,32 +57,38 @@ export function VencordDonorModal() {
                     </Flex>
                     <div style={{ padding: "1em" }}>
                         <Paragraph>
-                            This Badge is a special perk for Vencord Donors
+                            <Translate i18nKey="vencord.vencordDonor.description">
+                                This Badge is a special perk for Vencord Donors
+                            </Translate>
                         </Paragraph>
                         <Paragraph className={Margins.top20}>
-                            Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
+                            <Translate i18nKey="vencord.vencordDonor.description2">
+                                Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
+                            </Translate>
                         </Paragraph>
                     </div>
-                </ModalContent>
-                <ModalFooter>
+                </div>
+                <div>
                     <Flex justifyContent="center" style={{ width: "100%" }}>
                         <DonateButton />
                     </Flex>
-                </ModalFooter>
-            </ModalRoot>
+                </div>
+            </Modal>
         </ErrorBoundary>
     ));
 }
 
 export function EquicordDonorModal() {
-    const modalKey = openModal(props => (
+    openModal(props => (
         <ErrorBoundary noop onError={() => {
-            closeModal(modalKey);
+            props.onClose();
             VencordNative.native.openExternal("https://github.com/sponsors/thororen1234");
         }}>
-            <ModalRoot {...props}>
-                <ModalHeader>
-                    <HeadingPrimary
+            <Modal
+                {...props}
+                title={
+                    <Heading
+                        tag="h2"
                         style={{
                             width: "100%",
                             textAlign: "center",
@@ -92,9 +101,10 @@ export function EquicordDonorModal() {
                                 Equicord Donor
                             </Translate>
                         </Flex>
-                    </HeadingPrimary>
-                </ModalHeader>
-                <ModalContent>
+                    </Heading>
+                }
+            >
+                <div>
                     <Flex>
                         <img
                             role="presentation"
@@ -121,25 +131,27 @@ export function EquicordDonorModal() {
                             </Translate>
                         </Paragraph>
                     </div>
-                </ModalContent>
-                <ModalFooter>
+                </div>
+                <div>
                     <Flex justifyContent="center" style={{ width: "100%" }}>
                         <DonateButton equicord={true} />
                     </Flex>
-                </ModalFooter>
-            </ModalRoot>
-        </ErrorBoundary>
+                </div>
+            </Modal>
+        </ErrorBoundary >
     ));
 }
 
 export function EquicordTranslatorModal() {
-    const modalKey = openModal(props => (
+    openModal(props => (
         <ErrorBoundary noop onError={() => {
-            closeModal(modalKey);
+            props.onClose();
         }}>
-            <ModalRoot {...props}>
-                <ModalHeader>
-                    <HeadingPrimary
+            <Modal
+                {...props}
+                title={
+                    <Heading
+                        tag="h2"
                         style={{
                             width: "100%",
                             textAlign: "center",
@@ -151,9 +163,10 @@ export function EquicordTranslatorModal() {
                                 Equicord Translator
                             </Translate>
                         </Flex>
-                    </HeadingPrimary>
-                </ModalHeader>
-                <ModalContent>
+                    </Heading>
+                }
+            >
+                <div>
                     <Flex>
                         <img
                             className="vc-translate-modal-icon"
@@ -169,13 +182,13 @@ export function EquicordTranslatorModal() {
                             </Translate>
                         </Paragraph>
                     </div>
-                </ModalContent>
-                <ModalFooter>
+                </div>
+                <div>
                     <Flex justifyContent="center" style={{ width: "100%" }}>
                         <TranslateButton />
                     </Flex>
-                </ModalFooter>
-            </ModalRoot>
+                </div>
+            </Modal>
         </ErrorBoundary>
     ));
 }
diff --git a/src/plugins/_api/contextMenu.ts b/src/plugins/_api/contextMenu.ts
index 74878286d..5b152cfc7 100644
--- a/src/plugins/_api/contextMenu.ts
+++ b/src/plugins/_api/contextMenu.ts
@@ -17,8 +17,24 @@
 */
 
 import { Devs } from "@utils/constants";
+import { canonicalizeMatch } from "@utils/patches";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
+import { Menu } from "@webpack/common";
+
+// duplicate values have multiple branches with different types. Just include all to be safe
+const nameMap = {
+    radio: "MenuRadioItem",
+    separator: "MenuSeparator",
+    checkbox: "MenuCheckboxItem",
+    groupstart: "MenuGroup",
+
+    control: "MenuControlItem",
+    compositecontrol: "MenuControlItem",
+
+    item: "MenuItem",
+    customitem: "MenuItem",
+};
 
 export default definePlugin({
     name: "ContextMenuAPI",
@@ -27,13 +43,6 @@ export default definePlugin({
     required: true,
 
     patches: [
-        {
-            find: "♫ (つ｡◕‿‿◕｡)つ ♪",
-            replacement: {
-                match: /(?=let{navId:)(?<=function \i\((\i)\).+?)/,
-                replace: "$1=Vencord.Api.ContextMenu._usePatchContextMenu($1);"
-            }
-        },
         {
             find: "navId:",
             all: true,
@@ -49,6 +58,54 @@ export default definePlugin({
                     }
                 }
             ]
-        }
-    ]
+        },
+
+        {
+            find: "Menu API only allows Items",
+            replacement: [
+                // Patch the central context menu handler
+                {
+                    match: /(?=let{navId:)(?<=function \i\((\i)\).+?)/,
+                    replace: "$1=Vencord.Api.ContextMenu._usePatchContextMenu($1);"
+                },
+
+                // Demangle Discord's Menu Item module
+                {
+                    match: /(?<=(\(\i\.type===(\i\.\i)\).{0,50}?navigable:.+Menu API).+?)}$/s,
+                    replace: (_, m) => {
+                        const registerCalls = [] as string[];
+
+                        const typeCheckRe = canonicalizeMatch(/\(\i\.type===(\i\.\i)\)/g); // if (t.type === m.MenuItem)
+                        const pushTypeRe = /type:"(\w+)"/g; // push({type:"item"})
+
+                        let typeMatch: RegExpExecArray | null;
+                        while ((typeMatch = typeCheckRe.exec(m)) !== null) {
+                            const component = typeMatch[1];
+                            // Set the starting index of the second regex to that of the first to start
+                            // matching from after the if
+                            pushTypeRe.lastIndex = typeCheckRe.lastIndex;
+
+                            // extract the first type: "..."
+                            const type = pushTypeRe.exec(m)?.[1];
+                            if (type && type in nameMap) {
+                                const name = nameMap[type];
+                                registerCalls.push(`$self.registerMenuItem("${name}",${component})`);
+                            }
+                        }
+
+                        if (registerCalls.length < 6) {
+                            console.warn("[MenuItemDemanglerAPI] Expected to remap 6 items, only remapped", registerCalls.length);
+                        }
+
+                        return `${registerCalls.join(";")};}`;
+                    },
+                }
+            ],
+        },
+    ],
+
+    registerMenuItem(name: string, component: any) {
+        Object.defineProperty(component, "name", { value: name });
+        Menu[name] = component;
+    }
 });
diff --git a/src/plugins/_api/menuItemDemangler.ts b/src/plugins/_api/menuItemDemangler.ts
deleted file mode 100644
index 975ec0873..000000000
--- a/src/plugins/_api/menuItemDemangler.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2025 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { Devs } from "@utils/constants";
-import { canonicalizeMatch } from "@utils/patches";
-import { t } from "@utils/translation";
-import definePlugin from "@utils/types";
-import { Menu } from "@webpack/common";
-
-// duplicate values have multiple branches with different types. Just include all to be safe
-const nameMap = {
-    radio: "MenuRadioItem",
-    separator: "MenuSeparator",
-    checkbox: "MenuCheckboxItem",
-    groupstart: "MenuGroup",
-
-    control: "MenuControlItem",
-    compositecontrol: "MenuControlItem",
-
-    item: "MenuItem",
-    customitem: "MenuItem",
-};
-
-export default definePlugin({
-    name: "MenuItemDemanglerAPI",
-    description: t("vencord.menuItemDemanglerAPI.description"),
-    authors: [Devs.Ven],
-    required: true,
-    patches: [
-        {
-            find: "Menu API only allows Items",
-            replacement: {
-                match: /(?<=(\(\i\.type===(\i\.\i)\).{0,50}?navigable:.+Menu API).+?)}$/s,
-                replace: (_, m) => {
-                    const registerCalls = [] as string[];
-
-                    const typeCheckRe = canonicalizeMatch(/\(\i\.type===(\i\.\i)\)/g); // if (t.type === m.MenuItem)
-                    const pushTypeRe = /type:"(\w+)"/g; // push({type:"item"})
-
-                    let typeMatch: RegExpExecArray | null;
-                    while ((typeMatch = typeCheckRe.exec(m)) !== null) {
-                        const component = typeMatch[1];
-                        // Set the starting index of the second regex to that of the first to start
-                        // matching from after the if
-                        pushTypeRe.lastIndex = typeCheckRe.lastIndex;
-
-                        // extract the first type: "..."
-                        const type = pushTypeRe.exec(m)?.[1];
-                        if (type && type in nameMap) {
-                            const name = nameMap[type];
-                            registerCalls.push(`$self.registerMenuItem("${name}",${component})`);
-                        }
-                    }
-
-                    if (registerCalls.length < 6) {
-                        console.warn("[MenuItemDemanglerAPI] Expected to remap 6 items, only remapped", registerCalls.length);
-                    }
-
-                    return `${registerCalls.join(";")};}`;
-                },
-            },
-        },
-    ],
-
-    registerMenuItem(name: string, component: any) {
-        Object.defineProperty(component, "name", { value: name });
-        Menu[name] = component;
-    }
-});
diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx
index 8a79bd08d..64e988c5b 100644
--- a/src/plugins/_core/settings.tsx
+++ b/src/plugins/_core/settings.tsx
@@ -236,7 +236,7 @@ export default definePlugin({
                 Component: BackupAndRestoreTab,
                 Icon: BackupRestoreIcon
             }),
-            IS_DEV && PatchHelperTab && buildEntry({
+            !IS_STANDALONE && PatchHelperTab && buildEntry({
                 key: "equicord_patch_helper",
                 title: "Patch Helper",
                 Component: PatchHelperTab,
diff --git a/src/plugins/_core/supportHelper.tsx b/src/plugins/_core/supportHelper.tsx
index 712137e78..65d8db54c 100644
--- a/src/plugins/_core/supportHelper.tsx
+++ b/src/plugins/_core/supportHelper.tsx
@@ -20,7 +20,6 @@ import { sendBotMessage } from "@api/Commands";
 import { isPluginEnabled } from "@api/PluginManager";
 import { definePluginSettings } from "@api/Settings";
 import { getUserSettingLazy } from "@api/UserSettings";
-import { BaseText } from "@components/BaseText";
 import { Card } from "@components/Card";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
@@ -41,8 +40,9 @@ import { makeCodeblock } from "@utils/text";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { checkForUpdates, isOutdated, update } from "@utils/updater";
+import { RenderModalProps } from "@vencord/discord-types";
 import { CloudUploadPlatform } from "@vencord/discord-types/enums";
-import { Alerts, Button, ChannelStore, CloudUploader, Constants, GuildMemberStore, Parser, PermissionsBits, PermissionStore, RelationshipStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, UserStore } from "@webpack/common";
+import { Alerts, Button, ChannelStore, CloudUploader, ConfirmModal, Constants, GuildMemberStore, openModal, Parser, PermissionsBits, PermissionStore, RelationshipStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Text, Toasts, UserStore } from "@webpack/common";
 import { JSX } from "react";
 
 import plugins, { PluginMeta } from "~plugins";
@@ -285,6 +285,34 @@ const settings = definePluginSettings({}).withPrivateSettings<{
     dismissedDevBuildWarning?: boolean;
 }>();
 
+function DevBuildConfirmModal(props: RenderModalProps) {
+    const s = settings.use(["dismissedDevBuildWarning"]);
+
+    return (
+        <ConfirmModal
+            {...props}
+            title="Hold on!"
+            confirmText="Understood"
+            variant="primary"
+            checkboxProps={{
+                checked: s.dismissedDevBuildWarning === true,
+                onChange: checked => s.dismissedDevBuildWarning = checked
+            }}
+        >
+            <div>
+                <Paragraph>You are using a custom build of Equicord, which we do not provide support for!</Paragraph>
+
+                <Paragraph className={Margins.top8}>
+                    We only provide support for <Link href="https://equicord.org/download">official builds</Link>.
+                    Either <Link href="https://equicord.org/download">switch to an official build</Link> or figure your issue out yourself.
+                </Paragraph>
+
+                <Text variant="text-md/bold" className={Margins.top8}>You will be banned from receiving support if you ignore this rule.</Text>
+            </div>
+        </ConfirmModal>
+    );
+}
+
 export default definePlugin({
     name: "SupportHelper",
     required: true,
@@ -347,20 +375,28 @@ export default definePlugin({
                 await checkForUpdatesOnce().catch(() => { });
 
                 if (isOutdated) {
-                    return Alerts.show({
-                        title: "Hold on!",
-                        body: <div>
-                            <Paragraph>You are using an outdated version of Equicord! Chances are, your issue is already fixed.</Paragraph>
-                            <Paragraph className={Margins.top8}>
-                                Please first update before asking for support!
-                            </Paragraph>
-                        </div>,
-                        onCancel: () => openSettingsTabModal(UpdaterTab!),
-                        cancelText: "View Updates",
-                        confirmText: "Update & Restart Now",
-                        onConfirm: forceUpdate,
-                        secondaryConfirmText: "I know what I'm doing or I can't update"
-                    });
+                    openModal(props => (
+                        <ConfirmModal
+                            {...props}
+                            variant="primary"
+                            title="Hold on!"
+                            confirmText="Update & Restart Now"
+                            cancelText="View Updates"
+                            onConfirm={forceUpdate}
+                            onCancel={() => openSettingsTabModal(UpdaterTab!)}
+                        >
+                            <div>
+                                <Paragraph>You are using an outdated version of Equicord! Chances are, your issue is already fixed.</Paragraph>
+                                <Paragraph className={Margins.top8}>
+                                    Please first update before asking for support!
+                                </Paragraph>
+                                <Paragraph className={Margins.top8}>
+                                    If you know what you're doing or cannot update, you can dismiss this prompt.
+                                </Paragraph>
+                            </div>
+                        </ConfirmModal>
+                    ));
+                    return;
                 }
             }
 
@@ -368,35 +404,28 @@ export default definePlugin({
             if (!roles || TrustedRolesIds.some(id => roles.includes(id))) return;
 
             if (!IS_WEB && IS_UPDATER_DISABLED) {
-                return Alerts.show({
-                    title: "Hold on!",
-                    body: <div>
-                        <Paragraph>You are using an externally updated Equicord version, the ability to help you here may be limited.</Paragraph>
-                        <Paragraph className={Margins.top8}>
-                            Please join the <Link href="https://equicord.org/discord">Equicord Server</Link> for support,
-                            or if this issue persists on Vencord, continue on.
-                        </Paragraph>
-                    </div>
-                });
+                openModal(props => (
+                    <ConfirmModal
+                        {...props}
+                        title="Hold on!"
+                        confirmText="OK"
+                        variant="primary"
+                    >
+                        <div>
+                            <Paragraph>You are using an externally updated Equicord version, which we do not provide support for!</Paragraph>
+                            <Paragraph className={Margins.top8}>
+                                Please either switch to an <Link href="https://equicord.org/download">officially supported version of Equicord</Link>, or
+                                contact your package maintainer for support instead.
+                            </Paragraph>
+                        </div>
+                    </ConfirmModal>
+                ));
+                return;
             }
 
             if (!IS_STANDALONE && !settings.store.dismissedDevBuildWarning) {
-                return Alerts.show({
-                    title: "Hold on!",
-                    body: <div>
-                        <Paragraph>You are using a custom build of Equicord, which we do not provide support for!</Paragraph>
-
-                        <Paragraph className={Margins.top8}>
-                            We only provide support for <Link href="https://github.com/Equicord/Equicord">official builds</Link>.
-                            Either <Link href="https://github.com/Equicord/Equilotl">switch to an official build</Link> or figure your issue out yourself.
-                        </Paragraph>
-
-                        <BaseText size="md" weight="bold" className={Margins.top8}>You will be banned from receiving support if you ignore this rule.</BaseText>
-                    </div>,
-                    confirmText: "Understood",
-                    secondaryConfirmText: "Don't show again",
-                    onConfirmSecondary: () => settings.store.dismissedDevBuildWarning = true
-                });
+                openModal(props => <DevBuildConfirmModal {...props} />);
+                return;
             }
         }
     },
diff --git a/src/plugins/betterFolders/index.tsx b/src/plugins/betterFolders/index.tsx
index f6e085347..2a9afc320 100644
--- a/src/plugins/betterFolders/index.tsx
+++ b/src/plugins/betterFolders/index.tsx
@@ -396,7 +396,7 @@ export default definePlugin({
                 {
                     // Modify the expanded prop to use the boolean if the above patch fails, or check if the folder is expanded from the list if it succeeds
                     // Also export the list of expanded folders to the child folder component if the patch above succeeds, else export undefined
-                    match: /(?<=\(0,\i\.jsxs?\)\(\i,\{folderNode:(\i),expanded:)\i(?=,)/,
+                    match: /(?<=\.\.\.\i,folderNode:(\i),expanded:)\i(?=,)/,
                     replace: (isExpandedOrExpandedIds, folderNote) => ""
                         + `typeof ${isExpandedOrExpandedIds}==="boolean"?${isExpandedOrExpandedIds}:${isExpandedOrExpandedIds}.has(${folderNote}.id),`
                         + `betterFoldersExpandedIds:${isExpandedOrExpandedIds} instanceof Set?${isExpandedOrExpandedIds}:void 0`
diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx
index 90638b716..e3e910d36 100644
--- a/src/plugins/betterRoleContext/index.tsx
+++ b/src/plugins/betterRoleContext/index.tsx
@@ -27,7 +27,6 @@ const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
 
 async function openRoleIconModal(roleId: string, roleIcon: string, roleName: string) {
     const format = settings.store.roleIconFileFormat;
-    const contentType = format === "jpg" ? "image/jpeg" : `image/${format}`;
     const original = `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${roleId}/${roleIcon}.${format}`;
     const url = original.replace(`//${window.GLOBAL_ENV.CDN_HOST}/`, "//media.discordapp.net/");
 
@@ -35,18 +34,7 @@ async function openRoleIconModal(roleId: string, roleIcon: string, roleName: str
         url,
         original,
         height: 128,
-        width: 128,
-        contentType,
-        originalContentType: contentType,
-        sourceMetadata: {
-            identifier: {
-                type: "attachment",
-                attachmentId: roleId,
-                filename: `role-icon-${roleId}.${format}`,
-                title: roleName,
-                size: 1,
-            }
-        }
+        width: 128
     });
 }
 
diff --git a/src/plugins/betterSessions/components/RenameButton.tsx b/src/plugins/betterSessions/components/RenameButton.tsx
index d0e0f513d..347abc288 100644
--- a/src/plugins/betterSessions/components/RenameButton.tsx
+++ b/src/plugins/betterSessions/components/RenameButton.tsx
@@ -6,8 +6,8 @@
 
 import { Button } from "@components/Button";
 import { SessionInfo } from "@plugins/betterSessions/types";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
+import { openModal } from "@webpack/common";
 
 import { RenameModal } from "./RenameModal";
 
diff --git a/src/plugins/betterSessions/components/RenameModal.tsx b/src/plugins/betterSessions/components/RenameModal.tsx
index 73af52768..5c337362a 100644
--- a/src/plugins/betterSessions/components/RenameModal.tsx
+++ b/src/plugins/betterSessions/components/RenameModal.tsx
@@ -16,15 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Heading, HeadingTertiary } from "@components/Heading";
+import { TextButton } from "@components/Button";
+import { Heading } from "@components/Heading";
 import { SessionInfo } from "@plugins/betterSessions/types";
 import { getDefaultName, savedSessionsCache, saveSessionsToDataStore } from "@plugins/betterSessions/utils";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
 import { t } from "@utils/translation";
-import { Button, React, TextInput } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, React, TextInput } from "@webpack/common";
 import { KeyboardEvent } from "react";
 
-export function RenameModal({ props, session, state }: { props: ModalProps, session: SessionInfo["session"], state: [string, React.Dispatch<React.SetStateAction<string>>]; }) {
+export function RenameModal({ props, session, state }: { props: RenderModalProps, session: SessionInfo["session"], state: [string, React.Dispatch<React.SetStateAction<string>>]; }) {
     const [title, setTitle] = state;
     const [value, setValue] = React.useState(savedSessionsCache.get(session.id_hash)?.name ?? "");
 
@@ -41,13 +42,24 @@ export function RenameModal({ props, session, state }: { props: ModalProps, sess
     }
 
     return (
-        <ModalRoot {...props}>
-            <ModalHeader>
-                <HeadingTertiary>{t("vencord.betterSessions.renameModal.title")}</HeadingTertiary>
-            </ModalHeader>
-
-            <ModalContent>
-                <Heading style={{ marginTop: "10px" }}>{t("vencord.betterSessions.renameModal.newDeviceName")}</Heading>
+        <Modal
+            {...props}
+            title={t("vencord.betterSessions.renameModal.title")}
+            actions={[
+                {
+                    text: t("vencord.cancel"),
+                    variant: "secondary",
+                    onClick: () => props.onClose()
+                },
+                {
+                    text: t("vencord.betterSessions.renameModal.save"),
+                    variant: "primary",
+                    onClick: onSaveClick
+                }
+            ]}
+        >
+            <div>
+                <Heading tag="h5">{t("vencord.betterSessions.renameModal.newDeviceName")}</Heading>
                 <TextInput
                     style={{ marginBottom: "10px" }}
                     placeholder={getDefaultName(session.client_info)}
@@ -59,38 +71,16 @@ export function RenameModal({ props, session, state }: { props: ModalProps, sess
                         }
                     }}
                 />
-                <Button
+                <TextButton
                     style={{
-                        marginBottom: "20px",
                         paddingLeft: "1px",
-                        paddingRight: "1px",
                         opacity: 0.6
                     }}
-                    look={Button.Looks.LINK}
-                    color={Button.Colors.LINK}
-                    size={Button.Sizes.NONE}
                     onClick={() => setValue("")}
                 >
                     {t("vencord.betterSessions.renameModal.resetName")}
-                </Button>
-            </ModalContent>
-
-            <ModalFooter>
-                <div className="vc-betterSessions-footer-buttons">
-                    <Button
-                        color={Button.Colors.PRIMARY}
-                        onClick={() => props.onClose()}
-                    >
-                        {t("vencord.cancel")}
-                    </Button>
-                    <Button
-                        color={Button.Colors.BRAND}
-                        onClick={onSaveClick}
-                    >
-                        {t("vencord.betterSessions.renameModal.save")}
-                    </Button>
-                </div>
-            </ModalFooter>
-        </ModalRoot >
+                </TextButton>
+            </div>
+        </Modal>
     );
 }
diff --git a/src/plugins/callTimer/index.tsx b/src/plugins/callTimer/index.tsx
index aa672f4e8..d13757f82 100644
--- a/src/plugins/callTimer/index.tsx
+++ b/src/plugins/callTimer/index.tsx
@@ -7,7 +7,7 @@
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
-import { useTimer } from "@utils/react";
+import { useFixedTimer } from "@utils/react";
 import { formatDurationMs } from "@utils/text";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
@@ -72,7 +72,7 @@ export const settings = definePluginSettings({
 });
 
 // Save the join time of all users in a Map
-type userJoinData = { channelId: string, time: number; guildId: string; };
+type userJoinData = { channelId: string, time: number; guildId: string | null; };
 const userJoinTimes = new Map<string, userJoinData>();
 
 /**
@@ -85,7 +85,7 @@ const userJoinTimes = new Map<string, userJoinData>();
  * unique identifier of the guild (server) to which the user belongs. It is used to associate the
  * user's join time with a specific guild within the application or platform.
  */
-function addUserJoinTime(userId: string, channelId: string, guildId: string) {
+function addUserJoinTime(userId: string, channelId: string, guildId: string | null) {
     // create a random number
     userJoinTimes.set(userId, { channelId, time: Date.now(), guildId });
 }
@@ -153,11 +153,6 @@ export default definePlugin({
                 const { userId, channelId, guildId } = state;
                 const isMe = userId === myId;
 
-                if (!guildId) {
-                    // guildId is never undefined here
-                    continue;
-                }
-
                 // check if the state does not actually has a `oldChannelId` property
                 if (!("oldChannelId" in state) && !runOneTime && !settings.store.watchLargeGuilds) {
                     // batch update triggered. This is ignored because it
@@ -174,7 +169,7 @@ export default definePlugin({
                 if (channelId !== oldChannelId) {
                     if (channelId) {
                         // move or join
-                        addUserJoinTime(userId, channelId, guildId);
+                        addUserJoinTime(userId, channelId, guildId ?? null);
                     } else if (oldChannelId) {
                         // leave
                         removeUserJoinTime(userId);
@@ -265,16 +260,17 @@ export default definePlugin({
         );
     },
 
-    renderConnectionTimer(channelId: string) {
+    renderConnectionTimer({ channelId }: { channelId: string | undefined; }) {
         return <ErrorBoundary noop>
             <this.ConnectionTimer channelId={channelId} />
         </ErrorBoundary>;
     },
 
-    ConnectionTimer: ErrorBoundary.wrap(({ channelId }: { channelId: string; }) => {
-        const time = useTimer({
-            deps: [channelId]
-        });
+    ConnectionTimer: ErrorBoundary.wrap((_: { channelId: string | undefined; }) => {
+        const joinTime = userJoinTimes.get(UserStore.getCurrentUser().id)?.time;
+        const time = useFixedTimer({ initialTime: joinTime });
+
+        if (joinTime == null) return null;
 
         return (
             <p style={{ margin: 0, fontFamily: "var(--font-code)" }}>
diff --git a/src/plugins/consoleShortcuts/index.ts b/src/plugins/consoleShortcuts/index.ts
index 66f43beab..5b29590f7 100644
--- a/src/plugins/consoleShortcuts/index.ts
+++ b/src/plugins/consoleShortcuts/index.ts
@@ -22,7 +22,6 @@ import { getCurrentChannel, getCurrentGuild } from "@utils/discord";
 import { runtimeHashMessageKey } from "@utils/intlHash";
 import { SYM_LAZY_CACHED, SYM_LAZY_GET } from "@utils/lazy";
 import { sleep } from "@utils/misc";
-import { ModalAPI } from "@utils/modal";
 import { relaunch } from "@utils/native";
 import { canonicalizeMatch, canonicalizeReplace, canonicalizeReplacement } from "@utils/patches";
 import { t } from "@utils/translation";
@@ -178,8 +177,8 @@ function makeShortcuts() {
         me: { getter: () => Common.UserStore.getCurrentUser(), preload: false },
         meId: { getter: () => Common.UserStore.getCurrentUser().id, preload: false },
         messages: { getter: () => Common.MessageStore.getMessages(Common.SelectedChannelStore.getChannelId()), preload: false },
-        openModal: { getter: () => ModalAPI.openModal },
-        openModalLazy: { getter: () => ModalAPI.openModalLazy },
+        openModal: { getter: () => Common.openModal },
+        openModalLazy: { getter: () => Common.openModalLazy },
 
         Stores: { getter: () => Object.fromEntries(Webpack.fluxStores) },
 
diff --git a/src/plugins/crashHandler/index.ts b/src/plugins/crashHandler/index.ts
index 0006c8f33..e54abfe47 100644
--- a/src/plugins/crashHandler/index.ts
+++ b/src/plugins/crashHandler/index.ts
@@ -21,12 +21,11 @@ import { showNotification } from "@api/Notifications";
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
-import { closeAllModals } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { maybePromptToUpdate } from "@utils/updater";
 import { filters, findBulk, proxyLazyWebpack } from "@webpack";
-import { DraftType, ExpressionPickerStore, FluxDispatcher, NavigationRouter, SelectedChannelStore } from "@webpack/common";
+import { closeAllModals, DraftType, ExpressionPickerStore, FluxDispatcher, NavigationRouter, SelectedChannelStore } from "@webpack/common";
 
 const CrashHandlerLogger = new Logger("CrashHandler");
 
diff --git a/src/plugins/customCommands/CreateTagModal.tsx b/src/plugins/customCommands/CreateTagModal.tsx
index 652f18503..6c39d154a 100644
--- a/src/plugins/customCommands/CreateTagModal.tsx
+++ b/src/plugins/customCommands/CreateTagModal.tsx
@@ -4,130 +4,116 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
-import { Button } from "@components/Button";
-import { Card } from "@components/Card";
 import { InlineCode } from "@components/CodeBlock";
 import { ExpandableSection } from "@components/ExpandableCard";
 import { Flex } from "@components/Flex";
 import { HeadingSecondary } from "@components/Heading";
 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 { RenderModalProps } from "@vencord/discord-types";
+import { Modal,openModal, TextArea, TextInput, useState } from "@webpack/common";
 
 import { parseTagArguments } from ".";
 import { addTag, getTag, Tag } from "./settings";
 
 export function openCreateTagModal(initialValue: Tag = { name: "", message: "" }) {
     openModal(modalProps => (
-        <Modal initialValue={initialValue} modalProps={modalProps} />
+        <CreateTagDialog initialValue={initialValue} modalProps={modalProps} />
     ));
 }
 
 const EXAMPLE_RESPONSE = "Hello {{user}}! I am feeling {{mood = great}}.";
 
-function Modal({ initialValue, modalProps }: { initialValue: Tag; modalProps: ModalProps; }) {
+function CreateTagDialog({ initialValue, modalProps }: { initialValue: Tag; modalProps: RenderModalProps; }) {
     const [name, setName] = useState(initialValue.name);
     const [message, setMessage] = useState(initialValue.message.replaceAll("\\n", "\n"));
 
+    const isEdit = Boolean(initialValue.name);
+
     const detectedArguments = parseTagArguments(message);
     const hasReservedEphemeral = detectedArguments.some(arg => arg.name === "ephemeral");
     const nameAlreadyExists = name !== initialValue.name && getTag(name);
 
+    const notice = hasReservedEphemeral
+        ? 'The argument name "ephemeral" is reserved and cannot be used.'
+        : nameAlreadyExists
+            ? `A tag with the name "${name}" already exists and will be overwritten.`
+            : undefined;
+
     return (
-        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Create Tag</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
+        <Modal
+            {...modalProps}
+            title={isEdit ? "Edit Tag" : "Create New Tag"}
+            subtitle={isEdit ? "Edit your custom command." : "Create a new tag which will be registered as a slash command."}
+            actions={[
+                {
+                    text: "Cancel",
+                    variant: "secondary",
+                    onClick: modalProps.onClose
+                },
+                {
+                    text: isEdit ? "Save" : "Create",
+                    variant: "primary",
+                    onClick: () => {
+                        const tag = { name, message };
+                        addTag(tag);
+                        modalProps.onClose();
+                    },
+                    disabled: !name || !message || hasReservedEphemeral
+                }
+            ]}
+            notice={notice ? { message: notice, type: "critical" } : undefined}
+        >
+            <Flex flexDirection="column" gap={12}>
+                <section>
+                    <HeadingSecondary>Name</HeadingSecondary>
+                    <TextInput value={name} onChange={setName} placeholder="greet" />
+                </section>
 
-            <ModalContent>
-                <Flex flexDirection="column" gap={12}>
-                    <Paragraph>Create a new tag which will be registered as a slash command.</Paragraph>
-
-                    <section className={Margins.top8}>
-                        <HeadingSecondary>Name</HeadingSecondary>
-                        <TextInput value={name} onChange={setName} placeholder="greet" />
-                    </section>
+                <section>
+                    <HeadingSecondary>Response</HeadingSecondary>
+                    <TextArea value={message} onChange={setMessage} placeholder={EXAMPLE_RESPONSE} autosize />
+                </section>
 
+                {detectedArguments.length > 0 && (
                     <section>
-                        <HeadingSecondary>Response</HeadingSecondary>
-                        <TextArea value={message} onChange={setMessage} placeholder={EXAMPLE_RESPONSE} />
+                        <HeadingSecondary>Detected Arguments</HeadingSecondary>
+                        <Paragraph>
+                            <ul>
+                                {detectedArguments.map(arg => (
+                                    <li key={arg.name}>
+                                        &mdash; <b>{arg.name}</b>{arg.defaultValue ? ` (default: ${arg.defaultValue})` : ""}
+                                    </li>
+                                ))}
+                            </ul>
+                        </Paragraph>
                     </section>
+                )}
 
-                    {detectedArguments.length > 0 && (
-                        <section>
-                            <HeadingSecondary>Detected Arguments</HeadingSecondary>
+                <ExpandableSection
+                    renderContent={() => (
+                        <Flex flexDirection="column" gap={12}>
                             <Paragraph>
-                                <ul>
-                                    {detectedArguments.map(arg => (
-                                        <li key={arg.name}>
-                                            &mdash; <b>{arg.name}</b>{arg.defaultValue ? ` (default: ${arg.defaultValue})` : ""}
-                                        </li>
-                                    ))}
-                                </ul>
+                                Your response can include variables wrapped in double curly braces which will become command arguments, for example <InlineCode>{"Hello {{user}}"}</InlineCode>.
+                            </Paragraph>
+                            <Paragraph>
+                                You can specify arguments with default values by using an equals sign, for example <InlineCode>{"Hello {{user = pal}}"}</InlineCode>.
                             </Paragraph>
-                        </section>
-                    )}
 
-                    <ExpandableSection
-                        renderContent={() => (
-                            <Flex flexDirection="column" gap={12}>
-                                <Paragraph>
-                                    Your response can include variables wrapped in double curly braces which will become command arguments, for example <InlineCode>{"Hello {{user}}"}</InlineCode>.
-                                </Paragraph>
-                                <Paragraph>
-                                    You can specify arguments with default values by using an equals sign, for example <InlineCode>{"Hello {{user = pal}}"}</InlineCode>.
-                                </Paragraph>
-
-                                <section>
-                                    <Paragraph><b>Example Command response:</b> <InlineCode>{EXAMPLE_RESPONSE}</InlineCode></Paragraph>
-                                    <Paragraph><b>Example usage:</b> <InlineCode>{"/greet user:@Clyde"}</InlineCode></Paragraph>
-                                    <Paragraph><b>Example output:</b> <InlineCode>{"Hello @Clyde! I am feeling great."}</InlineCode></Paragraph>
-                                </section>
-                            </Flex>
-                        )}
-                    >
-                        <Flex alignItems="center" gap={8}>
-                            <InfoIcon color="var(--text-muted)" height={16} width={16} />
-                            View Arguments guide
+                            <section>
+                                <Paragraph><b>Example Command response:</b> <InlineCode>{EXAMPLE_RESPONSE}</InlineCode></Paragraph>
+                                <Paragraph><b>Example usage:</b> <InlineCode>{"/greet user:@Clyde"}</InlineCode></Paragraph>
+                                <Paragraph><b>Example output:</b> <InlineCode>{"Hello @Clyde! I am feeling great."}</InlineCode></Paragraph>
+                            </section>
                         </Flex>
-                    </ExpandableSection>
-                    {hasReservedEphemeral &&
-                        <Card variant="danger" className={Margins.top8} defaultPadding>
-                            <Paragraph>The argument name "ephemeral" is reserved and cannot be used.</Paragraph>
-                        </Card>
-                    }
-                    {nameAlreadyExists &&
-                        <Card variant="warning" className={Margins.top8} defaultPadding>
-                            <Paragraph>A tag with the name <InlineCode>{name}</InlineCode> already exists and will be overwritten.</Paragraph>
-                        </Card>
-                    }
-                </Flex>
-            </ModalContent>
-
-            <ModalFooter>
-                <Flex>
-                    <Button
-                        variant="secondary"
-                        onClick={modalProps.onClose}
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        onClick={() => {
-                            const tag = { name, message };
-                            addTag(tag);
-                            modalProps.onClose();
-                        }}
-                        disabled={!name || !message || hasReservedEphemeral}
-                    >
-                        Create
-                    </Button>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+                    )}
+                >
+                    <Flex alignItems="center" gap={8}>
+                        <InfoIcon color="var(--text-muted)" height={16} width={16} />
+                        View Arguments guide
+                    </Flex>
+                </ExpandableSection>
+            </Flex>
+        </Modal>
     );
 }
diff --git a/src/plugins/decor/lib/stores/AuthorizationStore.tsx b/src/plugins/decor/lib/stores/AuthorizationStore.tsx
index a2e85a5de..06fc47400 100644
--- a/src/plugins/decor/lib/stores/AuthorizationStore.tsx
+++ b/src/plugins/decor/lib/stores/AuthorizationStore.tsx
@@ -8,8 +8,7 @@ import * as DataStore from "@api/DataStore";
 import { AUTHORIZE_URL, CLIENT_ID } from "@plugins/decor/lib/constants";
 import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
-import { openModal } from "@utils/modal";
-import { OAuth2AuthorizeModal, showToast, Toasts, UserStore, zustandCreate, zustandPersist } from "@webpack/common";
+import { OAuth2AuthorizeModal, openModal, showToast, Toasts, UserStore, zustandCreate, zustandPersist } from "@webpack/common";
 
 interface AuthorizationState {
     token: string | null;
diff --git a/src/plugins/decor/settings.tsx b/src/plugins/decor/settings.tsx
index 29bf61222..fbf6b833f 100644
--- a/src/plugins/decor/settings.tsx
+++ b/src/plugins/decor/settings.tsx
@@ -5,14 +5,13 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
-import { Link } from "@components/Link";
+import { TextButton } from "@components/Button";
 import { Paragraph } from "@components/Paragraph";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { closeAllModals } from "@utils/modal";
 import { t } from "@utils/translation";
 import { OptionType } from "@utils/types";
-import { FluxDispatcher } from "@webpack/common";
+import { SettingsRouter } from "@webpack/common";
 
 import DecorPlugin from ".";
 import DecorSection from "./ui/components/DecorSection";
@@ -20,7 +19,7 @@ import DecorSection from "./ui/components/DecorSection";
 export const settings = definePluginSettings({
     changeDecoration: {
         type: OptionType.COMPONENT,
-        component() {
+        component({ closePluginSettings }) {
             if (!DecorPlugin.started) return <Paragraph>
                 {t("vencord.decor.enableAndRestart")}
             </Paragraph>;
@@ -28,15 +27,14 @@ export const settings = definePluginSettings({
             return <div>
                 <DecorSection hideTitle hideDivider noMargin />
                 <Paragraph className={classes(Margins.top8, Margins.bottom8)}>
-                    {t("decor.accessFromProfiles", {
-                        link: <Link
-                            href="/settings/profile-customization"
-                            onClick={e => {
-                                e.preventDefault();
-                                closeAllModals();
-                                FluxDispatcher.dispatch({ type: "USER_SETTINGS_MODAL_SET_SECTION", section: "Profile Customization" });
+                    {t("vencord.decor.accessFromProfiles", {
+                        link: <TextButton
+                            variant="link"
+                            onClick={async () => {
+                                closePluginSettings();
+                                SettingsRouter.openUserSettings("profile_panel");
                             }}
-                        >{t("vencord.decor.profilesLink")}</Link>
+                        >{t("vencord.decor.profilesLink")}</TextButton>
                     })}
                 </Paragraph>
             </div>;
diff --git a/src/plugins/decor/ui/components/DecorationContextMenu.tsx b/src/plugins/decor/ui/components/DecorationContextMenu.tsx
index 6b2ee17db..5e6e94079 100644
--- a/src/plugins/decor/ui/components/DecorationContextMenu.tsx
+++ b/src/plugins/decor/ui/components/DecorationContextMenu.tsx
@@ -10,7 +10,7 @@ import { useCurrentUserDecorationsStore } from "@plugins/decor/lib/stores/Curren
 import { cl } from "@plugins/decor/ui";
 import { copyToClipboard } from "@utils/clipboard";
 import { t } from "@utils/translation";
-import { Alerts, ContextMenuApi, Menu, UserStore } from "@webpack/common";
+import { ConfirmModal, ContextMenuApi, Menu, openModal, UserStore } from "@webpack/common";
 
 export default function DecorationContextMenu({ decoration }: { decoration: Decoration; }) {
     const { delete: deleteDecoration } = useCurrentUserDecorationsStore();
@@ -18,30 +18,32 @@ export default function DecorationContextMenu({ decoration }: { decoration: Deco
     return <Menu.Menu
         navId={cl("decoration-context-menu")}
         onClose={ContextMenuApi.closeContextMenu}
-        aria-label="Decoration Options"
+        aria-label={t("vencord.decor.options")}
     >
         <Menu.MenuItem
             id={cl("decoration-context-menu-copy-hash")}
-            label="Copy Decoration Hash"
+            label={t("vencord.decor.copyHash")}
             icon={CopyIcon}
             action={() => copyToClipboard(decoration.hash)}
         />
         {decoration.authorId === UserStore.getCurrentUser().id &&
             <Menu.MenuItem
                 id={cl("decoration-context-menu-delete")}
-                label="Delete Decoration"
+                label={t("vencord.decor.deleteDecoration")}
                 color="danger"
                 icon={DeleteIcon}
-                action={() => Alerts.show({
-                    title: "Delete Decoration",
-                    body: `Are you sure you want to delete ${decoration.alt}?`,
-                    confirmText: "Delete",
-                    confirmColor: cl("danger-btn"),
-                    cancelText: t("vencord.cancel"),
-                    onConfirm() {
-                        deleteDecoration(decoration);
-                    }
-                })}
+                action={() => openModal(props => (
+                    <ConfirmModal
+                        {...props}
+                        title={t("vencord.decor.deleteDecoration")}
+                        subtitle={t("vencord.decor.deleteConfirm", { name: decoration.alt })}
+                        confirmText={t("vencord.decor.delete")}
+                        cancelText={t("vencord.cancel")}
+                        onConfirm={() => {
+                            deleteDecoration(decoration);
+                        }}
+                    />
+                ))}
             />
         }
     </Menu.Menu>;
diff --git a/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx b/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
index 42e3e8f59..354d6a977 100644
--- a/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
+++ b/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
@@ -5,10 +5,8 @@
  */
 
 import { BaseText } from "@components/BaseText";
-import { Button as NewButton } from "@components/Button";
-import ErrorBoundary from "@components/ErrorBoundary";
+import { Button, Button as NewButton } from "@components/Button";
 import { Flex } from "@components/Flex";
-import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { Decoration, getPresets, Preset } from "@plugins/decor/lib/api";
 import { GUILD_ID, INVITE_KEY } from "@plugins/decor/lib/constants";
@@ -24,11 +22,10 @@ import DecorDecorationGridDecoration from "@plugins/decor/ui/components/DecorDec
 import SectionedGridList from "@plugins/decor/ui/components/SectionedGridList";
 import { copyWithToast, openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { Queue } from "@utils/Queue";
 import { t } from "@utils/translation";
-import { User } from "@vencord/discord-types";
-import { Alerts, Button, FluxDispatcher, Forms, GuildStore, NavigationRouter, Parser, Tooltip, useEffect, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
+import { RenderModalProps, User } from "@vencord/discord-types";
+import { closeAllModals, ConfirmModal, FluxDispatcher, Forms, GuildStore, Modal, NavigationRouter, openModal, Parser, Tooltip, useEffect, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
 
 import { openCreateDecorationModal } from "./CreateDecorationModal";
 import { openGuidelinesModal } from "./GuidelinesModal";
@@ -94,7 +91,7 @@ function SectionHeader({ section }: SectionHeaderProps) {
     </div>;
 }
 
-function ChangeDecorationModal(props: ModalProps) {
+function ChangeDecorationModal(props: RenderModalProps) {
     // undefined = not trying, null = none, Decoration = selected
     const [tryingDecoration, setTryingDecoration] = useState<Decoration | null | undefined>(undefined);
     const isTryingDecoration = typeof tryingDecoration !== "undefined";
@@ -126,8 +123,8 @@ function ChangeDecorationModal(props: ModalProps) {
 
     const data = [
         {
-            title: "Your Decorations",
-            subtitle: "You can delete your own decorations by right clicking on them.",
+            title: t("vencord.decor.yourDecorations"),
+            subtitle: t("vencord.decor.deleteInstructions"),
             sectionKey: "ownDecorations",
             items: ["none", ...ownDecorations, "create"]
         },
@@ -140,113 +137,28 @@ function ChangeDecorationModal(props: ModalProps) {
         }))
     ] as Section[];
 
-    return <ModalRoot
+    return <Modal
         {...props}
-        size={ModalSize.DYNAMIC}
-        className={DecorationModalClasses.modal}
-    >
-        <ModalHeader separator={false} className={cl("modal-header")}>
-            <BaseText
-                size="lg"
-                weight="semibold"
-                color="text-strong"
-                tag="h1"
-                style={{ flexGrow: 1 }}
-            >
-                Change Decoration
-            </BaseText>
-            <ModalCloseButton onClick={props.onClose} />
-        </ModalHeader>
-        <ModalContent
-            className={cl("change-decoration-modal-content")}
-            scrollbarType="none"
-        >
-            <ErrorBoundary>
-                <SectionedGridList
-                    renderItem={item => {
-                        if (typeof item === "string") {
-                            switch (item) {
-                                case "none":
-                                    return <DecorationGridNone
-                                        className={cl("change-decoration-modal-decoration")}
-                                        isSelected={activeSelectedDecoration === null}
-                                        onSelect={() => setTryingDecoration(null)}
-                                    />;
-                                case "create":
-                                    return <Tooltip text="You already have a decoration pending review" shouldShow={hasDecorationPendingReview}>
-                                        {tooltipProps => <DecorationGridCreate
-                                            className={cl("change-decoration-modal-decoration")}
-                                            {...tooltipProps}
-                                            onSelect={!hasDecorationPendingReview ? (settings.store.agreedToGuidelines ? openCreateDecorationModal : openGuidelinesModal) : () => { }}
-                                        />}
-                                    </Tooltip>;
-                            }
-                        } else {
-                            return <Tooltip text={"Pending review"} shouldShow={item.reviewed === false}>
-                                {tooltipProps => (
-                                    <DecorDecorationGridDecoration
-                                        {...tooltipProps}
-                                        className={cl("change-decoration-modal-decoration")}
-                                        onSelect={item.reviewed !== false ? () => setTryingDecoration(item) : () => { }}
-                                        isSelected={activeSelectedDecoration?.hash === item.hash}
-                                        decoration={item}
-                                    />
-                                )}
-                            </Tooltip>;
-                        }
-                    }}
-                    getItemKey={item => typeof item === "string" ? item : item.hash}
-                    getSectionKey={section => section.sectionKey}
-                    renderSectionHeader={section => <SectionHeader section={section} />}
-                    sections={data}
-                />
-                <div className={cl("change-decoration-modal-preview")}>
-                    <AvatarDecorationModalPreview
-                        avatarDecoration={avatarDecoration}
-                        user={UserStore.getCurrentUser()}
-                    />
-                    {isActiveDecorationPreset && <Heading className="">Part of the {activeDecorationPreset.name} Preset</Heading>}
-                    {typeof activeSelectedDecoration === "object" &&
-                        <BaseText
-                            size="sm"
-                            weight="semibold"
-                            color="text-strong"
-                        >
-                            {activeSelectedDecoration?.alt}
-                        </BaseText>
-                    }
-                    {activeDecorationHasAuthor && (
-                        <BaseText key={`createdBy-${activeSelectedDecoration.authorId}`}>
-                            Created by {Parser.parse(`<@${activeSelectedDecoration.authorId}>`)}
-                        </BaseText>
-                    )}
-                    {isActiveDecorationPreset && (
-                        <Button onClick={() => copyWithToast(activeDecorationPreset.id)}>
-                            Copy Preset ID
-                        </Button>
-                    )}
-                </div>
-            </ErrorBoundary>
-        </ModalContent>
-        <ModalFooter className={cl("change-decoration-modal-footer", "modal-footer")}>
-            <div className={cl("modal-footer-btn-container")}>
-                <Button
-                    onClick={props.onClose}
-                    color={Button.Colors.PRIMARY}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-                <Button
-                    onClick={() => {
-                        selectDecoration(tryingDecoration!).then(props.onClose);
-                    }}
-                    disabled={!isTryingDecoration}
-                >
-                    Apply
-                </Button>
-            </div>
-            <div className={cl("modal-footer-btn-container")}>
-                <Tooltip text="Join Decor's Discord Server for notifications on your decoration's review, and when new presets are released">
+        title={t("vencord.decor.changeDecoration")}
+        size="lg"
+        actions={[
+            {
+                text: t("vencord.cancel"),
+                variant: "secondary",
+                onClick: props.onClose
+            },
+            {
+                text: t("vencord.decor.apply"),
+                variant: "primary",
+                onClick: () => {
+                    selectDecoration(tryingDecoration!).then(props.onClose);
+                },
+                disabled: !isTryingDecoration
+            }
+        ]}
+        preview={
+            <div className={cl("modal-footer-btn-container", Margins.top8)}>
+                <Tooltip text={t("vencord.decor.discordTooltip")}>
                     {tooltipProps => <NewButton
                         {...tooltipProps}
                         onClick={async () => {
@@ -264,28 +176,99 @@ function ChangeDecorationModal(props: ModalProps) {
                         }}
                         variant="link"
                     >
-                        Discord Server
+                        {t("vencord.decor.discordServer")}
                     </NewButton>}
                 </Tooltip>
                 <NewButton
-                    onClick={() => Alerts.show({
-                        title: "Log Out",
-                        body: "Are you sure you want to log out of Decor?",
-                        confirmText: "Log Out",
-                        confirmColor: cl("danger-btn"),
-                        cancelText: t("vencord.cancel"),
-                        onConfirm() {
-                            useAuthorizationStore.getState().remove(UserStore.getCurrentUser().id);
-                            props.onClose();
-                        }
-                    })}
+                    onClick={() => openModal(modalProps => (
+                        <ConfirmModal
+                            {...modalProps}
+                            title={t("vencord.decor.logOut")}
+                            subtitle={t("vencord.decor.confirmLogOut")}
+                            confirmText={t("vencord.decor.logOut")}
+                            cancelText={t("vencord.cancel")}
+                            onConfirm={() => {
+                                useAuthorizationStore.getState().remove(UserStore.getCurrentUser().id);
+                                props.onClose();
+                            }}
+                        />
+                    ))}
                     variant="dangerSecondary"
                 >
-                    Log Out
+                    {t("vencord.decor.logOut")}
                 </NewButton>
             </div>
-        </ModalFooter>
-    </ModalRoot>;
+        }
+    >
+        <div className={cl("change-decoration-modal-content", DecorationModalClasses.modal)}>
+            <SectionedGridList
+                renderItem={item => {
+                    if (typeof item === "string") {
+                        switch (item) {
+                            case "none":
+                                return <DecorationGridNone
+                                    className={cl("change-decoration-modal-decoration")}
+                                    isSelected={activeSelectedDecoration === null}
+                                    onSelect={() => setTryingDecoration(null)}
+                                />;
+                            case "create":
+                                return <Tooltip text={t("vencord.decor.alreadyPending")} shouldShow={hasDecorationPendingReview}>
+                                    {tooltipProps => <DecorationGridCreate
+                                        className={cl("change-decoration-modal-decoration")}
+                                        {...tooltipProps}
+                                        onSelect={!hasDecorationPendingReview ? (settings.store.agreedToGuidelines ? openCreateDecorationModal : openGuidelinesModal) : () => { }}
+                                    />}
+                                </Tooltip>;
+                        }
+                    } else {
+                        return <Tooltip text={t("vencord.decor.pendingReview")} shouldShow={item.reviewed === false}>
+                            {tooltipProps => (
+                                <DecorDecorationGridDecoration
+                                    {...tooltipProps}
+                                    className={cl("change-decoration-modal-decoration")}
+                                    onSelect={item.reviewed !== false ? () => setTryingDecoration(item) : () => { }}
+                                    isSelected={activeSelectedDecoration?.hash === item.hash}
+                                    decoration={item}
+                                />
+                            )}
+                        </Tooltip>;
+                    }
+                }}
+                getItemKey={item => typeof item === "string" ? item : item.hash}
+                getSectionKey={section => section.sectionKey}
+                renderSectionHeader={section => <SectionHeader section={section} />}
+                sections={data}
+            />
+
+            <div className={cl("change-decoration-modal-preview")}>
+                <AvatarDecorationModalPreview
+                    avatarDecoration={avatarDecoration}
+                    user={UserStore.getCurrentUser()}
+                />
+                {isActiveDecorationPreset && <Forms.FormTitle className="">{t("vencord.decor.presetPart", { name: activeDecorationPreset.name })}</Forms.FormTitle>}
+                {typeof activeSelectedDecoration === "object" &&
+                    <BaseText
+                        size="sm"
+                        weight="semibold"
+                        style={{ color: "var(--text-strong)" }}
+                    >
+                        {activeSelectedDecoration?.alt}
+                    </BaseText>
+                }
+                {activeDecorationHasAuthor && (
+                    <BaseText key={`createdBy-${activeSelectedDecoration.authorId}`}>
+                        {t("vencord.decor.createdBy")} {Parser.parse(`<@${activeSelectedDecoration.authorId}>`)}
+                    </BaseText>
+                )}
+                {isActiveDecorationPreset && (
+                    <Button onClick={() => copyWithToast(activeDecorationPreset.id)}>
+                        {t("vencord.decor.copyPresetId")}
+                    </Button>
+                )}
+            </div>
+
+        </div>
+    </Modal>;
 }
 
 export const openChangeDecorationModal = () =>
diff --git a/src/plugins/decor/ui/modals/CreateDecorationModal.tsx b/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
index 472f8c05f..478b81c4f 100644
--- a/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
+++ b/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
@@ -15,10 +15,10 @@ import { cl, DecorationModalClasses, requireAvatarDecorationModal, requireCreate
 import { AvatarDecorationModalPreview } from "@plugins/decor/ui/components";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
+import { RenderModalProps } from "@vencord/discord-types";
 import { filters, findComponentByCodeLazy, mapMangledModuleLazy } from "@webpack";
-import { Button, FluxDispatcher, GuildStore, NavigationRouter, TextInput, useEffect, useMemo, UserStore, useState } from "@webpack/common";
+import { closeAllModals, FluxDispatcher, GuildStore, Modal, NavigationRouter, openModal, TextInput, useEffect, useMemo, UserStore, useState } from "@webpack/common";
 
 const FileUpload = findComponentByCodeLazy(".currentTarget.files", "lineClamp:1");
 
@@ -45,7 +45,7 @@ function useObjectURL(object: Blob | MediaSource | null) {
     return url;
 }
 
-function CreateDecorationModal(props: ModalProps) {
+function CreateDecorationModal(props: RenderModalProps) {
     const [name, setName] = useState("");
     const [file, setFile] = useState<File | null>(null);
     const [submitting, setSubmitting] = useState(false);
@@ -61,60 +61,64 @@ function CreateDecorationModal(props: ModalProps) {
 
     const decoration = useMemo(() => fileUrl ? { asset: fileUrl, skuId: RAW_SKU_ID } : null, [fileUrl]);
 
-    return <ModalRoot
+    return <Modal
         {...props}
-        size={ModalSize.MEDIUM}
-        className={DecorationModalClasses.modal}
+        size="lg"
+        title={t("vencord.decor.createDecoration")}
+        actions={[
+            {
+                text: t("vencord.cancel"),
+                variant: "secondary",
+                onClick: props.onClose
+            },
+            {
+                text: t("vencord.decor.submitForReview"),
+                variant: "primary",
+                onClick: () => {
+                    setSubmitting(true);
+                    createDecoration({ alt: name, file: file! })
+                        .then(props.onClose).catch(e => { setSubmitting(false); setError(e); });
+                },
+                disabled: !file || !name || submitting
+            }
+        ]}
     >
-        <ModalHeader separator={false} className={cl("modal-header")}>
-            <BaseText
-                size="lg"
-                weight="semibold"
-                color="text-strong"
-                tag="h1"
-                style={{ flexGrow: 1 }}
-            >
-                Create Decoration
-            </BaseText>
-            <ModalCloseButton onClick={props.onClose} />
-        </ModalHeader >
-        <ModalContent
-            className={cl("create-decoration-modal-content")}
-            scrollbarType="none"
-        >
+        <div className={cl("create-decoration-modal-content", DecorationModalClasses.modal)}>
             <ErrorBoundary>
                 <HelpMessage messageType={HelpMessageTypes.WARNING}>
-                    Make sure your decoration does not violate <Link
-                        href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
-                    >
-                        the guidelines
-                    </Link> before submitting it.
+                    {t("vencord.decor.guidelinesNotice", {
+                        guidelines: <Link
+                            href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
+                        >
+                            {t("vencord.decor.theGuidelines")}
+                        </Link>
+                    })}
                 </HelpMessage>
                 <div className={cl("create-decoration-modal-form-preview-container")}>
                     <div className={cl("create-decoration-modal-form")}>
                         {error !== null && <BaseText size="xs" color="text-danger">{error.message}</BaseText>}
                         <section>
-                            <Heading>File</Heading>
+                            <Heading>{t("vencord.decor.file")}</Heading>
                             <FileUpload
                                 filename={file?.name}
-                                placeholder="Choose a file"
-                                buttonText="Browse"
+                                placeholder={t("vencord.decor.chooseAFile")}
+                                buttonText={t("vencord.decor.browse")}
                                 filters={[{ name: "Decoration file", extensions: ["png", "apng"] }]}
                                 onFileSelect={setFile}
                             />
                             <Paragraph className={Margins.top8}>
-                                File should be APNG or PNG.
+                                {t("vencord.decor.fileNotice")}
                             </Paragraph>
                         </section>
                         <section>
-                            <Heading>Name</Heading>
+                            <Heading>{t("vencord.decor.name")}</Heading>
                             <TextInput
                                 placeholder="Companion Cube"
                                 value={name}
                                 onChange={setName}
                             />
                             <Paragraph className={Margins.top8}>
-                                This name will be used when referring to this decoration.
+                                {t("vencord.decor.nameNotice")}
                             </Paragraph>
                         </section>
                     </div>
@@ -126,49 +130,31 @@ function CreateDecorationModal(props: ModalProps) {
                     </div>
                 </div>
                 <HelpMessage messageType={HelpMessageTypes.INFO} className={Margins.bottom8}>
-                    To receive updates on your decoration's review, join <Link
-                        href={`https://discord.gg/${INVITE_KEY}`}
-                        onClick={async e => {
-                            e.preventDefault();
-                            if (!GuildStore.getGuild(GUILD_ID)) {
-                                const inviteAccepted = await openInviteModal(INVITE_KEY);
-                                if (inviteAccepted) {
+                    {t("vencord.decor.discordServerNotice", {
+                        link: <Link
+                            href={`https://discord.gg/${INVITE_KEY}`}
+                            onClick={async e => {
+                                e.preventDefault();
+                                if (!GuildStore.getGuild(GUILD_ID)) {
+                                    const inviteAccepted = await openInviteModal(INVITE_KEY);
+                                    if (inviteAccepted) {
+                                        closeAllModals();
+                                        FluxDispatcher.dispatch({ type: "LAYER_POP_ALL" });
+                                    }
+                                } else {
                                     closeAllModals();
                                     FluxDispatcher.dispatch({ type: "LAYER_POP_ALL" });
+                                    NavigationRouter.transitionToGuild(GUILD_ID);
                                 }
-                            } else {
-                                closeAllModals();
-                                FluxDispatcher.dispatch({ type: "LAYER_POP_ALL" });
-                                NavigationRouter.transitionToGuild(GUILD_ID);
-                            }
-                        }}
-                    >
-                        Decor's Discord server
-                    </Link> and allow direct messages.
+                            }}
+                        >
+                            {t("vencord.decor.decorDiscordServer")}
+                        </Link>
+                    })}
                 </HelpMessage>
             </ErrorBoundary>
-        </ModalContent>
-        <ModalFooter className={cl("modal-footer")}>
-            <div className={cl("modal-footer-btn-container")}>
-                <Button
-                    onClick={props.onClose}
-                    color={Button.Colors.PRIMARY}
-                >
-                    {t("vencord.cancel")}
-                </Button>
-                <Button
-                    onClick={() => {
-                        setSubmitting(true);
-                        createDecoration({ alt: name, file: file! })
-                            .then(props.onClose).catch(e => { setSubmitting(false); setError(e); });
-                    }}
-                    disabled={!file || !name || submitting}
-                >
-                    Submit for Review
-                </Button>
-            </div>
-        </ModalFooter>
-    </ModalRoot >;
+        </div>
+    </Modal>;
 }
 
 export const openCreateDecorationModal = () =>
diff --git a/src/plugins/decor/ui/modals/GuidelinesModal.tsx b/src/plugins/decor/ui/modals/GuidelinesModal.tsx
index e3eedadb4..923499898 100644
--- a/src/plugins/decor/ui/modals/GuidelinesModal.tsx
+++ b/src/plugins/decor/ui/modals/GuidelinesModal.tsx
@@ -4,67 +4,39 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
-import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
 import { Paragraph } from "@components/Paragraph";
 import { settings } from "@plugins/decor/settings";
-import { cl, DecorationModalClasses, requireAvatarDecorationModal } from "@plugins/decor/ui";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Button } from "@webpack/common";
+import { DecorationModalClasses, requireAvatarDecorationModal } from "@plugins/decor/ui";
+import { RenderModalProps } from "@vencord/discord-types";
+import { ConfirmModal, openModal } from "@webpack/common";
 
 import { openCreateDecorationModal } from "./CreateDecorationModal";
 
-function GuidelinesModal(props: ModalProps) {
-    return <ModalRoot
-        {...props}
-        size={ModalSize.SMALL}
-        className={DecorationModalClasses.modal}
-    >
-        <ModalHeader separator={false} className={cl("modal-header")}>
-            <BaseText
-                size="lg"
-                weight="semibold"
-                color="text-strong"
-                tag="h1"
-                style={{ flexGrow: 1 }}
-            >
-                Hold on
-            </BaseText>
-            <ModalCloseButton onClick={props.onClose} />
-        </ModalHeader>
-        <ModalContent
-            scrollbarType="none"
+function GuidelinesModal(props: RenderModalProps) {
+    return (
+        <ConfirmModal
+            {...props}
+            title="Hold on"
+            confirmText="Continue"
+            variant="primary"
+            onConfirm={() => {
+                settings.store.agreedToGuidelines = true;
+                props.onClose();
+                openCreateDecorationModal();
+            }}
         >
-            <Paragraph>
-                By submitting a decoration, you agree to <Link
-                    href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
-                >
-                    the guidelines
-                </Link>. Not reading these guidelines may get your account suspended from creating more decorations in the future.
-            </Paragraph>
-        </ModalContent>
-        <ModalFooter className={cl("modal-footer")}>
-            <Flex gap="4px">
-                <Button
-                    onClick={() => {
-                        settings.store.agreedToGuidelines = true;
-                        props.onClose();
-                        openCreateDecorationModal();
-                    }}
-                >
-                    Continue
-                </Button>
-                <Button
-                    onClick={props.onClose}
-                    color={Button.Colors.PRIMARY}
-                    look={Button.Looks.LINK}
-                >
-                    Go Back
-                </Button>
-            </Flex>
-        </ModalFooter>
-    </ModalRoot>;
+            <div className={DecorationModalClasses.modal}>
+                <Paragraph>
+                    By submitting a decoration, you agree to <Link
+                        href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
+                    >
+                        the guidelines
+                    </Link>. Not reading these guidelines may get your account suspended from creating more decorations in the future.
+                </Paragraph>
+            </div>
+        </ConfirmModal>
+    );
 }
 
 export const openGuidelinesModal = () =>
diff --git a/src/plugins/decor/ui/styles.css b/src/plugins/decor/ui/styles.css
index 28a1f9887..4ba9e2ed9 100644
--- a/src/plugins/decor/ui/styles.css
+++ b/src/plugins/decor/ui/styles.css
@@ -7,7 +7,6 @@
     position: relative;
     display: flex;
     border-radius: 5px 5px 0 0;
-    padding: 0 16px;
     gap: 4px;
 }
 
@@ -32,7 +31,6 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    padding: 0 16px;
 }
 
 .vc-decor-create-decoration-modal-form-preview-container {
diff --git a/src/plugins/expressionCloner/index.tsx b/src/plugins/expressionCloner/index.tsx
index 827db5234..377ee3c03 100644
--- a/src/plugins/expressionCloner/index.tsx
+++ b/src/plugins/expressionCloner/index.tsx
@@ -18,20 +18,21 @@
 
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { migratePluginSettings } from "@api/Settings";
+import { BaseText } from "@components/BaseText";
 import { CheckedTextInput } from "@components/CheckedTextInput";
+import { Flex } from "@components/Flex";
 import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { getGuildAcronym } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { Guild, GuildSticker } from "@vencord/discord-types";
 import { StickerFormatType } from "@vencord/discord-types/enums";
 import { findByCodeLazy } from "@webpack";
-import { Constants, EmojiStore, FluxDispatcher, GuildStore, IconUtils, Menu, PermissionsBits, PermissionStore, React, RestAPI, StickersStore, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { Constants, EmojiStore, FluxDispatcher, GuildStore, IconUtils, Menu, Modal, openModalLazy, PermissionsBits, PermissionStore, React, RestAPI, StickersStore, Toasts, Tooltip, UserStore } from "@webpack/common";
 import { Promisable } from "type-fest";
 
 const uploadEmoji = findByCodeLazy(".GUILD_EMOJIS(", "EMOJI_UPLOAD_START");
@@ -194,7 +195,7 @@ async function doClone(guildId: string, data: Sticker | Emoji) {
             await cloneEmoji(guildId, data);
 
         Toasts.show({
-            message: t("expressionCloner.clonedSuccess", { name: data.name, guild: GuildStore.getGuild(guildId)?.name ?? "your server" }),
+            message: t("vencord.expressionCloner.clonedSuccess", { name: data.name, guild: GuildStore.getGuild(guildId)?.name ?? "your server" }),
             type: Toasts.Type.SUCCESS,
             id: Toasts.genId()
         });
@@ -206,7 +207,7 @@ async function doClone(guildId: string, data: Sticker | Emoji) {
 
         new Logger("ExpressionCloner").error("Failed to clone", data.name, "to", guildId, e);
         Toasts.show({
-            message: t("expressionCloner.failedToClone", { error: message }),
+            message: t("vencord.expressionCloner.failedToClone", { error: message }),
             type: Toasts.Type.FAILURE,
             id: Toasts.genId()
         });
@@ -231,7 +232,7 @@ function CloneModal({ data }: { data: Sticker | Emoji; }) {
 
     return (
         <>
-            <Heading className={Margins.top20}>{t("vencord.expressionCloner.customName")}</Heading>
+            <Heading tag="h5" className={Margins.top20}>{t("vencord.expressionCloner.customName")}</Heading>
             <CheckedTextInput
                 initialValue={name}
                 onChange={v => {
@@ -259,7 +260,7 @@ function CloneModal({ data }: { data: Sticker | Emoji; }) {
                                 onMouseLeave={onMouseLeave}
                                 onMouseEnter={onMouseEnter}
                                 role="button"
-                                aria-label={t("expressionCloner.cloneTo", { guild: g.name })}
+                                aria-label={t("vencord.expressionCloner.cloneTo", { guild: g.name })}
                                 aria-disabled={isCloning}
                                 style={{
                                     borderRadius: "50%",
@@ -332,23 +333,24 @@ function buildMenuItem(type: "Emoji" | "Sticker", fetchData: () => Promisable<Om
                     const url = getUrl(data, 128);
 
                     return modalProps => (
-                        <ModalRoot {...modalProps}>
-                            <ModalHeader>
-                                <img
-                                    role="presentation"
-                                    aria-hidden
-                                    src={url}
-                                    alt=""
-                                    height={24}
-                                    width={24}
-                                    style={{ marginRight: "0.5em" }}
-                                />
-                                <Paragraph>Clone {data.name}</Paragraph>
-                            </ModalHeader>
-                            <ModalContent>
-                                <CloneModal data={data} />
-                            </ModalContent>
-                        </ModalRoot>
+                        <Modal
+                            {...modalProps}
+                            title={
+                                <Flex gap="0.5em" alignItems="center">
+                                    <img
+                                        role="presentation"
+                                        aria-hidden
+                                        src={url}
+                                        alt=""
+                                        height={24}
+                                        width={24}
+                                    />
+                                    <BaseText tag="h3" size="md" weight="medium">{t("vencord.expressionCloner.cloneName", { name: data.name })}</BaseText>
+                                </Flex>
+                            }
+                        >
+                            <CloneModal data={data} />
+                        </Modal>
                     );
                 })
             }
diff --git a/src/plugins/fakeNitro/index.tsx b/src/plugins/fakeNitro/index.tsx
index d27805483..d53b3fa66 100644
--- a/src/plugins/fakeNitro/index.tsx
+++ b/src/plugins/fakeNitro/index.tsx
@@ -25,10 +25,10 @@ import { getCurrentGuild } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import type { Emoji, Message, Sticker } from "@vencord/discord-types";
+import type { Emoji, Message, RenderModalProps, Sticker } from "@vencord/discord-types";
 import { StickerFormatType } from "@vencord/discord-types/enums";
 import { findByCodeLazy, findByPropsLazy, proxyLazyWebpack } from "@webpack";
-import { Alerts, ChannelStore, DraftType, EmojiStore, FluxDispatcher, GuildMemberStore, IconUtils, lodash, OverridePremiumTypeStore, Parser, PermissionsBits, PermissionStore, StickersStore, UploadHandler, UserSettingsActionCreators, UserSettingsProtoStore } from "@webpack/common";
+import { ChannelStore, ConfirmModal, DraftType, EmojiStore, FluxDispatcher, GuildMemberStore, IconUtils, lodash, openModal, OverridePremiumTypeStore, Parser, PermissionsBits, PermissionStore, StickersStore, UploadHandler, UserSettingsActionCreators, UserSettingsProtoStore } from "@webpack/common";
 import { applyPalette, GIFEncoder, quantize } from "gifenc";
 import type { ReactElement, ReactNode } from "react";
 
@@ -158,6 +158,46 @@ const hasExternalStickerPerms = (channelId: string) => hasPermission(channelId,
 const hasEmbedPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.EMBED_LINKS);
 const hasAttachmentPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.ATTACH_FILES);
 
+function getWordBoundary(origStr: string, offset: number) {
+    return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
+}
+
+function CannotEmbedNoticeModal({ modalProps, resolve }: { modalProps: RenderModalProps; resolve: (value: boolean) => void; }) {
+    const s = settings.use(["disableEmbedPermissionCheck"]);
+    return (
+        <ConfirmModal
+            {...modalProps}
+            title={t("vencord.fakeNitro.holdOn")}
+            subtitle={
+                <div>
+                    <Paragraph>
+                        {t("vencord.fakeNitro.noEmbedPerms.body1")}
+                        <br />
+                        {t("vencord.fakeNitro.noEmbedPerms.body2")}
+                        <br />
+                        {t("vencord.fakeNitro.noEmbedPerms.body3")}
+                    </Paragraph>
+                </div>
+            }
+            confirmText={t("vencord.fakeNitro.sendAnyway")}
+            cancelText={t("vencord.cancel")}
+            onConfirm={() => resolve(true)}
+            onCloseCallback={() => setImmediate(() => resolve(false))}
+            checkboxProps={{
+                label: t("vencord.fakeNitro.doNotShowAgain"),
+                checked: s.disableEmbedPermissionCheck === true,
+                onChange: checked => s.disableEmbedPermissionCheck = checked
+            }}
+        />
+    );
+}
+
+function showCannotEmbedNotice() {
+    return new Promise<boolean>(resolve => {
+        openModal(props => <CannotEmbedNoticeModal modalProps={props} resolve={resolve} />);
+    });
+}
+
 export default definePlugin({
     name: "FakeNitro",
     authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.fawn, Devs.captain, Devs.Nuckyz, Devs.AutumnVN, Devs.sadan],
@@ -801,39 +841,6 @@ export default definePlugin({
             return;
         }
 
-        function getWordBoundary(origStr: string, offset: number) {
-            return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
-        }
-
-        function cannotEmbedNotice() {
-            return new Promise<boolean>(resolve => {
-                Alerts.show({
-                    title: t("vencord.fakeNitro.holdOn"),
-                    body: <div>
-                        <Paragraph>
-                            {t("vencord.fakeNitro.noEmbedPerms.body1")}
-                            <br />
-                            {t("vencord.fakeNitro.noEmbedPerms.body2")}
-                            <br />
-                            {t("vencord.fakeNitro.noEmbedPerms.body3")}
-                        </Paragraph>
-                        <Paragraph>
-                            {t("vencord.fakeNitro.noEmbedPerms.disableNotice")}
-                        </Paragraph>
-                    </div>,
-                    confirmText: t("vencord.fakeNitro.sendAnyway"),
-                    cancelText: t("vencord.cancel"),
-                    secondaryConfirmText: t("vencord.fakeNitro.doNotShowAgain"),
-                    onConfirm: () => resolve(true),
-                    onCloseCallback: () => setImmediate(() => resolve(false)),
-                    onConfirmSecondary() {
-                        settings.store.disableEmbedPermissionCheck = true;
-                        resolve(true);
-                    }
-                });
-            });
-        }
-
         this.preSend = addMessagePreSendListener(async (channelId, messageObj, extra) => {
             const { guildId } = this;
 
@@ -859,14 +866,20 @@ export default definePlugin({
 
                 if (sticker.format_type === StickerFormatType.APNG) {
                     if (!hasAttachmentPerms(channelId)) {
-                        Alerts.show({
-                            title: t("vencord.fakeNitro.holdOn"),
-                            body: <div>
-                                <Paragraph>
-                                    {t("vencord.fakeNitro.noAttachmentPerms.body")}
-                                </Paragraph>
-                            </div>
-                        });
+                        openModal(props => (
+                            <ConfirmModal
+                                {...props}
+                                title={t("vencord.fakeNitro.holdOn")}
+                                confirmText={t("vencord.fakeNitro.ok")}
+                                variant="primary"
+                            >
+                                <div>
+                                    <Paragraph>
+                                        {t("vencord.fakeNitro.noAttachmentPerms.body")}
+                                    </Paragraph>
+                                </div>
+                            </ConfirmModal>
+                        ));
                     } else {
                         this.sendAnimatedSticker(link, sticker.id, channelId);
                     }
@@ -910,7 +923,7 @@ export default definePlugin({
             }
 
             if (hasBypass && !s.disableEmbedPermissionCheck && !hasEmbedPerms(channelId)) {
-                if (!await cannotEmbedNotice()) {
+                if (!await showCannotEmbedNotice()) {
                     return { cancel: true };
                 }
             }
@@ -941,7 +954,7 @@ export default definePlugin({
             });
 
             if (hasBypass && !s.disableEmbedPermissionCheck && !hasEmbedPerms(channelId)) {
-                if (!await cannotEmbedNotice()) {
+                if (!await showCannotEmbedNotice()) {
                     return { cancel: true };
                 }
             }
diff --git a/src/plugins/favEmojiFirst/components/modals/ClearAliasesConfirmModal.tsx b/src/plugins/favEmojiFirst/components/modals/ClearAliasesConfirmModal.tsx
index 051e5a569..5f729ce81 100644
--- a/src/plugins/favEmojiFirst/components/modals/ClearAliasesConfirmModal.tsx
+++ b/src/plugins/favEmojiFirst/components/modals/ClearAliasesConfirmModal.tsx
@@ -4,36 +4,30 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Button } from "@components/Button";
-import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize } from "@utils/modal";
 import { t } from "@utils/translation";
+import { Modal } from "@webpack/common";
 
 import { ClearAliasesConfirmModalProps } from "./types";
 
 export function ClearAliasesConfirmModal({ modalProps, onConfirm }: ClearAliasesConfirmModalProps) {
     return (
-        <ModalRoot {...modalProps} size={ModalSize.SMALL}>
-            <ModalHeader>
-                <Heading style={{ flexGrow: 1 }}>{t("vencord.favEmojiFirst.ui.confirmModal.title")}</Heading>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent>
-                <Paragraph>{t("vencord.favEmojiFirst.ui.confirmModal.description")}</Paragraph>
-            </ModalContent>
-            <ModalFooter>
-                <Button
-                    variant="dangerPrimary"
-                    style={{ marginLeft: "auto" }}
-                    onClick={async () => {
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={t("vencord.favEmojiFirst.ui.confirmModal.title")}
+            actions={[
+                {
+                    text: t("vencord.favEmojiFirst.ui.confirmModal.confirmButton"),
+                    variant: "danger-primary",
+                    onClick: async () => {
                         await onConfirm();
                         modalProps.onClose();
-                    }}
-                >
-                    {t("vencord.favEmojiFirst.ui.confirmModal.confirmButton")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    }
+                }
+            ]}
+        >
+            <Paragraph>{t("vencord.favEmojiFirst.ui.confirmModal.description")}</Paragraph>
+        </Modal>
     );
 }
diff --git a/src/plugins/favEmojiFirst/components/modals/SetAliasModal.tsx b/src/plugins/favEmojiFirst/components/modals/SetAliasModal.tsx
index 3e1a44e3f..aa67caecc 100644
--- a/src/plugins/favEmojiFirst/components/modals/SetAliasModal.tsx
+++ b/src/plugins/favEmojiFirst/components/modals/SetAliasModal.tsx
@@ -5,12 +5,9 @@
  */
 
 import { BaseText } from "@components/BaseText";
-import { Button } from "@components/Button";
-import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize } from "@utils/modal";
 import { t } from "@utils/translation";
-import { TextInput, useState } from "@webpack/common";
+import { Modal, TextInput, useState } from "@webpack/common";
 
 import { SetAliasModalProps } from "./types";
 
@@ -31,45 +28,40 @@ export function SetAliasModal({
     const canSave = !validationError && !duplicateAlias;
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.SMALL}>
-            <ModalHeader>
-                <Heading style={{ flexGrow: 1 }}>{t("vencord.favEmojiFirst.ui.modal.setTitle")}</Heading>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-
-            <ModalContent style={{ overflowY: "hidden" }}>
-                <Paragraph style={{ margin: 0, marginBottom: 8 }}>{t("favEmojiFirst.ui.modal.setDescription", { emoji: emojiDisplayName })}</Paragraph>
-                <TextInput
-                    value={input}
-                    onChange={value => {
-                        setInput(value);
-                        setError(null);
-                    }}
-                    placeholder={t("vencord.favEmojiFirst.ui.modal.placeholder")}
-                />
-                {finalError && (
-                    <BaseText style={{ color: "var(--text-feedback-critical)", marginTop: 8 }}>
-                        {finalError}
-                    </BaseText>
-                )}
-            </ModalContent>
-
-            <ModalFooter>
-                <Button
-                    variant="primary"
-                    disabled={!canSave}
-                    onClick={async () => {
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={t("vencord.favEmojiFirst.ui.modal.setTitle")}
+            actions={[
+                {
+                    text: t("vencord.favEmojiFirst.ui.modal.save"),
+                    variant: "primary",
+                    disabled: !canSave,
+                    onClick: async () => {
                         const result = await onSave(input);
                         if (!result.ok) {
                             setError(result.error);
                             return;
                         }
                         modalProps.onClose();
-                    }}
-                >
-                    {t("vencord.favEmojiFirst.ui.modal.save")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    }
+                }
+            ]}
+        >
+            <Paragraph style={{ margin: 0, marginBottom: 8 }}>{t("vencord.favEmojiFirst.ui.modal.setDescription", { emoji: emojiDisplayName })}</Paragraph>
+            <TextInput
+                value={input}
+                onChange={value => {
+                    setInput(value);
+                    setError(null);
+                }}
+                placeholder={t("vencord.favEmojiFirst.ui.modal.placeholder")}
+            />
+            {finalError && (
+                <BaseText style={{ color: "var(--text-feedback-critical)", marginTop: 8 }}>
+                    {finalError}
+                </BaseText>
+            )}
+        </Modal>
     );
 }
diff --git a/src/plugins/favEmojiFirst/components/modals/types.ts b/src/plugins/favEmojiFirst/components/modals/types.ts
index 7295b38a7..725ddb6f2 100644
--- a/src/plugins/favEmojiFirst/components/modals/types.ts
+++ b/src/plugins/favEmojiFirst/components/modals/types.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { ModalProps } from "@utils/modal";
+import { RenderModalProps } from "@vencord/discord-types";
 
 export type SetAliasSaveResult = { ok: true; } | { ok: false; error: string; };
 
 export interface SetAliasModalProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     emojiDisplayName: string;
     initialAlias: string;
     getValidationError: (input: string) => string | null;
@@ -18,6 +18,6 @@ export interface SetAliasModalProps {
 }
 
 export interface ClearAliasesConfirmModalProps {
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
     onConfirm: () => Promise<void>;
 }
diff --git a/src/plugins/favEmojiFirst/index.tsx b/src/plugins/favEmojiFirst/index.tsx
index 3370dee1b..922bd1419 100644
--- a/src/plugins/favEmojiFirst/index.tsx
+++ b/src/plugins/favEmojiFirst/index.tsx
@@ -16,12 +16,11 @@ import { Paragraph } from "@components/Paragraph";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { Logger } from "@utils/Logger";
-import { openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { Emoji, Message } from "@vencord/discord-types";
 import { findByPropsLazy } from "@webpack";
-import { EmojiStore, Menu, TextInput, Toasts, useEffect, useState } from "@webpack/common";
+import { EmojiStore, Menu, openModal,TextInput, Toasts, useEffect, useState } from "@webpack/common";
 
 import { ClearAliasesConfirmModal } from "./components/modals/ClearAliasesConfirmModal";
 import { SetAliasModal } from "./components/modals/SetAliasModal";
diff --git a/src/plugins/friendsSince/index.tsx b/src/plugins/friendsSince/index.tsx
index f979b4a27..1f2ba6c8e 100644
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@@ -77,5 +77,8 @@ export default definePlugin({
     tags: ["Friends"],
     authors: [Devs.Elvyra, Devs.Antti],
     dependencies: ["ProfileSectionsAPI"],
-    renderProfileSection: FriendsSinceSection,
+    renderProfileSection: {
+        render: FriendsSinceSection,
+        priority: 0,
+    },
 });
diff --git a/src/plugins/messageClickActions/ReactEmojiSetting.tsx b/src/plugins/messageClickActions/ReactEmojiSetting.tsx
index e006aeb42..6724ffa03 100644
--- a/src/plugins/messageClickActions/ReactEmojiSetting.tsx
+++ b/src/plugins/messageClickActions/ReactEmojiSetting.tsx
@@ -52,22 +52,26 @@ function getEmojiValue(emoji: EmojiSelectPayload | null | undefined) {
     return emoji.name?.trim() ?? "";
 }
 
-function toRenderedEmoji(value: string) {
+type RenderedEmoji =
+    | { kind: "custom"; id: string; name: string; animated: boolean; }
+    | { kind: "unicode"; name: string; animated: boolean; };
+
+function toRenderedEmoji(value: string): RenderedEmoji | null {
     const trimmed = value.trim();
     if (!trimmed) return null;
 
     const customEmoji = parseCustomEmoji(trimmed);
     if (customEmoji) {
         return {
-            kind: "custom" as const,
-            id: customEmoji[3],
-            name: customEmoji[2],
+            kind: "custom",
+            id: customEmoji[3]!,
+            name: customEmoji[2]!,
             animated: customEmoji[1] === "a"
         };
     }
 
     return {
-        kind: "unicode" as const,
+        kind: "unicode",
         name: trimmed,
         animated: false
     };
diff --git a/src/plugins/messageLogger/HistoryModal.tsx b/src/plugins/messageLogger/HistoryModal.tsx
index d9faa1747..2a5a81181 100644
--- a/src/plugins/messageLogger/HistoryModal.tsx
+++ b/src/plugins/messageLogger/HistoryModal.tsx
@@ -4,17 +4,16 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { FormSwitch } from "@components/FormSwitch";
 import { TooltipContainer } from "@components/TooltipContainer";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
+import { RenderModalProps } from "@vencord/discord-types";
 import { findCssClassesLazy } from "@webpack";
-import { TabBar, Timestamp, useState } from "@webpack/common";
+import { Modal, openModal, TabBar, Timestamp, useState } from "@webpack/common";
 
 import { parseEditContent, settings } from ".";
 
@@ -34,65 +33,62 @@ export function openHistoryModal(message: any) {
     );
 }
 
-export function HistoryModal({ modalProps, message }: { modalProps: ModalProps; message: any; }) {
+export function HistoryModal({ modalProps, message }: { modalProps: RenderModalProps; message: any; }) {
     const [currentTab, setCurrentTab] = useState(message.editHistory.length);
     const [showDiff, setShowDiff] = useState(settings.store.showEditDiffs);
     const timestamps = [message.firstEditTimestamp, ...message.editHistory.map(m => m.timestamp)];
     const contents = [...message.editHistory.map(m => m.content), message.content];
 
     return (
-        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
-            <ModalHeader className={cl("head")}>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{t("vencord.messageLogger.editHistory")}</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-
-            <ModalContent className={cl("contents")}>
-                <FormSwitch title="Show Diff" value={showDiff} onChange={setShowDiff} />
-                <TabBar
-                    type="top"
-                    look="brand"
-                    className={classes("vc-settings-tab-bar", cl("tab-bar"))}
-                    selectedItem={currentTab}
-                    onItemSelect={setCurrentTab}
-                >
-                    {message.firstEditTimestamp.getTime() !== message.timestamp.getTime() && (
-                        <TooltipContainer text={t("vencord.messageLogger.notLoggedTooltip")}>
-                            <TabBar.Item
-                                className="vc-settings-tab-bar-item"
-                                id={-1}
-                                disabled
-                            >
-                                <Timestamp
-                                    className={cl("timestamp")}
-                                    timestamp={message.timestamp}
-                                    isEdited={true}
-                                    isInline={false}
-                                />
-                            </TabBar.Item>
-                        </TooltipContainer>
-                    )}
-
-                    {timestamps.map((timestamp, index) => (
+        <Modal
+            {...modalProps}
+            size="lg"
+            title={t("vencord.messageLogger.editHistory")}
+        >
+            <FormSwitch title={t("vencord.messageLogger.showDiff")} value={showDiff} onChange={setShowDiff} />
+            <TabBar
+                type="top"
+                look="brand"
+                className={classes("vc-settings-tab-bar", cl("tab-bar"))}
+                selectedItem={currentTab}
+                onItemSelect={setCurrentTab}
+            >
+                {message.firstEditTimestamp.getTime() !== message.timestamp.getTime() && (
+                    <TooltipContainer text={t("vencord.messageLogger.notLoggedTooltip")}>
                         <TabBar.Item
-                            key={index}
                             className="vc-settings-tab-bar-item"
-                            id={index}
+                            id={-1}
+                            disabled
                         >
                             <Timestamp
                                 className={cl("timestamp")}
-                                timestamp={timestamp}
+                                timestamp={message.timestamp}
                                 isEdited={true}
                                 isInline={false}
                             />
                         </TabBar.Item>
-                    ))}
-                </TabBar>
+                    </TooltipContainer>
+                )}
 
-                <div className={classes(CodeContainerClasses.markup, MiscClasses.messageContent, Margins.top20)}>
-                    {parseEditContent(contents[currentTab], message, showDiff ? currentTab === contents.length - 1 ? undefined : contents[contents.length - 1] : undefined)}
-                </div>
-            </ModalContent>
-        </ModalRoot>
+                {timestamps.map((timestamp, index) => (
+                    <TabBar.Item
+                        key={index}
+                        className="vc-settings-tab-bar-item"
+                        id={index}
+                    >
+                        <Timestamp
+                            className={cl("timestamp")}
+                            timestamp={timestamp}
+                            isEdited={true}
+                            isInline={false}
+                        />
+                    </TabBar.Item>
+                ))}
+            </TabBar>
+
+            <div className={classes(CodeContainerClasses.markup, MiscClasses.messageContent, Margins.top20)}>
+                {parseEditContent(contents[currentTab], message, showDiff ? currentTab === contents.length - 1 ? undefined : contents[contents.length - 1] : undefined)}
+            </div>
+        </Modal>
     );
 }
diff --git a/src/plugins/moreQuickReactions/index.ts b/src/plugins/moreQuickReactions/index.ts
index 4ac676a03..f429eb102 100644
--- a/src/plugins/moreQuickReactions/index.ts
+++ b/src/plugins/moreQuickReactions/index.ts
@@ -94,7 +94,7 @@ export default definePlugin({
                 // Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display
                 {
                     match: /className:(\i\.\i),(?=children:)/,
-                    replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
+                    replace: 'className:"vc-better-quick-react "+($self.settings.store.compactMode?"vc-better-quick-react-compact ":"")+$1,style:{"--vc-better-quick-react-columns":$self.settings.store.columns},'
                 },
                 // Scroll handler + Apply the emoji count limit from earlier with custom logic
                 {
@@ -110,6 +110,13 @@ export default definePlugin({
                 match: /role:"group",/,
                 replace: "$&style:arguments[0].style,onWheel:arguments[0].onWheel,"
             }
+        },
+        {
+            find: '"--custom-menu-viewport-padding"',
+            replacement: {
+                match: /className:\i\(\)\(\i\.menu/,
+                replace: '$&,"vc-better-quick-react-padding"'
+            }
         }
     ],
     getMaxQuickReactions() {
diff --git a/src/plugins/moreQuickReactions/styles.css b/src/plugins/moreQuickReactions/styles.css
index 65f562eee..38349e19d 100644
--- a/src/plugins/moreQuickReactions/styles.css
+++ b/src/plugins/moreQuickReactions/styles.css
@@ -24,7 +24,6 @@
     height: 25px;
 }
 
-/* 8 or more columns exceeds the default max width */
-[class*="menu"]:has(>div>.vc-better-quick-react) {
-    max-width: fit-content;
+.vc-better-quick-react-padding {
+    min-width: fit-content;
 }
\ No newline at end of file
diff --git a/src/plugins/noMosaic/index.ts b/src/plugins/noMosaic/index.ts
new file mode 100644
index 000000000..b5fffba00
--- /dev/null
+++ b/src/plugins/noMosaic/index.ts
@@ -0,0 +1,53 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+
+const settings = definePluginSettings({
+    inlineVideo: {
+        description: "Play videos without carousel modal",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    }
+});
+
+export default definePlugin({
+    name: "NoMosaic",
+    authors: [Devs.AutumnVN],
+    description: "Removes Discord image mosaic",
+    tags: ["Media", "Appearance", "Chat"],
+    searchTerms: ["image", "mosaic", "media"],
+
+    settings,
+
+    patches: [
+        {
+            find: '"PLAINTEXT_PREVIEW":"OTHER"',
+            replacement: {
+                match: /"IMAGE"===\i\|\|"VIDEO"===\i\|\|"CLIP"===\i/,
+                replace: "false"
+            }
+        },
+        {
+            find: "return{visualMediaItems:",
+            replacement: {
+                match: /return{visualMediaItems:.+?props:(\i)(?=.{0,20}?\1\.item\.uniqueId)/,
+                replace: '$&,useFullWidth:["IMAGE","VIDEO","CLIP"].includes($1.item?.type)?false:undefined'
+            }
+        },
+        {
+            find: "renderAttachments(",
+            predicate: () => settings.store.inlineVideo,
+            replacement: {
+                match: /url:(\i)\.url\}\);return /,
+                replace: "$&$1.content_type?.startsWith('image/')&&"
+            }
+        },
+    ]
+});
diff --git a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
index 2607fc59b..dceec3573 100644
--- a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
@@ -16,7 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BaseText } from "@components/BaseText";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
@@ -24,12 +23,11 @@ import { buildExtraRoleContextMenuItems } from "@plugins/betterRoleContext";
 import { cl, getGuildPermissionSpecMap, loadGetGuildPermissionSpecMap } from "@plugins/permissionsViewer/utils";
 import { copyToClipboard } from "@utils/clipboard";
 import { getIntlMessage, getUniqueUsername } from "@utils/discord";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModalLazy } from "@utils/modal";
 import { t } from "@utils/translation";
-import { Guild, Role, RoleOrUserPermission, UnicodeEmoji, User } from "@vencord/discord-types";
+import { Guild, RenderModalProps, Role, RoleOrUserPermission, UnicodeEmoji, User } from "@vencord/discord-types";
 import { PermissionOverwriteType } from "@vencord/discord-types/enums";
 import { findByCodeLazy } from "@webpack";
-import { ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildRoleStore, i18n, Menu, PermissionsBits, ScrollerThin, Tooltip, useEffect, useMemo, useRef, UserStore, useState, useStateFromStores } from "@webpack/common";
+import { ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildRoleStore, i18n, Menu, Modal, openModalLazy, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, useMemo, useRef, UserStore, useState, useStateFromStores } from "@webpack/common";
 
 import { settings } from "..";
 import { PermissionAllowedIcon, PermissionDefaultIcon, PermissionDeniedIcon } from "./icons";
@@ -45,7 +43,7 @@ function getRoleIconSrc(role: Role) {
     return customIconSrc ?? unicodeEmoji?.url;
 }
 
-function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
+function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: RenderModalProps; header: string; }) {
     const guildPermissionSpecMap = useMemo(() => getGuildPermissionSpecMap(guild), [guild.id]);
 
     useStateFromStores(
@@ -77,133 +75,127 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
     const roles = GuildRoleStore.getRolesSnapshot(guild.id);
 
     return (
-        <ModalRoot
+        <Modal
             {...modalProps}
-            size={ModalSize.LARGE}
+            size="xl"
+            title={t("permissionsViewer.permissionsTitle", { header })}
         >
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" className={cl("modal-title")}>{t("permissionsViewer.permissionsTitle", { header })}</BaseText>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
+            {!selectedItem && (
+                <div className={cl("modal-no-perms")}>
+                    <Text variant="heading-lg/normal">{t("vencord.permissionsViewer.noPermissions")}</Text>
+                </div>
+            )}
 
-            <ModalContent className={cl("modal-content")}>
-                {!selectedItem && (
-                    <div className={cl("modal-no-perms")}>
-                        <BaseText size="lg">{t("vencord.permissionsViewer.noPermissions")}</BaseText>
-                    </div>
-                )}
+            {selectedItem && (
+                <div className={cl("modal-container")}>
+                    <ScrollerThin className={cl("modal-list")} orientation="auto">
+                        {permissions.map((permission, index) => {
+                            const user: User | undefined = UserStore.getUser(permission.id ?? "");
+                            const role: Role | undefined = roles[permission.id ?? ""];
+                            const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
 
-                {selectedItem && (
-                    <div className={cl("modal-container")}>
-                        <ScrollerThin className={cl("modal-list")} orientation="auto">
-                            {permissions.map((permission, index) => {
-                                const user: User | undefined = UserStore.getUser(permission.id ?? "");
-                                const role: Role | undefined = roles[permission.id ?? ""];
-                                const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
-
-                                return (
+                            return (
+                                <div
+                                    key={index}
+                                    className={cl("modal-list-item-btn")}
+                                    onClick={() => selectItem(index)}
+                                    role="button"
+                                    tabIndex={0}
+                                >
                                     <div
-                                        key={index}
-                                        className={cl("modal-list-item-btn")}
-                                        onClick={() => selectItem(index)}
-                                        role="button"
-                                        tabIndex={0}
+                                        className={cl("modal-list-item", { "modal-list-item-active": selectedItemIndex === index })}
+                                        onContextMenu={e => {
+                                            if (permission.type === PermissionOverwriteType.ROLE)
+                                                ContextMenuApi.openContextMenu(e, () => (
+                                                    <RoleContextMenu
+                                                        guild={guild}
+                                                        roleId={permission.id!}
+                                                        onClose={modalProps.onClose}
+                                                    />
+                                                ));
+                                            else if (permission.type === PermissionOverwriteType.MEMBER) {
+                                                ContextMenuApi.openContextMenu(e, () => (
+                                                    <UserContextMenu
+                                                        userId={permission.id!}
+                                                    />
+                                                ));
+                                            }
+                                        }}
                                     >
-                                        <div
-                                            className={cl("modal-list-item", { "modal-list-item-active": selectedItemIndex === index })}
-                                            onContextMenu={e => {
-                                                if (permission.type === PermissionOverwriteType.ROLE)
-                                                    ContextMenuApi.openContextMenu(e, () => (
-                                                        <RoleContextMenu
-                                                            guild={guild}
-                                                            roleId={permission.id!}
-                                                            onClose={modalProps.onClose}
-                                                        />
-                                                    ));
-                                                else if (permission.type === PermissionOverwriteType.MEMBER) {
-                                                    ContextMenuApi.openContextMenu(e, () => (
-                                                        <UserContextMenu
-                                                            userId={permission.id!}
-                                                        />
-                                                    ));
-                                                }
-                                            }}
-                                        >
-                                            {(permission.type === PermissionOverwriteType.ROLE || permission.type === PermissionOverwriteType.OWNER) && (
-                                                <span
-                                                    className={cl("modal-role-circle")}
-                                                    style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
-                                                />
-                                            )}
-                                            {permission.type === PermissionOverwriteType.ROLE && roleIconSrc != null && (
-                                                <img
-                                                    className={cl("modal-role-image")}
-                                                    src={roleIconSrc}
-                                                />
-                                            )}
-                                            {permission.type === PermissionOverwriteType.MEMBER && user != null && (
-                                                <img
-                                                    className={cl("modal-user-img")}
-                                                    src={user.getAvatarURL(void 0, void 0, false)}
-                                                />
-                                            )}
-                                            <BaseText size="md" className={cl("modal-list-item-text")}>
-                                                {
-                                                    permission.type === PermissionOverwriteType.ROLE
-                                                        ? role?.name ?? t("vencord.permissionsViewer.unknownRole")
-                                                        : permission.type === PermissionOverwriteType.MEMBER
-                                                            ? (user != null && getUniqueUsername(user)) ?? t("vencord.permissionsViewer.unknownUser")
-                                                            : (
-                                                                <Flex gap="0.2em">
-                                                                    @{t("vencord.permissionsViewer.owner")}
-                                                                    <OwnerCrownIcon height={18} width={18} aria-hidden="true" />
-                                                                </Flex>
-                                                            )
-                                                }
-                                            </BaseText>
-                                        </div>
+                                        {(permission.type === PermissionOverwriteType.ROLE || permission.type === PermissionOverwriteType.OWNER) && (
+                                            <span
+                                                className={cl("modal-role-circle")}
+                                                style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
+                                            />
+                                        )}
+                                        {permission.type === PermissionOverwriteType.ROLE && roleIconSrc != null && (
+                                            <img
+                                                className={cl("modal-role-image")}
+                                                src={roleIconSrc}
+                                            />
+                                        )}
+                                        {permission.type === PermissionOverwriteType.MEMBER && user != null && (
+                                            <img
+                                                className={cl("modal-user-img")}
+                                                src={user.getAvatarURL(void 0, void 0, false)}
+                                            />
+                                        )}
+                                        <Text variant="text-md/normal" className={cl("modal-list-item-text")}>
+                                            {
+                                                permission.type === PermissionOverwriteType.ROLE
+                                                    ? role?.name ?? t("vencord.permissionsViewer.unknownRole")
+                                                    : permission.type === PermissionOverwriteType.MEMBER
+                                                        ? (user != null && getUniqueUsername(user)) ?? t("vencord.permissionsViewer.unknownUser")
+                                                        : (
+                                                            <Flex gap="0.2em">
+                                                                @{t("vencord.permissionsViewer.owner")}
+                                                                <OwnerCrownIcon height={18} width={18} aria-hidden="true" />
+                                                            </Flex>
+                                                        )
+                                            }
+                                        </Text>
                                     </div>
-                                );
-                            })}
-                        </ScrollerThin>
-                        <div className={cl("modal-divider")} />
-                        <ScrollerThin className={cl("modal-perms")} orientation="auto">
-                            {Object.values(PermissionsBits).map(bit => (
-                                <div key={bit} className={cl("modal-perms-item")}>
-                                    <div className={cl("modal-perms-item-icon")}>
-                                        {(() => {
-                                            const { permissions, overwriteAllow, overwriteDeny } = selectedItem;
-
-                                            if (permissions)
-                                                return (permissions & bit) === bit
-                                                    ? PermissionAllowedIcon()
-                                                    : PermissionDeniedIcon();
-
-                                            if (overwriteAllow && (overwriteAllow & bit) === bit)
-                                                return PermissionAllowedIcon();
-                                            if (overwriteDeny && (overwriteDeny & bit) === bit)
-                                                return PermissionDeniedIcon();
-
-                                            return PermissionDefaultIcon();
-                                        })()}
-                                    </div>
-                                    <BaseText size="md">{guildPermissionSpecMap[String(bit)].title}</BaseText>
-
-                                    <Tooltip text={
-                                        (() => {
-                                            const { description } = guildPermissionSpecMap[String(bit)];
-                                            return typeof description === "function" ? i18n.intl.format(description, {}) : description;
-                                        })()
-                                    }>
-                                        {props => <InfoIcon {...props} />}
-                                    </Tooltip>
                                 </div>
-                            ))}
-                        </ScrollerThin>
-                    </div>
-                )}
-            </ModalContent>
-        </ModalRoot>
+                            );
+                        })}
+                    </ScrollerThin>
+                    <div className={cl("modal-divider")} />
+                    <ScrollerThin className={cl("modal-perms")} orientation="auto">
+                        {Object.values(PermissionsBits).map(bit => (
+                            <div key={bit} className={cl("modal-perms-item")}>
+                                <div className={cl("modal-perms-item-icon")}>
+                                    {(() => {
+                                        const { permissions, overwriteAllow, overwriteDeny } = selectedItem;
+
+                                        if (permissions)
+                                            return (permissions & bit) === bit
+                                                ? PermissionAllowedIcon()
+                                                : PermissionDeniedIcon();
+
+                                        if (overwriteAllow && (overwriteAllow & bit) === bit)
+                                            return PermissionAllowedIcon();
+                                        if (overwriteDeny && (overwriteDeny & bit) === bit)
+                                            return PermissionDeniedIcon();
+
+                                        return PermissionDefaultIcon();
+                                    })()}
+                                </div>
+                                <Text variant="text-md/normal">{guildPermissionSpecMap[String(bit)].title}</Text>
+
+                                <Tooltip text={
+                                    (() => {
+                                        const { description } = guildPermissionSpecMap[String(bit)];
+                                        return typeof description === "function" ? i18n.intl.format(description, {}) : description;
+                                    })()
+                                }>
+                                    {props => <InfoIcon {...props} />}
+                                </Tooltip>
+                            </div>
+                        ))}
+                    </ScrollerThin>
+                </div>
+            )}
+        </Modal>
     );
 }
 
diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css
index c4b4c0943..910aee668 100644
--- a/src/plugins/permissionsViewer/styles.css
+++ b/src/plugins/permissionsViewer/styles.css
@@ -21,14 +21,6 @@
 
 /*  RolesAndUsersPermissions Component */
 
-.vc-permviewer-modal-content {
-    padding: 16px 4px 16px 16px;
-}
-
-.vc-permviewer-modal-title {
-    flex-grow: 1;
-}
-
 .vc-permviewer-modal-no-perms {
     width: 100%;
     height: 100%;
diff --git a/src/plugins/pinDms/components/CreateCategoryModal.tsx b/src/plugins/pinDms/components/CreateCategoryModal.tsx
index c942e664f..b2f589cdd 100644
--- a/src/plugins/pinDms/components/CreateCategoryModal.tsx
+++ b/src/plugins/pinDms/components/CreateCategoryModal.tsx
@@ -4,18 +4,17 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText } from "@components/BaseText";
-import { Divider } from "@components/Divider";
 import { Heading } from "@components/Heading";
 import { DEFAULT_COLOR, SWATCHES } from "@plugins/pinDms/constants";
 import { categoryLen, createCategory, getCategory } from "@plugins/pinDms/data";
 import { classNameFactory } from "@utils/css";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModalLazy } from "@utils/modal";
 import { t } from "@utils/translation";
+import { RenderModalProps } from "@vencord/discord-types";
 import { extractAndLoadChunksLazy, findComponentByCodeLazy } from "@webpack";
-import { Button, ColorPicker, TextInput, Toasts, useMemo, useState } from "@webpack/common";
+import { ColorPicker, Modal, openModalLazy, TextInput, Toasts, useMemo, useState } from "@webpack/common";
 
 interface ColorPickerWithSwatchesProps {
+    className?: string;
     defaultColor: number;
     colors: number[];
     value: number;
@@ -34,7 +33,7 @@ const cl = classNameFactory("vc-pindms-modal-");
 interface Props {
     categoryId: string | null;
     initialChannelId: string | null;
-    modalProps: ModalProps;
+    modalProps: RenderModalProps;
 }
 
 function useCategory(categoryId: string | null, initalChannelId: string | null) {
@@ -44,7 +43,7 @@ function useCategory(categoryId: string | null, initalChannelId: string | null)
         } else if (initalChannelId) {
             return {
                 id: Toasts.genId(),
-                name: t("pinDms.pinCategory", { index: categoryLen() + 1 }),
+                name: t("vencord.pinDms.pinCategory", { index: categoryLen() + 1 }),
                 color: DEFAULT_COLOR,
                 collapsed: false,
                 channels: [initalChannelId]
@@ -62,9 +61,7 @@ export function NewCategoryModal({ categoryId, modalProps, initialChannelId }: P
     const [name, setName] = useState(category.name);
     const [color, setColor] = useState(category.color);
 
-    const onSave = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.preventDefault();
-
+    const onSave = () => {
         category.name = name;
         category.color = color;
 
@@ -76,47 +73,52 @@ export function NewCategoryModal({ categoryId, modalProps, initialChannelId }: P
     };
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{categoryId ? t("vencord.pinDms.editCategoryTitle") : t("vencord.pinDms.newCategory")}</BaseText>
-            </ModalHeader>
-
-            {/* form is here so when you press enter while in the text input it submits */}
-            <form onSubmit={onSave}>
-                <ModalContent className={cl("content")}>
-                    <section>
-                        <Heading>{t("vencord.pinDms.name")}</Heading>
-                        <TextInput
-                            value={name}
-                            onChange={e => setName(e)}
-                        />
-                    </section>
-                    <Divider />
-                    <section>
-                        <Heading>{t("vencord.pinDms.color")}</Heading>
-                        <ColorPickerWithSwatches
-                            key={category.id}
-                            defaultColor={DEFAULT_COLOR}
-                            colors={SWATCHES}
-                            onChange={c => setColor(c!)}
-                            value={color}
-                            renderDefaultButton={() => null}
-                            renderCustomButton={() => (
-                                <ColorPicker
-                                    color={color}
-                                    onChange={c => setColor(c!)}
-                                    key={category.id}
-                                    showEyeDropper={false}
-                                />
-                            )}
-                        />
-                    </section>
-                </ModalContent>
-                <ModalFooter>
-                    <Button type="submit" onClick={onSave} disabled={!name}>{categoryId ? t("vencord.pinDms.save") : t("vencord.pinDms.create")}</Button>
-                </ModalFooter>
+        <Modal
+            {...modalProps}
+            title={categoryId ? t("vencord.pinDms.editCategoryTitle") : t("vencord.pinDms.newCategory")}
+            actions={[{
+                text: categoryId ? t("vencord.pinDms.save") : t("vencord.pinDms.create"),
+                variant: "primary",
+                onClick: onSave,
+                disabled: !name
+            }]}
+        >
+            <form
+                className={cl("content")}
+                onSubmit={e => {
+                    e.preventDefault();
+                    onSave();
+                }}
+            >
+                <section>
+                    <Heading tag="h5">{t("vencord.pinDms.name")}</Heading>
+                    <TextInput
+                        value={name}
+                        onChange={e => setName(e)}
+                    />
+                </section>
+                <section>
+                    <Heading tag="h5">{t("vencord.pinDms.color")}</Heading>
+                    <ColorPickerWithSwatches
+                        className={cl("color-picker")}
+                        key={category.id}
+                        defaultColor={DEFAULT_COLOR}
+                        colors={SWATCHES}
+                        onChange={c => setColor(c!)}
+                        value={color}
+                        renderDefaultButton={() => null}
+                        renderCustomButton={() => (
+                            <ColorPicker
+                                color={color}
+                                onChange={c => setColor(c!)}
+                                key={category.id}
+                                showEyeDropper={false}
+                            />
+                        )}
+                    />
+                </section>
             </form>
-        </ModalRoot>
+        </Modal>
     );
 }
 
diff --git a/src/plugins/pinDms/components/contextMenu.tsx b/src/plugins/pinDms/components/contextMenu.tsx
index 1d0ad5175..cda7b99a6 100644
--- a/src/plugins/pinDms/components/contextMenu.tsx
+++ b/src/plugins/pinDms/components/contextMenu.tsx
@@ -15,6 +15,8 @@ import { openCategoryModal } from "./CreateCategoryModal";
 function createPinMenuItem(channelId: string) {
     const pinned = isPinned(channelId);
 
+    const showSeparator = pinned || currentUserCategories.length > 0;
+
     return (
         <Menu.MenuItem
             id="pin-dm"
@@ -29,7 +31,7 @@ function createPinMenuItem(channelId: string) {
                         color="brand"
                         action={() => openCategoryModal(null, channelId)}
                     />
-                    <Menu.MenuSeparator />
+                    {showSeparator && <Menu.MenuSeparator />}
 
                     {
                         currentUserCategories.map(category => (
diff --git a/src/plugins/pinDms/styles.css b/src/plugins/pinDms/styles.css
index 9418e14a4..ecbf8e27f 100644
--- a/src/plugins/pinDms/styles.css
+++ b/src/plugins/pinDms/styles.css
@@ -14,15 +14,17 @@
     cursor: pointer;
 }
 
-.vc-pindms-modal-content {
-    display: grid;
-    justify-content: center;
-    padding: 1rem;
-    gap: 1.5rem;
+.vc-pindms-modal-color-picker {
+    margin-inline-end: 0;
+
+    [class*="defaultContainer"] {
+        display: none;
+    }
 }
 
-.vc-pindms-modal-content [class*="defaultContainer"] {
-    display: none;
+.vc-pindms-modal-content {
+    display: grid;
+    gap: 1.5em;
 }
 
 .vc-pindms-collapse-icon {
diff --git a/src/plugins/reviewDB/auth.tsx b/src/plugins/reviewDB/auth.tsx
index e25119e51..7cf783f09 100644
--- a/src/plugins/reviewDB/auth.tsx
+++ b/src/plugins/reviewDB/auth.tsx
@@ -6,8 +6,7 @@
 
 import * as DataStore from "@api/DataStore";
 import { Logger } from "@utils/Logger";
-import { openModal } from "@utils/modal";
-import { OAuth2AuthorizeModal, showToast, Toasts, UserStore } from "@webpack/common";
+import { OAuth2AuthorizeModal, openModal, showToast, Toasts, UserStore } from "@webpack/common";
 
 import { ReviewDBAuth } from "./entities";
 
diff --git a/src/plugins/reviewDB/components/BlockedUserModal.tsx b/src/plugins/reviewDB/components/BlockedUserModal.tsx
index 58bcd714a..45f6adc29 100644
--- a/src/plugins/reviewDB/components/BlockedUserModal.tsx
+++ b/src/plugins/reviewDB/components/BlockedUserModal.tsx
@@ -10,10 +10,9 @@ import { ReviewDBUser } from "@plugins/reviewDB/entities";
 import { fetchBlocks, unblockUser } from "@plugins/reviewDB/reviewDbApi";
 import { cl } from "@plugins/reviewDB/utils";
 import { Logger } from "@utils/Logger";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { t } from "@utils/translation";
-import { Forms, Tooltip, useState } from "@webpack/common";
+import { Modal, openModal, Tooltip, useState } from "@webpack/common";
 
 function UnblockButton(props: { onClick?(): void; }) {
     return (
@@ -57,7 +56,7 @@ function BlockedUser({ user, isBusy, setIsBusy }: { user: ReviewDBUser; isBusy:
     );
 }
 
-function Modal() {
+function BlockedUsersList() {
     const [isBusy, setIsBusy] = useState(false);
     const [blocks, error, pending] = useAwaiter(fetchBlocks, {
         onError: e => new Logger("ReviewDB").error("Failed to fetch blocks", e),
@@ -67,7 +66,7 @@ function Modal() {
     if (pending)
         return null;
     if (error)
-        return <Paragraph>{t("reviewDB.failedToFetchBlocks", { error: String(error) })}</Paragraph>;
+        return <Paragraph>{t("vencord.reviewDB.failedToFetchBlocks", { error: String(error) })}</Paragraph>;
     if (!blocks.length)
         return <Paragraph>{t("vencord.reviewDB.noBlockedUsers")}</Paragraph>;
 
@@ -87,14 +86,13 @@ function Modal() {
 
 export function openBlockModal() {
     openModal(modalProps => (
-        <ModalRoot {...modalProps}>
-            <ModalHeader className={cl("block-modal-header")}>
-                <Forms.FormTitle style={{ margin: 0 }}>{t("vencord.reviewDB.blockedUsers")}</Forms.FormTitle>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent className={cl("block-modal")}>
-                {Auth.token ? <Modal /> : <Paragraph>{t("vencord.reviewDB.notLoggedIn")}</Paragraph>}
-            </ModalContent>
-        </ModalRoot>
+        <Modal
+            {...modalProps}
+            title={t("vencord.reviewDB.blockedUsers")}
+        >
+            <div className={cl("block-modal")}>
+                {Auth.token ? <BlockedUsersList /> : <Paragraph>{t("vencord.reviewDB.notLoggedIn")}</Paragraph>}
+            </div>
+        </Modal>
     ));
 }
diff --git a/src/plugins/reviewDB/components/ReviewComponent.tsx b/src/plugins/reviewDB/components/ReviewComponent.tsx
index 50de79078..05c25638a 100644
--- a/src/plugins/reviewDB/components/ReviewComponent.tsx
+++ b/src/plugins/reviewDB/components/ReviewComponent.tsx
@@ -13,7 +13,7 @@ import { openUserProfile } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { t } from "@utils/translation";
 import { findCssClassesLazy } from "@webpack";
-import { Alerts, IconUtils, Parser, Timestamp, useState } from "@webpack/common";
+import { ConfirmModal,IconUtils, openModal as openVencordModal, Parser, Timestamp, useState } from "@webpack/common";
 
 import { openBlockModal } from "./BlockedUserModal";
 import { BlockButton, DeleteButton, ReportButton } from "./MessageButton";
@@ -35,40 +35,45 @@ export default function ReviewComponent({ review, refetch, profileId }: { review
     }
 
     function delReview() {
-        Alerts.show({
-            title: t("vencord.reviewDB.confirm.title"),
-            body: t("vencord.reviewDB.confirm.deleteBody"),
-            confirmText: t("vencord.reviewDB.delete"),
-            cancelText: t("vencord.reviewDB.cancel"),
-            onConfirm: async () => {
-                if (!(await getToken())) {
-                    return showToast(t("vencord.reviewDB.mustLogin"));
-                } else {
-                    deleteReview(review.id).then(res => {
-                        if (res) {
-                            refetch();
-                        }
-                    });
-                }
-            }
-        });
+        openVencordModal(props => (
+            <ConfirmModal
+                {...props}
+                title={t("vencord.reviewDB.areYouSure")}
+                subtitle={t("vencord.reviewDB.confirmDelete")}
+                confirmText={t("vencord.reviewDB.delete")}
+                cancelText={t("vencord.reviewDB.nevermind")}
+                onConfirm={async () => {
+                    if (!(await getToken())) {
+                        return showToast(t("vencord.reviewDB.mustBeLoggedInDelete"));
+                    } else {
+                        deleteReview(review.id).then(res => {
+                            if (res) {
+                                refetch();
+                            }
+                        });
+                    }
+                }}
+            />
+        ));
     }
 
     function reportRev() {
-        Alerts.show({
-            title: t("vencord.reviewDB.confirm.title"),
-            body: t("vencord.reviewDB.confirm.reportBody"),
-            confirmText: t("vencord.reviewDB.report"),
-            cancelText: t("vencord.reviewDB.cancel"),
-            // confirmColor: "red", this just adds a class name and breaks the submit button guh
-            onConfirm: async () => {
-                if (!(await getToken())) {
-                    return showToast(t("vencord.reviewDB.mustLogin"));
-                } else {
-                    reportReview(review.id);
-                }
-            }
-        });
+        openVencordModal(props => (
+            <ConfirmModal
+                {...props}
+                title={t("vencord.reviewDB.areYouSure")}
+                subtitle={t("vencord.reviewDB.confirmReport")}
+                confirmText={t("vencord.reviewDB.report")}
+                cancelText={t("vencord.reviewDB.nevermind")}
+                onConfirm={async () => {
+                    if (!(await getToken())) {
+                        return showToast(t("vencord.reviewDB.mustBeLoggedInReport"));
+                    } else {
+                        reportReview(review.id);
+                    }
+                }}
+            />
+        ));
     }
 
     const isAuthorBlocked = Auth?.user?.blockedUsers?.includes(review.sender.discordID) ?? false;
@@ -77,20 +82,22 @@ export default function ReviewComponent({ review, refetch, profileId }: { review
         if (isAuthorBlocked)
             return unblockUser(review.sender.discordID);
 
-        Alerts.show({
-            title: t("vencord.reviewDB.confirm.title"),
-            body: t("vencord.reviewDB.confirm.blockBody"),
-            confirmText: t("vencord.reviewDB.block"),
-            cancelText: t("vencord.reviewDB.cancel"),
-            // confirmColor: "red", this just adds a class name and breaks the submit button guh
-            onConfirm: async () => {
-                if (!(await getToken())) {
-                    return showToast(t("vencord.reviewDB.mustLogin"));
-                } else {
-                    blockUser(review.sender.discordID);
-                }
-            }
-        });
+        openVencordModal(props => (
+            <ConfirmModal
+                {...props}
+                title={t("vencord.reviewDB.areYouSure")}
+                subtitle={t("vencord.reviewDB.confirmBlock")}
+                confirmText={t("vencord.reviewDB.block")}
+                cancelText={t("vencord.reviewDB.nevermind")}
+                onConfirm={async () => {
+                    if (!(await getToken())) {
+                        return showToast(t("vencord.reviewDB.mustBeLoggedInBlock"));
+                    } else {
+                        blockUser(review.sender.discordID);
+                    }
+                }}
+            />
+        ));
     }
 
     return (
diff --git a/src/plugins/reviewDB/components/ReviewModal.tsx b/src/plugins/reviewDB/components/ReviewModal.tsx
index 89fc0740f..4242c95c3 100644
--- a/src/plugins/reviewDB/components/ReviewModal.tsx
+++ b/src/plugins/reviewDB/components/ReviewModal.tsx
@@ -17,16 +17,14 @@
 */
 
 import { BaseText } from "@components/BaseText";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Auth } from "@plugins/reviewDB/auth";
 import { ReviewType } from "@plugins/reviewDB/entities";
 import { REVIEWS_PER_PAGE, UserReviewsData } from "@plugins/reviewDB/reviewDbApi";
 import { cl } from "@plugins/reviewDB/utils";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModalLazy } from "@utils/modal";
 import { useForceUpdater } from "@utils/react";
 import * as t from "@vencord/discord-types";
 import { DefaultExtractAndLoadChunksRegex, extractAndLoadChunksLazy, findComponentByCodeLazy } from "@webpack";
-import { useRef, useState } from "@webpack/common";
+import { Modal, openModalLazy, useRef, useState } from "@webpack/common";
 import { ComponentProps } from "react";
 
 import ReviewComponent from "./ReviewComponent";
@@ -36,7 +34,7 @@ export const Paginator = findComponentByCodeLazy<ComponentProps<t.Paginator>>('r
 // This matches a massive module with ~230k chars so we need an anchor before to prevent REDOS
 export const requirePaginator = extractAndLoadChunksLazy(['name:"SearchResults"'], new RegExp(`name:"StageChannelCall",renderLoader:.+?(?:${DefaultExtractAndLoadChunksRegex.source}).{0,30}?name:"SearchResults"`));
 
-function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: any; modalKey: string, discordId: string; name: string; type: ReviewType; }) {
+function ReviewsModal({ modalProps, modalKey, discordId, name, type }: { modalProps: t.RenderModalProps; modalKey: string, discordId: string; name: string; type: ReviewType; }) {
     const [data, setData] = useState<UserReviewsData>();
     const [signal, refetch] = useForceUpdater(true);
     const [page, setPage] = useState(1);
@@ -47,32 +45,17 @@ function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: an
     const ownReview = data?.reviews.find(r => r.sender.discordID === Auth.user?.discordID);
 
     return (
-        <ErrorBoundary>
-            <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-                <ModalHeader>
-                    <BaseText size="lg" weight="semibold" className={cl("modal-header")}>
-                        {name}'s Reviews
-                        {!!reviewCount && <span> ({reviewCount} Reviews)</span>}
-                    </BaseText>
-                    <ModalCloseButton onClick={modalProps.onClose} />
-                </ModalHeader>
-
-                <ModalContent scrollerRef={ref}>
-                    <div className={cl("modal-reviews")}>
-                        <ReviewsView
-                            discordId={discordId}
-                            name={name}
-                            page={page}
-                            refetchSignal={signal}
-                            onFetchReviews={setData}
-                            scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
-                            hideOwnReview
-                            type={type}
-                        />
-                    </div>
-                </ModalContent>
-
-                <ModalFooter className={cl("modal-footer")}>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title={
+                <BaseText size="lg" weight="semibold" className={cl("modal-header")}>
+                    {name}'s Reviews
+                    {!!reviewCount && <span> ({reviewCount} Reviews)</span>}
+                </BaseText>
+            }
+            preview={
+                <div className={cl("modal-footer")}>
                     <div className={cl("modal-footer-wrapper")}>
                         {ownReview && (
                             <ReviewComponent
@@ -99,9 +82,23 @@ function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: an
                             />
                         )}
                     </div>
-                </ModalFooter>
-            </ModalRoot>
-        </ErrorBoundary>
+                </div>
+            }
+            scrollerRef={ref}
+        >
+            <div className={cl("modal-reviews")}>
+                <ReviewsView
+                    discordId={discordId}
+                    name={name}
+                    page={page}
+                    refetchSignal={signal}
+                    onFetchReviews={setData}
+                    scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
+                    hideOwnReview
+                    type={type}
+                />
+            </div>
+        </Modal>
     );
 }
 
@@ -111,12 +108,13 @@ export function openReviewsModal(discordId: string, name: string, type: ReviewTy
     openModalLazy(async () => {
         await requirePaginator();
         return props => (
-            <Modal
+            <ReviewsModal
                 modalKey={modalKey}
                 modalProps={props}
                 discordId={discordId}
                 name={name}
-                type={type} />
+                type={type}
+            />
         );
     }, { modalKey });
 }
diff --git a/src/plugins/reviewDB/index.tsx b/src/plugins/reviewDB/index.tsx
index cbc5faacf..ccd1956da 100644
--- a/src/plugins/reviewDB/index.tsx
+++ b/src/plugins/reviewDB/index.tsx
@@ -17,7 +17,7 @@ import { t } from "@utils/translation";
 import definePlugin from "@utils/types";
 import { Guild, User } from "@vencord/discord-types";
 import { findCssClassesLazy } from "@webpack";
-import { Alerts, Clickable, IconUtils, Menu, Parser } from "@webpack/common";
+import { Clickable, ConfirmModal, IconUtils, Menu, openModal, Parser } from "@webpack/common";
 
 import { Auth, initAuth, updateAuth } from "./auth";
 import { openReviewsModal } from "./components/ReviewModal";
@@ -96,8 +96,9 @@ export default definePlugin({
                 }
             }
 
-            if (user.notification) {
-                const props = user.notification.type === NotificationType.Ban ? {
+            const { notification } = user;
+            if (notification) {
+                const props = notification.type === NotificationType.Ban ? {
                     cancelText: t("vencord.reviewDB.appeal"),
                     confirmText: t("vencord.reviewDB.ok"),
                     onCancel: async () =>
@@ -110,78 +111,86 @@ export default definePlugin({
                         )
                 } : {};
 
-                Alerts.show({
-                    title: user.notification.title,
-                    body: (
-                        Parser.parse(
-                            user.notification.content,
+                openModal(modalProps => (
+                    <ConfirmModal
+                        {...modalProps}
+                        title={notification.title}
+                        confirmText={props.confirmText ?? t("vencord.reviewDB.ok")}
+                        cancelText={props.cancelText}
+                        variant="primary"
+                        onCancel={props.onCancel}
+                    >
+                        {Parser.parse(
+                            notification.content,
                             false
-                        )
-                    ),
-                    ...props
-                });
+                        )}
+                    </ConfirmModal>
+                ));
 
-                readNotification(user.notification.id);
+                readNotification(notification.id);
             }
         }, 4000);
     },
 
-    renderProfileCollection: ({ user, isSideBar = false }: { user: User; isSideBar?: boolean; }) => {
-        const [reviewData] = useAwaiter(() => getReviews(user.id, { limit: 4 }), { deps: [user.id], fallbackValue: null });
+    renderProfileCollection: {
+        priority: 0,
+        render: ({ user, isSideBar = false }: { user: User; isSideBar?: boolean; }) => {
+            const [reviewData] = useAwaiter(() => getReviews(user.id, { limit: 4 }), { deps: [user.id], fallbackValue: null });
 
-        // Discord are masters at using a crap ton of html elements and css classes to create a simple ui that could have
-        // been made with less than half of the number of elements, so we have to do this insanity to replicate their ui
-        const reviewsSection = (
-            <section className={ProfileCardClasses.container}>
-                <ul className={ProfileCardClasses.cardsList} tabIndex={-1}>
-                    <li className={ProfileCardClasses.firstCardContainer}>
-                        <Clickable
-                            className={classes(ProfileCardContainerClasses.breadcrumb, reviewData?.hasOptedOut && cl("profile-popout-disabled"))}
-                            onClick={() => !reviewData?.hasOptedOut && openReviewsModal(user.id, user.username, ReviewType.User)}
-                        >
-                            <div className={classes(ProfileCardOverlayClasses.overlay, ProfileCardContainerClasses.innerContainer, ProfileCardClasses.card)}>
-                                <Paragraph size={isSideBar ? "sm" : "xs"} weight="medium">{t("vencord.reviewDB.userReviews")}</Paragraph>
-                                {!!reviewData?.reviewCount
-                                    ? (
-                                        <div className={ProfileCardContainerClasses.icons}>
-                                            {reviewData.reviews
-                                                .filter(review => review.id !== 0)
-                                                .slice(0, 4)
-                                                .reverse()
-                                                .map((review, idx) => {
-                                                    const showCount = idx === 3 && reviewData.reviewCount > 4;
+            // Discord are masters at using a crap ton of html elements and css classes to create a simple ui that could have
+            // been made with less than half of the number of elements, so we have to do this insanity to replicate their ui
+            const reviewsSection = (
+                <section className={ProfileCardClasses.container}>
+                    <ul className={ProfileCardClasses.cardsList} tabIndex={-1}>
+                        <li className={ProfileCardClasses.firstCardContainer}>
+                            <Clickable
+                                className={classes(ProfileCardContainerClasses.breadcrumb, reviewData?.hasOptedOut && cl("profile-popout-disabled"))}
+                                onClick={() => !reviewData?.hasOptedOut && openReviewsModal(user.id, user.username, ReviewType.User)}
+                            >
+                                <div className={classes(ProfileCardOverlayClasses.overlay, ProfileCardContainerClasses.innerContainer, ProfileCardClasses.card)}>
+                                    <Paragraph size={isSideBar ? "sm" : "xs"} weight="medium">{t("vencord.reviewDB.userReviews")}</Paragraph>
+                                    {!!reviewData?.reviewCount
+                                        ? (
+                                            <div className={ProfileCardContainerClasses.icons}>
+                                                {reviewData.reviews
+                                                    .filter(review => review.id !== 0)
+                                                    .slice(0, 4)
+                                                    .reverse()
+                                                    .map((review, idx) => {
+                                                        const showCount = idx === 3 && reviewData.reviewCount > 4;
 
-                                                    return (
-                                                        <div className={ProfileCardContainerClasses.icon} key={review.id}>
-                                                            <img
-                                                                src={review.sender.profilePhoto}
-                                                                alt={review.sender.username}
-                                                                className={showCount ? ProfileCardContainerClasses.displayCount : undefined}
-                                                                onError={e => e.currentTarget.src = IconUtils.getDefaultAvatarURL(review.sender.discordID)}
-                                                            />
-                                                            {showCount && (
-                                                                <div className={ProfileCardContainerClasses.displayCountText}>
-                                                                    <Span className={ProfileCardContainerClasses.displayCountTextColor} size="xs" weight="medium" defaultColor={false}>
-                                                                        +{reviewData.reviewCount - 4}
-                                                                    </Span>
-                                                                </div>
-                                                            )}
-                                                        </div>
-                                                    );
-                                                })}
-                                        </div>
-                                    )
-                                    : <Paragraph size={isSideBar ? "sm" : "xs"}>{reviewData?.hasOptedOut ? "User opted out" : "No reviews yet"}</Paragraph>
-                                }
-                            </div>
-                        </Clickable>
-                    </li>
-                </ul>
-            </section>
-        );
+                                                        return (
+                                                            <div className={ProfileCardContainerClasses.icon} key={review.id}>
+                                                                <img
+                                                                    src={review.sender.profilePhoto}
+                                                                    alt={review.sender.username}
+                                                                    className={showCount ? ProfileCardContainerClasses.displayCount : undefined}
+                                                                    onError={e => e.currentTarget.src = IconUtils.getDefaultAvatarURL(review.sender.discordID)}
+                                                                />
+                                                                {showCount && (
+                                                                    <div className={ProfileCardContainerClasses.displayCountText}>
+                                                                        <Span className={ProfileCardContainerClasses.displayCountTextColor} size="xs" weight="medium" defaultColor={false}>
+                                                                            +{reviewData.reviewCount - 4}
+                                                                        </Span>
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        );
+                                                    })}
+                                            </div>
+                                        )
+                                        : <Paragraph size={isSideBar ? "sm" : "xs"}>{reviewData?.hasOptedOut ? t("vencord.reviewDB.userOptedOut") : t("vencord.reviewDB.noReviewsYet")}</Paragraph>
+                                    }
+                                </div>
+                            </Clickable>
+                        </li>
+                    </ul>
+                </section>
+            );
 
-        return isSideBar
-            ? <div className={DMSideBarClasses.widgetPreviews}>{reviewsSection}</div>
-            : reviewsSection;
-    }
+            return isSideBar
+                ? <div className={DMSideBarClasses.widgetPreviews}>{reviewsSection}</div>
+                : reviewsSection;
+        },
+    },
 });
diff --git a/src/plugins/reviewDB/style.css b/src/plugins/reviewDB/style.css
index a15bb2320..50e1f0e6c 100644
--- a/src/plugins/reviewDB/style.css
+++ b/src/plugins/reviewDB/style.css
@@ -14,11 +14,6 @@
     box-sizing: border-box;
 }
 
-.vc-rdb-modal-footer-wrapper {
-    width: 100%;
-    margin: 6px 16px;
-}
-
 .vc-rdb-placeholder {
     margin-bottom: 4px;
     font-weight: bold;
@@ -41,14 +36,7 @@
 
 .vc-rdb-modal-footer [class*="pageControlContainer"] {
     margin-top: 0;
-}
-
-.vc-rdb-modal-header {
-    flex-grow: 1;
-}
-
-.vc-rdb-modal-reviews {
-    margin-top: 16px;
+    white-space: nowrap;
 }
 
 .vc-rdb-review {
@@ -78,14 +66,7 @@
     cursor: pointer;
 }
 
-.vc-rdb-block-modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
 .vc-rdb-block-modal {
-    padding: 1em;
     display: grid;
     gap: 0.75em;
 }
diff --git a/src/plugins/roleColorEverywhere/index.tsx b/src/plugins/roleColorEverywhere/index.tsx
index efcfe6770..651985f67 100644
--- a/src/plugins/roleColorEverywhere/index.tsx
+++ b/src/plugins/roleColorEverywhere/index.tsx
@@ -108,8 +108,8 @@ export default definePlugin({
             find: 'tutorialId:"whos-online',
             replacement: [
                 {
-                    match: /(#{intl::CHANNEL_MEMBERS_A11Y_LABEL}.+}\):null,).{0,100}?— ",\i\]\}\)\]/,
-                    replace: (_, rest) => `${rest}$self.RoleGroupColor(arguments[0])]`
+                    match: /(#{intl::CHANNEL_MEMBERS_A11Y_LABEL}.+}\):null,).{0,100}?(?:—|\\u2014) ",\i\]\}\)\]/,
+                    replace: "$1$self.RoleGroupColor(arguments[0])]"
                 },
             ],
             predicate: () => settings.store.memberList
@@ -118,7 +118,7 @@ export default definePlugin({
             find: "#{intl::THREAD_BROWSER_PRIVATE}",
             replacement: [
                 {
-                    match: /children:\[\i," — ",\i\]/,
+                    match: /children:\[\i," (?:—|\\u2014) ",\i\]/,
                     replace: "children:[$self.RoleGroupColor(arguments[0])]"
                 },
             ],
diff --git a/src/plugins/sendTimestamps/index.tsx b/src/plugins/sendTimestamps/index.tsx
index b831acbcf..44b3814d3 100644
--- a/src/plugins/sendTimestamps/index.tsx
+++ b/src/plugins/sendTimestamps/index.tsx
@@ -20,16 +20,16 @@ import "./styles.css";
 
 import { ChatBarButton, ChatBarButtonFactory } from "@api/ChatButtons";
 import { definePluginSettings } from "@api/Settings";
-import { Heading, HeadingPrimary } from "@components/Heading";
+import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { getTheme, insertTextIntoChatInputBox, Theme } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { IconComponent, OptionType } from "@utils/types";
-import { Button, Parser, Select, useMemo, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, openModal, Parser, Select, useMemo, useState } from "@webpack/common";
 
 const settings = definePluginSettings({
     replaceMessageContents: {
@@ -56,7 +56,7 @@ type Format = typeof Formats[number];
 
 const cl = classNameFactory("vc-st-");
 
-function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): void; }) {
+function PickerModal(props: RenderModalProps) {
     const [value, setValue] = useState<string>();
     const [format, setFormat] = useState<Format>("");
     const time = Math.round((new Date(value!).getTime() || Date.now()) / 1000);
@@ -69,62 +69,54 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi
     }, [time, format]);
 
     return (
-        <ModalRoot {...rootProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <HeadingPrimary className={cl("modal-title")}>
-                    {t("vencord.sendTimestamps.timestampPicker")}
-                </HeadingPrimary>
+        <Modal
+            {...props}
+            title={t("vencord.sendTimestamps.timestampPicker")}
+            actions={[{
+                text: t("vencord.sendTimestamps.insert"),
+                variant: "primary",
+                onClick() {
+                    insertTextIntoChatInputBox(formatted + " ");
+                    props.onClose();
+                }
+            }]}
+        >
+            <input
+                className={cl("date-picker")}
+                type="datetime-local"
+                value={value}
+                onChange={e => setValue(e.currentTarget.value)}
+                style={{
+                    colorScheme: getTheme() === Theme.Light ? "light" : "dark",
+                }}
+            />
 
-                <ModalCloseButton onClick={close} className={cl("modal-close-button")} />
-            </ModalHeader>
-
-            <ModalContent className={cl("modal-content")}>
-                <input
-                    className={cl("date-picker")}
-                    type="datetime-local"
-                    value={value}
-                    onChange={e => setValue(e.currentTarget.value)}
-                    style={{
-                        colorScheme: getTheme() === Theme.Light ? "light" : "dark",
-                    }}
+            <Heading tag="h5">{t("vencord.sendTimestamps.timestampFormat")}</Heading>
+            <div className={cl("format-select")}>
+                <Select
+                    options={
+                        Formats.map(m => ({
+                            label: m,
+                            value: m
+                        }))
+                    }
+                    isSelected={v => v === format}
+                    select={v => setFormat(v)}
+                    serialize={v => v}
+                    renderOptionLabel={o => (
+                        <div className={cl("format-label")}>
+                            {Parser.parse(formatTimestamp(time, o.value))}
+                        </div>
+                    )}
+                    renderOptionValue={() => rendered}
                 />
+            </div>
 
-                <Heading>{t("vencord.sendTimestamps.timestampFormat")}</Heading>
-                <div className={cl("format-select")}>
-                    <Select
-                        options={
-                            Formats.map(m => ({
-                                label: m,
-                                value: m
-                            }))
-                        }
-                        isSelected={v => v === format}
-                        select={v => setFormat(v)}
-                        serialize={v => v}
-                        renderOptionLabel={o => (
-                            <div className={cl("format-label")}>
-                                {Parser.parse(formatTimestamp(time, o.value))}
-                            </div>
-                        )}
-                        renderOptionValue={() => rendered}
-                    />
-                </div>
-
-                <Heading className={Margins.bottom8}>{t("vencord.sendTimestamps.preview")}</Heading>
-                <Paragraph className={cl("preview-text")}>
-                    {rendered} ({formatted})
-                </Paragraph>
-            </ModalContent>
-
-            <ModalFooter>
-                <Button
-                    onClick={() => {
-                        insertTextIntoChatInputBox(formatted + " ");
-                        close();
-                    }}
-                >{t("vencord.sendTimestamps.insert")}</Button>
-            </ModalFooter>
-        </ModalRoot>
+            <Heading tag="h5" className={Margins.bottom8}>{t("vencord.sendTimestamps.preview")}</Heading>
+            <Paragraph className={cl("preview-text")}>
+                {rendered} ({formatted})
+            </Paragraph>
+        </Modal>
     );
 }
 
@@ -153,14 +145,7 @@ const SendTimestampButton: ChatBarButtonFactory = ({ isAnyChat }) => {
     return (
         <ChatBarButton
             tooltip={t("vencord.sendTimestamps.insertTimestamp")}
-            onClick={() => {
-                const key = openModal(props => (
-                    <PickerModal
-                        rootProps={props}
-                        close={() => closeModal(key)}
-                    />
-                ));
-            }}
+            onClick={() => openModal(props => <PickerModal {...props} />)}
             buttonProps={{ "aria-haspopup": "dialog" }}
         >
             <SendTimestampIcon />
diff --git a/src/plugins/sendTimestamps/styles.css b/src/plugins/sendTimestamps/styles.css
index 0cdc02983..ff5ecb9ca 100644
--- a/src/plugins/sendTimestamps/styles.css
+++ b/src/plugins/sendTimestamps/styles.css
@@ -3,7 +3,7 @@
     color: var(--text-default);
     width: 95%;
     padding: 8px 8px 8px 12px;
-    margin: 1em 0;
+    margin-bottom: 1em;
     outline: none;
     border: 1px solid var(--input-background-default);
     border-radius: 4px;
diff --git a/src/plugins/serverInfo/GuildInfoModal.tsx b/src/plugins/serverInfo/GuildInfoModal.tsx
index 4371e8eed..af7c027b2 100644
--- a/src/plugins/serverInfo/GuildInfoModal.tsx
+++ b/src/plugins/serverInfo/GuildInfoModal.tsx
@@ -7,16 +7,14 @@
 import "./styles.css";
 
 import { Heading } from "@components/Heading";
-import { Paragraph } from "@components/Paragraph";
 import { classNameFactory } from "@utils/css";
 import { getGuildAcronym, openImageModal, openUserProfile } from "@utils/discord";
 import { classes } from "@utils/misc";
-import { ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { t } from "@utils/translation";
-import { Guild, User } from "@vencord/discord-types";
+import { Guild, RenderModalProps, User } from "@vencord/discord-types";
 import { findComponentByCodeLazy, findCssClassesLazy } from "@webpack";
-import { FluxDispatcher, GuildChannelStore, GuildMemberStore, GuildRoleStore, GuildStore, IconUtils, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
+import { FluxDispatcher, Forms, GuildChannelStore, GuildMemberStore, GuildRoleStore, GuildStore, IconUtils, Modal, openModal, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
 
 import { settings } from ".";
 
@@ -26,11 +24,7 @@ const FriendRow = findComponentByCodeLazy("discriminatorClass:", ".isMobileOnlin
 const cl = classNameFactory("vc-gp-");
 
 export function openGuildInfoModal(guild: Guild) {
-    openModal(props =>
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <GuildInfoModal guild={guild} />
-        </ModalRoot>
-    );
+    openModal(props => <GuildInfoModal guild={guild} modalProps={props} />);
 }
 
 const enum Tabs {
@@ -61,7 +55,7 @@ function renderTimestamp(timestamp: number) {
     );
 }
 
-function GuildInfoModal({ guild }: GuildProps) {
+function GuildInfoModal({ guild, modalProps }: GuildProps & { modalProps: RenderModalProps; }) {
     const [friendCount, setFriendCount] = useState<number>();
     const [blockedCount, setBlockedCount] = useState<number>();
     const [ignoredCount, setIgnoredCount] = useState<number>();
@@ -85,7 +79,32 @@ function GuildInfoModal({ guild }: GuildProps) {
     });
 
     return (
-        <div className={cl("root")}>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title={
+                <div className={cl("header")}>
+                    {iconUrl
+                        ? <img
+                            className={cl("icon")}
+                            src={iconUrl}
+                            alt=""
+                            onClick={() => openImageModal({
+                                url: iconUrl,
+                                height: 512,
+                                width: 512,
+                            })}
+                        />
+                        : <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{getGuildAcronym(guild)}</div>
+                    }
+
+                    <div className={cl("name-and-description")}>
+                        <Forms.FormTitle tag="h5" className={cl("name")}>{guild.name}</Forms.FormTitle>
+                        {guild.description && <Forms.FormText>{guild.description}</Forms.FormText>}
+                    </div>
+                </div>
+            }
+        >
             {bannerUrl && currentTab === Tabs.ServerInfo && (
                 <img
                     className={cl("banner")}
@@ -98,27 +117,6 @@ function GuildInfoModal({ guild }: GuildProps) {
                 />
             )}
 
-            <div className={cl("header")}>
-                {iconUrl
-                    ? <img
-                        className={cl("icon")}
-                        src={iconUrl}
-                        alt=""
-                        onClick={() => openImageModal({
-                            url: iconUrl,
-                            height: 512,
-                            width: 512,
-                        })}
-                    />
-                    : <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{getGuildAcronym(guild)}</div>
-                }
-
-                <div className={cl("name-and-description")}>
-                    <Heading className={cl("name")}>{guild.name}</Heading>
-                    {guild.description && <Paragraph>{guild.description}</Paragraph>}
-                </div>
-            </div>
-
             <TabBar
                 type="top"
                 look="brand"
@@ -132,7 +130,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 >
                     <div style={{ textAlign: "center" }}>
                         <div>
-                            Server Info
+                            {t("vencord.serverInfo.ui.serverInfo")}
                         </div>
                     </div>
                 </TabBar.Item>
@@ -142,7 +140,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 >
                     <div style={{ textAlign: "center" }}>
                         <div>
-                            Friends
+                            {t("vencord.serverInfo.ui.friends")}
                         </div>
                         {friendCount !== undefined ? ` (${friendCount})` : ""}
                     </div>
@@ -153,7 +151,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 >
                     <div style={{ textAlign: "center" }}>
                         <div>
-                            Mutual Users
+                            {t("vencord.serverInfo.ui.mutualUsers")}
                         </div>{mutualMembersCount !== undefined ? ` (${mutualMembersCount})` : ""}
                     </div>
                 </TabBar.Item>
@@ -163,7 +161,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 >
                     <div style={{ textAlign: "center" }}>
                         <div>
-                            Blocked Users
+                            {t("vencord.serverInfo.ui.blockedUsers")}
                         </div>
                         {blockedCount !== undefined ? ` (${blockedCount})` : ""}
                     </div>
@@ -174,7 +172,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 >
                     <div style={{ textAlign: "center" }}>
                         <div>
-                            Ignored Users
+                            {t("vencord.serverInfo.ui.ignoredUsers")}
                         </div>
                         {ignoredCount !== undefined ? `(${ignoredCount})` : ""}
 
@@ -189,7 +187,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                 {currentTab === Tabs.BlockedUsers && <BlockedUsersTab guild={guild} setCount={setBlockedCount} />}
                 {currentTab === Tabs.IgnoredUsers && <IgnoredUserTab guild={guild} setCount={setIgnoredCount} />}
             </div>
-        </div>
+        </Modal>
     );
 }
 
@@ -229,15 +227,15 @@ function ServerInfoTab({ guild }: GuildProps) {
     });
 
     const Fields = {
-        "Server Owner": owner ? Owner(guild.id, owner) : t("vencord.loading"),
-        "Created At": renderTimestamp(SnowflakeUtils.extractTimestamp(guild.id)),
-        "Joined At": guild.joinedAt ? renderTimestamp(guild.joinedAt.getTime()) : "-", // Not available in lurked guild
-        "Vanity Link": guild.vanityURLCode ? (<a>{`discord.gg/${guild.vanityURLCode}`}</a>) : "-", // Making the anchor href valid would cause Discord to reload
-        "Preferred Locale": guild.preferredLocale || "-",
-        "Verification Level": ["None", "Low", "Medium", "High", "Highest"][guild.verificationLevel] || "?",
-        "Server Boosts": `${guild.premiumSubscriberCount ?? 0} (Level ${guild.premiumTier ?? 0})`,
-        "Channels": GuildChannelStore.getChannels(guild.id)?.count - 1 || "?", // - null category
-        "Roles": GuildRoleStore.getSortedRoles(guild.id).length - 1, // - @everyone
+        [t("vencord.serverInfo.ui.serverOwner")]: owner ? Owner(guild.id, owner) : t("vencord.loading"),
+        [t("vencord.serverInfo.ui.createdAt")]: renderTimestamp(SnowflakeUtils.extractTimestamp(guild.id)),
+        [t("vencord.serverInfo.ui.joinedAt")]: guild.joinedAt ? renderTimestamp(guild.joinedAt.getTime()) : "-", // Not available in lurked guild
+        [t("vencord.serverInfo.ui.vanityLink")]: guild.vanityURLCode ? (<a>{`discord.gg/${guild.vanityURLCode}`}</a>) : "-", // Making the anchor href valid would cause Discord to reload
+        [t("vencord.serverInfo.ui.preferredLocale")]: guild.preferredLocale || "-",
+        [t("vencord.serverInfo.ui.verificationLevel")]: ["None", "Low", "Medium", "High", "Highest"][guild.verificationLevel] || "?",
+        [t("vencord.serverInfo.ui.serverBoosts")]: `${guild.premiumSubscriberCount ?? 0} (Level ${guild.premiumTier ?? 0})`,
+        [t("vencord.serverInfo.ui.channels")]: GuildChannelStore.getChannels(guild.id)?.count - 1 || "?", // - null category
+        [t("vencord.serverInfo.ui.roles")]: GuildRoleStore.getSortedRoles(guild.id).length - 1, // - @everyone
     };
 
     return (
diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css
index ea2bf7422..cc066b7c2 100644
--- a/src/plugins/serverInfo/styles.css
+++ b/src/plugins/serverInfo/styles.css
@@ -1,13 +1,10 @@
-.vc-gp-root {
-    height: 100%;
-    user-select: text;
-}
-
 .vc-gp-banner {
     cursor: pointer;
     aspect-ratio: auto 240 / 135;
     height: 334px;
     width: 100%;
+    padding-inline: 0.5em;
+    box-sizing: border-box;
     object-fit: cover;
     overflow: clip;
     overflow-clip-margin: content-box;
@@ -88,7 +85,6 @@
 }
 
 .vc-gp-scroller {
-    width: 100%;
     max-height: 500px;
 }
 
@@ -167,3 +163,7 @@
 .vc-gp-scroller [class*="listRow"]:hover {
     background-color: var(--background-mod-subtle);
 }
+
+.vc-gp-scroller [class*="row"] {
+    margin: 1px 0;
+}
diff --git a/src/plugins/showMeYourName/index.tsx b/src/plugins/showMeYourName/index.tsx
index e1257717b..4e048ef48 100644
--- a/src/plugins/showMeYourName/index.tsx
+++ b/src/plugins/showMeYourName/index.tsx
@@ -10,18 +10,18 @@ import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/Co
 import { DataStore } from "@api/index";
 import { isPluginEnabled } from "@api/PluginManager";
 import { definePluginSettings } from "@api/Settings";
-import { Button, TextButton } from "@components/Button";
+import { TextButton } from "@components/Button";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Heading } from "@components/Heading";
 import ircColors from "@plugins/ircColors";
 import mentionAvatars from "@plugins/mentionAvatars";
 import { Devs, EquicordDevs } from "@utils/constants";
-import { classNameFactory, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/index";
+import { classNameFactory } from "@utils/index";
 import { t } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
-import { GuildMember, Message, User } from "@vencord/discord-types";
+import { GuildMember, Message, RenderModalProps, User } from "@vencord/discord-types";
 import { findByCodeLazy, findStoreLazy } from "@webpack";
-import { ChannelStore, GuildMemberStore, GuildStore, Menu, MessageStore, RelationshipStore, StreamerModeStore, TextInput, useEffect, useState } from "@webpack/common";
+import { ChannelStore, GuildMemberStore, GuildStore, Menu, MessageStore, Modal, openModal, RelationshipStore, StreamerModeStore, TextInput, useEffect, useState } from "@webpack/common";
 import { JSX } from "react";
 
 const SMYNC = classNameFactory();
@@ -843,49 +843,19 @@ function removeHoveringReactionPopout(id: string) {
     settings.store.triggerNameRerender = !settings.store.triggerNameRerender;
 }
 
-function CustomNicknameModal({ modalProps, user }: { modalProps: ModalProps; user: User; }) {
+function CustomNicknameModal({ modalProps, user }: { modalProps: RenderModalProps; user: User; }) {
     const [value, setValue] = useState(customNicknames[user.id] ?? "");
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <Heading tag="h1" style={{ flexGrow: 1, margin: 0 }}>
-                    {customNicknames[user.id] ? t("vencord.showMeYourName.changeNickname") : t("vencord.showMeYourName.addNickname")}
-                </Heading>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent>
-                <Heading tag="h3" style={{ marginBottom: 8, fontSize: "16px", fontWeight: "400", lineHeight: "1.25", color: "var(--text-subtle)" }}>
-                    {t("vencord.showMeYourName.modalDescription")}
-                </Heading>
-                <div style={{ paddingTop: "10px", flexGrow: 0 }}></div>
-                <Heading tag="h3" style={{ marginBottom: 8, fontSize: "14px", fontWeight: 600 }}>
-                    {t("vencord.showMeYourName.nicknameLabel")}
-                </Heading>
-                <TextInput
-                    value={value}
-                    maxLength={32}
-                    onChange={setValue}
-                    placeholder={user.globalName ?? user.username}
-                    style={{ width: "100%" }}
-                />
-                <TextButton
-                    className="smyn-reset-button"
-                    onClick={async () => {
-                        setValue("");
-                        delete customNicknames[user.id];
-                        await DataStore.set("SMYNCustomNicknames", customNicknames);
-                        settings.store.triggerNameRerender = !settings.store.triggerNameRerender;
-                    }}
-                >
-                    {t("vencord.showMeYourName.resetNickname")}
-                </TextButton>
-                <div style={{ paddingTop: "10px", flexGrow: 0 }}></div>
-            </ModalContent>
-            <ModalFooter className="smyn-modal-footer-container">
-                <Button
-                    variant="primary"
-                    onClick={async () => {
+        <Modal
+            {...modalProps}
+            size="sm"
+            title={customNicknames[user.id] ? t("vencord.showMeYourName.changeNickname") : t("vencord.showMeYourName.addNickname")}
+            actions={[
+                {
+                    text: t("vencord.showMeYourName.save"),
+                    variant: "primary",
+                    onClick: async () => {
                         const trimmed = value.trim().slice(0, 32).trim();
 
                         if (trimmed) {
@@ -897,19 +867,42 @@ function CustomNicknameModal({ modalProps, user }: { modalProps: ModalProps; use
                         await DataStore.set("SMYNCustomNicknames", customNicknames);
                         settings.store.triggerNameRerender = !settings.store.triggerNameRerender;
                         modalProps.onClose();
-                    }}
-                >
-                    {t("vencord.showMeYourName.save")}
-                </Button>
-                <Button
-                    variant="secondary"
-                    style={{ marginRight: "8px" }}
-                    onClick={modalProps.onClose}
-                >
-                    {t("vencord.showMeYourName.cancel")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    }
+                },
+                {
+                    text: t("vencord.showMeYourName.cancel"),
+                    variant: "secondary",
+                    onClick: modalProps.onClose
+                }
+            ]}
+        >
+            <Heading tag="h3" style={{ marginBottom: 8, fontSize: "16px", fontWeight: "400", lineHeight: "1.25", color: "var(--text-subtle)" }}>
+                {t("vencord.showMeYourName.modalDescription")}
+            </Heading>
+            <div style={{ paddingTop: "10px", flexGrow: 0 }}></div>
+            <Heading tag="h3" style={{ marginBottom: 8, fontSize: "14px", fontWeight: 600 }}>
+                {t("vencord.showMeYourName.nicknameLabel")}
+            </Heading>
+            <TextInput
+                value={value}
+                maxLength={32}
+                onChange={setValue}
+                placeholder={user.globalName ?? user.username}
+                style={{ width: "100%" }}
+            />
+            <TextButton
+                className="smyn-reset-button"
+                onClick={async () => {
+                    setValue("");
+                    delete customNicknames[user.id];
+                    await DataStore.set("SMYNCustomNicknames", customNicknames);
+                    settings.store.triggerNameRerender = !settings.store.triggerNameRerender;
+                }}
+            >
+                {t("vencord.showMeYourName.resetNickname")}
+            </TextButton>
+            <div style={{ paddingTop: "10px", flexGrow: 0 }}></div>
+        </Modal>
     );
 }
 
@@ -1140,8 +1133,8 @@ export default definePlugin({
             // Replace name in solo DM title bar and tooltip.
             find: "channel.isSystemDM(),",
             replacement: {
-                match: /(?<=}\);)(return.{0,500}?{text:)(\i,position:"bottom",children:.{0,40}?children:)(\i\?\?\i.\i.getName\(\i\))/,
-                replace: "const smynName=arguments[0].channel.recipients.length===1?$self.getTypingMemberListProfilesReactionsVoiceNameText({user:$self.UserStore.getUser(arguments[0].channel.recipients[0]),type:\"profilesPopout\"})??null:null;$1smynName??$2smynName??$3"
+                match: /(?<=length>0,)(\i=)(.{0,280}?"aria-label":)(\i.\i.getName\(\i\).{0,400}?text:)/,
+                replace: "smynName=arguments[0].channel.recipients.length===1?$self.getTypingMemberListProfilesReactionsVoiceNameText({user:$self.UserStore.getUser(arguments[0].channel.recipients[0]),type:\"profilesPopout\"})??null:null,$1smynName??$2smynName??$3smynName??"
             },
         },
         {
diff --git a/src/plugins/translate/TranslateIcon.tsx b/src/plugins/translate/TranslateIcon.tsx
index 3ebba315a..e3e363a39 100644
--- a/src/plugins/translate/TranslateIcon.tsx
+++ b/src/plugins/translate/TranslateIcon.tsx
@@ -17,12 +17,12 @@
 */
 
 import { ChatBarButton, ChatBarButtonFactory } from "@api/ChatButtons";
-import { Paragraph } from "@components/Paragraph";
 import { TooltipContainer } from "@components/TooltipContainer";
 import { classes } from "@utils/misc";
 import { t, Translate } from "@utils/translation";
 import { IconComponent } from "@utils/types";
-import { Alerts, useEffect, useState } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { ConfirmModal, openModal, useEffect, useState } from "@webpack/common";
 
 import { settings } from "./settings";
 import { openTranslateModal } from "./TranslateModal";
@@ -43,6 +43,31 @@ export const TranslateIcon: IconComponent = ({ height = 20, width = 20, classNam
 
 export let setShouldShowTranslateEnabledTooltip: undefined | ((show: boolean) => void);
 
+function AutoTranslateConfirmModal(props: RenderModalProps) {
+    const s = settings.use(["dismissedAutoTranslateAlert"]);
+
+    return (
+        <ConfirmModal
+            {...props}
+            title={t("vencord.translate.autoTranslateEnabled.title")}
+            subtitle={
+                <Translate i18nKey="vencord.translate.autoTranslateEnabled.body">
+                    You just enabled Auto Translate! Any message <b>will automatically be translated</b> before being sent.
+                </Translate>
+            }
+            confirmText={t("vencord.translate.disableAutoTranslate")}
+            onConfirm={() => settings.store.autoTranslate = false}
+            cancelText={t("vencord.translate.gotIt")}
+            variant="primary"
+            checkboxProps={{
+                label: t("vencord.translate.dontShowAgain"),
+                checked: s.dismissedAutoTranslateAlert === true,
+                onChange: checked => s.dismissedAutoTranslateAlert = checked,
+            }}
+        />
+    );
+}
+
 export const TranslateChatBarIcon: ChatBarButtonFactory = ({ isMainChat }) => {
     const { autoTranslate } = settings.use(["autoTranslate"]);
 
@@ -57,24 +82,8 @@ export const TranslateChatBarIcon: ChatBarButtonFactory = ({ isMainChat }) => {
     const toggle = () => {
         const newState = !autoTranslate;
         settings.store.autoTranslate = newState;
-        if (newState && settings.store.showAutoTranslateAlert !== false)
-            Alerts.show({
-                title: t("vencord.translate.autoTranslateEnabled.title"),
-                body: <>
-                    <Paragraph>
-                        <Translate i18nKey="vencord.translate.autoTranslateEnabled.body">
-                            You just enabled Auto Translate! Any message <b>will automatically be translated</b> before being sent.
-                        </Translate>
-                    </Paragraph>
-                </>,
-                confirmText: t("vencord.translate.disableAutoTranslate"),
-                cancelText: t("vencord.translate.gotIt"),
-                secondaryConfirmText: t("vencord.translate.dontShowAgain"),
-                onConfirmSecondary: () => settings.store.showAutoTranslateAlert = false,
-                onConfirm: () => settings.store.autoTranslate = false,
-                // troll
-                confirmColor: "vc-notification-log-danger-btn",
-            });
+        if (newState && !settings.store.dismissedAutoTranslateAlert)
+            openModal(props => <AutoTranslateConfirmModal {...props} />);
     };
 
     const button = (
diff --git a/src/plugins/translate/TranslateModal.tsx b/src/plugins/translate/TranslateModal.tsx
index 0f8a22d44..9a2364132 100644
--- a/src/plugins/translate/TranslateModal.tsx
+++ b/src/plugins/translate/TranslateModal.tsx
@@ -16,17 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BaseText } from "@components/BaseText";
 import { Divider } from "@components/Divider";
 import { FormSwitch } from "@components/FormSwitch";
 import { HeadingSecondary } from "@components/Heading";
 import { Margins } from "@utils/margins";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
-import { SearchableSelect, useMemo } from "@webpack/common";
+import { RenderModalProps } from "@vencord/discord-types";
+import { Modal, openModal, SearchableSelect, useMemo } from "@webpack/common";
 
 import { settings } from "./settings";
-import { cl, getLanguages } from "./utils";
+import { getLanguages } from "./utils";
 
 const LanguageSettingKeys = ["receivedInput", "receivedOutput", "sentInput", "sentOutput"] as const;
 
@@ -75,30 +74,24 @@ function AutoTranslateToggle() {
     );
 }
 
-export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) {
+export function TranslateModal({ rootProps }: { rootProps: RenderModalProps; }) {
     return (
-        <ModalRoot {...rootProps}>
-            <ModalHeader className={cl("modal-header")}>
-                <BaseText tag="h2" size="lg" weight="semibold" className={cl("modal-title")}>
-                    {t("vencord.translate.modalTitle")}
-                </BaseText>
-                <ModalCloseButton onClick={rootProps.onClose} />
-            </ModalHeader >
+        <Modal
+            {...rootProps}
+            title={t("vencord.translate.modalTitle")}
+        >
+            {LanguageSettingKeys.map(s => (
+                <LanguageSelect
+                    key={s}
+                    settingsKey={s}
+                    includeAuto={s.endsWith("Input")}
+                />
+            ))}
 
-            <ModalContent className={cl("modal-content")}>
-                {LanguageSettingKeys.map(s => (
-                    <LanguageSelect
-                        key={s}
-                        settingsKey={s}
-                        includeAuto={s.endsWith("Input")}
-                    />
-                ))}
+            <Divider className={Margins.bottom16} />
 
-                <Divider className={Margins.bottom16} />
-
-                <AutoTranslateToggle />
-            </ModalContent>
-        </ModalRoot >
+            <AutoTranslateToggle />
+        </Modal>
     );
 }
 
diff --git a/src/plugins/translate/settings.tsx b/src/plugins/translate/settings.tsx
index cbb39e696..426788f3e 100644
--- a/src/plugins/translate/settings.tsx
+++ b/src/plugins/translate/settings.tsx
@@ -95,7 +95,7 @@ export const settings = definePluginSettings({
         hidden() { return this.store.service !== "kagi"; }
     }
 }).withPrivateSettings<{
-    showAutoTranslateAlert: boolean;
+    dismissedAutoTranslateAlert?: boolean;
 }>();
 
 export function resetLanguageDefaults() {
diff --git a/src/plugins/translate/styles.css b/src/plugins/translate/styles.css
index 33a1fc851..28987068b 100644
--- a/src/plugins/translate/styles.css
+++ b/src/plugins/translate/styles.css
@@ -1,15 +1,3 @@
-.vc-trans-modal-content {
-    padding: 1em;
-}
-
-.vc-trans-modal-header {
-    place-content: center space-between;
-}
-
-.vc-trans-modal-title {
-    margin: 0;
-}
-
 .vc-trans-accessory {
     color: var(--text-muted);
     margin-top: 0.5em;
@@ -39,4 +27,4 @@
 
 .vc-trans-chat-button {
     scale: 1.085;
-}
+}
\ No newline at end of file
diff --git a/src/plugins/viewRaw/index.tsx b/src/plugins/viewRaw/index.tsx
index 794503689..b817406e4 100644
--- a/src/plugins/viewRaw/index.tsx
+++ b/src/plugins/viewRaw/index.tsx
@@ -18,20 +18,17 @@
 
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
 import { CodeBlock } from "@components/CodeBlock";
 import { Divider } from "@components/Divider";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
-import { Heading } from "@components/Heading";
 import { Devs } from "@utils/constants";
 import { copyWithToast, getCurrentGuild, getIntlMessage } from "@utils/discord";
+import { isTruthy } from "@utils/guards";
 import { Margins } from "@utils/margins";
-import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { t } from "@utils/translation";
 import definePlugin, { IconComponent, OptionType } from "@utils/types";
 import { Message } from "@vencord/discord-types";
-import { Button, ChannelStore, GuildRoleStore, Menu } from "@webpack/common";
+import { ChannelStore, Forms, GuildRoleStore, Menu, Modal, openModal } from "@webpack/common";
 
 const CopyIcon: IconComponent = ({ height = 20, width = 20, className }) => {
     return (
@@ -73,40 +70,36 @@ function cleanMessage(msg: Message) {
 }
 
 function openViewRawModal(json: string, type: string, msgContent?: string) {
-    const key = openModal(props => (
+    openModal(props => (
         <ErrorBoundary>
-            <ModalRoot {...props} size={ModalSize.LARGE}>
-                <ModalHeader>
-                    <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>{t("vencord.viewRaw.viewRaw")}</BaseText>
-                    <ModalCloseButton onClick={() => closeModal(key)} />
-                </ModalHeader>
-                <ModalContent>
-                    <div style={{ padding: "16px 0" }}>
-                        {!!msgContent && (
-                            <>
-                                <Heading>{t("vencord.viewRaw.content")}</Heading>
-                                <CodeBlock content={msgContent} lang="" />
-                                <Divider className={Margins.bottom20} />
-                            </>
-                        )}
+            <Modal
+                {...props}
+                title={t("vencord.viewRaw.viewRaw")}
+                size="xl"
+                actions={[
+                    {
+                        text: t("vencord.viewRaw.copyJson", { type }),
+                        variant: "primary",
+                        onClick: () => copyWithToast(json, t("vencord.viewRaw.dataCopied", { type }))
+                    },
+                    msgContent && {
+                        text: t("vencord.viewRaw.copyRawContent"),
+                        variant: "secondary",
+                        onClick: () => copyWithToast(msgContent, t("vencord.viewRaw.contentCopied"))
+                    }
+                ].filter(isTruthy)}
+            >
+                {!!msgContent && (
+                    <>
+                        <Forms.FormTitle tag="h5">{t("vencord.viewRaw.content")}</Forms.FormTitle>
+                        <CodeBlock content={msgContent} lang="" />
+                        <Divider className={Margins.bottom20} />
+                    </>
+                )}
 
-                        <Heading>{t("viewRaw.data", { type })}</Heading>
-                        <CodeBlock content={json} lang="json" />
-                    </div>
-                </ModalContent >
-                <ModalFooter>
-                    <Flex>
-                        <Button onClick={() => copyWithToast(json, t("viewRaw.dataCopied", { type }))}>
-                            {t("viewRaw.copyJson", { type })}
-                        </Button>
-                        {!!msgContent && (
-                            <Button onClick={() => copyWithToast(msgContent, t("vencord.viewRaw.contentCopied"))}>
-                                {t("vencord.viewRaw.copyRawContent")}
-                            </Button>
-                        )}
-                    </Flex>
-                </ModalFooter>
-            </ModalRoot >
+                <Forms.FormTitle tag="h5">{t("vencord.viewRaw.data", { type })}</Forms.FormTitle>
+                <CodeBlock content={json} lang="json" />
+            </Modal>
         </ErrorBoundary >
     ));
 }
@@ -128,7 +121,7 @@ const settings = definePluginSettings({
         ]
     },
     messageContextMenu: {
-        description: "Show in message context menu",
+        description: t("vencord.viewRaw.settings.messageContextMenu"),
         type: OptionType.BOOLEAN,
         default: false
     }
diff --git a/src/plugins/voiceMessages/index.tsx b/src/plugins/voiceMessages/index.tsx
index 0a9a28a8e..1a2834e4d 100644
--- a/src/plugins/voiceMessages/index.tsx
+++ b/src/plugins/voiceMessages/index.tsx
@@ -1,27 +1,14 @@
 /*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2023 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
 
 import "./styles.css";
 
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
 import { Card } from "@components/Card";
-import { Heading } from "@components/Heading";
 import { Microphone } from "@components/Icons";
 import { Link } from "@components/Link";
 import { Paragraph } from "@components/Paragraph";
@@ -29,13 +16,13 @@ import { lastState as silentMessageEnabled } from "@plugins/silentMessageToggle"
 import { Devs, EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { Margins } from "@utils/margins";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { t, Translate } from "@utils/translation";
 import definePlugin, { OptionType } from "@utils/types";
 import { chooseFile } from "@utils/web";
+import { RenderModalProps } from "@vencord/discord-types";
 import { CloudUploadPlatform } from "@vencord/discord-types/enums";
-import { Button, CloudUploader, Constants, FluxDispatcher, Forms, lodash, Menu, MessageActions, PendingReplyStore, PermissionsBits, PermissionStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, useEffect, useState } from "@webpack/common";
+import { Button, CloudUploader, Constants, FluxDispatcher, Forms, lodash, Menu, MessageActions, Modal, openModal, PendingReplyStore, PermissionsBits, PermissionStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, useEffect, useState } from "@webpack/common";
 import { ComponentType } from "react";
 
 import { VoiceRecorderDesktop } from "./components/DesktopRecorder";
@@ -65,6 +52,64 @@ export type VoiceRecorder = React.ComponentType<{
 
 export let VoiceMessage: ComponentType<VoiceMessageProps> = () => null;
 
+const VoiceRecorder = IS_DISCORD_DESKTOP ? VoiceRecorderDesktop : VoiceRecorderWeb;
+
+export const settings = definePluginSettings({
+    noiseSuppression: {
+        type: OptionType.BOOLEAN,
+        description: t("vencord.voiceMessages.noiseSuppression"),
+        default: true,
+    },
+    echoCancellation: {
+        type: OptionType.BOOLEAN,
+        description: t("vencord.voiceMessages.echoCancellation"),
+        default: true,
+    },
+});
+
+const ctxMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    if (props.channel.guild_id && !(PermissionStore.can(PermissionsBits.SEND_VOICE_MESSAGES, props.channel) && PermissionStore.can(PermissionsBits.SEND_MESSAGES, props.channel))) return;
+
+    children.push(
+        <Menu.MenuItem
+            id="vc-send-vmsg"
+            iconLeft={Microphone}
+            leadingAccessory={{
+                type: "icon",
+                icon: Microphone
+            }}
+            label={t("vencord.voiceMessages.send")}
+            action={() => openModal(modalProps => <VoiceMessageModal modalProps={modalProps} />)}
+        />
+    );
+};
+
+export default definePlugin({
+    name: "VoiceMessages",
+    description: t("vencord.voiceMessages.description"),
+    authors: [Devs.Ven, Devs.Vap, Devs.Nickyux, EquicordDevs.Z1xus, Devs.prism],
+    tags: ["Voice"],
+    settings,
+
+    patches: [
+        {
+            find: "#{intl::PAUSE_VOICE_MESSAGE_A11Y_LABEL}",
+            replacement: {
+                match: /(?<=\i=)(?=\i\.memo\(.{0,50}?=1,onVolumeChange:[^}]+?waveform:[^}]+?playbackCacheKey:)/,
+                replace: "$self.VoiceMessage=",
+            }
+        }
+    ],
+
+    set VoiceMessage(value) {
+        VoiceMessage = value;
+    },
+
+    contextMenus: {
+        "channel-attach": ctxMenuPatch
+    }
+});
+
 type AudioMetadata = {
     waveform: string,
     duration: number,
@@ -149,30 +194,11 @@ function useObjectUrl() {
     return [url, setWithFree] as const;
 }
 
-const ctxMenuPatch: NavContextMenuPatchCallback = (children, props) => {
-    if (props.channel.guild_id && !(PermissionStore.can(PermissionsBits.SEND_VOICE_MESSAGES, props.channel) && PermissionStore.can(PermissionsBits.SEND_MESSAGES, props.channel))) return;
-
-    children.push(
-        <Menu.MenuItem
-            id="vc-send-vmsg"
-            iconLeft={Microphone}
-            leadingAccessory={{
-                type: "icon",
-                icon: Microphone
-            }}
-            label={t("vencord.voiceMessages.send")}
-            action={() => openModal(modalProps => <Modal modalProps={modalProps} />)}
-        />
-    );
-};
-
-function Modal({ modalProps }: { modalProps: ModalProps; }) {
+function VoiceMessageModal({ modalProps }: { modalProps: RenderModalProps; }) {
     const [isRecording, setRecording] = useState(false);
     const [blob, setBlob] = useState<Blob>();
     const [blobUrl, setBlobUrl] = useObjectUrl();
 
-    const VoiceRecorder = IS_DISCORD_DESKTOP ? VoiceRecorderDesktop : VoiceRecorderWeb;
-
     useEffect(() => () => {
         if (blobUrl)
             URL.revokeObjectURL(blobUrl);
@@ -196,109 +222,68 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
     const isUnsupportedFormat = blob && (!blob.type.startsWith("audio/ogg") || blob.type.includes("codecs") && !blob.type.includes("opus"));
 
     return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader>
-                <Heading>{t("vencord.voiceMessages.recordModal")}</Heading>
-            </ModalHeader>
+        <Modal
+            {...modalProps}
+            title={t("vencord.voiceMessages.recordModal")}
+            actions={[{
+                text: t("vencord.voiceMessages.send"),
+                variant: "primary",
+                onClick: () => {
+                    sendAudio(blob!, meta ?? EMPTY_META);
+                    modalProps.onClose();
+                    showToast(t("vencord.voiceMessages.sending"), Toasts.Type.MESSAGE);
+                },
+                disabled: !blob
+            }]}
+        >
+            <div className={cl("buttons")}>
+                <VoiceRecorder
+                    setAudioBlob={blob => {
+                        setBlob(blob);
+                        setBlobUrl(blob);
+                    }}
+                    onRecordingChange={setRecording}
+                />
 
-            <ModalContent className={cl("modal")}>
-                <div className={cl("buttons")}>
-                    <VoiceRecorder
-                        setAudioBlob={blob => {
-                            setBlob(blob);
-                            setBlobUrl(blob);
-                        }}
-                        onRecordingChange={setRecording}
-                    />
-
-                    <Button onClick={async () => {
+                <Button
+                    onClick={async () => {
                         const file = await chooseFile("audio/*");
                         if (file) {
                             setBlob(file);
                             setBlobUrl(file);
                         }
-                    }}>
-                        {t("vencord.voiceMessages.uploadFile")}
-                    </Button>
-                </div>
+                    }}
+                >
+                    {t("vencord.voiceMessages.uploadFile")}
+                </Button>
+            </div>
 
-                <Heading>{t("vencord.voiceMessages.preview")}</Heading>
-                {metaError
-                    ? <Paragraph className={cl("error")}>{t("voiceMessages.failedToParse", { error: metaError.message })}</Paragraph>
-                    : (
-                        <VoicePreview
-                            src={blobUrl}
-                            waveform={meta.waveform}
-                            recording={isRecording}
-                        />
-                    )}
-
-                {isUnsupportedFormat && (
-                    <Card variant="warning" className={Margins.top16} defaultPadding>
-                        <Forms.FormText>
-                            <Translate i18nKey="vencord.voiceMessages.iosWarning" variables={{ type: blob.type }}>
-                                Voice Messages have to be OggOpus to be playable on iOS. This file is <code>{blob.type}</code> so it will not be playable on iOS.
-                            </Translate>
-                        </Forms.FormText>
-
-                        <Paragraph className={Margins.top8}>
-                            <Translate i18nKey="vencord.voiceMessages.iosFix">
-                                To fix it, first convert it to OggOpus, for example using the <Link href="https://convertio.co/mp3-opus/">convertio web converter</Link>
-                            </Translate>
-                        </Paragraph>
-                    </Card>
+            <Forms.FormTitle>{t("vencord.voiceMessages.preview")}</Forms.FormTitle>
+            {metaError
+                ? <Paragraph className={cl("error")}>{t("vencord.voiceMessages.failedToParse", { error: metaError.message })}</Paragraph>
+                : (
+                    <VoicePreview
+                        src={blobUrl}
+                        waveform={meta.waveform}
+                        recording={isRecording}
+                    />
                 )}
 
-            </ModalContent>
+            {isUnsupportedFormat && (
+                <Card variant="warning" className={Margins.top16} defaultPadding>
+                    <Forms.FormText>
+                        <Translate i18nKey="vencord.voiceMessages.iosWarning" variables={{ type: blob.type }}>
+                            Voice Messages have to be OggOpus to be playable on iOS. This file is <code>{blob.type}</code> so it will not be playable on iOS.
+                        </Translate>
+                    </Forms.FormText>
 
-            <ModalFooter>
-                <Button
-                    disabled={!blob}
-                    onClick={() => {
-                        sendAudio(blob!, meta ?? EMPTY_META);
-                        modalProps.onClose();
-                        showToast(t("vencord.voiceMessages.sending"), Toasts.Type.MESSAGE);
-                    }}>
-                    {t("vencord.voiceMessages.send")}
-                </Button>
-            </ModalFooter>
-        </ModalRoot>
+                    <Forms.FormText className={Margins.top8}>
+                        <Translate i18nKey="vencord.voiceMessages.iosFix">
+                            To fix it, first convert it to OggOpus, for example using the <Link href="https://convertio.co/mp3-opus/">convertio web converter</Link>
+                        </Translate>
+                    </Forms.FormText>
+                </Card>
+            )}
+        </Modal>
     );
 }
-
-export const settings = definePluginSettings({
-    noiseSuppression: {
-        type: OptionType.BOOLEAN,
-        description: t("vencord.voiceMessages.noiseSuppression"),
-        default: true,
-    },
-    echoCancellation: {
-        type: OptionType.BOOLEAN,
-        description: t("vencord.voiceMessages.echoCancellation"),
-        default: true,
-    },
-});
-
-export default definePlugin({
-    name: "VoiceMessages",
-    description: t("vencord.voiceMessages.description"),
-    authors: [Devs.Ven, Devs.Vap, Devs.Nickyux, EquicordDevs.Z1xus, Devs.prism],
-    tags: ["Voice"],
-    settings,
-    patches: [
-        {
-            find: "#{intl::PAUSE_VOICE_MESSAGE_A11Y_LABEL}",
-            replacement: {
-                match: /(?<=\i=)(?=\i\.memo\(.{0,50}?=1,onVolumeChange:[^}]+?waveform:[^}]+?playbackCacheKey:)/,
-                replace: "$self.VoiceMessage=",
-            }
-        }
-    ],
-
-    set VoiceMessage(value) {
-        VoiceMessage = value;
-    },
-    contextMenus: {
-        "channel-attach": ctxMenuPatch
-    }
-});
diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css
index 52fce852c..8f397dfbe 100644
--- a/src/plugins/voiceMessages/styles.css
+++ b/src/plugins/voiceMessages/styles.css
@@ -1,7 +1,3 @@
-.vc-vmsg-modal {
-    padding: 1em;
-}
-
 .vc-vmsg-buttons {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/src/shared/IpcEvents.ts b/src/shared/IpcEvents.ts
index eda8c407b..0a3c12a56 100644
--- a/src/shared/IpcEvents.ts
+++ b/src/shared/IpcEvents.ts
@@ -55,5 +55,6 @@ export const enum IpcEvents {
     SET_TRAY_UPDATE_STATE = "VencordSetTrayUpdateState",
     TRAY_REPAIR = "VencordTrayRepair",
     TRAY_CHECK_UPDATES = "VencordTrayCheckUpdates",
-    TRAY_ABOUT = "VencordTrayAbout"
+    TRAY_ABOUT = "VencordTrayAbout",
+    SUPPORTS_WINDOWS_MATERIAL = "VencordSupportsWindowsMaterial",
 }
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index f95af20b7..da7e30958 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -664,6 +664,10 @@ export const EquicordDevs = Object.freeze({
         name: "nobody",
         id: 0n
     },
+    yafyx: {
+        name: "kiniyaku",
+        id: 658209494609821699n
+    },
     thororen: {
         name: "thororen",
         id: 848339671629299742n
@@ -1041,6 +1045,10 @@ export const EquicordDevs = Object.freeze({
         name: "Loukios",
         id: 211461918127292416n
     },
+    qdnx: {
+        name: "qdnx",
+        id: 1374803023506702508n
+    },
     vappstar: {
         name: "vappstar",
         id: 747192967311261748n
@@ -1325,6 +1333,10 @@ export const EquicordDevs = Object.freeze({
         name: "NassCT",
         id: 354996937868705793n
     },
+    dhopcs: {
+        name: "dhopcs",
+        id: 206309860038410240n
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly
diff --git a/src/utils/discord.tsx b/src/utils/discord.tsx
index 942c149be..2c7e0e583 100644
--- a/src/utils/discord.tsx
+++ b/src/utils/discord.tsx
@@ -17,14 +17,13 @@
 */
 
 import type { MessageObject } from "@api/MessageEvents";
-import type { Channel, CloudUpload, Guild, GuildFeatures, Message, User } from "@vencord/discord-types";
-import { ChannelActionCreators, ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, i18n, InviteActions, MessageActions, RestAPI, SelectedChannelStore, SelectedGuildStore, Toasts, UserProfileActions, UserProfileStore, UserSettingsActionCreators, UserUtils } from "@webpack/common";
+import type { Channel, CloudUpload, Guild, GuildFeatures, MediaModalItem, MediaModalProps, Message, User } from "@vencord/discord-types";
+import { ChannelActionCreators, ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, i18n, InviteActions, MessageActions, openMediaModal, RestAPI, SelectedChannelStore, SelectedGuildStore, Toasts, UserProfileActions, UserProfileStore, UserSettingsActionCreators, UserUtils } from "@webpack/common";
 import { Except } from "type-fest";
 
 import { copyToClipboard } from "./clipboard";
 import { runtimeHashMessageKey } from "./intlHash";
 import { Logger } from "./Logger";
-import { MediaModalItem, MediaModalProps, openMediaModal } from "./modal";
 
 const IntlManagerLogger = new Logger("IntlManager");
 
diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx
index 8ff3cebd2..13faadceb 100644
--- a/src/utils/modal.tsx
+++ b/src/utils/modal.tsx
@@ -16,11 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { filters, findByCodeLazy, findComponentByCodeLazy, mapMangledModuleLazy } from "@webpack";
-import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react";
+import { filters, findComponentByCodeLazy, mapMangledModuleLazy } from "@webpack";
+import { closeAllModals, closeModal, openMediaModal, openModal, openModalLazy } from "@webpack/common";
 
 import { LazyComponent } from "./react";
 
+/** @deprecated Migrate to new Modals */
 export const enum ModalSize {
     SMALL = "small",
     MEDIUM = "medium",
@@ -28,150 +29,44 @@ export const enum ModalSize {
     DYNAMIC = "dynamic",
 }
 
-const enum ModalTransitionState {
-    ENTERING,
-    ENTERED,
-    EXITING,
-    EXITED,
-    HIDDEN,
-}
-
-export interface ModalProps {
-    transitionState: ModalTransitionState;
-    onClose(): void;
-}
-
-export interface ModalOptions {
-    modalKey?: string;
-    onCloseRequest?: (() => void);
-    onCloseCallback?: (() => void);
-}
-
-type RenderFunction = (props: ModalProps) => ReactNode | Promise<ReactNode>;
-
-interface Modals {
-    ModalRoot: ComponentType<PropsWithChildren<{
-        transitionState: ModalTransitionState;
-        size?: ModalSize;
-        role?: "alertdialog" | "dialog";
-        className?: string;
-        fullscreenOnMobile?: boolean;
-        "aria-label"?: string;
-        "aria-labelledby"?: string;
-        onAnimationEnd?(): string;
-    }>>;
-    ModalHeader: ComponentType<PropsWithChildren<{
-        /** Flex.Justify.START */
-        justify?: string;
-        /** Flex.Direction.HORIZONTAL */
-        direction?: string;
-        /** Flex.Align.CENTER */
-        align?: string;
-        /** Flex.Wrap.NO_WRAP */
-        wrap?: string;
-        separator?: boolean;
-
-        className?: string;
-    }>>;
-    /** This also accepts Scroller props but good luck with that */
-    ModalContent: ComponentType<PropsWithChildren<{
-        className?: string;
-        scrollerRef?: Ref<HTMLElement>;
-        [prop: string]: any;
-    }>>;
-    ModalFooter: ComponentType<PropsWithChildren<{
-        /** Flex.Justify.START */
-        justify?: string;
-        /** Flex.Direction.HORIZONTAL_REVERSE */
-        direction?: string;
-        /** Flex.Align.STRETCH */
-        align?: string;
-        /** Flex.Wrap.NO_WRAP */
-        wrap?: string;
-        separator?: boolean;
-
-        className?: string;
-    }>>;
-    ModalCloseButton: ComponentType<{
-        focusProps?: any;
-        onClick(): void;
-        withCircleBackground?: boolean;
-        hideOnFullscreen?: boolean;
-        className?: string;
-    }>;
-}
-
-// TODO: move to new modal api
-export const Modals: Modals = mapMangledModuleLazy(".MODAL_ROOT_LEGACY,", {
+/** @deprecated Migrate to new Modals */
+export const Modals = mapMangledModuleLazy(".MODAL_ROOT_LEGACY,", {
     ModalRoot: filters.componentByCode('.MODAL,"aria-labelledby":'),
     ModalHeader: filters.componentByCode(",id:"),
     ModalContent: filters.componentByCode("scrollbarType:"),
     ModalFooter: filters.componentByCode(".HORIZONTAL_REVERSE,"),
     ModalCloseButton: filters.componentByCode(".withCircleBackground")
-});
+}) as never;
 
-export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
-export const ModalHeader = LazyComponent(() => Modals.ModalHeader);
-export const ModalContent = LazyComponent(() => Modals.ModalContent);
-export const ModalFooter = LazyComponent(() => Modals.ModalFooter);
-export const ModalCloseButton = LazyComponent(() => Modals.ModalCloseButton);
+/** @deprecated Migrate to new Modals */
+export const ModalRoot = LazyComponent(() => (Modals as any).ModalRoot) as never;
+/** @deprecated Migrate to new Modals */
+export const ModalHeader = LazyComponent(() => (Modals as any).ModalHeader) as never;
+/** @deprecated Migrate to new Modals */
+export const ModalContent = LazyComponent(() => (Modals as any).ModalContent) as never;
+/** @deprecated Migrate to new Modals */
+export const ModalFooter = LazyComponent(() => (Modals as any).ModalFooter) as never;
+/** @deprecated Migrate to new Modals */
+export const ModalCloseButton = LazyComponent(() => (Modals as any).ModalCloseButton) as never;
 export const CloseButton = findComponentByCodeLazy("CLOSE_BUTTON_LABEL");
 
-export type MediaModalItem = {
-    url: string;
-    type: "IMAGE" | "VIDEO";
-    original?: string;
-    alt?: string;
-    width?: number;
-    height?: number;
-    animated?: boolean;
-    maxWidth?: number;
-    maxHeight?: number;
-} & Record<PropertyKey, any>;
+/** @deprecated Migrate to new Modals */
+export const ModalAPI = {
+    openModal,
+    openModalLazy,
+    closeModal,
+    closeAllModals
+} as never;
 
-export type MediaModalProps = {
-    location?: string;
-    contextKey?: string;
-    onCloseCallback?: () => void;
-    className?: string;
-    items: MediaModalItem[];
-    startingIndex?: number;
-    onIndexChange?: (...args: any[]) => void;
-    fit?: string;
-    shouldRedactExplicitContent?: boolean;
-    shouldHideMediaOptions?: boolean;
+export {
+    /** @deprecated Migrate to new Modals */
+    closeAllModals,
+    /** @deprecated Migrate to new Modals */
+    closeModal,
+    /** @deprecated Migrate to new Modals */
+    openMediaModal,
+    /** @deprecated Migrate to new Modals */
+    openModal,
+    /** @deprecated Migrate to new Modals */
+    openModalLazy
 };
-
-// Modal key: "Media Viewer Modal"
-export const openMediaModal: (props: MediaModalProps) => void = findByCodeLazy("hasMediaOptions", "shouldHideMediaOptions");
-
-interface ModalAPI {
-    /**
-     * Wait for the render promise to resolve, then open a modal with it.
-     * This is equivalent to render().then(openModal)
-     * You should use the Modal components exported by this file
-     */
-    openModalLazy: (render: () => Promise<RenderFunction>, options?: ModalOptions & { contextKey?: string; }) => Promise<string>;
-    /**
-     * Open a Modal with the given render function.
-     * You should use the Modal components exported by this file
-     */
-    openModal: (render: RenderFunction, options?: ModalOptions, contextKey?: string) => string;
-    /**
-     * Close a modal by its key
-     */
-    closeModal: (modalKey: string, contextKey?: string) => void;
-    /**
-     * Close all open modals
-     */
-    closeAllModals: () => void;
-}
-
-export const ModalAPI: ModalAPI = mapMangledModuleLazy(".modalKey?", {
-    openModalLazy: filters.byCode(".modalKey?"),
-    openModal: filters.byCode(",instant:"),
-    closeModal: filters.byCode(".onCloseCallback()"),
-    closeAllModals: filters.byCode(".getState();for")
-});
-
-export const { openModalLazy, openModal, closeModal, closeAllModals } = ModalAPI;
diff --git a/src/utils/types.ts b/src/utils/types.ts
index e8722822b..a042ebf3d 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -18,7 +18,7 @@
 
 import { AudioProcessor } from "@api/AudioPlayer";
 import type { ProfileBadge } from "@api/Badges";
-import type { ChatBarButtonData, ChatBarButtonWrapper } from "@api/ChatButtons";
+import type { ChatBarButtonData, ChatBarButtonWrapperData } from "@api/ChatButtons";
 import type { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { HeaderBarButtonData } from "@api/HeaderBar";
 import type { MemberListDecoratorFactory } from "@api/MemberListDecorators";
@@ -27,8 +27,8 @@ import type { MessageDecorationFactory } from "@api/MessageDecorations";
 import type { MessageClickListener, MessageEditListener, MessageSendListener } from "@api/MessageEvents";
 import type { MessagePopoverButtonData } from "@api/MessagePopover";
 import type { NicknameIconFactory } from "@api/NicknameIcons";
-import { ProfileCollectionFactory } from "@api/ProfileCollections";
-import { ProfileSectionFactory } from "@api/ProfileSections";
+import { ProfileCollectionData } from "@api/ProfileCollections";
+import { ProfileSectionData } from "@api/ProfileSections";
 import type { UserAreaButtonData } from "@api/UserArea";
 import type { Command, FluxEvents } from "@vencord/discord-types";
 import type { ReactNode } from "react";
@@ -233,9 +233,9 @@ export interface PluginDef {
     headerBarButton?: HeaderBarButtonData;
     audioProcessor?: AudioProcessor;
     userAreaButton?: UserAreaButtonData;
-    renderProfileCollection?: ProfileCollectionFactory;
-    chatBarButtonWrapper?: ChatBarButtonWrapper;
-    renderProfileSection?: ProfileSectionFactory;
+    renderProfileCollection?: ProfileCollectionData;
+    chatBarButtonWrapper?: ChatBarButtonWrapperData;
+    renderProfileSection?: ProfileSectionData;
 
     /**
      * A Vencord plugin that is modified for extra features in Equicord
@@ -389,6 +389,8 @@ export interface PluginSettingComponentProps {
      * The options object
      */
     option: PluginSettingComponentDef;
+    /** Close the plugin settings modal */
+    closePluginSettings(): void;
 }
 
 /** Maps a `PluginSettingDef` to its value type */
diff --git a/src/webpack/common/index.ts b/src/webpack/common/index.ts
index f75507e9e..654bd3f25 100644
--- a/src/webpack/common/index.ts
+++ b/src/webpack/common/index.ts
@@ -18,6 +18,7 @@
 
 export * from "./components";
 export * from "./menu";
+export * from "./modals";
 export * from "./react";
 export * from "./stores";
 export * from "./userSettings";
diff --git a/src/webpack/common/modals.ts b/src/webpack/common/modals.ts
new file mode 100644
index 000000000..1dbb4a3ed
--- /dev/null
+++ b/src/webpack/common/modals.ts
@@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import * as t from "@vencord/discord-types";
+import { filters, findByCodeLazy, findExportedComponentLazy, mapMangledModuleLazy } from "@webpack";
+
+export const Modal: t.Modal = findExportedComponentLazy("Modal");
+export const ConfirmModal: t.ConfirmModal = findExportedComponentLazy("ConfirmModal");
+
+// Modal key: "Media Viewer Modal"
+export const openMediaModal: (props: t.MediaModalProps) => void = findByCodeLazy("hasMediaOptions", "shouldHideMediaOptions");
+
+const ModalAPI: t.ModalAPI = mapMangledModuleLazy(".modalKey?", {
+    openModalLazy: filters.byCode(".modalKey?"),
+    openModal: filters.byCode(",instant:"),
+    closeModal: filters.byCode(".onCloseCallback()"),
+    closeAllModals: filters.byCode(".getState();for")
+});
+
+export const { openModalLazy, openModal, closeModal, closeAllModals } = ModalAPI;