diff --git a/src/plugins/betterNotes/index.ts b/src/plugins/betterNotes/index.tsx
similarity index 79%
rename from src/plugins/betterNotes/index.ts
rename to src/plugins/betterNotes/index.tsx
index d9c5b45c..06c73550 100644
--- a/src/plugins/betterNotes/index.ts
+++ b/src/plugins/betterNotes/index.tsx
@@ -19,6 +19,9 @@
 import { Settings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+
+const UserPopoutSectionCssClasses = findByPropsLazy("section", "lastSection");
 
 export default definePlugin({
     name: "BetterNotesBox",
@@ -34,12 +37,20 @@ export default definePlugin({
                 match: /hideNote:.+?(?=[,}])/g,
                 replace: "hideNote:true",
             }
-        }, {
+        },
+        {
             find: "Messages.NOTE_PLACEHOLDER",
             replacement: {
                 match: /\.NOTE_PLACEHOLDER,/,
                 replace: "$&spellCheck:!Vencord.Settings.plugins.BetterNotesBox.noSpellCheck,"
             }
+        },
+        {
+            find: ".Messages.NOTE}",
+            replacement: {
+                match: /(\i)\.hideNote\?null/,
+                replace: "$1.hideNote?$self.patchPadding($1)"
+            }
         }
     ],
 
@@ -56,5 +67,12 @@ export default definePlugin({
             disabled: () => Settings.plugins.BetterNotesBox.hide,
             default: false
         }
+    },
+
+    patchPadding(e: any) {
+        if (!e.lastSection) return;
+        return (
+            <div className={UserPopoutSectionCssClasses.lastSection}></div>
+        );
     }
 });
diff --git a/src/plugins/userVoiceShow/components/VoiceChannelSection.css b/src/plugins/userVoiceShow/components/VoiceChannelSection.css
index 0cf8701f..00ecf5d4 100644
--- a/src/plugins/userVoiceShow/components/VoiceChannelSection.css
+++ b/src/plugins/userVoiceShow/components/VoiceChannelSection.css
@@ -1,4 +1,4 @@
-.vc-uvs-button > div {
+.vc-uvs-button>div {
     white-space: normal !important;
 }
 
@@ -21,6 +21,7 @@
     margin-bottom: 0 !important;
 }
 
-.vc-uvs-popout-margin > [class^="section"] {
-    margin-top: -12px;
+.vc-uvs-popout-margin-self>[class^="section"] {
+    padding-top: 0;
+    padding-bottom: 12px;
 }
diff --git a/src/plugins/userVoiceShow/index.tsx b/src/plugins/userVoiceShow/index.tsx
index 9d8730b8..85c1bedf 100644
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@@ -20,14 +20,13 @@ import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy, findStoreLazy } from "@webpack";
+import { findStoreLazy } from "@webpack";
 import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
 import { User } from "discord-types/general";
 
 import { VoiceChannelSection } from "./components/VoiceChannelSection";
 
 const VoiceStateStore = findStoreLazy("VoiceStateStore");
-const UserPopoutSectionCssClasses = findByPropsLazy("section", "lastSection");
 
 const settings = definePluginSettings({
     showInUserProfileModal: {
@@ -88,7 +87,7 @@ export default definePlugin({
     patchPopout: ({ user }: UserProps) => {
         const isSelfUser = user.id === UserStore.getCurrentUser().id;
         return (
-            <div className={isSelfUser ? `vc-uvs-popout-margin ${UserPopoutSectionCssClasses.lastSection}` : ""}>
+            <div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
                 <VoiceChannelField user={user} />
             </div>
         );