diff --git a/e2e/mock-api.mjs b/e2e/mock-api.mjs
index f0d2c64..fdcb5b1 100644
--- a/e2e/mock-api.mjs
+++ b/e2e/mock-api.mjs
@@ -429,18 +429,7 @@ let preAuthKeys;
 let apiKeys;
 let userNodeMap;
 
-function resetState() {
-  _nodeId = 0;
-  users = structuredClone(baseUsers);
-  nodes = createNodes(users);
-  preAuthKeys = createPreAuthKeys(users);
-  apiKeys = createApiKeys();
-  userNodeMap = buildUserNodeMap(nodes, users);
-}
-
-resetState();
-
-const policy = JSON.stringify({
+const defaultPolicy = {
   groups: {
     'group:admin':   ['alice', 'bob'],
     'group:dev':     ['carol', 'dave', 'eve', 'frank.garcia', 'grace'],
@@ -476,7 +465,21 @@ const policy = JSON.stringify({
     { action: 'accept', src: ['group:admin'], dst: ['*'], users: ['root', 'headscale-user'] },
     { action: 'accept', src: ['group:dev'],   dst: ['tag:server'], users: ['deploy'] },
   ],
-});
+};
+
+let policyDocumentText = JSON.stringify(defaultPolicy);
+
+function resetState() {
+  _nodeId = 0;
+  users = structuredClone(baseUsers);
+  nodes = createNodes(users);
+  preAuthKeys = createPreAuthKeys(users);
+  apiKeys = createApiKeys();
+  userNodeMap = buildUserNodeMap(nodes, users);
+  policyDocumentText = JSON.stringify(defaultPolicy);
+}
+
+resetState();
 
 const versionInfo = {
   version: 'v0.28.0',
@@ -569,7 +572,7 @@ const server = createServer((req, res) => {
     }
     if (path === '/api/v1/preauthkey') return json(res, { preAuthKeys });
     if (path === '/api/v1/apikey')     return json(res, { apiKeys });
-    if (path === '/api/v1/policy')     return json(res, { policy, updatedAt: new Date().toISOString() });
+    if (path === '/api/v1/policy')     return json(res, { policy: policyDocumentText, updatedAt: new Date().toISOString() });
     if (path === '/api/v1/health')     return json(res, healthInfo);
 
     // Single node GET: /api/v1/node/{id}
@@ -653,7 +656,24 @@ const server = createServer((req, res) => {
 
   // ── PUT endpoints ───────────────────────────────────────────────────────
   if (method === 'PUT') {
-    if (path === '/api/v1/policy') return json(res, { policy, updatedAt: new Date().toISOString() });
+    if (path === '/api/v1/policy') {
+      let body = '';
+      req.on('data', (chunk) => {
+        body += chunk;
+      });
+      req.on('end', () => {
+        try {
+          const parsed = JSON.parse(body);
+          if (typeof parsed.policy === 'string') {
+            policyDocumentText = parsed.policy;
+          }
+        } catch {
+          // Keep existing policy content when payload is invalid.
+        }
+        return json(res, { policy: policyDocumentText, updatedAt: new Date().toISOString() });
+      });
+      return;
+    }
   }
 
   // ── DELETE endpoints ────────────────────────────────────────────────────
diff --git a/e2e/policy-phase2.spec.ts b/e2e/policy-phase2.spec.ts
new file mode 100644
index 0000000..ecfb1da
--- /dev/null
+++ b/e2e/policy-phase2.spec.ts
@@ -0,0 +1,84 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const MOCK_URL = 'http://localhost:8081';
+const API_KEY = 'test-api-key';
+
+async function seedAuth(page: Page) {
+  await page.goto('/');
+  await page.evaluate(
+    ([url, key]) => {
+      localStorage.setItem('apiUrl', JSON.stringify(url));
+      localStorage.setItem('apiKey', JSON.stringify(key));
+      localStorage.setItem(
+        'apiKeyInfo',
+        JSON.stringify({
+          authorized: true,
+          expires: new Date(Date.now() + 86_400_000 * 90).toISOString(),
+          informedUnauthorized: false,
+          informedExpiringSoon: false,
+        }),
+      );
+    },
+    [MOCK_URL, API_KEY],
+  );
+  await page.reload();
+  await page.locator('[data-testid="app-shell"]').waitFor({ timeout: 10000 });
+}
+
+test.describe('policy builder phase 2', () => {
+  test.beforeEach(async ({ page }) => {
+    await seedAuth(page);
+  });
+
+  test('create and persist grants/nodeAttrs/randomizeClientPort', async ({ page }) => {
+    await page.goto('/acls/');
+
+    await page.getByRole('tab', { name: 'Grants' }).click();
+    await page.getByRole('button', { name: 'Create Grant' }).click();
+    await expect(page.getByRole('heading', { name: 'Grant #1' })).toBeVisible();
+    await page.getByRole('button', { name: 'Apply Taildrive preset' }).first().click();
+    await page.getByRole('button', { name: 'Apply capability form' }).first().click();
+
+    await page.getByRole('tab', { name: 'Node Attributes' }).click();
+    await page.getByRole('button', { name: 'Create Node Attribute Rule' }).click();
+    await expect(page.getByRole('heading', { name: 'Node Attribute #1' })).toBeVisible();
+    await page.getByRole('button', { name: 'drive:share' }).first().click();
+
+    await page.getByRole('tab', { name: 'Policy Settings' }).click();
+    await page.getByLabel('randomizeClientPort').check();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByRole('button', { name: 'Save Config' }).click();
+
+    await page.reload();
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    await expect(page.getByText('"randomizeClientPort": true')).toBeVisible();
+    await expect(page.getByText('"nodeAttrs"')).toBeVisible();
+    await expect(page.getByText('tailscale.com/cap/drive')).toBeVisible();
+  });
+
+  test('delete grant and persist deletion', async ({ page }) => {
+    await page.goto('/acls/');
+
+    await page.getByRole('tab', { name: 'Grants' }).click();
+    await page.getByRole('button', { name: 'Create Grant' }).click();
+    await page.getByRole('button', { name: 'Apply Taildrive preset' }).first().click();
+    await page.getByRole('button', { name: 'Apply capability form' }).first().click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByRole('button', { name: 'Save Config' }).click();
+
+    await page.getByRole('tab', { name: 'Grants' }).click();
+    await page.getByTestId('delete-button').first().click();
+    await page.getByTestId('confirm-delete').first().click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByRole('button', { name: 'Save Config' }).click();
+
+    await page.reload();
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    await expect(page.getByText('tailscale.com/cap/drive')).not.toBeVisible();
+  });
+});
diff --git a/src/routes/acls/+page.svelte b/src/routes/acls/+page.svelte
index 1361512..3948e7c 100644
--- a/src/routes/acls/+page.svelte
+++ b/src/routes/acls/+page.svelte
@@ -5,7 +5,10 @@
 	import RawMdiCodeJSON from '~icons/mdi/code-json';
 	import RawMdiConsole from '~icons/mdi/console';
 	import RawMdiDevices from '~icons/mdi/devices';
+	import RawMdiTune from '~icons/mdi/tune';
 	import RawMdiGroups from '~icons/mdi/account-group';
+	import RawMdiKeyChain from '~icons/mdi/key-chain-variant';
+	import RawMdiVectorPolyline from '~icons/mdi/vector-polyline';
 	import RawMdiSecurity from '~icons/mdi/security';
 	import RawMdiTag from '~icons/mdi/tag';
 
@@ -21,7 +24,10 @@
 	import Config from './Config.svelte';
 	import Groups from './Groups.svelte';
 	import Hosts from './Hosts.svelte';
+	import NodeAttrs from './NodeAttrs.svelte';
+	import PolicySettings from './PolicySettings.svelte';
 	import Policies from './Policies.svelte';
+	import Grants from './Grants.svelte';
 	import TagOwners from './TagOwners.svelte'
 	import SshRules from './SshRules.svelte';
 
@@ -37,6 +43,9 @@
 		{ name: 'tag-owners', title: 'Tag Owners', logo: RawMdiTag },
 		{ name: 'hosts', title: 'Hosts', logo: RawMdiDevices },
 		{ name: 'policies', title: 'Policies', logo: RawMdiSecurity },
+		{ name: 'grants', title: 'Grants', logo: RawMdiKeyChain },
+		{ name: 'node-attrs', title: 'Node Attributes', logo: RawMdiVectorPolyline },
+		{ name: 'policy-settings', title: 'Policy Settings', logo: RawMdiTune },
 		{ name: 'ssh', title: 'SSH', logo: RawMdiConsole },
 		{ name: 'config', title: 'Config', logo: RawMdiCodeJSON },
 	];
@@ -82,6 +91,12 @@
 				<Hosts bind:loading bind:acl />
 			{:else if tabs[tabSet].name == 'policies'}
 				<Policies bind:loading bind:acl />
+			{:else if tabs[tabSet].name == 'grants'}
+				<Grants bind:loading bind:acl />
+			{:else if tabs[tabSet].name == 'node-attrs'}
+				<NodeAttrs bind:loading bind:acl />
+			{:else if tabs[tabSet].name == 'policy-settings'}
+				<PolicySettings bind:loading bind:acl />
 			{:else if tabs[tabSet].name == 'ssh'}
 				<SshRules bind:loading bind:acl />
 			{:else if tabs[tabSet].name == 'config'}
diff --git a/src/routes/acls/Grants.svelte b/src/routes/acls/Grants.svelte
new file mode 100644
index 0000000..d950416
--- /dev/null
+++ b/src/routes/acls/Grants.svelte
@@ -0,0 +1,327 @@
+<script lang="ts">
+	import { getToastStore } from '@skeletonlabs/skeleton';
+	import MultiSelect from '$lib/parts/MultiSelect.svelte';
+	import Delete from '$lib/parts/Delete.svelte';
+	import type { PolicyBuilder } from '$lib/common/policy-builder';
+	import type { PolicyGrant } from '$lib/common/policy-types';
+	import { App } from '$lib/States.svelte';
+	import { deduplicate, toastError, toastSuccess } from '$lib/common/funcs';
+	import { debug } from '$lib/common/debug';
+
+	type CapabilityFormRow = {
+		id: string;
+		key: string;
+		value: string;
+	};
+
+	const ToastStore = getToastStore();
+
+	let { acl = $bindable(), loading = $bindable(false) }: { acl: PolicyBuilder; loading?: boolean } = $props();
+
+	const userNames = $derived(App.users.value.map((u) => (u.email ? u.email : u.name)).toSorted());
+	const principalOptions = $derived(
+		deduplicate([
+			'*',
+			...userNames,
+			...acl.getGroupNames(true),
+			...acl.getTagNames(true),
+			...acl.getHostNames(),
+		]),
+	);
+	const viaTagOptions = $derived(deduplicate(acl.getTagNames(true)));
+
+	let capabilityForms = $state<Record<number, CapabilityFormRow[]>>({});
+	let capabilityRowCounter = $state(0);
+
+	const grants = $derived.by(() => {
+		const list = acl.grants ?? [];
+		for (const grant of list) {
+			grant.ip ??= [];
+			grant.srcPosture ??= [];
+			grant.via ??= [];
+		}
+		return list;
+	});
+
+	$effect(() => {
+		const list = grants;
+		const next: Record<number, CapabilityFormRow[]> = { ...capabilityForms };
+		let changed = false;
+
+		for (let idx = 0; idx < list.length; idx += 1) {
+			if (next[idx] === undefined) {
+				next[idx] = rowsFromGrant(list[idx]);
+				changed = true;
+			}
+		}
+
+		for (const k of Object.keys(next)) {
+			const idx = Number.parseInt(k, 10);
+			if (idx >= list.length) {
+				delete next[idx];
+				changed = true;
+			}
+		}
+
+		if (changed) {
+			capabilityForms = next;
+		}
+	});
+
+	function currentGrants(): PolicyGrant[] {
+		return acl.grants ?? [];
+	}
+
+	function updateGrants(next: PolicyGrant[]) {
+		acl.grants = next;
+	}
+
+	function addGrant() {
+		const next = [
+			...currentGrants(),
+			{ src: ['*'], dst: ['*'], ip: [], srcPosture: [], via: [] } satisfies PolicyGrant,
+		];
+		const idx = next.length - 1;
+		capabilityForms[idx] = [{ id: `cap-${capabilityRowCounter++}`, key: '', value: '[]' }];
+		updateGrants(next);
+		toastSuccess(`Added grant #${next.length}`, ToastStore);
+	}
+
+	function deleteGrant(idx: number) {
+		const next = [...currentGrants()];
+		next.splice(idx, 1);
+		updateGrants(next);
+		reindexCapabilityFormsAfterDelete(idx);
+	}
+
+	function reindexCapabilityFormsAfterDelete(deletedIdx: number) {
+		const next: Record<number, CapabilityFormRow[]> = {};
+		for (const [k, v] of Object.entries(capabilityForms)) {
+			const idx = Number.parseInt(k, 10);
+			if (idx < deletedIdx) {
+				next[idx] = v;
+			} else if (idx > deletedIdx) {
+				next[idx - 1] = v;
+			}
+		}
+		capabilityForms = next;
+	}
+
+	function removeItem(items: string[], item: string) {
+		const idx = items.findIndex((v) => v === item);
+		if (idx >= 0) {
+			items.splice(idx, 1);
+		}
+	}
+
+	function addTaildrivePreset(idx: number) {
+		const grant = currentGrants()[idx];
+		if (grant === undefined) {
+			return;
+		}
+		if (grant.app === undefined) {
+			grant.app = {};
+		}
+		grant.app['tailscale.com/cap/drive'] = [{ shares: ['*'] }, { access: ['*'] }];
+		capabilityForms[idx] = [
+			{
+				id: `cap-${capabilityRowCounter++}`,
+				key: 'tailscale.com/cap/drive',
+				value: JSON.stringify([{ shares: ['*'] }, { access: ['*'] }], null, 2),
+			},
+		];
+		updateGrants([...currentGrants()]);
+		toastSuccess('Applied Taildrive app preset', ToastStore);
+	}
+
+	function rowsFromGrant(grant: PolicyGrant): CapabilityFormRow[] {
+		const rows: CapabilityFormRow[] = Object.entries(grant.app ?? {}).map(([key, value]) => ({
+			id: `cap-${capabilityRowCounter++}`,
+			key,
+			value: JSON.stringify(value, null, 2),
+		}));
+		return rows.length > 0
+			? rows
+			: [{ id: `cap-${capabilityRowCounter++}`, key: '', value: '[]' }];
+	}
+
+	function addCapabilityRow(idx: number) {
+		const rows = capabilityForms[idx] ?? [];
+		rows.push({ id: `cap-${capabilityRowCounter++}`, key: '', value: '[]' });
+		capabilityForms[idx] = rows;
+	}
+
+	function removeCapabilityRow(idx: number, id: string) {
+		const rows = capabilityForms[idx] ?? [];
+		capabilityForms[idx] = rows.filter((row) => row.id !== id);
+	}
+
+	function applyCapabilityForm(idx: number) {
+		const grant = currentGrants()[idx];
+		if (grant === undefined) {
+			return;
+		}
+		try {
+			const rows = capabilityForms[idx] ?? [];
+			const normalised: Record<string, unknown[]> = {};
+			for (const row of rows) {
+				const key = row.key.trim();
+				if (key.length === 0) {
+					continue;
+				}
+				const value = JSON.parse(row.value) as unknown;
+				if (!Array.isArray(value)) {
+					throw new Error(`Capability '${key}' must be a JSON array`);
+				}
+				if (Object.prototype.hasOwnProperty.call(normalised, key)) {
+					throw new Error(`Duplicate capability key '${key}'`);
+				}
+				normalised[key] = value;
+			}
+			grant.app = Object.keys(normalised).length > 0 ? normalised : undefined;
+			updateGrants([...currentGrants()]);
+			toastSuccess('Updated grant app capabilities', ToastStore);
+		} catch (err) {
+			if (err instanceof Error) {
+				toastError('', ToastStore, err);
+			}
+			debug(err);
+		}
+	}
+
+	function validateVia(idx: number) {
+		const grant = currentGrants()[idx];
+		if (grant?.via === undefined) {
+			return;
+		}
+		const invalid = grant.via.filter((item) => !item.startsWith('tag:'));
+		if (invalid.length > 0) {
+			toastError('Via restrictions only support tag selectors (tag:...)', ToastStore);
+			grant.via = grant.via.filter((item) => item.startsWith('tag:'));
+			updateGrants([...currentGrants()]);
+		}
+	}
+</script>
+
+
+<div class="flex items-center mr-2 ml-0 pt-2">
+	<div class="w-full md:w-8/12 lg:w-9/12 xl:w-8/12 2xl:w-6/12 space-y-3">
+	<div class="mb-4 flex flex-row space-x-2">
+		<button class="btn-sm rounded-md variant-filled-success" onclick={addGrant} data-testid="grant-add-btn">Create Grant</button>
+	</div>
+
+	{#if grants.length === 0}
+		<div class="rounded-md border border-surface-300-700-token bg-surface-100-800-token p-4 text-sm" data-testid="grant-empty-state">
+			No grants configured yet. Create one to define modern policy access rules.
+		</div>
+	{/if}
+
+	{#each grants as grant, idx}
+		<div class="grid grid-cols-1 bg-white dark:bg-slate-800 rounded-md p-5">
+			<div class="mb-3 flex items-center justify-between">
+				<h3 class="font-mono text-sm">Grant #{idx + 1}</h3>
+				<Delete func={() => deleteGrant(idx)} disabled={loading} />
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 lg:grid-cols-2" data-testid={`grant-card-${idx}`}>
+				<div>
+					<label class="label" for={`grant-src-${idx}-select-item`}>src</label>
+					<MultiSelect
+						id={`grant-src-${idx}`}
+						items={grant.src}
+						options={principalOptions}
+						placeholder="Select source selectors"
+						onItemClick={(item) => removeItem(grant.src, item)}
+					/>
+				</div>
+				<div>
+					<label class="label" for={`grant-dst-${idx}-select-item`}>dst</label>
+					<MultiSelect
+						id={`grant-dst-${idx}`}
+						items={grant.dst}
+						options={principalOptions}
+						placeholder="Select destination selectors"
+						onItemClick={(item) => removeItem(grant.dst, item)}
+					/>
+				</div>
+				<div>
+					<label class="label" for={`grant-ip-${idx}-select-item`}>ip (optional)</label>
+					<MultiSelect
+						id={`grant-ip-${idx}`}
+						items={grant.ip ?? []}
+						placeholder="Add CIDR or IP"
+						onItemClick={(item) => removeItem(grant.ip ?? [], item)}
+					/>
+				</div>
+				<div>
+					<label class="label" for={`grant-posture-${idx}-select-item`}>srcPosture (optional)</label>
+					<MultiSelect
+						id={`grant-posture-${idx}`}
+						items={grant.srcPosture ?? []}
+						placeholder="Add posture selector"
+						onItemClick={(item) => removeItem(grant.srcPosture ?? [], item)}
+					/>
+				</div>
+				<div class="lg:col-span-2">
+					<div class="flex items-center justify-between">
+						<label class="label" for={`grant-via-${idx}-select-item`}>via (tags only, optional)</label>
+						<button class="btn btn-xs variant-soft-primary rounded-md" onclick={() => validateVia(idx)}>Validate</button>
+					</div>
+					<MultiSelect
+						id={`grant-via-${idx}`}
+						items={grant.via ?? []}
+						options={viaTagOptions}
+						placeholder="Select tag:... selectors"
+						onItemClick={(item) => removeItem(grant.via ?? [], item)}
+					/>
+					<p class="mt-1 text-xs opacity-80">Hint: via currently supports tag selectors only (for example `tag:relay`).</p>
+				</div>
+				<div class="lg:col-span-2" data-testid={`grant-app-editor-${idx}`}>
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label">app capabilities (optional)</label>
+						<button class="btn btn-xs rounded-md variant-soft-secondary" onclick={() => addTaildrivePreset(idx)} data-testid={`grant-taildrive-preset-${idx}`}>
+							Apply Taildrive preset
+						</button>
+					</div>
+					<div class="space-y-3">
+						{#each (capabilityForms[idx] ?? []) as row (row.id)}
+							<div class="rounded-md border border-surface-300-700-token p-3">
+								<div class="mb-2 grid grid-cols-12 gap-2 items-end">
+									<div class="col-span-10">
+										<label class="label" for={`grant-app-key-${idx}-${row.id}`}>Capability key</label>
+										<input
+											id={`grant-app-key-${idx}-${row.id}`}
+											class="input rounded-md w-full"
+											placeholder="tailscale.com/cap/drive"
+											bind:value={row.key}
+										/>
+									</div>
+									<div class="col-span-2 text-right">
+										<button
+											class="btn btn-xs rounded-md variant-soft-error"
+											onclick={() => removeCapabilityRow(idx, row.id)}
+										>
+											Remove
+										</button>
+									</div>
+								</div>
+								<label class="label" for={`grant-app-value-${idx}-${row.id}`}>Capability value (JSON array)</label>
+								<textarea
+									id={`grant-app-value-${idx}-${row.id}`}
+									class="textarea rounded-md w-full min-h-24"
+									bind:value={row.value}
+								></textarea>
+							</div>
+						{/each}
+					</div>
+					<div class="mt-2">
+						<button class="btn btn-xs rounded-md variant-soft-tertiary mr-2" onclick={() => addCapabilityRow(idx)}>Add capability</button>
+						<button class="btn btn-xs rounded-md variant-soft-primary" onclick={() => applyCapabilityForm(idx)} data-testid={`grant-apply-app-${idx}`}>Apply capability form</button>
+					</div>
+					<p class="mt-1 text-xs opacity-80">Each capability key maps to a JSON array value. Use the Taildrive preset for a safe starter payload.</p>
+				</div>
+			</div>
+		</div>
+	{/each}
+	</div>
+</div>
diff --git a/src/routes/acls/NodeAttrs.svelte b/src/routes/acls/NodeAttrs.svelte
new file mode 100644
index 0000000..f845a87
--- /dev/null
+++ b/src/routes/acls/NodeAttrs.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { getToastStore } from '@skeletonlabs/skeleton';
+	import MultiSelect from '$lib/parts/MultiSelect.svelte';
+	import Delete from '$lib/parts/Delete.svelte';
+	import type { PolicyBuilder } from '$lib/common/policy-builder';
+	import type { PolicyNodeAttr } from '$lib/common/policy-types';
+	import { App } from '$lib/States.svelte';
+	import { deduplicate, toastSuccess } from '$lib/common/funcs';
+
+	const ToastStore = getToastStore();
+
+	let { acl = $bindable(), loading = $bindable(false) }: { acl: PolicyBuilder; loading?: boolean } = $props();
+
+	const userNames = $derived(App.users.value.map((u) => (u.email ? u.email : u.name)).toSorted());
+	const targetOptions = $derived(
+		deduplicate([
+			...userNames,
+			...acl.getGroupNames(true),
+			...acl.getTagNames(true),
+			...acl.getHostNames(),
+		]),
+	);
+
+	const nodeAttrs = $derived(acl.nodeAttrs ?? []);
+
+	function currentNodeAttrs(): PolicyNodeAttr[] {
+		return acl.nodeAttrs ?? [];
+	}
+
+	function updateNodeAttrs(next: PolicyNodeAttr[]) {
+		acl.nodeAttrs = next;
+	}
+
+	function addNodeAttr() {
+		const next = [...currentNodeAttrs(), { target: ['*'], attr: [] } satisfies PolicyNodeAttr];
+		updateNodeAttrs(next);
+		toastSuccess(`Added node attribute rule #${next.length}`, ToastStore);
+	}
+
+	function deleteNodeAttr(idx: number) {
+		const next = [...currentNodeAttrs()];
+		next.splice(idx, 1);
+		updateNodeAttrs(next);
+	}
+
+	function removeItem(items: string[], item: string) {
+		const idx = items.findIndex((v) => v === item);
+		if (idx >= 0) {
+			items.splice(idx, 1);
+		}
+	}
+
+	function addPreset(idx: number, preset: 'drive:share' | 'drive:access') {
+		const nodeAttr = currentNodeAttrs()[idx];
+		if (nodeAttr === undefined) {
+			return;
+		}
+		if (!nodeAttr.attr.includes(preset)) {
+			nodeAttr.attr.push(preset);
+			updateNodeAttrs([...currentNodeAttrs()]);
+		}
+	}
+</script>
+
+<div class="flex items-center mr-2 ml-0 pt-2">
+	<div class="w-full md:w-8/12 lg:w-9/12 xl:w-8/12 2xl:w-6/12 space-y-3">
+	<div class="mb-4 flex flex-row space-x-2">
+		<button class="btn-sm rounded-md variant-filled-success" onclick={addNodeAttr} data-testid="nodeattr-add-btn">Create Node Attribute Rule</button>
+	</div>
+
+	{#if nodeAttrs.length === 0}
+		<div class="rounded-md border border-surface-300-700-token bg-surface-100-800-token p-4 text-sm" data-testid="nodeattr-empty-state">
+			No node attributes configured yet. Add one to target selectors and attach capabilities.
+		</div>
+	{/if}
+
+	{#each nodeAttrs as nodeAttr, idx}
+		<div class="grid grid-cols-1 bg-white dark:bg-slate-800 rounded-md p-5">
+			<div class="mb-3 flex items-center justify-between">
+				<h3 class="font-mono text-sm">Node Attribute #{idx + 1}</h3>
+				<Delete func={() => deleteNodeAttr(idx)} disabled={loading} />
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 lg:grid-cols-2" data-testid={`nodeattr-card-${idx}`}>
+				<div>
+					<label class="label" for={`nodeattr-target-${idx}-select-item`}>target</label>
+					<MultiSelect
+						id={`nodeattr-target-${idx}`}
+						items={nodeAttr.target}
+						options={targetOptions}
+						placeholder="Select users/groups/tags/hosts"
+						onItemClick={(item) => removeItem(nodeAttr.target, item)}
+					/>
+				</div>
+				<div>
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label" for={`nodeattr-attr-${idx}-select-item`}>attr</label>
+						<div class="flex space-x-1">
+							<button class="btn btn-xs rounded-md variant-soft-secondary" onclick={() => addPreset(idx, 'drive:share')} data-testid={`nodeattr-drive-share-${idx}`}>drive:share</button>
+							<button class="btn btn-xs rounded-md variant-soft-secondary" onclick={() => addPreset(idx, 'drive:access')} data-testid={`nodeattr-drive-access-${idx}`}>drive:access</button>
+						</div>
+					</div>
+					<MultiSelect
+						id={`nodeattr-attr-${idx}`}
+						items={nodeAttr.attr}
+						placeholder="Add attributes"
+						onItemClick={(item) => removeItem(nodeAttr.attr, item)}
+					/>
+				</div>
+			</div>
+		</div>
+	{/each}
+	</div>
+</div>
diff --git a/src/routes/acls/PolicySettings.svelte b/src/routes/acls/PolicySettings.svelte
new file mode 100644
index 0000000..6d8d80a
--- /dev/null
+++ b/src/routes/acls/PolicySettings.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { PolicyBuilder } from '$lib/common/policy-builder';
+
+	let { acl = $bindable(), loading = $bindable(false) }: { acl: PolicyBuilder; loading?: boolean } = $props();
+
+	const randomizeClientPort = $derived.by(() => {
+		return {
+			get enabled() {
+				return acl.getRandomizeClientPort() === true;
+			},
+			set enabled(value: boolean) {
+				acl.setRandomizeClientPort(value ? true : undefined);
+			},
+		};
+	});
+</script>
+
+<div class="flex items-center mr-2 ml-0 pt-2">
+	<div class="w-full md:w-8/12 lg:w-9/12 xl:w-8/12 2xl:w-6/12">
+	<div class="grid grid-cols-1 bg-white dark:bg-slate-800 rounded-md p-5">
+		<h3 class="font-mono mb-2">Top-level policy settings</h3>
+		<div class="flex items-start space-x-3">
+			<input
+				id="randomize-client-port"
+				type="checkbox"
+				class="checkbox mt-1"
+				bind:checked={randomizeClientPort.enabled}
+				disabled={loading}
+				data-testid="randomize-client-port-toggle"
+			/>
+			<div>
+				<label for="randomize-client-port" class="font-semibold">randomizeClientPort</label>
+				<p class="text-sm opacity-80">
+					Enable random client source ports for outbound traffic.
+				</p>
+			</div>
+		</div>
+	</div>
+	</div>
+</div>