diff --git a/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx b/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
index 0bcc6f641..70b9149fa 100644
--- a/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
@@ -18,16 +18,13 @@
 
 import { Button } from "@components/Button";
 import { Heading } from "@components/Heading";
-import { classNameFactory } from "@utils/css";
+import { cl, Native, settings } from "@equicordplugins/messageLoggerEnhanced/index";
+import { DEFAULT_IMAGE_CACHE_DIR } from "@equicordplugins/messageLoggerEnhanced/utils/constants";
 import { copyWithToast } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { findCssClassesLazy } from "@webpack";
 import { Toasts } from "@webpack/common";
 
-import { Native, settings } from "..";
-import { DEFAULT_IMAGE_CACHE_DIR } from "../utils/constants";
-
-const cl = classNameFactory("folder-upload");
 const inputClasses = findCssClassesLazy("input", "inputWrapper", "editable") as Record<string, string>;
 
 function createDirSelector(settingKey: "logsDir" | "imageCacheDir", successMessage: string) {
@@ -83,18 +80,18 @@ export function SelectFolderInput({ settingsKey, successMessage }: Props) {
     }
 
     return (
-        <div className={classes(cl("-container"), inputClasses.input)}>
-            <div onClick={() => copyWithToast(path)} className={cl("-input")}>
+        <div className={classes(cl("folder-upload-container"), inputClasses.input)}>
+            <div onClick={() => copyWithToast(path)} className={cl("folder-upload-input")}>
                 {path == null || path === DEFAULT_IMAGE_CACHE_DIR ? "Choose Folder" : getDirName(path)}
             </div>
             <Button
-                className={cl("-button")}
+                className={cl("folder-upload-button")}
                 size="small"
                 onClick={onFolderSelect}
             >
                 Browse
             </Button>
-        </div>
+        </div >
     );
 
 }
diff --git a/src/equicordplugins/messageLoggerEnhanced/components/LogsButton.tsx b/src/equicordplugins/messageLoggerEnhanced/components/LogsButton.tsx
index 9932ed27d..e6613a983 100644
--- a/src/equicordplugins/messageLoggerEnhanced/components/LogsButton.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/components/LogsButton.tsx
@@ -17,6 +17,7 @@
 */
 
 import { HeaderBarButton } from "@api/HeaderBar";
+import { cl } from "@equicordplugins/messageLoggerEnhanced/index";
 import { findComponentByCodeLazy } from "@webpack";
 
 import { openLogModal } from "./LogsModal";
@@ -26,7 +27,7 @@ const Icon = findComponentByCodeLazy("0-1.27-.97l-2.5.7a3");
 export function OpenLogsButton() {
     return (
         <HeaderBarButton
-            className="vc-log-toolbox-btn"
+            className={cl("toolbox-btn")}
             onClick={() => openLogModal()}
             tooltip={"Open Logs"}
             icon={Icon}
diff --git a/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx b/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
index 916da9520..6aa587d7e 100644
--- a/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
@@ -9,7 +9,6 @@ import { Button } from "@components/Button";
 import { Flex } from "@components/Flex";
 import { InfoIcon } from "@components/Icons";
 import { Link } from "@components/Link";
-import { classNameFactory } from "@utils/css";
 import { copyWithToast, openUserProfile } from "@utils/discord";
 import { closeAllModals, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { LazyComponent } from "@utils/react";
@@ -18,7 +17,7 @@ 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 { clearMessagesIDB, DBMessageRecord, deleteMessageIDB, deleteMessagesBulkIDB } from "../db";
-import { settings } from "../index";
+import { cl, settings } from "../index";
 import { LoggedMessage, LoggedMessageJSON } from "../types";
 import { messageJsonToMessageClass } from "../utils";
 import { importLogs } from "../utils/settingsUtils";
@@ -56,8 +55,6 @@ const PrivateChannelRecord = findByCodeLazy(".is_message_request_timestamp,");
 const MessagePreview = LazyComponent<MessagePreviewProps>(() => find(m => m?.type?.toString().includes("previewLinkTarget:") && !m?.type?.toString().includes("HAS_THREAD")));
 const ChildrenAccessories = LazyComponent<ChildrenAccProops>(() => findByCode("channelMessageProps:{message:"));
 
-const cl = classNameFactory("msg-logger-modal-");
-
 export enum LogTabs {
     DELETED = "Deleted",
     EDITED = "Edited",
@@ -79,13 +76,13 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
     const { messages, total, statusTotal, pending, reset } = useMessages(queryEh, currentTab, sortNewest, numDisplayedMessages);
 
     return (
-        <ModalRoot className={cl("root")} {...modalProps} size={ModalSize.LARGE}>
-            <ModalHeader className={cl("header")}>
+        <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("tab-bar")}
+                    className={cl("modal-tab-bar")}
                     selectedItem={currentTab}
                     onItemSelect={e => {
                         setCurrentTab(e);
@@ -94,30 +91,30 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
                     }}
                 >
                     <TabBar.Item
-                        className={cl("tab-bar-item")}
+                        className={cl("modal-tab-bar-item")}
                         id={LogTabs.DELETED}
                     >
                         Deleted
                     </TabBar.Item>
                     <TabBar.Item
-                        className={cl("tab-bar-item")}
+                        className={cl("modal-tab-bar-item")}
                         id={LogTabs.EDITED}
                     >
                         Edited
                     </TabBar.Item>
                     <TabBar.Item
-                        className={cl("tab-bar-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("content-container")} ref={contentRef}>
+            <div style={{ opacity: modalProps.transitionState === 1 ? "1" : "0" }} className={cl("modal-content-container")} ref={contentRef}>
                 {
                     modalProps.transitionState === 1 &&
                     <ModalContent
-                        className={cl("content")}
+                        className={cl("modal-content")}
                     >
                         {messages != null && total === 0 && (
                             <EmptyLogs
@@ -209,7 +206,7 @@ function LogsContent({ visibleMessages, canLoadMore, sortNewest, tab, reset, han
         return <NoResults tab={tab} />;
 
     return (
-        <div className={cl("content-inner")}>
+        <div className={cl("modal-content-inner")}>
             {visibleMessages
                 .map(({ message }, i) => (
                     <LMessage
@@ -251,7 +248,7 @@ function NoResults({ tab }: { tab: LogTabs; }) {
     const { nextTab, lastTab } = generateSuggestedTabs(tab);
 
     return (
-        <div className={cl("empty-logs", "content-inner")} style={{ textAlign: "center" }}>
+        <div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}>
             <BaseText size="lg">
                 No results in <b>{tab}</b>.
             </BaseText>
@@ -264,7 +261,7 @@ function NoResults({ tab }: { tab: LogTabs; }) {
 
 function EmptyLogs({ hasQuery, reset: forceUpdate }: { hasQuery: boolean; reset: () => void; }) {
     return (
-        <div className={cl("empty-logs", "content-inner")} style={{ textAlign: "center" }}>
+        <div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}>
             <Flex flexDirection="column" style={{ position: "relative" }}>
 
                 <BaseText size="lg">
@@ -276,7 +273,7 @@ function EmptyLogs({ hasQuery, reset: forceUpdate }: { hasQuery: boolean; reset:
                         <Tooltip text="ML Enhanced now stores logs in indexeddb. You need to import your old logs from the logs directory. Importing wont overwrite existing logs">
                             {({ onMouseEnter, onMouseLeave }) => (
                                 <div
-                                    className={cl("info-icon")}
+                                    className={cl("modal-info-icon")}
                                     onMouseEnter={onMouseEnter}
                                     onMouseLeave={onMouseLeave}
                                 >
@@ -392,7 +389,7 @@ function LMessage({ log, isGroupStart, reset, }: LMessageProps) {
                 );
             }}>
             <MessagePreview
-                className={`${cl("msg-preview")} ${message.deleted ? "messagelogger-deleted" : ""}`}
+                className={`${cl("modal-msg-preview")} ${message.deleted ? "messagelogger-deleted" : ""}`}
                 author={message.author}
                 message={message}
                 compact={false}
@@ -419,13 +416,13 @@ function LMessage({ log, isGroupStart, reset, }: LMessageProps) {
                 }
             />
             {settings.store.ShowWhereMessageIsFrom && channel?.isDM() && message?.author && (
-                <span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {message.author.username}'s DMs</span>
+                <span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {message.author.username}'s DMs</span>
             )}
             {settings.store.ShowWhereMessageIsFrom && channel?.isGroupDM() && channel?.name && (
-                <span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {channel.name} Group DM</span>
+                <span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {channel.name} Group DM</span>
             )}
             {settings.store.ShowWhereMessageIsFrom && !channel?.isDM() && !channel?.isGroupDM() && channel?.name && guild?.name && (
-                <span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {channel.name} in {guild.name}</span>
+                <span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {channel.name} in {guild.name}</span>
             )}
         </div>
     );
diff --git a/src/equicordplugins/messageLoggerEnhanced/index.tsx b/src/equicordplugins/messageLoggerEnhanced/index.tsx
index 38788a629..ebda9e31c 100644
--- a/src/equicordplugins/messageLoggerEnhanced/index.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/index.tsx
@@ -9,6 +9,7 @@ export const Native = getNative();
 import "./styles.css";
 
 import { Devs, EquicordDevs } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
 import { Logger } from "@utils/Logger";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
@@ -33,6 +34,7 @@ export { settings };
 export const Flogger = new Logger("MessageLoggerEnhanced", "#f26c6c");
 
 export const cacheSentMessages = new LimitedMap<string, LoggedMessageJSON>();
+export const cl = classNameFactory("vc-msg-logger-enhanced-");
 
 const cacheThing = findByPropsLazy("commit", "getOrCreate");
 
diff --git a/src/equicordplugins/messageLoggerEnhanced/styles.css b/src/equicordplugins/messageLoggerEnhanced/styles.css
index 5e508be4e..41f555423 100644
--- a/src/equicordplugins/messageLoggerEnhanced/styles.css
+++ b/src/equicordplugins/messageLoggerEnhanced/styles.css
@@ -1,17 +1,17 @@
-.msg-logger-modal-root {
+.vc-msg-logger-enhanced-modal-root {
     max-height: 80vh;
     min-height: 80vh;
     min-width: 85vw;
     max-width: 85vw;
 }
 
-.msg-logger-modal-empty-logs {
+.vc-msg-logger-enhanced-modal-empty-logs {
     display: grid;
     place-content: center;
     height: 100%;
 }
 
-.msg-logger-modal-info-icon {
+.vc-msg-logger-enhanced-modal-info-icon {
     position: absolute;
     top: -24px;
     right: -24px;
@@ -19,63 +19,67 @@
     cursor: pointer;
 }
 
-.msg-logger-modal-header {
+.vc-msg-logger-enhanced-modal-header {
     flex-direction: column;
 
     /* width: 100%; */
 }
 
-.msg-logger-modal-footer {
-    align-items: center;
-}
-
-.msg-logger-modal-content-container {
+.vc-msg-logger-enhanced-modal-content-container {
     /* max-height: 80vh; */
     overflow: hidden;
     height: 100%;
     transition: opacity 100ms ease-in;
 }
 
-.msg-logger-modal-content {
+.vc-msg-logger-enhanced-modal-content {
     padding-bottom: 20px;
     height: 100%;
 }
 
-.msg-logger-modal-content-inner {
+.vc-msg-logger-enhanced-modal-content-inner {
     padding-top: 1rem;
     padding-bottom: 1rem;
     height: 100%;
 }
 
-.msg-logger-modal-header > div:has(input) {
+.vc-msg-logger-enhanced-modal-header > div:has(input) {
     width: 100%;
 }
 
-.msg-logger-modal-tab-bar-item {
+.vc-msg-logger-enhanced-modal-tab-bar-item {
     padding-bottom: 16px;
     margin-bottom: -2px;
 }
 
-.msg-logger-modal-tab-bar {
+.vc-msg-logger-enhanced-modal-tab-bar {
     margin-top: 20px;
     width: 100%;
     justify-content: space-around;
 }
 
-.msg-logger-modal-danger-btn {
-    color: var(--white-500);
-    background-color: var(--button-danger-background);
+.vc-msg-logger-enhanced-modal-from {
+    font-size: 14px;
+    margin-left: 12px;
 }
 
-.vc-log-toolbox-btn svg {
+.msg-logger-modal-from-deleted {
+    color: var(--status-danger);
+}
+
+.vc-msg-logger-enhanced-modal-from-edited {
+    color: var(--white-600);
+}
+
+.vc-msg-logger-enhanced-toolbox-btn svg {
     color: var(--interactive-icon-default);
 }
 
-:is(.vc-log-toolbox-btn:hover, .vc-log-toolbox-btn[class*="selected"]) svg {
+:is(.vc-msg-logger-enhanced-toolbox-btn:hover, .vc-msg-logger-enhanced-toolbox-btn[class*="selected"]) svg {
     color: var(--interactive-icon-active);
 }
 
-.folder-upload-container {
+.vc-msg-logger-enhanced-folder-upload-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -83,13 +87,13 @@
     background-color: var(--background-secondary-alt);
 }
 
-.folder-upload-input {
+.vc-msg-logger-enhanced-folder-upload-input {
     cursor: pointer;
     padding: 10px 0 10px 10px;
     color: var(--text-default);
 }
 
-.folder-upload-button {
+.vc-msg-logger-enhanced-folder-upload-button {
     margin: 6px;
     padding: 4px 8px;
 }
diff --git a/src/plugins/serverListIndicators/index.tsx b/src/plugins/serverListIndicators/index.tsx
index a888afe69..da4538257 100644
--- a/src/plugins/serverListIndicators/index.tsx
+++ b/src/plugins/serverListIndicators/index.tsx
@@ -161,10 +161,10 @@ export default definePlugin({
                 break;
         }
 
-        const cl = useCompact ? classNameFactory("vc-indicators-compact") : classNameFactory("vc-indicators");
+        const cl = useCompact ? classNameFactory("vc-indicators-compact-") : classNameFactory("vc-indicators-");
 
         return <ErrorBoundary noop>
-            <div id={cl("-container")}>
+            <div id={cl("container")}>
                 <Tooltip text={text} position="right">
                     {({ onMouseEnter, onMouseLeave }) => (
                         <div