diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
new file mode 100644
index 0000000..1597e8c
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
@@ -0,0 +1,9 @@
+<button
+  mat-icon-button
+  color="primary"
+  class="quick-jump-button"
+  aria-label="Jump to session"
+  matTooltip="Jump to session"
+  (click)="jump.emit()">
+  <mat-icon>arrow_forward</mat-icon>
+</button>
\ No newline at end of file
diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
new file mode 100644
index 0000000..768186d
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
@@ -0,0 +1,38 @@
+// ============================================================================
+// Quick-Jump Button — M3 FilledTonalIconButton
+// ============================================================================
+// Per spec: 8% state layer overlay on hover/focus using
+// --color-surface-light with opacity.
+// ============================================================================
+
+.quick-jump-button {
+  // M3 FilledTonalIconButton base: secondary container background
+  // with on-secondary-container icon color. We rely on the M3 theme
+  // token values provided by Angular Material, but override the
+  // ripple/state-layer to use the 8% overlay pattern.
+
+  // M3 state layer — 8% overlay on hover/focus
+  // Using the project's custom surface-light token with opacity
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--cc-on-surface, #E2E8F0);
+    opacity: 0;
+    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+  }
+
+  &:hover::after {
+    opacity: 0.08; // 8% state layer
+  }
+
+  &:focus-visible::after {
+    opacity: 0.08; // 8% state layer on focus
+  }
+
+  &:active::after {
+    opacity: 0.12; // 12% pressed state per M3 spec
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
new file mode 100644
index 0000000..7c2b397
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+/**
+ * Quick-Jump Button component for navigating to agent sessions.
+ *
+ * M3 FilledTonalIconButton style with 8% state layer overlay
+ * for hover/focus states. Emits a click event for parent-driven
+ * navigation.
+ *
+ * Per spec: arrow_forward icon, aria-label, tooltip.
+ */
+@Component({
+  selector: 'app-quick-jump-button',
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './quick-jump-button.component.html',
+  styleUrl: './quick-jump-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QuickJumpButtonComponent {
+  /** Emitted when the button is clicked, signaling navigation intent. */
+  @Output() readonly jump = new EventEmitter<void>();
+}
\ No newline at end of file