diff --git a/backend/src/__tests__/docker-controller.test.ts b/backend/src/__tests__/docker-controller.test.ts
index 3ef6fb5b..bc8a2d43 100644
--- a/backend/src/__tests__/docker-controller.test.ts
+++ b/backend/src/__tests__/docker-controller.test.ts
@@ -555,3 +555,52 @@ describe('DockerController - inspectNetwork edge cases', () => {
     await expect(dc.inspectNetwork('any-id')).rejects.toThrow('Cannot connect to Docker daemon');
   });
 });
+
+// --- createNetwork validation --------------------------------------------------
+
+describe('createNetwork', () => {
+  it('rejects empty network name', async () => {
+    const dc = DockerController.getInstance(1);
+    await expect(dc.createNetwork({ Name: '' })).rejects.toThrow('Invalid network name');
+  });
+
+  it('rejects names with invalid characters', async () => {
+    const dc = DockerController.getInstance(1);
+    await expect(dc.createNetwork({ Name: 'net work' })).rejects.toThrow('Invalid network name');
+    await expect(dc.createNetwork({ Name: '../escape' })).rejects.toThrow('Invalid network name');
+    await expect(dc.createNetwork({ Name: 'net;rm' })).rejects.toThrow('Invalid network name');
+  });
+
+  it('accepts valid network names and passes through to Docker', async () => {
+    mockDocker.createNetwork.mockResolvedValue({ id: 'new-net-id' });
+    const dc = DockerController.getInstance(1);
+    const result = await dc.createNetwork({ Name: 'my-network_v2' });
+    expect(result.id).toBe('new-net-id');
+    expect(mockDocker.createNetwork).toHaveBeenCalledWith({ Name: 'my-network_v2' });
+  });
+});
+
+// --- removeContainers mixed results -------------------------------------------
+
+describe('removeContainers', () => {
+  it('returns mixed results when some removals fail', async () => {
+    mockDocker.getContainer.mockImplementation((id: string) => {
+      if (id === 'fail-id') {
+        return { remove: vi.fn().mockRejectedValue(new Error('no such container')) };
+      }
+      return { remove: vi.fn().mockResolvedValue(undefined) };
+    });
+
+    const dc = DockerController.getInstance(1);
+    const results = await dc.removeContainers(['ok-id-000000', 'fail-id']);
+    expect(results).toHaveLength(2);
+    expect(results[0]).toEqual({ id: 'ok-id-000000', success: true });
+    expect(results[1]).toMatchObject({ id: 'fail-id', success: false });
+  });
+
+  it('returns empty array for empty input', async () => {
+    const dc = DockerController.getInstance(1);
+    const results = await dc.removeContainers([]);
+    expect(results).toEqual([]);
+  });
+});
diff --git a/backend/src/__tests__/validation.test.ts b/backend/src/__tests__/validation.test.ts
index cec04c17..0ce3d954 100644
--- a/backend/src/__tests__/validation.test.ts
+++ b/backend/src/__tests__/validation.test.ts
@@ -1,5 +1,8 @@
 import { describe, it, expect } from 'vitest';
-import { isValidStackName, isValidRemoteUrl, isPathWithinBase } from '../utils/validation';
+import {
+  isValidStackName, isValidRemoteUrl, isPathWithinBase,
+  isValidCidr, isValidIPv4, isValidDockerResourceId,
+} from '../utils/validation';
 
 // ─── isValidStackName ────────────────────────────────────────────────────────
 
@@ -122,3 +125,103 @@ describe('isPathWithinBase', () => {
     expect(isPathWithinBase('/app/compose/other-stack/.env', '/app/compose/mystack')).toBe(false);
   });
 });
+
+// --- isValidCidr ---------------------------------------------------------------
+
+describe('isValidCidr', () => {
+  it('accepts valid CIDR notation', () => {
+    expect(isValidCidr('10.0.0.0/24')).toBe(true);
+    expect(isValidCidr('172.16.0.0/16')).toBe(true);
+    expect(isValidCidr('192.168.1.0/28')).toBe(true);
+    expect(isValidCidr('0.0.0.0/0')).toBe(true);
+    expect(isValidCidr('255.255.255.255/32')).toBe(true);
+  });
+
+  it('rejects missing prefix', () => {
+    expect(isValidCidr('10.0.0.0')).toBe(false);
+  });
+
+  it('rejects prefix out of range', () => {
+    expect(isValidCidr('10.0.0.0/33')).toBe(false);
+    expect(isValidCidr('10.0.0.0/99')).toBe(false);
+  });
+
+  it('rejects octet out of range', () => {
+    expect(isValidCidr('256.0.0.0/24')).toBe(false);
+    expect(isValidCidr('10.999.0.0/16')).toBe(false);
+  });
+
+  it('rejects empty and garbage input', () => {
+    expect(isValidCidr('')).toBe(false);
+    expect(isValidCidr('not-a-cidr')).toBe(false);
+    expect(isValidCidr('10.0.0/24')).toBe(false);
+  });
+});
+
+// --- isValidIPv4 ---------------------------------------------------------------
+
+describe('isValidIPv4', () => {
+  it('accepts valid IPv4 addresses', () => {
+    expect(isValidIPv4('10.0.0.1')).toBe(true);
+    expect(isValidIPv4('192.168.1.1')).toBe(true);
+    expect(isValidIPv4('0.0.0.0')).toBe(true);
+    expect(isValidIPv4('255.255.255.255')).toBe(true);
+  });
+
+  it('rejects incomplete addresses', () => {
+    expect(isValidIPv4('10.0.0')).toBe(false);
+    expect(isValidIPv4('10')).toBe(false);
+  });
+
+  it('rejects octet out of range', () => {
+    expect(isValidIPv4('256.1.2.3')).toBe(false);
+    expect(isValidIPv4('10.0.0.999')).toBe(false);
+  });
+
+  it('rejects CIDR notation (use isValidCidr instead)', () => {
+    expect(isValidIPv4('10.0.0.1/24')).toBe(false);
+  });
+
+  it('rejects empty and garbage input', () => {
+    expect(isValidIPv4('')).toBe(false);
+    expect(isValidIPv4('not-an-ip')).toBe(false);
+  });
+});
+
+// --- isValidDockerResourceId ---------------------------------------------------
+
+describe('isValidDockerResourceId', () => {
+  it('accepts 12-character hex IDs (short form)', () => {
+    expect(isValidDockerResourceId('a1b2c3d4e5f6')).toBe(true);
+    expect(isValidDockerResourceId('AABB00112233')).toBe(true);
+  });
+
+  it('accepts 64-character hex IDs (full SHA256)', () => {
+    expect(isValidDockerResourceId('a'.repeat(64))).toBe(true);
+    expect(isValidDockerResourceId('abcdef0123456789'.repeat(4))).toBe(true);
+  });
+
+  it('accepts mixed-case hex of valid lengths', () => {
+    expect(isValidDockerResourceId('aAbBcCdDeEfF')).toBe(true);
+  });
+
+  it('rejects IDs shorter than 12 characters', () => {
+    expect(isValidDockerResourceId('a1b2c3d4e5f')).toBe(false);
+    expect(isValidDockerResourceId('')).toBe(false);
+  });
+
+  it('rejects IDs longer than 64 characters', () => {
+    expect(isValidDockerResourceId('a'.repeat(65))).toBe(false);
+  });
+
+  it('rejects non-hex characters', () => {
+    expect(isValidDockerResourceId('g1b2c3d4e5f6')).toBe(false);
+    expect(isValidDockerResourceId('hello-world!')).toBe(false);
+  });
+
+  it('rejects IDs with slashes, dots, or spaces', () => {
+    expect(isValidDockerResourceId('a1b2c3/d4e5f6')).toBe(false);
+    expect(isValidDockerResourceId('a1b2c3.d4e5f6')).toBe(false);
+    expect(isValidDockerResourceId('a1b2c3 d4e5f6')).toBe(false);
+  });
+});
diff --git a/backend/src/index.ts b/backend/src/index.ts
index edfc297b..01cc4f44 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -62,7 +62,7 @@ import { getErrorMessage } from './utils/errors';
 import SelfUpdateService from './services/SelfUpdateService';
 import semver from 'semver';
 import { CronExpressionParser } from 'cron-parser';
-import { isValidStackName, isValidRemoteUrl, isPathWithinBase } from './utils/validation';
+import { isValidStackName, isValidRemoteUrl, isPathWithinBase, isValidCidr, isValidIPv4, isValidDockerResourceId } from './utils/validation';
 import YAML from 'yaml';
 import { promises as fsPromises } from 'fs';
 
@@ -5414,8 +5414,15 @@ app.post('/api/system/prune/orphans', async (req: Request, res: Response) => {
     if (!Array.isArray(containerIds)) {
       return res.status(400).json({ error: 'containerIds must be an array' });
     }
+    const invalidIds = containerIds.filter((id: unknown) => typeof id !== 'string' || !isValidDockerResourceId(id));
+    if (invalidIds.length > 0) {
+      return res.status(400).json({ error: 'One or more container IDs have an invalid format' });
+    }
+    console.log(`[Resources] Prune orphans: ${containerIds.length} container(s) requested`);
     const dockerController = DockerController.getInstance(req.nodeId);
     const results = await dockerController.removeContainers(containerIds);
+    const succeeded = results.filter((r: { success: boolean }) => r.success).length;
+    console.log(`[Resources] Prune orphans completed: ${succeeded}/${containerIds.length} removed`);
     invalidateNodeCaches(req.nodeId);
     res.json({ results });
   } catch (error) {
@@ -5432,8 +5439,9 @@ app.post('/api/system/prune/system', async (req: Request, res: Response) => {
       return res.status(400).json({ error: 'Invalid prune target' });
     }
 
-    const dockerController = DockerController.getInstance(req.nodeId);
     const pruneScope = scope === 'managed' ? 'managed' : 'all';
+    console.log(`[Resources] System prune: ${target} (scope: ${pruneScope})`);
+    const dockerController = DockerController.getInstance(req.nodeId);
 
     let result: { success: boolean; reclaimedBytes: number };
     if (pruneScope === 'managed' && target !== 'containers') {
@@ -5446,13 +5454,14 @@ app.post('/api/system/prune/system', async (req: Request, res: Response) => {
       result = await dockerController.pruneSystem(target as 'containers' | 'images' | 'networks' | 'volumes');
     }
 
+    console.log(`[Resources] System prune completed: ${target}, reclaimed ${result.reclaimedBytes} bytes`);
     if (target === 'containers') {
       invalidateNodeCaches(req.nodeId);
     }
     res.json({ message: 'Prune completed', ...result });
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error('System prune error:', error);
-    res.status(500).json({ error: 'System prune failed', details: error.message });
+    res.status(500).json({ error: 'System prune failed' });
   }
 });
 
@@ -5518,12 +5527,17 @@ app.post('/api/system/images/delete', async (req: Request, res: Response) => {
   try {
     const { id } = req.body;
     if (!id) return res.status(400).json({ error: 'ID is required' });
+    if (typeof id !== 'string' || !isValidDockerResourceId(id)) {
+      return res.status(400).json({ error: 'Invalid image ID format' });
+    }
+    console.log(`[Resources] Delete image: ${id.substring(0, 12)}`);
     const dockerController = DockerController.getInstance(req.nodeId);
     await dockerController.removeImage(id);
+    invalidateNodeCaches(req.nodeId);
     res.json({ success: true, message: 'Image deleted' });
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error('Failed to delete image:', error);
-    res.status(500).json({ error: error.message || 'Failed to delete image' });
+    res.status(500).json({ error: 'Failed to delete image' });
   }
 });
 
@@ -5531,13 +5545,15 @@ app.post('/api/system/volumes/delete', async (req: Request, res: Response) => {
   if (!requireAdmin(req, res)) return;
   try {
     const { id } = req.body;
-    if (!id) return res.status(400).json({ error: 'ID is required' });
+    if (!id || typeof id !== 'string') return res.status(400).json({ error: 'Volume name is required' });
+    console.log(`[Resources] Delete volume: ${id}`);
     const dockerController = DockerController.getInstance(req.nodeId);
     await dockerController.removeVolume(id);
+    invalidateNodeCaches(req.nodeId);
     res.json({ success: true, message: 'Volume deleted' });
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error('Failed to delete volume:', error);
-    res.status(500).json({ error: error.message || 'Failed to delete volume' });
+    res.status(500).json({ error: 'Failed to delete volume' });
   }
 });
 
@@ -5546,26 +5562,32 @@ app.post('/api/system/networks/delete', async (req: Request, res: Response) => {
   try {
     const { id } = req.body;
     if (!id) return res.status(400).json({ error: 'ID is required' });
+    if (typeof id !== 'string' || !isValidDockerResourceId(id)) {
+      return res.status(400).json({ error: 'Invalid network ID format' });
+    }
+    console.log(`[Resources] Delete network: ${id.substring(0, 12)}`);
     const dockerController = DockerController.getInstance(req.nodeId);
     await dockerController.removeNetwork(id);
+    invalidateNodeCaches(req.nodeId);
     res.json({ success: true, message: 'Network deleted' });
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error('Failed to delete network:', error);
-    res.status(500).json({ error: error.message || 'Failed to delete network' });
+    res.status(500).json({ error: 'Failed to delete network' });
   }
 });
 
 app.get('/api/system/networks/topology', async (req: Request, res: Response) => {
+  if (!requirePaid(req, res)) return;
   try {
     const includeSystem = req.query.includeSystem === 'true';
     const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
     const dockerController = DockerController.getInstance(req.nodeId);
     const topology = await dockerController.getTopologyData(knownStacks, includeSystem);
+    if (isDebugEnabled()) console.debug('[Resources:debug] Topology fetched', { networkCount: topology.length, includeSystem });
     res.json(topology);
   } catch (error: unknown) {
-    const msg = error instanceof Error ? error.message : 'Failed to fetch network topology';
     console.error('Failed to fetch network topology:', error);
-    res.status(500).json({ error: msg });
+    res.status(500).json({ error: 'Failed to fetch network topology' });
   }
 });
 
@@ -5579,10 +5601,9 @@ app.get('/api/system/networks/:id', async (req: Request, res: Response) => {
   } catch (error: unknown) {
     console.error('Failed to inspect network:', error);
     const err = error as Record<string, unknown>;
-    const status = (typeof err.statusCode === 'number' ? err.statusCode : null)
-      || (error instanceof Error && error.message.includes('404') ? 404 : 500);
-    const msg = error instanceof Error ? error.message : 'Failed to inspect network';
-    res.status(status).json({ error: msg });
+    const is404 = (typeof err.statusCode === 'number' && err.statusCode === 404)
+      || (error instanceof Error && error.message.includes('404'));
+    res.status(is404 ? 404 : 500).json({ error: is404 ? 'Network not found' : 'Failed to inspect network' });
   }
 });
 
@@ -5600,6 +5621,8 @@ app.post('/api/system/networks', async (req: Request, res: Response) => {
       options.Driver = driver;
     }
     if (subnet || gateway) {
+      if (subnet && !isValidCidr(subnet)) return res.status(400).json({ error: 'Invalid subnet CIDR notation (e.g. 172.20.0.0/16)' });
+      if (gateway && !isValidIPv4(gateway)) return res.status(400).json({ error: 'Invalid gateway IP address (e.g. 172.20.0.1)' });
       options.IPAM = { Config: [{}] };
       if (subnet) options.IPAM.Config[0].Subnet = subnet;
       if (gateway) options.IPAM.Config[0].Gateway = gateway;
@@ -5610,11 +5633,16 @@ app.post('/api/system/networks', async (req: Request, res: Response) => {
 
     const dockerController = DockerController.getInstance(req.nodeId);
     const network = await dockerController.createNetwork(options);
+    console.log(`[Resources] Network created: ${name}`);
+    invalidateNodeCaches(req.nodeId);
     res.status(201).json({ success: true, message: 'Network created', id: network.id });
   } catch (error: unknown) {
-    const msg = error instanceof Error ? error.message : 'Failed to create network';
     console.error('Failed to create network:', error);
-    res.status(500).json({ error: msg });
+    const msg = getErrorMessage(error, '');
+    const safePatterns = ['already exists', 'name is invalid', 'invalid network name'];
+    const lowerMsg = msg.toLowerCase();
+    const isSafe = safePatterns.some(p => lowerMsg.includes(p));
+    res.status(isSafe ? 409 : 500).json({ error: isSafe ? msg : 'Failed to create network' });
   }
 });
 
diff --git a/backend/src/services/DockerController.ts b/backend/src/services/DockerController.ts
index d1c87ef4..676c8531 100644
--- a/backend/src/services/DockerController.ts
+++ b/backend/src/services/DockerController.ts
@@ -9,6 +9,7 @@ import * as yaml from 'yaml';
 import { NodeRegistry } from './NodeRegistry';
 import { CacheService } from './CacheService';
 import { isPathWithinBase } from '../utils/validation';
+import { isDebugEnabled } from '../utils/debug';
 
 const execAsync = promisify(exec);
 const COMPOSE_DIR = process.env.COMPOSE_DIR || '/app/compose';
@@ -205,6 +206,8 @@ class DockerController {
     volumes: ClassifiedVolume[];
     networks: ClassifiedNetwork[];
   }> {
+    const debug = isDebugEnabled();
+    const t0 = debug ? Date.now() : 0;
     const knownSet = new Set(knownStackNames);
 
     const [rawImages, rawVolumeData, rawNetworks, allContainers, projectToStack] = await Promise.all([
@@ -274,6 +277,10 @@ class DockerController {
       };
     });
 
+    if (debug) console.debug('[Resources:debug] Classification completed', {
+      ms: Date.now() - t0, images: images.length, volumes: volumes.length, networks: networks.length,
+    });
+
     return { images, volumes, networks };
   }
 
@@ -926,6 +933,7 @@ class DockerController {
   }
 
   public async removeContainers(containerIds: string[]) {
+    if (isDebugEnabled()) console.debug('[Resources:debug] removeContainers', { count: containerIds.length });
     const results = [];
     for (const id of containerIds) {
       try {
diff --git a/backend/src/utils/validation.ts b/backend/src/utils/validation.ts
index 99e4932c..789ed4c5 100644
--- a/backend/src/utils/validation.ts
+++ b/backend/src/utils/validation.ts
@@ -39,6 +39,39 @@ export function isValidRemoteUrl(
   return { valid: true, url };
 }
 
+/** Returns true when all four captured octet strings are in 0-255 range. */
+function octetsInRange(a: string, b: string, c: string, d: string): boolean {
+  return [a, b, c, d].map(Number).every(o => o >= 0 && o <= 255);
+}
+
+/**
+ * Validates an IPv4 CIDR notation string (e.g. `10.0.0.0/24`).
+ * Checks octet ranges (0-255) and prefix length (0-32).
+ */
+export function isValidCidr(value: string): boolean {
+  const match = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/.exec(value);
+  if (!match) return false;
+  return octetsInRange(match[1], match[2], match[3], match[4]) && Number(match[5]) <= 32;
+}
+
+/**
+ * Validates a plain IPv4 address (e.g. `192.168.1.1`).
+ * Rejects CIDR notation; use `isValidCidr` for that.
+ */
+export function isValidIPv4(value: string): boolean {
+  const match = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(value);
+  if (!match) return false;
+  return octetsInRange(match[1], match[2], match[3], match[4]);
+}
+
+/**
+ * Validates a Docker resource ID (hex string, 12-64 characters).
+ * Covers both short IDs (12 chars) and full SHA256 IDs (64 chars).
+ */
+export function isValidDockerResourceId(id: string): boolean {
+  return /^[a-f0-9]{12,64}$/i.test(id);
+}
+
 /**
  * Asserts that a resolved file path stays within a given base directory.
  * Returns true if the path is safe, false if it escapes the base.
diff --git a/docs/features/resources.mdx b/docs/features/resources.mdx
index cea5d64e..2dd23fc2 100644
--- a/docs/features/resources.mdx
+++ b/docs/features/resources.mdx
@@ -96,6 +96,7 @@ Click the eye icon on any network row to open a detail panel showing:
 
 - **Overview** - ID, driver, scope, creation date, internal/attachable flags
 - **IPAM configuration** - Subnet, gateway, and IP range
+- **Options** - Driver-specific options applied to the network (when present)
 - **Connected containers** - Container name, IPv4 address, and MAC address
 - **Labels** - All Docker labels applied to the network
 
diff --git a/docs/images/resources/resources-create-network-dialog.png b/docs/images/resources/resources-create-network-dialog.png
new file mode 100644
index 00000000..812678af
Binary files /dev/null and b/docs/images/resources/resources-create-network-dialog.png differ
diff --git a/docs/images/resources/resources-networks-tab.png b/docs/images/resources/resources-networks-tab.png
new file mode 100644
index 00000000..000711ee
Binary files /dev/null and b/docs/images/resources/resources-networks-tab.png differ
diff --git a/docs/images/resources/resources-overview.png b/docs/images/resources/resources-overview.png
index 139e7eca..24ab1552 100644
Binary files a/docs/images/resources/resources-overview.png and b/docs/images/resources/resources-overview.png differ
diff --git a/frontend/src/components/ResourcesView.tsx b/frontend/src/components/ResourcesView.tsx
index 0580304d..60ad9025 100644
--- a/frontend/src/components/ResourcesView.tsx
+++ b/frontend/src/components/ResourcesView.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from "@/components/ui/tabs";
@@ -9,6 +9,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Combobox } from "@/components/ui/combobox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -115,7 +116,6 @@ interface FootprintWidgetProps {
 
 function FootprintWidget({ usage, onFilter }: FootprintWidgetProps) {
     const [animated, setAnimated] = useState(false);
-    const ref = useRef<HTMLDivElement>(null);
 
     const managedBytes = usage.managedImageBytes + usage.managedVolumeBytes;
     const unmanagedBytes = usage.unmanagedImageBytes + usage.unmanagedVolumeBytes;
@@ -146,7 +146,7 @@ function FootprintWidget({ usage, onFilter }: FootprintWidgetProps) {
     ];
 
     return (
-        <div ref={ref} className="space-y-4 animate-in fade-in-0 duration-300">
+        <div className="space-y-4 animate-in fade-in-0 duration-300">
             {/* Stacked bar */}
             <div className="relative flex h-4 w-full rounded-full overflow-hidden bg-muted gap-px">
                 {segments.map((seg, i) =>
@@ -287,8 +287,8 @@ interface PruneButtonProps {
 function PruneButton({ target, icon, label, accentClass, onManaged, onAll }: PruneButtonProps) {
     return (
         <div className={cn(
-            'group flex flex-col rounded-lg border bg-card overflow-hidden',
-            'transition-shadow duration-200 hover:shadow-md',
+            'group flex flex-col rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel overflow-hidden',
+            'transition-colors duration-200 hover:border-t-card-border-hover',
         )}>
             <button
                 onClick={onManaged}
@@ -374,7 +374,7 @@ export default function ResourcesView() {
     const [createNetworkForm, setCreateNetworkForm] = useState<{ name: string; driver: NetworkDriver; subnet: string; gateway: string; internal: boolean; attachable: boolean }>({ name: '', driver: 'bridge', subnet: '', gateway: '', internal: false, attachable: false });
     const [isCreatingNetwork, setIsCreatingNetwork] = useState(false);
     const [inspectNetwork, setInspectNetwork] = useState<NetworkInspectData | null>(null);
-    const [isInspectLoading, setIsInspectLoading] = useState(false);
+    const [inspectLoadingId, setInspectLoadingId] = useState<string | null>(null);
 
     // Unmanaged container state
     const [selectedOrphans, setSelectedOrphans] = useState<string[]>([]);
@@ -445,11 +445,15 @@ export default function ResourcesView() {
                 method: 'POST',
                 body: JSON.stringify({ id: confirmDelete.id })
             });
-            if (!res.ok) throw new Error();
+            if (!res.ok) {
+                const data = await res.json().catch(() => null);
+                throw new Error(data?.error || `Failed to delete ${confirmDelete.type.slice(0, -1)}`);
+            }
             toast.success(`Deleted ${confirmDelete.type.slice(0, -1)}`);
             await fetchAllData();
-        } catch {
-            toast.error(`Failed to delete ${confirmDelete.type.slice(0, -1)}`);
+        } catch (error) {
+            const err = error as Record<string, unknown>;
+            toast.error(String(err?.message || `Failed to delete ${confirmDelete.type.slice(0, -1)}`));
         } finally {
             toast.dismiss(loadingId);
             setIsActioning(false);
@@ -474,12 +478,16 @@ export default function ResourcesView() {
                 method: 'POST',
                 body: JSON.stringify({ containerIds: selectedOrphans })
             });
-            if (!res.ok) throw new Error();
+            if (!res.ok) {
+                const data = await res.json().catch(() => null);
+                throw new Error(data?.error || 'Failed to purge selected containers');
+            }
             toast.success(`Purged ${selectedOrphans.length} unmanaged container(s)`);
             setBulkPurgeConfirm(false);
             await fetchAllData();
-        } catch {
-            toast.error('Failed to purge selected containers.');
+        } catch (error) {
+            const err = error as Record<string, unknown>;
+            toast.error(String(err?.message || 'Failed to purge selected containers.'));
         } finally {
             toast.dismiss(loadingId);
             setIsActioning(false);
@@ -517,7 +525,7 @@ export default function ResourcesView() {
     };
 
     const handleInspectNetwork = async (id: string) => {
-        setIsInspectLoading(true);
+        setInspectLoadingId(id);
         try {
             const res = await apiFetch(`/system/networks/${id}`);
             if (!res.ok) throw new Error('Failed to inspect network');
@@ -527,7 +535,7 @@ export default function ResourcesView() {
             const err = error as Record<string, unknown>;
             toast.error(String(err?.message || err?.error || 'Something went wrong.'));
         } finally {
-            setIsInspectLoading(false);
+            setInspectLoadingId(null);
         }
     };
 
@@ -566,7 +574,7 @@ export default function ResourcesView() {
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 
                 {/* Disk Footprint */}
-                <Card className="col-span-1 border-border shadow-card-bevel animate-in fade-in-0 slide-in-from-bottom-2 duration-300">
+                <Card className="col-span-1 border-card-border border-t-card-border-top shadow-card-bevel transition-colors hover:border-t-card-border-hover animate-in fade-in-0 slide-in-from-bottom-2 duration-300">
                     <CardHeader className="pb-3">
                         <CardTitle className="text-sm font-medium text-muted-foreground tracking-wide uppercase">
                             Docker Disk Footprint
@@ -592,7 +600,7 @@ export default function ResourcesView() {
                 </Card>
 
                 {/* Quick Clean */}
-                {isAdmin && <Card className="col-span-1 md:col-span-2 border-border shadow-card-bevel flex flex-col animate-in fade-in-0 slide-in-from-bottom-2 duration-300 delay-75">
+                {isAdmin && <Card className="col-span-1 md:col-span-2 border-card-border border-t-card-border-top shadow-card-bevel transition-colors hover:border-t-card-border-hover flex flex-col animate-in fade-in-0 slide-in-from-bottom-2 duration-300 delay-75">
                     <CardHeader className="pb-3">
                         <CardTitle className="text-sm font-medium text-muted-foreground tracking-wide uppercase">
                             Quick Clean
@@ -608,7 +616,7 @@ export default function ResourcesView() {
                                 target="images"
                                 icon={<PackageMinus className="w-6 h-6" />}
                                 label="Prune Unused Images"
-                                accentClass="text-blue-500"
+                                accentClass="text-info"
                                 onManaged={() => setConfirmPrune({ target: 'images', scope: 'managed' })}
                                 onAll={() => setConfirmPrune({ target: 'images', scope: 'all' })}
                             />
@@ -616,7 +624,7 @@ export default function ResourcesView() {
                                 target="volumes"
                                 icon={<HardDrive className="w-6 h-6" />}
                                 label="Prune Unused Volumes"
-                                accentClass="text-purple-500"
+                                accentClass="text-brand"
                                 onManaged={() => setConfirmPrune({ target: 'volumes', scope: 'managed' })}
                                 onAll={() => setConfirmPrune({ target: 'volumes', scope: 'all' })}
                             />
@@ -670,7 +678,7 @@ export default function ResourcesView() {
                     </TabsList>
                 </div>
 
-                <div className="flex-1 overflow-auto bg-background relative text-sm">
+                <ScrollArea className="flex-1 bg-background relative text-sm">
 
                     {/* Images */}
                     <TabsContent value="images" className="m-0 border-0 p-0 animate-in fade-in-0 duration-200">
@@ -876,10 +884,10 @@ export default function ResourcesView() {
                                                         variant="ghost"
                                                         size="icon"
                                                         className="h-7 w-7 hover:text-foreground transition-colors"
-                                                        disabled={isInspectLoading}
+                                                        disabled={inspectLoadingId !== null}
                                                         onClick={() => handleInspectNetwork(net.Id)}
                                                     >
-                                                        {isInspectLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} /> : <Eye className="w-3.5 h-3.5" strokeWidth={1.5} />}
+                                                        {inspectLoadingId === net.Id ? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} /> : <Eye className="w-3.5 h-3.5" strokeWidth={1.5} />}
                                                     </Button>
                                                     {isAdmin && <Button
                                                         variant="ghost"
@@ -912,16 +920,16 @@ export default function ResourcesView() {
                                 />
                                 <span className="text-xs font-medium text-muted-foreground">Select all</span>
                             </div>
-                            <Button
-                                variant="destructive"
+                            {isAdmin && <Button
+                                variant="ghost"
                                 size="sm"
-                                className="h-7 text-xs gap-1.5"
+                                className="h-7 text-xs gap-1.5 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
                                 onClick={() => setBulkPurgeConfirm(true)}
                                 disabled={selectedOrphans.length === 0 || isActioning}
                             >
                                 <Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
                                 {isActioning ? 'Purging...' : `Purge Selected (${selectedOrphans.length})`}
-                            </Button>
+                            </Button>}
                         </div>
 
                         {totalOrphansCount === 0 ? (
@@ -983,7 +991,7 @@ export default function ResourcesView() {
                             </div>
                         )}
                     </TabsContent>
-                </div>
+                </ScrollArea>
             </Tabs>
 
             {/* ── Dialogs ── */}
@@ -1068,7 +1076,7 @@ export default function ResourcesView() {
                 <DialogContent>
                     <DialogHeader>
                         <DialogTitle>Create Network</DialogTitle>
-                        <DialogDescription>Create a new Docker network for inter-container communication.</DialogDescription>
+                        <DialogDescription className="sr-only">Create a new Docker network for inter-container communication.</DialogDescription>
                     </DialogHeader>
                     <div className="space-y-4 py-2">
                         <div className="space-y-2">
@@ -1144,7 +1152,8 @@ export default function ResourcesView() {
 
             {/* Network Inspect Sheet */}
             <Sheet open={!!inspectNetwork} onOpenChange={open => !open && setInspectNetwork(null)}>
-                <SheetContent className="sm:max-w-lg overflow-y-auto">
+                <SheetContent className="sm:max-w-lg">
+                  <ScrollArea className="h-full">
                     <SheetHeader>
                         <SheetTitle className="flex items-center gap-2">
                             <Network className="w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
@@ -1152,7 +1161,7 @@ export default function ResourcesView() {
                         </SheetTitle>
                     </SheetHeader>
                     {inspectNetwork && (
-                        <div className="space-y-6 mt-6">
+                        <div className="space-y-6 mt-6 pb-6">
                             {/* Overview */}
                             <div className="space-y-3">
                                 <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Overview</h4>
@@ -1163,7 +1172,7 @@ export default function ResourcesView() {
                                             {inspectNetwork.Id.substring(0, 12)}
                                             <button
                                                 className="text-muted-foreground hover:text-foreground transition-colors"
-                                                onClick={() => { navigator.clipboard.writeText(inspectNetwork.Id); toast.success('ID copied'); }}
+                                                onClick={async () => { try { await navigator.clipboard.writeText(inspectNetwork.Id); toast.success('ID copied'); } catch { toast.error('Copy failed (HTTPS required)'); } }}
                                             >
                                                 <Copy className="w-3 h-3" strokeWidth={1.5} />
                                             </button>
@@ -1223,6 +1232,25 @@ export default function ResourcesView() {
                                 </div>
                             )}
 
+                            {/* Options */}
+                            {inspectNetwork.Options && Object.keys(inspectNetwork.Options).length > 0 && (
+                                <div className="space-y-3">
+                                    <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Options</h4>
+                                    <div className="rounded-lg border border-card-border bg-card shadow-card-bevel overflow-hidden">
+                                        <Table>
+                                            <TableBody>
+                                                {Object.entries(inspectNetwork.Options).map(([key, val]) => (
+                                                    <TableRow key={key} className="hover:bg-muted/30">
+                                                        <TableCell className="font-mono text-xs py-1.5 text-muted-foreground">{key}</TableCell>
+                                                        <TableCell className="font-mono text-xs py-1.5 text-right">{val}</TableCell>
+                                                    </TableRow>
+                                                ))}
+                                            </TableBody>
+                                        </Table>
+                                    </div>
+                                </div>
+                            )}
+
                             {/* Connected Containers */}
                             <div className="space-y-3">
                                 <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
@@ -1241,11 +1269,11 @@ export default function ResourcesView() {
                                                 <div className="grid grid-cols-2 gap-2 pl-5.5">
                                                     <div>
                                                         <span className="text-[10px] text-muted-foreground">IPv4</span>
-                                                        <p className="font-mono text-xs tabular-nums">{container.IPv4Address || '—'}</p>
+                                                        <p className="font-mono text-xs tabular-nums">{container.IPv4Address || 'N/A'}</p>
                                                     </div>
                                                     <div>
                                                         <span className="text-[10px] text-muted-foreground">MAC</span>
-                                                        <p className="font-mono text-xs tabular-nums">{container.MacAddress || '—'}</p>
+                                                        <p className="font-mono text-xs tabular-nums">{container.MacAddress || 'N/A'}</p>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1274,6 +1302,7 @@ export default function ResourcesView() {
                             )}
                         </div>
                     )}
+                  </ScrollArea>
                 </SheetContent>
             </Sheet>
         </div>