diff --git a/desktop/src/app/components/remote-display/remote-display.component.html b/desktop/src/app/components/remote-display/remote-display.component.html
new file mode 100644
index 0000000..d38c758
--- /dev/null
+++ b/desktop/src/app/components/remote-display/remote-display.component.html
@@ -0,0 +1,50 @@
+<div class="remote-display" #displayContainer
+  (contextmenu)="onContextMenu($event)"
+  (keydown)="onKeyDown($event)"
+  (keyup)="onKeyUp($event)"
+  tabindex="0"
+>
+  <!-- Display canvas -->
+  <canvas
+    #canvas
+    class="display-canvas"
+    (mousedown)="onMouseDown($event)"
+    (mouseup)="onMouseUp($event)"
+    (mousemove)="onMouseMove($event)"
+    (wheel)="onWheel($event)"
+    (mouseleave)="onMouseUp($event)"
+  ></canvas>
+
+  <!-- Overlay: connection status -->
+  @if (status() === 'connecting' || status() === 'disconnected' || status() === 'error') {
+    <div class="display-overlay" [class]="status()">
+      @if (status() === 'connecting') {
+        <div class="overlay-content">
+          <div class="spinner"></div>
+          <p>Connecting to session…</p>
+        </div>
+      } @else if (status() === 'disconnected') {
+        <div class="overlay-content">
+          <span class="overlay-icon">🔌</span>
+          <p>Agent disconnected</p>
+          <p class="sub">Waiting for VM agent to connect</p>
+        </div>
+      } @else {
+        <div class="overlay-content">
+          <span class="overlay-icon">⚠️</span>
+          <p>Connection error</p>
+        </div>
+      }
+    </div>
+  }
+
+  <!-- HUD: FPS counter and resolution -->
+  @if (status() === 'connected') {
+    <div class="hud-info">
+      <span class="hud-fps">{{ fps() }} FPS</span>
+      @if (resolution()) {
+        <span class="hud-res">{{ resolution() }}</span>
+      }
+    </div>
+  }
+</div>
diff --git a/desktop/src/app/components/remote-display/remote-display.component.scss b/desktop/src/app/components/remote-display/remote-display.component.scss
new file mode 100644
index 0000000..0d8bd4c
--- /dev/null
+++ b/desktop/src/app/components/remote-display/remote-display.component.scss
@@ -0,0 +1,88 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.remote-display {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  outline: none;
+}
+
+.display-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+// ── Overlay ───────────────────────────────────────────────────────────────
+
+.display-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 5;
+}
+
+.overlay-content {
+  text-align: center;
+  color: #e0e0e0;
+  font-size: 14px;
+}
+
+.overlay-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.sub {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top: 3px solid #0078d4;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin: 0 auto 16px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// ── HUD info ──────────────────────────────────────────────────────────────
+
+.hud-info {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 8px;
+  z-index: 6;
+}
+
+.hud-fps,
+.hud-res {
+  font-size: 11px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #0f0;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+}
+
+.hud-res {
+  color: #0af;
+}
diff --git a/desktop/src/app/components/remote-display/remote-display.component.ts b/desktop/src/app/components/remote-display/remote-display.component.ts
new file mode 100644
index 0000000..61cede4
--- /dev/null
+++ b/desktop/src/app/components/remote-display/remote-display.component.ts
@@ -0,0 +1,203 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  signal,
+  computed,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WebSocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-remote-display',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './remote-display.component.html',
+  styleUrl: './remote-display.component.scss',
+})
+export class RemoteDisplayComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input({ required: true }) sessionId!: string;
+
+  @Output() statusChange = new EventEmitter<'connecting' | 'connected' | 'disconnected' | 'error'>();
+
+  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('displayContainer') containerRef!: ElementRef<HTMLDivElement>;
+
+  /** Current connection status. */
+  readonly status = signal<'connecting' | 'connected' | 'disconnected' | 'error'>('connecting');
+
+  /** Display resolution string. */
+  readonly resolution = signal<string | null>(null);
+
+  /** Frames per second counter. */
+  private frameCount = 0;
+  private lastFpsTime = 0;
+  readonly fps = signal(0);
+
+  private canvas: HTMLCanvasElement | null = null;
+  private ctx: CanvasRenderingContext2D | null = null;
+  private img = new Image();
+  private animFrameId = 0;
+  private hasFrame = false;
+
+  /** Session status from server. */
+  readonly sessionStatus = signal<string>('waiting');
+
+  constructor(private ws: WebSocketService) {}
+
+  ngOnInit(): void {
+    // Connect to the session via WebSocket.
+    this.ws.connect(this.sessionId);
+
+    // Subscribe to display frames.
+    this.ws.displayFrames.subscribe({
+      next: (frame) => {
+        if (!this.canvas || !this.ctx) return;
+        this.img.onload = () => {
+          this.ctx!.drawImage(this.img, 0, 0, this.canvas!.width, this.canvas!.height);
+          this.hasFrame = true;
+        };
+        this.img.src = 'data:' + frame.content_type + ';base64,' + frame.data;
+        // FPS counter.
+        this.frameCount++;
+        const now = performance.now();
+        if (now - this.lastFpsTime >= 1000) {
+          this.fps.set(this.frameCount);
+          this.frameCount = 0;
+          this.lastFpsTime = now;
+        }
+      },
+      error: () => {
+        this.status.set('error');
+        this.statusChange.emit('error');
+      },
+    });
+
+    // Subscribe to session state updates.
+    this.ws.sessionUpdates.subscribe((update) => {
+      if (update.session_id === this.sessionId) {
+        this.sessionStatus.set(update.status);
+        this.resolution.set(update.resolution);
+        if (update.status === 'active') {
+          this.status.set('connected');
+          this.statusChange.emit('connected');
+        } else if (update.status === 'disconnected') {
+          this.status.set('disconnected');
+          this.statusChange.emit('disconnected');
+        }
+      }
+    });
+
+    // Connection state.
+    this.ws.connected.subscribe((connected) => {
+      if (connected) {
+        this.status.set('connecting');
+      } else {
+        this.status.set('disconnected');
+        this.statusChange.emit('disconnected');
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.canvas = this.canvasRef.nativeElement;
+    this.ctx = this.canvas.getContext('2d');
+    this.resizeCanvas();
+    // Start render loop.
+    this.renderLoop();
+  }
+
+  ngOnDestroy(): void {
+    this.ws.disconnect();
+    if (this.animFrameId) cancelAnimationFrame(this.animFrameId);
+  }
+
+  private resizeCanvas(): void {
+    if (!this.canvas || !this.containerRef) return;
+    const rect = this.containerRef.nativeElement.getBoundingClientRect();
+    this.canvas.width = rect.width;
+    this.canvas.height = rect.height;
+  }
+
+  private renderLoop = (): void => {
+    this.animFrameId = requestAnimationFrame(this.renderLoop);
+  };
+
+  // ── Mouse events (HUD forwarding) ───────────────────────────────────────
+
+  onMouseDown(event: MouseEvent): void {
+    const pos = this.getCanvasPos(event);
+    this.ws.sendHudCommand('mouse_down', {
+      button: event.button,
+      x: pos.x,
+      y: pos.y,
+      buttons: event.buttons,
+    });
+  }
+
+  onMouseUp(event: MouseEvent): void {
+    const pos = this.getCanvasPos(event);
+    this.ws.sendHudCommand('mouse_up', {
+      button: event.button,
+      x: pos.x,
+      y: pos.y,
+    });
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    const pos = this.getCanvasPos(event);
+    this.ws.sendHudCommand('mouse_move', { x: pos.x, y: pos.y });
+  }
+
+  onWheel(event: WheelEvent): void {
+    this.ws.sendHudCommand('scroll', {
+      deltaX: event.deltaX,
+      deltaY: event.deltaY,
+    });
+  }
+
+  onContextMenu(event: Event): void {
+    event.preventDefault();
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    this.ws.sendHudCommand('key_down', {
+      key: event.key,
+      code: event.code,
+      ctrl: event.ctrlKey,
+      shift: event.shiftKey,
+      alt: event.altKey,
+      meta: event.metaKey,
+    });
+    // Prevent browser default for most keys when display is active.
+    if (this.hasFrame && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+    }
+  }
+
+  onKeyUp(event: KeyboardEvent): void {
+    this.ws.sendHudCommand('key_up', {
+      key: event.key,
+      code: event.code,
+      ctrl: event.ctrlKey,
+      shift: event.shiftKey,
+      alt: event.altKey,
+      meta: event.metaKey,
+    });
+  }
+
+  private getCanvasPos(event: MouseEvent): { x: number; y: number } {
+    if (!this.canvas) return { x: 0, y: 0 };
+    const rect = this.canvas.getBoundingClientRect();
+    return {
+      x: Math.round(((event.clientX - rect.left) / rect.width) * this.canvas.width),
+      y: Math.round(((event.clientY - rect.top) / rect.height) * this.canvas.height),
+    };
+  }
+}