diff --git a/client/ui/frontend/src/contexts/SettingsContext.tsx b/client/ui/frontend/src/contexts/SettingsContext.tsx
index 7222073bc..c960b7b04 100644
--- a/client/ui/frontend/src/contexts/SettingsContext.tsx
+++ b/client/ui/frontend/src/contexts/SettingsContext.tsx
@@ -179,15 +179,15 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
         [config, guiVersion, setField, saveField, saveFields, saveNow],
     );
 
-    return (
-        <div className={"flex-1 min-h-0 overflow-y-auto"}>
-            {value ? (
-                <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>
-            ) : (
+    if (!value) {
+        return (
+            <div className={"flex-1 min-h-0 overflow-y-auto py-8 px-7"}>
                 <SettingsSkeleton />
-            )}
-        </div>
-    );
+            </div>
+        );
+    }
+
+    return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
 };
 
 export const AutostartSettingsProvider = ({ children }: { children: ReactNode }) => {
diff --git a/client/ui/frontend/src/modules/settings/SettingsPage.tsx b/client/ui/frontend/src/modules/settings/SettingsPage.tsx
index 0f2475551..473f406ef 100644
--- a/client/ui/frontend/src/modules/settings/SettingsPage.tsx
+++ b/client/ui/frontend/src/modules/settings/SettingsPage.tsx
@@ -45,14 +45,14 @@ export const SettingsPage = () => {
                 <SettingsNavigation />
                 <AppRightPanel>
                     <AutostartSettingsProvider>
-                        <ScrollArea.Root
-                            key={active}
-                            type={"auto"}
-                            className={"flex-1 min-h-0 overflow-hidden"}
-                        >
-                            <ScrollArea.Viewport className={"h-full w-full"}>
-                                <div className={"py-8 px-7"}>
-                                    <SettingsProvider>
+                        <SettingsProvider>
+                            <ScrollArea.Root
+                                key={active}
+                                type={"auto"}
+                                className={"flex-1 min-h-0 overflow-hidden"}
+                            >
+                                <ScrollArea.Viewport className={"h-full w-full"}>
+                                    <div className={"py-8 px-7"}>
                                         <VerticalTabs.Content value={"general"}>
                                             <SettingsGeneral />
                                         </VerticalTabs.Content>
@@ -77,23 +77,23 @@ export const SettingsPage = () => {
                                         <VerticalTabs.Content value={"about"}>
                                             <SettingsAbout />
                                         </VerticalTabs.Content>
-                                    </SettingsProvider>
-                                </div>
-                            </ScrollArea.Viewport>
-                            <ScrollArea.Scrollbar
-                                orientation={"vertical"}
-                                className={cn(
-                                    "flex select-none touch-none transition-colors",
-                                    "w-1.5 bg-transparent py-1",
-                                )}
-                            >
-                                <ScrollArea.Thumb
-                                    className={
-                                        "flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
-                                    }
-                                />
-                            </ScrollArea.Scrollbar>
-                        </ScrollArea.Root>
+                                    </div>
+                                </ScrollArea.Viewport>
+                                <ScrollArea.Scrollbar
+                                    orientation={"vertical"}
+                                    className={cn(
+                                        "flex select-none touch-none transition-colors",
+                                        "w-1.5 bg-transparent py-1",
+                                    )}
+                                >
+                                    <ScrollArea.Thumb
+                                        className={
+                                            "flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
+                                        }
+                                    />
+                                </ScrollArea.Scrollbar>
+                            </ScrollArea.Root>
+                        </SettingsProvider>
                     </AutostartSettingsProvider>
                 </AppRightPanel>
             </VerticalTabs>