diff --git a/pages/admin/settings/audit(default).phtml b/pages/admin/settings/audit(default).phtml
index 5e76b47..b80f581 100644
--- a/pages/admin/settings/audit(default).phtml
+++ b/pages/admin/settings/audit(default).phtml
@@ -46,37 +46,26 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
     require templatePath('partials/app-details-titlebar.phtml');
     ?>
 
-    <form id="settings-audit-form" method="post" data-details-storage="settings-audit-details-v1" data-standard-detail-form="1">
-      <details class="app-details-card" name="settings-audit-system" data-details-key="settings-audit-system" open>
-        <summary>
-          <span class="app-details-card-summary-title"><?php e(t('System audit')); ?></span>
-          <span class="app-details-card-summary-meta">
-            <span class="badge" data-variant="neutral"><?php e($systemAuditEnabled ? t('Enabled') : t('Disabled')); ?></span>
-          </span>
-        </summary>
-        <div class="app-details-card-container">
-          <blockquote data-variant="info">
-            <small><?php e(t('System audit controls whether security events are logged and how long they are kept.')); ?></small>
-          </blockquote>
-          <label class="app-field">
-            <input type="checkbox" name="system_audit_enabled" value="1" <?php e($systemAuditEnabled ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
-            <span><?php e(t('Enable system audit log')); ?></span>
-          </label>
+    <form id="settings-audit-form" method="post" data-standard-detail-form="1">
+      <div data-settings-audit-root>
+        <label class="app-field">
+          <input type="checkbox" role="switch" name="system_audit_enabled" value="1"
+            data-audit-enabled-toggle
+            <?php e($systemAuditEnabled ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
+          <span><?php e(t('Enable system audit log')); ?></span>
+        </label>
+        <div data-audit-when-enabled <?php e($systemAuditEnabled ? '' : 'hidden'); ?>>
           <hr>
           <label class="app-field">
             <span><?php e(t('Retention (days)')); ?></span>
-            <input
-              type="number"
-              name="system_audit_retention_days"
+            <input type="number" name="system_audit_retention_days"
               value="<?php e((string) $systemAuditRetentionDays); ?>"
-              min="30"
-              max="1095"
-              step="1"
+              min="30" max="1095" step="1"
               <?php e($readonlyAttr); ?>>
             <small><?php e(t($systemAuditRetentionDaysDesc)); ?></small>
           </label>
         </div>
-      </details>
+      </div>
 
       <?php Session::getCsrfInput(); ?>
     </form>
diff --git a/tests/Architecture/FrontendRuntimeContractSupport.php b/tests/Architecture/FrontendRuntimeContractSupport.php
index 357f48c..65a89d5 100644
--- a/tests/Architecture/FrontendRuntimeContractSupport.php
+++ b/tests/Architecture/FrontendRuntimeContractSupport.php
@@ -27,6 +27,7 @@ trait FrontendRuntimeContractSupport
             'web/js/components/app-custom-field-options-toggle.js',
             'web/js/components/app-tenant-sso-toggle.js',
             'web/js/components/app-settings-telemetry.js',
+            'web/js/components/app-settings-audit.js',
             'web/js/components/app-standard-detail-page.js',
             'web/js/components/app-auto-submit.js',
             'modules/bookmarks/web/js/components/app-bookmark-save.js',
diff --git a/web/js/app-init.js b/web/js/app-init.js
index 497c25e..cc5aee9 100644
--- a/web/js/app-init.js
+++ b/web/js/app-init.js
@@ -20,6 +20,7 @@ import { initCustomFieldOptionsToggle } from './components/app-custom-field-opti
 import { initTenantSsoToggle } from './components/app-tenant-sso-toggle.js';
 import { initTenantLdapToggle } from './components/app-tenant-ldap-toggle.js';
 import { initTelemetrySettings } from './components/app-settings-telemetry.js';
+import { initSettingsAudit } from './components/app-settings-audit.js';
 import { initStandardDetailPages } from './components/app-standard-detail-page.js';
 import { initAutoSubmit } from './components/app-auto-submit.js';
 import { initTabs } from './components/app-tabs.js';
@@ -196,6 +197,10 @@ const bootRuntime = async () => {
     scope: 'global',
     configPath: 'components.settingsTelemetry',
   });
+  runtime.register('settings-audit', initSettingsAudit, {
+    scope: 'global',
+    configPath: 'components.settingsAudit',
+  });
   runtime.register('auto-submit', initAutoSubmit, {
     scope: 'global',
     configPath: 'components.autoSubmit',
diff --git a/web/js/components/app-settings-audit.js b/web/js/components/app-settings-audit.js
new file mode 100644
index 0000000..214ef5f
--- /dev/null
+++ b/web/js/components/app-settings-audit.js
@@ -0,0 +1,24 @@
+/**
+ * Shows/hides audit retention field based on the audit-enabled toggle.
+ */
+import { syncControlState, createConditionalToggleInit } from '../core/app-conditional-controls.js';
+
+const initRoot = (root) => {
+  const enabledInput = root.querySelector('[data-audit-enabled-toggle]');
+  const dependent = root.querySelector('[data-audit-when-enabled]');
+  if (!(enabledInput instanceof HTMLInputElement) || !(dependent instanceof HTMLElement)) {
+    return null;
+  }
+  const sync = () => syncControlState(dependent, enabledInput.checked);
+  enabledInput.addEventListener('change', sync);
+  sync();
+  return () => {
+    enabledInput.removeEventListener('change', sync);
+  };
+};
+
+export const initSettingsAudit = createConditionalToggleInit({
+  rootSelector: '[data-settings-audit-root]',
+  boundKey: 'settingsAuditBound',
+  initRoot,
+});