diff --git a/mock/stats-stub/grid.js b/mock/stats-stub/grid.js
new file mode 100644
index 00000000..274ea521
--- /dev/null
+++ b/mock/stats-stub/grid.js
@@ -0,0 +1,143 @@
+// What the dashboard asks of a box to draw its home page without one: the
+// virtual machine module (in the shapes of CasaOS-VirtManagement's codegen
+// HostOK, VMListOK and VMOK), the app grid (WebAppGridItem) and the few core
+// calls the shell reads without a guard. A pure `handleGrid(request, state)`:
+//
+// request: { method, path, body }  ->  { status, body }, or null when the path is not one of these
+// state:   newGridState()             what was put in custom storage
+
+const GIB = 1073741824
+
+const HOST = {
+	libvirt: 'available',
+	libvirt_version: '9.0.0',
+	kvm: true,
+	uefi: true,
+	cpus: 8,
+	memory_mib: 16384,
+	network: 'casaos',
+	network_gateway: '10.8.0.1',
+	network_subnet: '10.8.0.0/24',
+	bridges: [],
+	links: ['eth0'],
+	storage_path: '/DATA/VM',
+	storage_free_bytes: 500 * GIB,
+}
+
+function aVm({ id, name, title, state, os, ip }) {
+	return {
+		id,
+		name,
+		title,
+		state,
+		os,
+		managed: true,
+		console: true,
+		vcpus: 2,
+		memory_mib: 2048,
+		firmware: 'uefi',
+		pending_restart: false,
+		network: { mode: 'casaos', name: 'casaos', casaos: true, fixed: true, ip, mac: '52:54:00:12:34:56' },
+		disks: [{ target: 'vda', path: `/DATA/VM/${name}.qcow2`, managed: true, boot: true, capacity_bytes: 32 * GIB, allocation_bytes: 4 * GIB }],
+		snapshots: [],
+		ports: [],
+		usb: [],
+		cdrom: '',
+	}
+}
+
+const VMS = [
+	aVm({ id: '11111111-aaaa-4aaa-8aaa-111111111111', name: '1a2b3c4d', title: 'Debian', state: 'running', os: 'debian', ip: '10.8.0.10' }),
+	aVm({ id: '22222222-bbbb-4bbb-8bbb-222222222222', name: '5e6f7a8b', title: 'Windows 11', state: 'shut-off', os: 'windows', ip: '10.8.0.11' }),
+	aVm({ id: '33333333-cccc-4ccc-8ccc-333333333333', name: '9c0d1e2f', title: '<img src=x onerror=1>', state: 'paused', os: '', ip: '10.8.0.12' }),
+]
+
+function anApp(name, title, port, image) {
+	return {
+		name,
+		title: { en_us: title },
+		icon: '',
+		status: 'running',
+		app_type: 'v2app',
+		author_type: 'by_casaos',
+		compose_project: name,
+		store_app_id: name,
+		scheme: 'http',
+		hostname: '',
+		port,
+		index: '/',
+		image,
+		is_uncontrolled: false,
+		update_available: false,
+	}
+}
+
+const APPS = [
+	anApp('jellyfin', 'Jellyfin', '8096', 'linuxserver/jellyfin:latest'),
+	anApp('nextcloud', 'Nextcloud', '10081', 'nextcloud:latest'),
+	anApp('immich', 'Immich', '2283', 'ghcr.io/immich-app/immich-server:release'),
+	anApp('plex', 'Plex', '32400', 'plexinc/pms-docker:latest'),
+]
+
+const UTILIZATION = {
+	cpu: { percent: 12, num: 4, temperature: 45, model: 'stub', power: { timestamp: '0', value: '0' } },
+	mem: { total: 8 * GIB, available: 5 * GIB, used: 3 * GIB, free: 5 * GIB, usedPercent: 37 },
+	sys_disk: { avail: 200 * GIB, health: true, size: 256 * GIB, used: 56 * GIB },
+	sys_usb: [],
+	net: [{ name: 'eth0', bytesSent: 0, bytesRecv: 0, packetsSent: 0, packetsRecv: 0, time: 0 }],
+}
+
+// the core's envelope
+const core = data => ({ status: 200, body: { success: 200, message: 'ok', data } })
+
+const CORE_GETS = {
+	'/v1/users/status': () => core({ initialized: true, key: '' }),
+	'/v1/users/current': () => core({ id: 1, username: 'casaos', nickname: 'casaos', role: 'admin', avatar: '', description: '' }),
+	'/v1/sys/version': () => core({ current_version: '0.4.15', need_update: false, version: { version: '0.4.15', change_log: '' } }),
+	'/v1/sys/hardware': () => core({ drive_model: 'stub', arch: 'amd64' }),
+	'/v1/sys/utilization': () => core(UTILIZATION),
+	'/v1/sys/telemetry': () => core({ enabled: false }),
+	'/v1/gateway/port': () => core('80'),
+	'/v1/usb/usb-auto-mount': () => core('False'),
+}
+
+const CUSTOM = /^\/v1\/users\/current\/custom\/([^/]+)$/
+const ONE_VM = /^\/v2\/virt_management\/vms\/([^/]+)$/
+
+export function newGridState() {
+	return { custom: new Map() }
+}
+
+export function handleGrid({ method = 'GET', path = '', body = null } = {}, state = newGridState()) {
+	const verb = method.toUpperCase()
+	const custom = path.match(CUSTOM)
+	if (custom) {
+		const key = decodeURIComponent(custom[1])
+		if (verb === 'POST') {
+			state.custom.set(key, body)
+			return core(body)
+		}
+		// what was never put is an empty string, as the core answers
+		return verb === 'GET' ? core(state.custom.has(key) ? state.custom.get(key) : '') : null
+	}
+	if (verb !== 'GET') {
+		return null
+	}
+	if (CORE_GETS[path]) {
+		return CORE_GETS[path]()
+	}
+	switch (path) {
+		case '/v2/virt_management/host':
+			return { status: 200, body: { data: HOST } }
+		case '/v2/virt_management/vms':
+			return { status: 200, body: { data: VMS } }
+		case '/v2/app_management/web/appgrid':
+			return { status: 200, body: { data: APPS } }
+	}
+	const one = path.match(ONE_VM)
+	if (one) {
+		const vm = VMS.find(candidate => candidate.id === decodeURIComponent(one[1]))
+		return vm ? { status: 200, body: { data: vm } } : { status: 404, body: { message: 'vm not found' } }
+	}
+	return null
+}
diff --git a/mock/stats-stub/grid.spec.js b/mock/stats-stub/grid.spec.js
new file mode 100644
index 00000000..31beb75e
--- /dev/null
+++ b/mock/stats-stub/grid.spec.js
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+import { handleGrid, newGridState } from './grid.js'
+
+// What the dashboard asks of a box to draw its home page, its app grid and the
+// virtual machine tiles, in the shapes the services answer with.
+const ask = (method, path, body = null, state = newGridState()) => handleGrid({ method, path, body }, state)
+
+describe('the stub of the virtual machine module', () => {
+	it('answers the probe with a host that has libvirt', () => {
+		const { status, body } = ask('GET', '/v2/virt_management/host')
+
+		expect(status).toBe(200)
+		expect(body.data).toMatchObject({ libvirt: 'available', kvm: true, network: 'casaos', storage_path: '/DATA/VM' })
+	})
+
+	it('lists three VMs, running, shut off and paused, one with a hostile title', () => {
+		const { status, body } = ask('GET', '/v2/virt_management/vms')
+
+		expect(status).toBe(200)
+		expect(body.data.map(vm => vm.state)).toEqual(['running', 'shut-off', 'paused'])
+		expect(body.data.map(vm => vm.title)).toContain('<img src=x onerror=1>')
+		for (const vm of body.data) {
+			expect(vm.id).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+			expect(vm).toMatchObject({ name: expect.stringMatching(/^[0-9a-f]{8}$/), managed: true, console: true })
+		}
+	})
+
+	it('answers one VM by its id, and 404 for one it does not have', () => {
+		const [first] = ask('GET', '/v2/virt_management/vms').body.data
+
+		expect(ask('GET', `/v2/virt_management/vms/${first.id}`).body.data).toEqual(first)
+		expect(ask('GET', '/v2/virt_management/vms/00000000-0000-0000-0000-000000000000')).toEqual({ status: 404, body: { message: 'vm not found' } })
+	})
+})
+
+describe('the stub of the app grid', () => {
+	it('lists four compose apps in the grid shape', () => {
+		const { status, body } = ask('GET', '/v2/app_management/web/appgrid')
+
+		expect(status).toBe(200)
+		expect(body.data.map(app => app.title.en_us)).toEqual(['Jellyfin', 'Nextcloud', 'Immich', 'Plex'])
+		for (const app of body.data) {
+			expect(app).toMatchObject({ app_type: 'v2app', status: 'running', name: expect.any(String), hostname: '', port: expect.any(String) })
+		}
+	})
+})
+
+describe('the stub of the shell', () => {
+	it('says the box is set up and who is signed in, in the core envelope', () => {
+		expect(ask('GET', '/v1/users/status').body).toEqual({ success: 200, message: 'ok', data: { initialized: true, key: '' } })
+		expect(ask('GET', '/v1/users/current').body.data).toMatchObject({ username: 'casaos' })
+	})
+
+	it('keeps what is put in custom storage, and answers an empty string for what was never put', () => {
+		const state = newGridState()
+
+		expect(ask('GET', '/v1/users/current/custom/app_order', null, state).body.data).toBe('')
+		ask('POST', '/v1/users/current/custom/app_order', { data: ['Files', 'Plex'] }, state)
+
+		expect(ask('GET', '/v1/users/current/custom/app_order', null, state).body.data).toEqual({ data: ['Files', 'Plex'] })
+	})
+
+	it('answers what the top bar and the widgets read', () => {
+		expect(ask('GET', '/v1/sys/version').body.data).toMatchObject({ need_update: false })
+		expect(ask('GET', '/v1/sys/hardware').body.data).toMatchObject({ arch: 'amd64' })
+		expect(ask('GET', '/v1/sys/utilization').body.data).toMatchObject({ cpu: { num: 4 }, mem: { total: expect.any(Number) } })
+		expect(ask('GET', '/v1/sys/telemetry').body.data).toEqual({ enabled: false })
+		expect(ask('GET', '/v1/gateway/port').body.data).toBe('80')
+		expect(ask('GET', '/v1/usb/usb-auto-mount').body.data).toBe('False')
+	})
+
+	it('leaves every other path to the caller', () => {
+		expect(ask('GET', '/v1/sys/nothing-here')).toBeNull()
+		expect(ask('DELETE', '/v2/virt_management/vms')).toBeNull()
+		expect(ask('GET', '/v2/virt_management/stats')).toBeNull()
+	})
+})
diff --git a/mock/stats-stub/server.mjs b/mock/stats-stub/server.mjs
index 5e9cb4ad..6d7cf866 100644
--- a/mock/stats-stub/server.mjs
+++ b/mock/stats-stub/server.mjs
@@ -4,13 +4,15 @@
 //
 // Answers /v1/sys/stats, /v2/app_management/stats and /v2/virt_management/stats from handlers.js, with series that end
 // at the current time (a live chart moves). With --upstream, every other request (and the WebSocket upgrade of the
-// message bus) goes to that box; without it, other paths answer 404.
+// message bus) goes to that box. Without it, grid.js answers what the home page asks of a box (the virtual machine
+// module, the app grid, the shell's core calls), and every other path answers 404.
 //
 //   GET /__stub/alerts?on=1   puts 2 active alerts on one container (on=0 takes them off)
 import { Buffer } from 'node:buffer'
 import { createServer, request } from 'node:http'
 import { connect } from 'node:net'
 import process from 'node:process'
+import { handleGrid, newGridState } from './grid.js'
 import { handle } from './handlers.js'
 
 const args = process.argv.slice(2)
@@ -29,6 +31,7 @@ if (!['real', 'bare'].includes(envelope) || !Number.isInteger(port)) {
 const [upstreamHost, upstreamPort = '80'] = upstream.split(':')
 
 const options = { envelope, alerts: false, down: [], rules: new Map() }
+const grid = newGridState()
 const STATS = /^\/v[12]\/(?:sys|app_management|virt_management)\/stats(?:\/|$)/
 
 function send(res, status, body) {
@@ -51,8 +54,9 @@ const server = createServer((req, res) => {
 		options.alerts = url.searchParams.get('on') === '1'
 		return send(res, 200, { alerts: options.alerts })
 	}
-	if (!STATS.test(url.pathname)) {
-		return upstream ? proxy(req, res) : send(res, 404, { message: 'not_found' })
+	const stats = STATS.test(url.pathname)
+	if (!stats && upstream) {
+		return proxy(req, res)
 	}
 	const chunks = []
 	req.on('data', chunk => chunks.push(chunk))
@@ -63,7 +67,8 @@ const server = createServer((req, res) => {
 		} catch {
 			return send(res, 400, { message: 'bad_rules: rules' })
 		}
-		const { status, body: answer } = handle({ method: req.method, path: url.pathname, query: Object.fromEntries(url.searchParams), body }, options)
+		const request = { method: req.method, path: url.pathname, query: Object.fromEntries(url.searchParams), body }
+		const { status, body: answer } = stats ? handle(request, options) : (handleGrid(request, grid) || { status: 404, body: { message: 'not_found' } })
 		send(res, status, answer)
 	})
 })
diff --git a/src/assets/lang/en_US.json b/src/assets/lang/en_US.json
index 2e5cf83c..660e261b 100644
--- a/src/assets/lang/en_US.json
+++ b/src/assets/lang/en_US.json
@@ -2508,5 +2508,7 @@
   "{seconds} s": "{seconds} s",
   "Exited with an error": "Exited with an error",
   "The settings are applied but could not be kept for good.": "The settings are applied but could not be kept for good.",
-  "System app": "System app"
+  "System app": "System app",
+  "Console of {name}": "Console of {name}",
+  "{name}, {state}: open in Virtual Machines": "{name}, {state}: open in Virtual Machines"
 }
diff --git a/src/assets/lang/fr_FR.json b/src/assets/lang/fr_FR.json
index 0939950d..d7db425b 100644
--- a/src/assets/lang/fr_FR.json
+++ b/src/assets/lang/fr_FR.json
@@ -2508,5 +2508,7 @@
   "{seconds} s": "{seconds} s",
   "Exited with an error": "Arrêté avec une erreur",
   "The settings are applied but could not be kept for good.": "Les réglages sont appliqués, mais n'ont pas pu être conservés durablement.",
-  "System app": "Application système"
+  "System app": "Application système",
+  "Console of {name}": "Console de {name}",
+  "{name}, {state}: open in Virtual Machines": "{name}, {state} : ouvrir dans Machines virtuelles"
 }
diff --git a/src/components/Apps/AppSection.spec.js b/src/components/Apps/AppSection.spec.js
index 3b74ef38..ed9263d3 100644
--- a/src/components/Apps/AppSection.spec.js
+++ b/src/components/Apps/AppSection.spec.js
@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
-import { describe, expect, it, vi } from 'vitest'
-import { forgetVirtualMachines, hasVirtualMachines } from '@/components/VirtualMachines/entry'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { forgetVirtualMachines, hasVirtualMachines, listVirtualMachines } from '@/components/VirtualMachines/entry'
 import AppSection from '@/components/Apps/AppSection.vue'
 import GitAppModal from '@/components/Apps/GitAppModal.vue'
 
@@ -15,6 +15,7 @@ vi.mock('@/components/VirtualMachines/entry', async importOriginal => ({
 	...await importOriginal(),
 	hasVirtualMachines: vi.fn(),
 	forgetVirtualMachines: vi.fn(),
+	listVirtualMachines: vi.fn(),
 	vmApplication: () => ({ name: 'Virtual Machines' }),
 }))
 
@@ -229,3 +230,286 @@ describe('app section built-in cards', () => {
 		expect(vm.appList.find(app => app.name === 'Statistics')).toMatchObject({ app_type: 'system', status: 'running' })
 	})
 })
+
+// One tile per VM, right after the Virtual Machines card, by title. They are not
+// apps: they never reach the saved order, whatever is dragged where.
+describe('app section VM tiles', () => {
+	const aVm = (id, title = id, state = 'running') => ({ id, title, state })
+	function section(names, vms = []) {
+		const vm = {
+			appList: names.map(name => ({ name })),
+			vms,
+			$api: { users: { setCustomStorage: vi.fn() } },
+			$buefy: { toast: { open: vi.fn() } },
+		}
+		Object.defineProperty(vm, 'gridList', {
+			get: () => AppSection.computed.gridList.get.call(vm),
+			set: list => AppSection.computed.gridList.set.call(vm, list),
+		})
+		vm.pollVms = AppSection.methods.pollVms.bind(vm)
+		vm.saveSortData = AppSection.methods.saveSortData.bind(vm)
+		return vm
+	}
+	const shown = vm => vm.gridList.map(item => item.vmTile ? `tile:${item.vm.title}` : item.name)
+	const hide = (hidden) => {
+		Object.defineProperty(document, 'hidden', { configurable: true, get: () => hidden })
+	}
+
+	afterEach(() => {
+		vi.useRealTimers()
+		hide(false)
+		listVirtualMachines.mockReset()
+	})
+
+	it('(1, 4) shows a tile per VM right after the Virtual Machines card', () => {
+		const vm = section(['App Store', 'Virtual Machines', 'Files'], [aVm('a', 'Alpha'), aVm('b', 'Beta')])
+
+		expect(shown(vm)).toEqual(['App Store', 'Virtual Machines', 'tile:Alpha', 'tile:Beta', 'Files'])
+	})
+
+	it('(3) shows no tile and asks for no VM when the probe says there is no module', async () => {
+		const vm = section(['App Store', 'Files'], [aVm('a')])
+
+		await vm.pollVms()
+
+		expect(listVirtualMachines).not.toHaveBeenCalled()
+		expect(shown(vm)).toEqual(['App Store', 'Files'])
+	})
+
+	it('(3) shows no tile and no toast when the list cannot be read', async () => {
+		listVirtualMachines.mockRejectedValue(new Error('502'))
+		const vm = section(['Virtual Machines'], [aVm('a')])
+
+		for (let i = 0; i < 3; i++) {
+			await vm.pollVms()
+			clearTimeout(vm.vmPollTimer)
+		}
+
+		expect(shown(vm)).toEqual(['Virtual Machines'])
+		expect(vm.$buefy.toast.open).not.toHaveBeenCalled()
+	})
+
+	it('(4) keeps the order payload to the apps, whatever was dragged where', () => {
+		const vm = section(['App Store', 'Virtual Machines', 'Files', 'jellyfin'], [aVm('a'), aVm('b')])
+		const [store, vms, a, b, files, jellyfin] = vm.gridList
+
+		// jellyfin dropped between the tiles, and a tile dragged to the front
+		vm.gridList = [b, store, vms, a, jellyfin, files]
+		vm.saveSortData()
+
+		expect(vm.$api.users.setCustomStorage).toHaveBeenCalledWith('app_order', { data: ['App Store', 'Virtual Machines', 'jellyfin', 'Files'] })
+		// the tiles go back after their card
+		expect(shown(vm)).toEqual(['App Store', 'Virtual Machines', 'tile:a', 'tile:b', 'jellyfin', 'Files'])
+	})
+
+	it('(5) follows the states, and a VM that is deleted goes', async () => {
+		vi.useFakeTimers()
+		const vm = section(['Virtual Machines'])
+		listVirtualMachines.mockResolvedValueOnce([aVm('a'), aVm('b')]).mockResolvedValueOnce([aVm('a', 'a', 'shut-off')])
+
+		await vm.pollVms()
+		expect(shown(vm)).toEqual(['Virtual Machines', 'tile:a', 'tile:b'])
+		await vi.advanceTimersByTimeAsync(5000)
+
+		expect(vm.vms).toEqual([aVm('a', 'a', 'shut-off')])
+		AppSection.beforeUnmount.call({ ...vm, $EventBus: { $off: vi.fn() } })
+	})
+
+	it('(3) reads the VMs as soon as the card joins the grid, and drops them with it', () => {
+		const pollVms = vi.fn()
+
+		AppSection.watch.hasVmCard.call({ pollVms })
+
+		expect(pollVms).toHaveBeenCalledTimes(1)
+		expect(AppSection.computed.hasVmCard.call({ appList: [{ name: 'Virtual Machines' }] })).toBe(true)
+		expect(AppSection.computed.hasVmCard.call({ appList: [{ name: 'Files' }] })).toBe(false)
+	})
+
+	it('(5) asks once at a time', async () => {
+		let answer
+		listVirtualMachines.mockReturnValue(new Promise((resolve) => {
+			answer = resolve
+		}))
+		const vm = section(['Virtual Machines'])
+
+		const first = vm.pollVms()
+		vm.pollVms()
+		answer([])
+		await first
+
+		expect(listVirtualMachines).toHaveBeenCalledTimes(1)
+		clearTimeout(vm.vmPollTimer)
+	})
+
+	it('(5) does not ask while the tab is hidden, and asks again once it is shown', async () => {
+		vi.useFakeTimers()
+		listVirtualMachines.mockResolvedValue([])
+		const vm = section(['Virtual Machines'])
+		hide(true)
+
+		await vm.pollVms()
+		await vi.advanceTimersByTimeAsync(30000)
+		expect(listVirtualMachines).not.toHaveBeenCalled()
+
+		hide(false)
+		await AppSection.methods.onVisibility.call(vm)
+		expect(listVirtualMachines).toHaveBeenCalledTimes(1)
+		await vi.advanceTimersByTimeAsync(5000)
+		expect(listVirtualMachines).toHaveBeenCalledTimes(2)
+
+		// hidden again: the timer is dropped
+		hide(true)
+		AppSection.methods.onVisibility.call(vm)
+		await vi.advanceTimersByTimeAsync(30000)
+		expect(listVirtualMachines).toHaveBeenCalledTimes(2)
+	})
+
+	it('(5) stops for good when the grid goes, timer and listener with it', async () => {
+		vi.useFakeTimers()
+		listVirtualMachines.mockResolvedValue([])
+		const vm = section(['Virtual Machines'])
+		vm.onVisibility = AppSection.methods.onVisibility.bind(vm)
+		const removed = vi.spyOn(document, 'removeEventListener')
+		await vm.pollVms()
+
+		AppSection.beforeUnmount.call(Object.assign(vm, { $EventBus: { $off: vi.fn() } }))
+		await vi.advanceTimersByTimeAsync(30000)
+
+		expect(listVirtualMachines).toHaveBeenCalledTimes(1)
+		expect(removed).toHaveBeenCalledWith('visibilitychange', vm.onVisibility)
+		expect(vi.getTimerCount()).toBe(0)
+		removed.mockRestore()
+	})
+})
+
+// The tiles are not drop targets: an app is dropped among the apps only, so it
+// never lands where the tiles are redrawn over it.
+describe('app section VM tiles out of the drag', () => {
+	const tileItem = { name: 'vm-tile:a', vmTile: true, vm: { id: 'a' } }
+	const move = (vm, element, willInsertAfter = false) =>
+		AppSection.methods.checkMove.call(vm, { relatedContext: { element }, willInsertAfter })
+
+	it('(1) starts no drag on a tile, and lets its click through', () => {
+		const options = AppSection.computed.dragOptions.call({})
+
+		expect(options.filter).toBe('.vm-tile-item')
+		expect(options.preventOnFilter).toBe(false)
+	})
+
+	it('(1) rejects a move over a tile', () => {
+		expect(move({ vms: [{ id: 'a' }] }, tileItem)).toBe(false)
+		expect(move({ vms: [{ id: 'a' }] }, tileItem, true)).toBe(false)
+	})
+
+	it('(1) rejects a drop right after the Virtual Machines card while tiles follow it', () => {
+		const card = { name: 'Virtual Machines' }
+
+		expect(move({ vms: [{ id: 'a' }] }, card, true)).toBe(false)
+		expect(move({ vms: [{ id: 'a' }] }, card, false)).toBe(true)
+		expect(move({ vms: [] }, card, true)).toBe(true)
+	})
+
+	it('(1) lets an app move among the apps', () => {
+		expect(move({ vms: [{ id: 'a' }] }, { name: 'Files' })).toBe(true)
+		expect(move({ vms: [{ id: 'a' }] }, { name: 'Files' }, true)).toBe(true)
+	})
+})
+
+describe('app section VM tiles riding out a failed poll', () => {
+	const aVm = (id, state = 'running') => ({ id, title: id, state })
+	function section(vms = []) {
+		const vm = { appList: [{ name: 'Virtual Machines' }], vms }
+		vm.pollVms = AppSection.methods.pollVms.bind(vm)
+		return vm
+	}
+	afterEach(() => {
+		vi.useRealTimers()
+		listVirtualMachines.mockReset()
+	})
+	const poll = async (vm) => {
+		await vm.pollVms()
+		clearTimeout(vm.vmPollTimer)
+	}
+
+	it('(2) keeps the last list through one and two failed polls, and drops it on the third', async () => {
+		listVirtualMachines.mockRejectedValue(new Error('502'))
+		const vm = section([aVm('a')])
+
+		await poll(vm)
+		expect(vm.vms).toEqual([aVm('a')])
+		await poll(vm)
+		expect(vm.vms).toEqual([aVm('a')])
+		await poll(vm)
+		expect(vm.vms).toEqual([])
+	})
+
+	it('(2) counts again from nothing once a poll works', async () => {
+		const vm = section([aVm('a')])
+		listVirtualMachines.mockRejectedValueOnce(new Error('502')).mockRejectedValueOnce(new Error('502'))
+			.mockResolvedValueOnce([aVm('b')])
+			.mockRejectedValueOnce(new Error('502')).mockRejectedValueOnce(new Error('502'))
+
+		for (let i = 0; i < 5; i++) {
+			await poll(vm)
+		}
+
+		expect(vm.vms).toEqual([aVm('b')])
+	})
+
+	it('(2) drops the list at once when the module is not there', async () => {
+		listVirtualMachines.mockRejectedValue({ response: { status: 404 } })
+		const vm = section([aVm('a')])
+
+		await poll(vm)
+
+		expect(vm.vms).toEqual([])
+	})
+
+	it('(2) drops the list at once when the card goes', async () => {
+		const vm = section([aVm('a')])
+		vm.appList = []
+
+		await poll(vm)
+
+		expect(vm.vms).toEqual([])
+	})
+
+	it('(4) leaves the list as it is when nothing changed', async () => {
+		const vms = [aVm('a')]
+		listVirtualMachines.mockResolvedValue([aVm('a')])
+		const vm = section(vms)
+
+		await poll(vm)
+
+		expect(vm.vms).toBe(vms)
+	})
+
+	it('(4) gives up on a read that hangs after 15 s, counts it as failed and polls again', async () => {
+		vi.useFakeTimers()
+		listVirtualMachines.mockReturnValueOnce(new Promise(() => {})).mockResolvedValue([aVm('b')])
+		const vm = section([aVm('a')])
+
+		vm.pollVms()
+		await vi.advanceTimersByTimeAsync(15000)
+		expect(vm.vms).toEqual([aVm('a')])
+		expect(vm.vmPolling).toBe(false)
+		expect(vm.vmFailures).toBe(1)
+
+		await vi.advanceTimersByTimeAsync(5000)
+		expect(listVirtualMachines).toHaveBeenCalledTimes(2)
+		expect(vm.vms).toEqual([aVm('b')])
+		clearTimeout(vm.vmPollTimer)
+	})
+
+	it('(5) declares its polling state when the grid is made', () => {
+		const vm = { getList: vi.fn(), isMobile: () => false, $EventBus: { $on: vi.fn() }, pollVms: vi.fn(), onVisibility: vi.fn() }
+		const added = vi.spyOn(document, 'addEventListener')
+
+		AppSection.created.call(vm)
+		clearInterval(vm.ListRefreshTimer)
+
+		expect(vm).toMatchObject({ vmPollStopped: false, vmPolling: false, vmPollTimer: null, vmFailures: 0 })
+		expect(added).toHaveBeenCalledWith('visibilitychange', vm.onVisibility)
+		added.mockRestore()
+	})
+})
diff --git a/src/components/Apps/AppSection.vue b/src/components/Apps/AppSection.vue
index 0b04db03..7002457c 100644
--- a/src/components/Apps/AppSection.vue
+++ b/src/components/Apps/AppSection.vue
@@ -40,17 +40,20 @@
 			their own grid while loading. -->
 		<draggable v-if="!isLoading"
 			v-bind="dragOptions"
-			v-model="appList"
+			v-model="gridList"
 			:draggable="draggable"
+			:move="checkMove"
 			class="app-list contextmenu-canvas"
 			item-key="name"
 			tag="div"
 			@end="onSortEnd"
 			@start="drag = true">
 			<!-- App Icon Card Start -->
+			<!-- a VM tile is no handle: it is neither dragged nor dropped on -->
 			<template #item="{ element: item }">
-				<div :id="`app-${item.name}`" class="handle">
-					<app-card :item="item"
+				<div :id="`app-${item.name}`" :class="item.vmTile ? 'vm-tile-item' : 'handle'">
+					<vm-tile v-if="item.vmTile" :vm="item.vm"></vm-tile>
+					<app-card v-else :item="item"
 						@configApp="showConfigPanel"
 						@importApp="showContainerPanel"
 						@updateState="getList"></app-card>
@@ -93,6 +96,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import draggable from 'vuedraggable'
 import xor from 'lodash/xor'
 import concat from 'lodash/concat'
@@ -108,7 +112,7 @@ import GitAppModal from '@/components/Apps/GitAppModal.vue'
 import { withoutContainer } from '@/components/Apps/gitApps'
 import { APP_STORE_LAUNCH_ID, builtinOpensInNewTab } from '@/mixins/app/appLaunchPreference'
 import { STATS_APP_NAME } from '@/components/Stats/entry'
-import { VM_APP_NAME, forgetVirtualMachines, hasVirtualMachines, vmApplication } from '@/components/VirtualMachines/entry'
+import { VM_APP_NAME, forgetVirtualMachines, hasVirtualMachines, listVirtualMachines, vmApplication, withTimeout } from '@/components/VirtualMachines/entry'
 import UpdateAllModal from '@/components/Apps/UpdateAllModal.vue'
 import { imageUpdateSummary } from '@/components/Apps/imageUpdateSummary'
 import events from '@/events/events'
@@ -156,12 +160,21 @@ const builtInApplications = [
 
 const orderConfig = 'app_order'
 
+// how often the VM tiles read the VMs again, while the tab is shown
+const VM_POLL_MS = 5000
+// how long a read of the VMs may take before it counts as failed
+const VM_LIST_MS = 15000
+// failed reads in a row after which the tiles go
+const VM_POLL_FAILURES = 3
+
 export default {
 	components: {
 		AppCard,
 		Draggable: draggable,
 		AppSectionTitleTip,
 		AppCardSkeleton,
+		// loaded with the first VM: a box without the module never downloads it
+		VmTile: defineAsyncComponent(() => import('@/components/VirtualMachines/VmTile.vue')),
 	},
 	mixins: [business_ShowNewAppTag, business_LinkApp],
 	provide() {
@@ -186,6 +199,8 @@ export default {
 			skCount: 0,
 			ListRefreshTimer: null,
 			isCheckingImages: false,
+			// the VMs of the tiles, by title
+			vms: [],
 		}
 	},
 	computed: {
@@ -195,8 +210,31 @@ export default {
 				group: 'description',
 				disabled: false,
 				ghostClass: 'ghost',
+				// a VM tile starts no drag; its click still goes through
+				filter: '.vm-tile-item',
+				preventOnFilter: false,
 			}
 		},
+		// The grid as drawn: the apps, and a tile per VM right after the Virtual
+		// Machines card. The tiles are not apps: what is dragged comes back here
+		// without them, so the saved order never has them, and they go back after
+		// their card.
+		gridList: {
+			get() {
+				const at = this.appList.findIndex(app => app.name === VM_APP_NAME)
+				if (at < 0 || !this.vms.length) {
+					return this.appList
+				}
+				const tiles = this.vms.map(vm => ({ name: `vm-tile:${vm.id}`, vmTile: true, vm }))
+				return [...this.appList.slice(0, at + 1), ...tiles, ...this.appList.slice(at + 1)]
+			},
+			set(list) {
+				this.appList = list.filter(item => !item.vmTile)
+			},
+		},
+		hasVmCard() {
+			return this.appList.some(app => app.name === VM_APP_NAME)
+		},
 		showDragTip() {
 			return this.draggable === '.handle'
 		},
@@ -214,6 +252,12 @@ export default {
 			]
 		},
 	},
+	watch: {
+		// the tiles come with the card, not at the next read
+		hasVmCard() {
+			this.pollVms()
+		},
+	},
 	created() {
 		this.getList()
 		this.draggable = this.isMobile() ? '' : '.handle'
@@ -230,6 +274,14 @@ export default {
 		this.ListRefreshTimer = setInterval(() => {
 			this.getList()
 		}, 5000)
+
+		// the VM tiles' polling: plain fields, not data, as nothing is drawn from them
+		this.vmPollStopped = false
+		this.vmPolling = false
+		this.vmPollTimer = null
+		this.vmFailures = 0
+		document.addEventListener('visibilitychange', this.onVisibility)
+		this.pollVms()
 	},
 	beforeUnmount() {
 		this.$EventBus.$off(events.OPEN_APP_STORE_AND_GOTO_SYNCTHING)
@@ -237,6 +289,10 @@ export default {
 		window.removeEventListener('resize', this.getSkCount)
 
 		clearInterval(this.ListRefreshTimer)
+
+		this.vmPollStopped = true
+		clearTimeout(this.vmPollTimer)
+		document.removeEventListener('visibilitychange', this.onVisibility)
 	},
 	mounted() {
 		window.addEventListener('resize', this.getSkCount)
@@ -456,6 +512,63 @@ export default {
 			})
 		},
 
+		// The VMs of the tiles, read again every few seconds while the tab is shown,
+		// one read at a time. Only where the Virtual Machines card is, which is where
+		// the module answers. A list that cannot be read shows no tile, and says
+		// nothing: the card is still there for whoever wants to know why.
+		// A read that fails keeps the tiles shown for VM_POLL_FAILURES - 1 more
+		// polls: a hiccup of the gateway does not blink them away. A module that is
+		// not there (404, or the card gone) takes them away at once. A read that
+		// hangs is given up on after VM_LIST_MS and counts as failed.
+		async pollVms() {
+			clearTimeout(this.vmPollTimer)
+			if (this.vmPollStopped || this.vmPolling || document.hidden) {
+				return
+			}
+			if (!this.appList.some(app => app.name === VM_APP_NAME)) {
+				this.vms = []
+				this.vmFailures = 0
+			} else {
+				this.vmPolling = true
+				try {
+					const vms = await withTimeout(listVirtualMachines(), VM_LIST_MS)
+					this.vmFailures = 0
+					if (!isEqual(vms, this.vms)) {
+						this.vms = vms
+					}
+				} catch (e) {
+					this.vmFailures = (this.vmFailures || 0) + 1
+					if (e?.response?.status === 404 || this.vmFailures >= VM_POLL_FAILURES) {
+						this.vms = []
+					}
+				} finally {
+					this.vmPolling = false
+				}
+			}
+			if (!this.vmPollStopped && !document.hidden) {
+				this.vmPollTimer = setTimeout(() => this.pollVms(), VM_POLL_MS)
+			}
+		},
+
+		// An app is dropped among the apps only: not on a tile, nor between the
+		// Virtual Machines card and its tiles, where the tiles would be drawn back
+		// over it and it would jump. vuedraggable hands the item under the pointer.
+		checkMove(evt) {
+			const over = evt.relatedContext?.element
+			if (over?.vmTile) {
+				return false
+			}
+			return !(over?.name === VM_APP_NAME && evt.willInsertAfter && this.vms.length > 0)
+		},
+
+		onVisibility() {
+			if (document.hidden) {
+				clearTimeout(this.vmPollTimer)
+				return
+			}
+			return this.pollVms()
+		},
+
 		/**
 		 * @description: Save Sort Table
 		 * @param {*}
diff --git a/src/components/VirtualMachines/VmPage.spec.js b/src/components/VirtualMachines/VmPage.spec.js
index 2a7aded9..bf28eb97 100644
--- a/src/components/VirtualMachines/VmPage.spec.js
+++ b/src/components/VirtualMachines/VmPage.spec.js
@@ -915,3 +915,21 @@ describe('an answer to a call about a VM that comes late', () => {
 		expect(states()).toEqual([])
 	})
 })
+
+// A VM tile of the app grid that cannot show a console opens the page on its VM.
+describe('the page opened on a VM', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		vi.clearAllMocks()
+	})
+
+	it('selects the VM it was opened on', async () => {
+		const vms = [aVm({ id: 'vm-1', title: 'Alpha' }), aVm({ id: 'vm-2', title: 'Beta', state: 'shut-off' })]
+		const { wrapper } = await mountPage({ vms, props: { selectId: 'vm-2' } })
+
+		expect(wrapper.find('.vm-item.is-selected').text()).toContain('Beta')
+		// opening it on a VM starts nothing
+		expect(vmApi.action).not.toHaveBeenCalled()
+		wrapper.unmount()
+	})
+})
diff --git a/src/components/VirtualMachines/VmPage.vue b/src/components/VirtualMachines/VmPage.vue
index 61403362..6b22a337 100644
--- a/src/components/VirtualMachines/VmPage.vue
+++ b/src/components/VirtualMachines/VmPage.vue
@@ -114,6 +114,10 @@ export default {
 		OsIcon,
 		VmDetail,
 	},
+	props: {
+		// the VM to show first: the app grid's tile of a VM with no console
+		selectId: { type: String, default: '' },
+	},
 	emits: ['close'],
 	data() {
 		return {
@@ -122,7 +126,7 @@ export default {
 			order: [],
 			busy: {},
 			images: [],
-			selectedId: '',
+			selectedId: this.selectId,
 			loading: true,
 			error: '',
 			// How many times each VM was asked for or dropped. An answer that comes
diff --git a/src/components/VirtualMachines/VmTab.vue b/src/components/VirtualMachines/VmTab.vue
index bf341466..5d225089 100644
--- a/src/components/VirtualMachines/VmTab.vue
+++ b/src/components/VirtualMachines/VmTab.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- the virtual machines on a tab of their own, the whole window -->
 	<div class="vm-tab">
-		<VmPage @close="close" />
+		<VmPage :select-id="selectId" @close="close" />
 	</div>
 </template>
 
@@ -13,6 +13,13 @@ export default {
 	components: {
 		VmPage,
 	},
+	computed: {
+		// #/vms?vm=<id>: the tab opened from a VM tile of the app grid
+		selectId() {
+			const vm = this.$route?.query?.vm
+			return typeof vm === 'string' ? vm : ''
+		},
+	},
 	mounted() {
 		this.previousTitle = document.title
 		document.title = `${this.$t('Virtual Machines')} · ${this.previousTitle}`
diff --git a/src/components/VirtualMachines/VmTile.spec.js b/src/components/VirtualMachines/VmTile.spec.js
new file mode 100644
index 00000000..f37c9691
--- /dev/null
+++ b/src/components/VirtualMachines/VmTile.spec.js
@@ -0,0 +1,192 @@
+// @vitest-environment happy-dom
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { aVm } from './__fixtures__/vm'
+import VmTile from './VmTile.vue'
+import vmApi from './api'
+import { getVirtualMachine, openVirtualMachines, openVmConsole } from './entry'
+import i18n from '@/plugins/i18n'
+
+// The English strings, so that what a spec reads is what a person reads.
+vi.mock('@/assets/lang', async () => ({ default: { en_us: (await import('@/assets/lang/en_US.json')).default } }))
+vi.mock('./api', () => ({ default: { action: vi.fn(), list: vi.fn() } }))
+vi.mock('./entry', () => ({ openVirtualMachines: vi.fn(), openVmConsole: vi.fn(), getVirtualMachine: vi.fn() }))
+
+const HOSTILE = '<img src=x onerror="window.pwned = 1">'
+const buefy = { modal: { open: vi.fn() } }
+const state = { appLaunchInIframe: true }
+
+function tile(vm) {
+	return mount(VmTile, {
+		props: { vm: aVm(vm) },
+		global: { plugins: [i18n], mocks: { $buefy: buefy, $store: { state } } },
+		attachTo: document.body,
+	})
+}
+
+describe('the tile of a virtual machine', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		vi.clearAllMocks()
+		delete window.pwned
+		// the read on click fails here: the tile goes by the state it has
+		getVirtualMachine.mockRejectedValue(new Error('not read'))
+	})
+
+	// (1) named like the VM, a VM and not an app
+	it('is named like the VM, says it is one, and carries no system-app chip', () => {
+		const wrapper = tile({ title: 'Debian' })
+
+		expect(wrapper.find('.vm-tile-name').text()).toBe('Debian')
+		expect(wrapper.find('.vm-tile-chip').text()).toBe('VM')
+		expect(wrapper.find('.system-marker').exists()).toBe(false)
+		expect(wrapper.find('.vm-tile-screen svg').exists()).toBe(true)
+	})
+
+	it.each([
+		['running', 'running'],
+		['paused', 'paused'],
+		['shut-off', 'stopped'],
+		['crashed', 'other'],
+		['shutting-down', 'other'],
+		['something-new', 'other'],
+	])('shows the state %s as its dot', (vmState, dot) => {
+		const wrapper = tile({ state: vmState })
+
+		expect(wrapper.find('.vm-tile-dot').classes()).toContain(`vm-dot-${dot}`)
+	})
+
+	// (2) the console straight away where there is one
+	it('opens the console of a running VM on a click', async () => {
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVmConsole).toHaveBeenCalledWith(buefy, expect.objectContaining({ id: 'vm-1' }))
+		expect(openVirtualMachines).not.toHaveBeenCalled()
+	})
+
+	it('opens the console of a paused VM, which the console allows', async () => {
+		const wrapper = tile({ state: 'paused' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVmConsole).toHaveBeenCalledTimes(1)
+	})
+
+	it('opens the Virtual Machines window on a stopped VM, and starts nothing', async () => {
+		const wrapper = tile({ id: 'vm-2', state: 'shut-off' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVirtualMachines).toHaveBeenCalledWith(buefy, state, 'vm-2')
+		expect(openVmConsole).not.toHaveBeenCalled()
+		expect(vmApi.action).not.toHaveBeenCalled()
+	})
+
+	// (6) a name is text
+	it('shows a hostile name as text, never as HTML', () => {
+		const wrapper = tile({ title: HOSTILE })
+
+		expect(wrapper.find('.vm-tile-name').text()).toBe(HOSTILE)
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('button').attributes('aria-label')).toBe(`Console of ${HOSTILE}`)
+		expect(window.pwned).toBeUndefined()
+	})
+
+	it('cuts a long name to a sane length', () => {
+		const wrapper = tile({ title: 'x'.repeat(500) })
+
+		expect(wrapper.find('.vm-tile-name').text().length).toBeLessThanOrEqual(64)
+		expect(wrapper.find('button').attributes('title').length).toBeLessThan(100)
+	})
+
+	it('says what a click does on a VM with no console', () => {
+		const wrapper = tile({ title: 'Debian', state: 'shut-off' })
+
+		expect(wrapper.find('button').attributes('aria-label')).toBe('Debian, Off: open in Virtual Machines')
+	})
+
+	// (7) a button, so Enter and Space open it; and no menu of app actions
+	it('is a button of its own, with no menu of app actions', async () => {
+		const wrapper = tile({})
+
+		const button = wrapper.find('button')
+		expect(button.attributes('type')).toBe('button')
+		await button.trigger('contextmenu')
+		expect(wrapper.find('.app-card-drop').exists()).toBe(false)
+		expect(document.querySelector('.dropdown-menu')).toBeNull()
+		expect(document.body.textContent).not.toContain('Uninstall')
+	})
+})
+
+// (3) the state the tile shows may be a poll old: a click reads it again
+describe('a click on a VM tile, with the state read again', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		vi.clearAllMocks()
+	})
+
+	it('reads the VM once, with a 5 s limit, and opens the console it still has', async () => {
+		getVirtualMachine.mockResolvedValue(aVm({ id: 'vm-1', state: 'paused' }))
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(getVirtualMachine).toHaveBeenCalledTimes(1)
+		expect(getVirtualMachine).toHaveBeenCalledWith('vm-1', 5000)
+		expect(openVmConsole).toHaveBeenCalledWith(buefy, expect.objectContaining({ id: 'vm-1', state: 'paused' }))
+	})
+
+	it('opens the Virtual Machines window on a VM that went off since, and starts nothing', async () => {
+		getVirtualMachine.mockResolvedValue(aVm({ id: 'vm-1', state: 'shut-off' }))
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVmConsole).not.toHaveBeenCalled()
+		expect(openVirtualMachines).toHaveBeenCalledWith(buefy, state, 'vm-1')
+		expect(vmApi.action).not.toHaveBeenCalled()
+	})
+
+	it('goes by the state it has when the read fails', async () => {
+		getVirtualMachine.mockRejectedValue(new Error('timeout'))
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVmConsole).toHaveBeenCalledWith(buefy, expect.objectContaining({ id: 'vm-1', state: 'running' }))
+	})
+
+	it('goes by the state it has when the answer is not that VM', async () => {
+		getVirtualMachine.mockResolvedValue({ id: 'other', state: 'shut-off' })
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await flushPromises()
+
+		expect(openVmConsole).toHaveBeenCalledTimes(1)
+		expect(openVirtualMachines).not.toHaveBeenCalled()
+	})
+
+	it('opens one window for two quick clicks', async () => {
+		let answer
+		getVirtualMachine.mockReturnValue(new Promise((resolve) => {
+			answer = resolve
+		}))
+		const wrapper = tile({ id: 'vm-1', state: 'running' })
+
+		await wrapper.find('button').trigger('click')
+		await wrapper.find('button').trigger('click')
+		answer(aVm({ id: 'vm-1', state: 'running' }))
+		await flushPromises()
+
+		expect(openVmConsole).toHaveBeenCalledTimes(1)
+	})
+})
diff --git a/src/components/VirtualMachines/VmTile.vue b/src/components/VirtualMachines/VmTile.vue
new file mode 100644
index 00000000..87cfb389
--- /dev/null
+++ b/src/components/VirtualMachines/VmTile.vue
@@ -0,0 +1,196 @@
+<template>
+	<!-- A VM in the app grid. A button of its own, so Enter and Space open it;
+		no menu: a VM is not an app, and has none of an app's actions. -->
+	<button :aria-label="label" :title="label" class="common-card app-card vm-tile is-flex is-align-items-center is-justify-content-center"
+		type="button" @click="open">
+		<div class="blur-background"></div>
+		<div class="cards-content">
+			<div class="has-text-centered is-flex is-justify-content-center is-flex-direction-column pt-5 pb-3px img-c">
+				<div class="is-flex is-justify-content-center">
+					<!-- a screen, not an app's picture: drawn in the theme's own colours -->
+					<span aria-hidden="true" class="vm-tile-screen">
+						<svg fill="none" height="36" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							viewBox="0 0 24 24" width="36">
+							<rect height="13" rx="2" width="18" x="3" y="4" />
+							<path d="M8 21h8M12 17v4" />
+						</svg>
+						<span :class="`vm-dot-${dot}`" :title="stateText" class="vm-tile-dot"></span>
+						<span class="vm-tile-chip">VM</span>
+					</span>
+				</div>
+				<p class="mt-3 one-line vm-tile-name">{{ name }}</p>
+			</div>
+		</div>
+	</button>
+</template>
+
+<script>
+import { allowedActions, stateLabel } from './vms'
+import { getVirtualMachine, openVirtualMachines, openVmConsole } from './entry'
+
+// what a name may take of the card and of what is read out
+const NAME_MAX = 64
+// how long a click waits for the VM's state before going by the one it has
+const READ_MS = 5000
+
+// the dot: running, paused, stopped, or anything else (crashed, starting, stopping...)
+function tileState(state) {
+	switch (state) {
+		case 'running':
+			return 'running'
+		case 'paused':
+			return 'paused'
+		case 'shut-off':
+			return 'stopped'
+		default:
+			return 'other'
+	}
+}
+
+export default {
+	name: 'VmTile',
+	props: {
+		vm: { type: Object, required: true },
+	},
+	computed: {
+		name() {
+			const chars = [...String(this.vm.title || this.vm.name || '')]
+			return chars.length > NAME_MAX ? `${chars.slice(0, NAME_MAX - 1).join('')}…` : chars.join('')
+		},
+		hasConsole() {
+			return allowedActions(this.vm.state).console
+		},
+		dot() {
+			return tileState(this.vm.state)
+		},
+		stateText() {
+			return this.$t(stateLabel(this.vm.state))
+		},
+		label() {
+			return this.hasConsole
+				? this.$t('Console of {name}', { name: this.name })
+				: this.$t('{name}, {state}: open in Virtual Machines', { name: this.name, state: this.stateText })
+		},
+	},
+	created() {
+		// a click being handled: a second one opens nothing more
+		this.opening = false
+	},
+	methods: {
+		// The console where there is one; the page on this VM otherwise. Never a
+		// start: a click on a tile does not power a machine on. The state shown may
+		// be a poll old, so it is read again first; if that read fails, the tile
+		// goes by what it has.
+		async open() {
+			if (this.opening) {
+				return
+			}
+			this.opening = true
+			let vm = this.vm
+			try {
+				const now = await getVirtualMachine(this.vm.id, READ_MS)
+				if (now?.id === this.vm.id) {
+					vm = now
+				}
+			} catch {
+				// the state the tile has
+			}
+			try {
+				if (allowedActions(vm.state).console) {
+					openVmConsole(this.$buefy, vm)
+				} else {
+					openVirtualMachines(this.$buefy, this.$store.state, vm.id)
+				}
+			} finally {
+				this.opening = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// a button that looks like the other cards
+.vm-tile {
+	width: 100%;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	color: var(--casa-on-glass);
+	background: none;
+	cursor: pointer;
+
+	&:focus-visible {
+		outline: 2px solid var(--casa-on-glass);
+		outline-offset: 2px;
+	}
+}
+
+.vm-tile-name {
+	color: var(--casa-on-glass);
+}
+
+// Opaque, so its contrast does not hang on the wallpaper: --casa-text on
+// --casa-surface, 12.71:1 light and 13.37:1 dark. Outlined, where an app's
+// icon is a picture.
+.vm-tile-screen {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 4rem;
+	height: 4rem;
+	border: 2px solid var(--casa-text);
+	border-radius: 0.875rem;
+	color: var(--casa-text);
+	background: var(--casa-surface);
+	transition: all 0.3s;
+}
+
+.img-c:hover .vm-tile-screen {
+	transform: scale3d(1.1, 1.1, 1.1);
+}
+
+// the chip: the same pair, inverted (12.71:1 and 13.37:1)
+.vm-tile-chip {
+	position: absolute;
+	right: -0.5rem;
+	bottom: -0.375rem;
+	padding: 0 0.3rem;
+	border-radius: 0.375rem;
+	color: var(--casa-surface);
+	background: var(--casa-text);
+	font-size: 0.6875rem;
+	font-weight: 700;
+	line-height: 1rem;
+}
+
+// On --casa-surface; each at least 3:1 in both themes (light / dark): running
+// 3.51 / 4.64, paused 3.99 / 4.09, stopped 3.67 / 4.44, other 4.40 / 3.71. The
+// state is in words too, in the title and in what is read out.
+.vm-tile-dot {
+	position: absolute;
+	top: 0.3rem;
+	right: 0.3rem;
+	width: 0.625rem;
+	height: 0.625rem;
+	border-radius: 50%;
+
+	&.vm-dot-running {
+		background: #1f9d4c;
+	}
+
+	&.vm-dot-paused {
+		background: #b86e00;
+	}
+
+	&.vm-dot-stopped {
+		background: #7a8794;
+	}
+
+	// a ring, so it differs by shape as well as colour
+	&.vm-dot-other {
+		border: 2px solid #d6453d;
+	}
+}
+</style>
diff --git a/src/components/VirtualMachines/__fixtures__/page.js b/src/components/VirtualMachines/__fixtures__/page.js
index f4027c3b..7637196b 100644
--- a/src/components/VirtualMachines/__fixtures__/page.js
+++ b/src/components/VirtualMachines/__fixtures__/page.js
@@ -80,6 +80,7 @@ export async function mountPage(options = {}) {
 	const api = fakeApi()
 	const socket = fakeSocket()
 	const wrapper = mount(VmPage, {
+		props: options.props,
 		attachTo: document.body,
 		global: { plugins: [Buefy, i18n, [socketPlugin, socket]], mocks: { $api: api } },
 	})
diff --git a/src/components/VirtualMachines/entry.js b/src/components/VirtualMachines/entry.js
index 8b5f555f..e70a1137 100644
--- a/src/components/VirtualMachines/entry.js
+++ b/src/components/VirtualMachines/entry.js
@@ -7,6 +7,7 @@ import { VMS_LAUNCH_ID, builtinOpensInNewTab } from '@/mixins/app/appLaunchPrefe
 
 // loaded when first opened: a box without the module never downloads the page
 const VmPage = defineAsyncComponent(() => import('./VmPage.vue'))
+const VmConsoleModal = defineAsyncComponent(() => import('./VmConsoleModal.vue'))
 
 let probe = null
 
@@ -54,10 +55,11 @@ export function forgetVirtualMachines() {
 }
 
 // Opens the page in a modal, or on a tab of its own when the App launching
-// setting sends apps, or this one, to a new tab.
-export function openVirtualMachines(buefy, state) {
+// setting sends apps, or this one, to a new tab. With a VM's id, on that VM.
+export function openVirtualMachines(buefy, state, vmId = '') {
 	if (builtinOpensInNewTab(VMS_LAUNCH_ID, state)) {
-		window.open(`${window.location.pathname}#/vms`, '_blank')
+		const query = vmId ? `?vm=${encodeURIComponent(vmId)}` : ''
+		window.open(`${window.location.pathname}#/vms${query}`, '_blank')
 		return null
 	}
 
@@ -68,5 +70,43 @@ export function openVirtualMachines(buefy, state) {
 		scroll: 'keep',
 		animation: 'zoom-in',
 		customClass: 'vm-modal',
+		props: { selectId: vmId },
 	})
 }
+
+// A VM's console, full screen, as the page opens it. Esc belongs to the VM: the
+// console closes from its own button only.
+export function openVmConsole(buefy, vm) {
+	return buefy.modal.open({
+		component: VmConsoleModal,
+		fullScreen: true,
+		canCancel: [],
+		customClass: 'vm-console-modal',
+		props: { vm },
+	})
+}
+
+// Every VM, by title, for the app grid's tiles. The client and the helpers are
+// loaded on the first call: only a grid that has the module makes one.
+export function listVirtualMachines() {
+	return Promise.all([import('./api'), import('./vms')]).then(([{ default: vmApi }, { applyOrder }]) =>
+		vmApi.list().then((res) => {
+			const vms = (res.data?.data || []).filter(vm => typeof vm?.id === 'string')
+			return applyOrder(vms, []).sorted
+		}))
+}
+
+// One VM as the service has it now, given up on after `ms`.
+export function getVirtualMachine(id, ms) {
+	return withTimeout(import('./api').then(({ default: vmApi }) => vmApi.get(id)).then(res => res.data?.data), ms)
+}
+
+// The promise, or a rejection once `ms` has gone by: a call that hangs must not
+// hold up what waits on it for ever. The timer goes with the answer.
+export function withTimeout(promise, ms) {
+	let timer
+	const late = new Promise((resolve, reject) => {
+		timer = setTimeout(() => reject(new Error(`No answer in time (${ms} ms)`)), ms)
+	})
+	return Promise.race([promise, late]).finally(() => clearTimeout(timer))
+}
diff --git a/src/components/VirtualMachines/entry.spec.js b/src/components/VirtualMachines/entry.spec.js
index 3fecbf2d..d12ed5ed 100644
--- a/src/components/VirtualMachines/entry.spec.js
+++ b/src/components/VirtualMachines/entry.spec.js
@@ -1,4 +1,5 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 // The card shows only where the module answers through the gateway; a 404
 // means it is not installed, anything else may pass and is asked again.
@@ -40,3 +41,91 @@ describe('hasVirtualMachines', () => {
 		expect(get).toHaveBeenCalledTimes(2)
 	})
 })
+
+// The app grid's tiles: one per VM, by title, each opening its console or the
+// page on that VM.
+describe('the VM tiles of the app grid', () => {
+	beforeEach(() => {
+		get.mockReset()
+	})
+
+	it('lists the VMs by title, numbers as numbers, and drops what is not a VM', async () => {
+		get.mockResolvedValue({ data: { data: [
+			{ id: 'b', title: 'VM 10', state: 'running' },
+			{ id: 'a', title: 'VM 2', state: 'shut-off' },
+			{ id: 42, title: 'not a VM' },
+			null,
+		] } })
+		const { listVirtualMachines } = await freshEntry()
+
+		const vms = await listVirtualMachines()
+
+		expect(get).toHaveBeenCalledWith('/v2/virt_management/vms')
+		expect(vms.map(vm => vm.id)).toEqual(['a', 'b'])
+	})
+
+	it('opens the page on the VM it is given', async () => {
+		const open = vi.fn(() => ({ close: vi.fn() }))
+		const { openVirtualMachines } = await freshEntry()
+
+		openVirtualMachines({ modal: { open } }, {}, 'vm-2')
+
+		expect(open.mock.calls[0][0].props).toEqual({ selectId: 'vm-2' })
+	})
+
+	it('opens the page on its own tab on the VM, when the setting says so', async () => {
+		const open = vi.spyOn(window, 'open').mockReturnValue(null)
+		const { openVirtualMachines } = await freshEntry()
+
+		openVirtualMachines({ modal: { open: vi.fn() } }, { appLaunchInIframe: false, appLaunchExceptions: [] }, 'a/b c')
+
+		expect(open).toHaveBeenCalledWith(expect.stringMatching(/#\/vms\?vm=a%2Fb%20c$/), '_blank')
+		open.mockRestore()
+	})
+
+	it('opens the console the way the page does, closed by its own button only', async () => {
+		const open = vi.fn()
+		const { openVmConsole } = await freshEntry()
+		const vm = { id: 'vm-1', title: 'Debian', state: 'running' }
+
+		openVmConsole({ modal: { open } }, vm)
+
+		expect(open.mock.calls[0][0]).toMatchObject({ fullScreen: true, canCancel: [], customClass: 'vm-console-modal', props: { vm } })
+	})
+})
+
+describe('reading one VM, and the time limits', () => {
+	beforeEach(() => {
+		get.mockReset()
+	})
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('reads one VM by its id', async () => {
+		get.mockResolvedValue({ data: { data: { id: 'a/b', state: 'running' } } })
+		const { getVirtualMachine } = await freshEntry()
+
+		expect(await getVirtualMachine('a/b', 5000)).toEqual({ id: 'a/b', state: 'running' })
+		expect(get).toHaveBeenCalledWith('/v2/virt_management/vms/a%2Fb')
+	})
+
+	it('gives up on a call that does not answer in time', async () => {
+		vi.useFakeTimers()
+		const { withTimeout } = await freshEntry()
+
+		const caught = withTimeout(new Promise(() => {}), 5000).catch(e => e)
+		await vi.advanceTimersByTimeAsync(5000)
+
+		expect((await caught).message).toMatch(/time/i)
+		expect(vi.getTimerCount()).toBe(0)
+	})
+
+	it('lets an answer in time through, and leaves no timer behind', async () => {
+		vi.useFakeTimers()
+		const { withTimeout } = await freshEntry()
+
+		expect(await withTimeout(Promise.resolve(1), 5000)).toBe(1)
+		expect(vi.getTimerCount()).toBe(0)
+	})
+})