diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css
index ba8a246a..10d3c0cf 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -3,8 +3,8 @@
     all: unset;
     display: flex;
     flex-direction: column;
-    color: var(--text-normal);
-    background-color: var(--background-secondary-alt);
+    color: var(--text-default);
+    background-color: var(--background-base-lower-alt);
     border-radius: 6px;
     overflow: hidden;
     cursor: pointer;
diff --git a/src/components/ErrorCard.css b/src/components/ErrorCard.css
index 6401c59c..2eea2f06 100644
--- a/src/components/ErrorCard.css
+++ b/src/components/ErrorCard.css
@@ -3,7 +3,7 @@
     background-color: #e7828430;
     border: 1px solid #e78284;
     border-radius: 5px;
-    color: var(--text-normal, white);
+    color: var(--text-default, white);
 
     & a:hover {
         text-decoration: underline;
diff --git a/src/components/VencordSettings/UpdaterTab.tsx b/src/components/VencordSettings/UpdaterTab.tsx
index e29d7dfd..9871bfcc 100644
--- a/src/components/VencordSettings/UpdaterTab.tsx
+++ b/src/components/VencordSettings/UpdaterTab.tsx
@@ -94,7 +94,7 @@ function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof
                     <code><HashLink {...{ repo, hash }} disabled={repoPending} /></code>
                     <span style={{
                         marginLeft: "0.5em",
-                        color: "var(--text-normal)"
+                        color: "var(--text-default)"
                     }}>{message} - {author}</span>
                 </div>
             ))}
diff --git a/src/components/VencordSettings/addonCard.css b/src/components/VencordSettings/addonCard.css
index 67bdece5..c8a2a81e 100644
--- a/src/components/VencordSettings/addonCard.css
+++ b/src/components/VencordSettings/addonCard.css
@@ -1,5 +1,5 @@
 .vc-addon-card {
-    background-color: var(--background-secondary-alt);
+    background-color: var(--background-base-lower-alt);
     color: var(--interactive-active);
     border-radius: 8px;
     display: block;
diff --git a/src/components/VencordSettings/quickActions.css b/src/components/VencordSettings/quickActions.css
index 39137818..f65fba21 100644
--- a/src/components/VencordSettings/quickActions.css
+++ b/src/components/VencordSettings/quickActions.css
@@ -14,7 +14,7 @@
 
 .vc-settings-quickActions-pill {
     all: unset;
-    background: var(--background-secondary);
+    background: var(--background-base-lower);
     color: var(--header-secondary);
     display: flex;
     align-items: center;
@@ -26,7 +26,7 @@
 }
 
 .vc-settings-quickActions-pill:hover {
-    background: var(--background-secondary-alt);
+    background: var(--background-base-lower-alt);
     transform: translateY(-1px);
     box-shadow: var(--elevation-high);
 }
@@ -47,4 +47,4 @@
 .vc-settings-quickActions-img {
     width: 24px;
     height: 24px;
-}
\ No newline at end of file
+}
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
index 5349993d..ccf01cfd 100644
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -29,7 +29,7 @@
 .vc-settings-theme-links {
     /* Needed to fix bad themes that hide certain textarea elements for whatever eldritch reason */
     display: inline-block !important;
-    color: var(--text-normal) !important;
+    color: var(--text-default) !important;
     padding: 0.5em;
     border: 1px solid var(--background-modifier-accent);
     max-height: unset;
diff --git a/src/components/VencordSettings/themesStyles.css b/src/components/VencordSettings/themesStyles.css
index b10daff3..b4717406 100644
--- a/src/components/VencordSettings/themesStyles.css
+++ b/src/components/VencordSettings/themesStyles.css
@@ -7,7 +7,7 @@
 .vc-settings-theme-card {
     display: flex;
     flex-direction: column;
-    background-color: var(--background-secondary-alt);
+    background-color: var(--background-base-lower-alt);
     color: var(--interactive-active);
     border-radius: 8px;
     padding: 1em;
diff --git a/src/plugins/betterSessions/index.tsx b/src/plugins/betterSessions/index.tsx
index 8f8ef141..b40c3c1e 100644
--- a/src/plugins/betterSessions/index.tsx
+++ b/src/plugins/betterSessions/index.tsx
@@ -138,7 +138,7 @@ export default definePlugin({
 
                             borderRadius: "50%",
                             backgroundColor: "var(--interactive-normal)",
-                            color: "var(--background-secondary)",
+                            color: "var(--background-base-lower)",
                         }}
                     >
                         <PlatformIcon width={14} height={14} />
diff --git a/src/plugins/customRPC/index.tsx b/src/plugins/customRPC/index.tsx
index 6f771933..d35dad13 100644
--- a/src/plugins/customRPC/index.tsx
+++ b/src/plugins/customRPC/index.tsx
@@ -456,7 +456,7 @@ export default definePlugin({
 
                 <Forms.FormDivider className={Margins.top8} />
 
-                <div style={{ width: "284px", ...profileThemeStyle, marginTop: 8, borderRadius: 8, background: "var(--bg-mod-faint)" }}>
+                <div style={{ width: "284px", ...profileThemeStyle, marginTop: 8, borderRadius: 8, background: "var(--background-mod-faint)" }}>
                     {activity[0] && <ActivityView
                         activity={activity[0]}
                         user={UserStore.getCurrentUser()}
diff --git a/src/plugins/expressionCloner/index.tsx b/src/plugins/expressionCloner/index.tsx
index 3a73489c..c1244fae 100644
--- a/src/plugins/expressionCloner/index.tsx
+++ b/src/plugins/expressionCloner/index.tsx
@@ -225,7 +225,7 @@ function CloneModal({ data }: { data: Sticker | Emoji; }) {
                                 aria-disabled={isCloning}
                                 style={{
                                     borderRadius: "50%",
-                                    backgroundColor: "var(--background-secondary)",
+                                    backgroundColor: "var(--background-base-lower)",
                                     display: "inline-flex",
                                     justifyContent: "center",
                                     alignItems: "center",
diff --git a/src/plugins/messageLinkEmbeds/index.tsx b/src/plugins/messageLinkEmbeds/index.tsx
index 69727862..1e4f68e0 100644
--- a/src/plugins/messageLinkEmbeds/index.tsx
+++ b/src/plugins/messageLinkEmbeds/index.tsx
@@ -294,7 +294,7 @@ function ChannelMessageEmbedAccessory({ message, channel }: MessageEmbedProps):
         <Embed
             embed={{
                 rawDescription: "",
-                color: "var(--background-secondary)",
+                color: "var(--background-base-lower)",
                 author: {
                     name: <Text variant="text-xs/medium" tag="span">
                         <span>{channelLabel} - </span>
diff --git a/src/plugins/messageLogger/deleteStyleText.css b/src/plugins/messageLogger/deleteStyleText.css
index a114b7de..655294c1 100644
--- a/src/plugins/messageLogger/deleteStyleText.css
+++ b/src/plugins/messageLogger/deleteStyleText.css
@@ -1,5 +1,5 @@
 .messagelogger-deleted {
-    --text-normal: var(--status-danger, #f04747);
+    --text-default: var(--status-danger, #f04747);
     --interactive-normal: var(--status-danger, #f04747);
     --text-muted: var(--status-danger, #f04747);
     --embed-title: var(--red-460, #be3535);
diff --git a/src/plugins/permissionsViewer/components/UserPermissions.tsx b/src/plugins/permissionsViewer/components/UserPermissions.tsx
index d0c0ed50..85b1d418 100644
--- a/src/plugins/permissionsViewer/components/UserPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx
@@ -159,7 +159,7 @@ function UserPermissionsComponent({ guild, guildMember, closePopout }: { guild:
                                 viewBox="0 96 960 960"
                                 transform={permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
                             >
-                                <path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
+                                <path fill="var(--text-default)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
                             </svg>
                         </div>
                     )}
@@ -181,7 +181,7 @@ function UserPermissionsComponent({ guild, guildMember, closePopout }: { guild:
                                 height="24"
                                 viewBox="0 0 24 24"
                             >
-                                <path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
+                                <path fill="var(--text-default)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
                             </svg>
                         </div>
                     )}
diff --git a/src/plugins/permissionsViewer/components/icons.tsx b/src/plugins/permissionsViewer/components/icons.tsx
index 8b58a440..fb5b0341 100644
--- a/src/plugins/permissionsViewer/components/icons.tsx
+++ b/src/plugins/permissionsViewer/components/icons.tsx
@@ -51,7 +51,7 @@ export function PermissionDefaultIcon() {
         >
             <g>
                 <title>Not overwritten</title>
-                <polygon fill="var(--text-normal)" points="12 2.32 10.513 2 4 13.68 5.487 14" />
+                <polygon fill="var(--text-default)" points="12 2.32 10.513 2 4 13.68 5.487 14" />
             </g>
         </svg>
     );
diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css
index 2ca61025..c149933f 100644
--- a/src/plugins/permissionsViewer/styles.css
+++ b/src/plugins/permissionsViewer/styles.css
@@ -140,10 +140,9 @@
 
 /* copy pasted from discord cause impossible to webpack find */
 .vc-permviewer-role-button {
-    border-radius: var(--radius-xs);
-    background: var(--bg-mod-faint);
+    border-radius: var(--radius-sm);
     color: var(--interactive-normal);
-    border: 1px solid var(--border-faint);
+    border: 1px solid var(--user-profile-border);
     /* stylelint-disable-next-line value-no-vendor-prefix */
     width: -moz-fit-content;
     width: fit-content;
@@ -151,9 +150,8 @@
     padding: 4px
 }
 
-.custom-profile-theme .vc-permviewer-role-button {
-    background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
-    border-color: var(--profile-body-border-color)
+.vc-permviewer-role-button:hover {
+    background-color: var(--user-profile-background-hover);
 }
 
 .vc-permviewer-granted-by-container {
diff --git a/src/plugins/reviewDB/style.css b/src/plugins/reviewDB/style.css
index c62c300e..50499b29 100644
--- a/src/plugins/reviewDB/style.css
+++ b/src/plugins/reviewDB/style.css
@@ -72,7 +72,7 @@
     overflow-y: hidden;
     margin-top: 1px;
     margin-bottom: 8px;
-    color: var(--text-normal);
+    color: var(--text-default);
     font-size: 15px;
 }
 
diff --git a/src/plugins/roleColorEverywhere/index.tsx b/src/plugins/roleColorEverywhere/index.tsx
index 65da676c..84b58199 100644
--- a/src/plugins/roleColorEverywhere/index.tsx
+++ b/src/plugins/roleColorEverywhere/index.tsx
@@ -197,7 +197,7 @@ export default definePlugin({
                 const value = `color-mix(in oklab, ${author.colorString} ${messageSaturation}%, var({DEFAULT}))`;
 
                 return {
-                    color: value.replace("{DEFAULT}", "--text-normal"),
+                    color: value.replace("{DEFAULT}", "--text-default"),
                     "--header-primary": value.replace("{DEFAULT}", "--header-primary"),
                     "--text-muted": value.replace("{DEFAULT}", "--text-muted")
                 };
diff --git a/src/plugins/sendTimestamps/styles.css b/src/plugins/sendTimestamps/styles.css
index e7efbe59..d96e886a 100644
--- a/src/plugins/sendTimestamps/styles.css
+++ b/src/plugins/sendTimestamps/styles.css
@@ -1,6 +1,6 @@
 .vc-st-date-picker {
     background-color: var(--input-background);
-    color: var(--text-normal);
+    color: var(--text-default);
     width: 95%;
     padding: 8px 8px 8px 12px;
     margin: 1em 0;
diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css
index 42a7899c..0fc44e02 100644
--- a/src/plugins/serverInfo/styles.css
+++ b/src/plugins/serverInfo/styles.css
@@ -68,7 +68,7 @@
 }
 
 .vc-gp-server-info-pair {
-    color: var(--text-normal);
+    color: var(--text-default);
 }
 
 .vc-gp-server-info-pair [class^="timestamp"] {
diff --git a/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx
index 2d62af6e..926a6cae 100644
--- a/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx
+++ b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx
@@ -78,12 +78,12 @@ export const Highlighter = ({
     });
 
     const themeBase: ThemeBase = {
-        plainColor: currentTheme?.fg || "var(--text-normal)",
+        plainColor: currentTheme?.fg || "var(--text-default)",
         accentBgColor:
             currentTheme?.colors?.["statusBar.background"] || (useHljs ? "#7289da" : "#007BC8"),
         accentFgColor: currentTheme?.colors?.["statusBar.foreground"] || "#FFF",
         backgroundColor:
-            currentTheme?.colors?.["editor.background"] || "var(--background-secondary)",
+            currentTheme?.colors?.["editor.background"] || "var(--background-base-lower)",
     };
 
     let langName;
diff --git a/src/plugins/shikiCodeblocks.desktop/shiki.css b/src/plugins/shikiCodeblocks.desktop/shiki.css
index 9d3a52c6..9ca34484 100644
--- a/src/plugins/shikiCodeblocks.desktop/shiki.css
+++ b/src/plugins/shikiCodeblocks.desktop/shiki.css
@@ -1,6 +1,6 @@
 .vc-shiki-container {
     border: 4px;
-    background-color: var(--background-secondary);
+    background-color: var(--background-base-lower);
 }
 
 .vc-shiki-root {
diff --git a/src/plugins/showHiddenChannels/style.css b/src/plugins/showHiddenChannels/style.css
index 56e50a2f..7104f047 100644
--- a/src/plugins/showHiddenChannels/style.css
+++ b/src/plugins/showHiddenChannels/style.css
@@ -22,12 +22,12 @@
 }
 
 .vc-shc-heading-nsfw-icon {
-    color: var(--text-normal);
+    color: var(--text-default);
 }
 
 .vc-shc-topic-container {
-    color: var(--text-normal);
-    background: var(--bg-overlay-3, var(--background-secondary));
+    color: var(--text-default);
+    background: var(--bg-overlay-5, var(--background-base-lower));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
@@ -37,7 +37,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    background: var(--bg-overlay-3, var(--background-secondary));
+    background: var(--bg-overlay-5, var(--background-base-lower));
     border-radius: 8px;
     padding: 0.75em;
     margin-left: 0.75em;
@@ -46,7 +46,7 @@
 .vc-shc-tags-container {
     display: flex;
     flex-direction: column;
-    background: var(--bg-overlay-3, var(--background-secondary));
+    background: var(--bg-overlay-5, var(--background-base-lower));
     border-radius: 5px;
     padding: 0.75em;
     gap: 0.75em;
@@ -65,7 +65,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--bg-overlay-3, var(--background-secondary));
+    background: var(--bg-overlay-5, var(--background-base-lower));
     border-radius: 5px;
     padding: 0.75em;
     max-width: 70vw;
@@ -83,7 +83,7 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    color: var(--text-normal);
+    color: var(--text-default);
 }
 
 .vc-shc-allowed-users-and-roles-container-permdetails-btn {
@@ -91,7 +91,7 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    color: var(--text-normal);
+    color: var(--text-default);
 }
 
 .vc-shc-allowed-users-and-roles-container > [class^="members"] {
diff --git a/src/plugins/spotifyControls/spotifyStyles.css b/src/plugins/spotifyControls/spotifyStyles.css
index 0b760377..58d74504 100644
--- a/src/plugins/spotifyControls/spotifyStyles.css
+++ b/src/plugins/spotifyControls/spotifyStyles.css
@@ -8,11 +8,11 @@
 }
 
 .theme-light #vc-spotify-player {
-    background: var(--bg-overlay-3, var(--background-secondary-alt));
+    background: var(--bg-overlay-3, var(--background-base-lower-alt));
 }
 
 .theme-dark #vc-spotify-player {
-    background: var(--bg-overlay-1, var(--background-secondary-alt));
+    background: var(--bg-overlay-1, var(--background-base-lower-alt));
 }
 
 .vc-spotify-button {
@@ -143,7 +143,7 @@
 
 #vc-spotify-progress-bar {
     position: relative;
-    color: var(--text-normal);
+    color: var(--text-default);
     width: 100%;
     margin: 0.5em 0;
     margin-bottom: 5px;
@@ -195,5 +195,5 @@
 
 .vc-spotify-fallback {
     padding: 0.5em;
-    color: var(--text-normal);
+    color: var(--text-default);
 }
diff --git a/src/plugins/spotifyControls/visualRefreshSpotifyStyles.css b/src/plugins/spotifyControls/visualRefreshSpotifyStyles.css
index 3a140a17..0d6d30ba 100644
--- a/src/plugins/spotifyControls/visualRefreshSpotifyStyles.css
+++ b/src/plugins/spotifyControls/visualRefreshSpotifyStyles.css
@@ -2,7 +2,7 @@
 .visual-refresh {
     #vc-spotify-player {
         padding: 12px;
-        background: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
+        background: var(--bg-overlay-floating, var(--background-base-low, var(--background-base-lower-alt)));
         margin: 0;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
@@ -22,7 +22,7 @@
 
     #vc-spotify-progress-bar {
         position: relative;
-        color: var(--text-normal);
+        color: var(--text-default);
         width: 100%;
     }
 
diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css
index 4f2e1d57..4f1f2c62 100644
--- a/src/plugins/voiceMessages/styles.css
+++ b/src/plugins/voiceMessages/styles.css
@@ -10,9 +10,9 @@
 }
 
 .vc-vmsg-preview {
-    color: var(--text-normal);
+    color: var(--text-default);
     border-radius: 24px;
-    background-color: var(--background-secondary);
+    background-color: var(--background-base-lower);
     position: relative;
     display: flex;
     align-items: center;