diff --git a/playwright/e2e/settings/security-user-settings-tab.spec.ts b/playwright/e2e/settings/security-user-settings-tab.spec.ts
index 25bf1a9dbe..50db9d137c 100644
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -41,6 +41,16 @@ test.describe("Security user settings tab", () => {
             });
         });
 
+        test.only("should render the security tab", { tag: "@screenshot"}, async ({ app, page, user }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const tab = await app.settings.openUserSettings("Security");
+            await expect(tab).toMatchScreenshot("security-settings-tab.png", { mask: [
+                // Contains IM name.
+                tab.locator("#mx_SetIntegrationManager_BodyText"),
+                tab.locator("#mx_SetIntegrationManager_ManagerName"),
+            ]});
+        });
+
         test("should be able to set an ID server", async ({ app, context, user, page }) => {
             const tab = await app.settings.openUserSettings("Security");
 
diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
new file mode 100644
index 0000000000..3185d214a4
Binary files /dev/null and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ
diff --git a/src/components/views/settings/SetIntegrationManager.tsx b/src/components/views/settings/SetIntegrationManager.tsx
index cea0df9d94..d47a70a9f0 100644
--- a/src/components/views/settings/SetIntegrationManager.tsx
+++ b/src/components/views/settings/SetIntegrationManager.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
-import { SettingsToggleInput } from "@vector-im/compound-web";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
@@ -66,14 +66,14 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
         if (!SettingsStore.getValue(UIFeature.Widgets)) return null;
 
         return (
-            <div className="mx_SetIntegrationManager" data-testid="mx_SetIntegrationManager">
+            <Form.Root onSubmit={(evt) => {evt.preventDefault(); evt.stopPropagation();}} className="mx_SetIntegrationManager" data-testid="mx_SetIntegrationManager">
                 <div className="mx_SettingsFlag">
                     <div className="mx_SetIntegrationManager_heading_manager">
                         <Heading size="3">{_t("integration_manager|manage_title")}</Heading>
                         <Heading size="4">{managerName}</Heading>
                     </div>
                 </div>
-                <SettingsSubsectionText>{bodyText}</SettingsSubsectionText>
+                <SettingsSubsectionText id="mx_SetIntegrationManager_BodyText">{bodyText}</SettingsSubsectionText>
                 <SettingsSubsectionText>{_t("integration_manager|explainer")}</SettingsSubsectionText>
                 <SettingsToggleInput
                     name="enable_im"
@@ -81,7 +81,7 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
                     checked={this.state.provisioningEnabled}
                     onChange={this.onProvisioningToggled}
                 />
-            </div>
+            </Form.Root>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
index ee6104ba9f..e8d645c6a1 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
@@ -356,19 +356,21 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
 
         return (
             <SettingsTab>
-                <Form.Root onSubmit={(evt) => {evt.preventDefault(); evt.stopPropagation();}}>
                     {warning}
                     <SetIntegrationManager />
-                    <SettingsSection heading={_t("settings|security|encryption_section")}>
-                        {secureBackup}
-                        {eventIndex}
-                    </SettingsSection>
+                    <Form.Root onSubmit={(evt) => {evt.preventDefault(); evt.stopPropagation();}}>
+                        <SettingsSection heading={_t("settings|security|encryption_section")}>
+                            {secureBackup}
+                            {eventIndex}
+                        </SettingsSection>
+                    </Form.Root>
                     <SettingsSection heading={_t("common|privacy")}>
                         <DiscoverySettings />
-                        {posthogSection}
+                        <Form.Root onSubmit={(evt) => {evt.preventDefault(); evt.stopPropagation();}}>
+                            {posthogSection}
+                        </Form.Root>
                     </SettingsSection>
                     {advancedSection}
-                </Form.Root>
             </SettingsTab>
         );
     }