diff --git a/src/components/settings/tabs/BaseTab.tsx b/src/components/settings/tabs/BaseTab.tsx
index b4c0ebb53..17a2e8025 100644
--- a/src/components/settings/tabs/BaseTab.tsx
+++ b/src/components/settings/tabs/BaseTab.tsx
@@ -16,9 +16,10 @@
  * 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, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { onlyOnce } from "@utils/onlyOnce";
 import type { ComponentType, PropsWithChildren } from "react";
 
@@ -43,13 +44,17 @@ export function wrapTab(component: ComponentType<any>, tab: string) {
 export function openSettingsTabModal(Tab: ComponentType<any>) {
     try {
         openModal(wrapTab((modalProps: ModalProps) => (
-            <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
+            <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>
+
                 <ModalContent className="vc-settings-modal">
-                    <ModalCloseButton onClick={modalProps.onClose} className="vc-settings-modal-close" />
                     <Tab />
                 </ModalContent>
             </ModalRoot>
-        ), Tab.displayName || "Settings Tab"));
+        ), Tab.displayName || "SettingsTab"));
     } catch {
         handleSettingsTabError();
     }
diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css
index a0152abca..fd4aa8f46 100644
--- a/src/components/settings/tabs/styles.css
+++ b/src/components/settings/tabs/styles.css
@@ -61,10 +61,10 @@
     height: 1.25em;
 }
 
-.vc-settings-modal {
-    padding: 1.5em !important;
+.vc-settings-modal-root {
+    background: var(--background-base-low);
 }
 
-.vc-settings-modal-close {
-    float: right;
+.vc-settings-modal {
+    padding-bottom: 1em;
 }
\ No newline at end of file