diff --git a/frontend/src/app/components/index.ts b/frontend/src/app/components/index.ts
index 09c8fb9..71a2bdd 100644
--- a/frontend/src/app/components/index.ts
+++ b/frontend/src/app/components/index.ts
@@ -1 +1,2 @@
+export * from './quick-jump-button/quick-jump-button.component';
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
\ No newline at end of file
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..3aa3c3c
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
@@ -0,0 +1,8 @@
+
\ 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..718b441
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
@@ -0,0 +1,68 @@
+// ============================================================================
+// Quick-Jump Button — M3 FilledTonalIconButton
+// Per spec Section 7.3: Agent Card Quick-Jump action
+// M3 spec: FilledTonalIconButton uses secondary container color
+// with 8% state layer overlay for hover/focus.
+// ============================================================================
+
+.quick-jump-button {
+ // M3 FilledTonalIconButton: secondary-container background
+ // Angular Material mat-icon-button sets up the base shape (40x40, round).
+ // We override the color tokens to match FilledTonal style.
+ --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
+ background-color: var(--mat-sys-secondary-container);
+ border-radius: 50%;
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ // M3 State Layer: 8% overlay on hover
+ &:hover {
+ background-color: var(--mat-sys-secondary-container);
+ // State layer overlay using a pseudo-element for precise 8% opacity
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background-color: var(--mat-sys-on-secondary-container);
+ opacity: 0.08;
+ pointer-events: none;
+ }
+ }
+
+ // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
+ &:focus-visible {
+ background-color: var(--mat-sys-secondary-container);
+ outline: 3px solid var(--status-active);
+ outline-offset: 2px;
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background-color: var(--mat-sys-on-secondary-container);
+ opacity: 0.12;
+ pointer-events: none;
+ }
+ }
+
+ // M3 State Layer: 12% overlay on active/pressed
+ &:active {
+ background-color: var(--mat-sys-secondary-container);
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background-color: var(--mat-sys-on-secondary-container);
+ opacity: 0.12;
+ pointer-events: none;
+ }
+ }
+
+ // Icon color stays on-secondary-container across all states
+ .mat-icon {
+ color: var(--mat-sys-on-secondary-container);
+ }
+}
\ 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..899fc1d
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+/**
+ * Quick-Jump Button — M3 FilledTonalIconButton
+ *
+ * An icon button that emits a navigation event for jumping to an agent session.
+ * Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
+ * overlay on hover and focus.
+ *
+ * Per spec Section 7.3: Agent Card Component Interface
+ */
+@Component({
+ selector: 'app-quick-jump-button',
+ standalone: true,
+ imports: [MatIconButton, MatIcon],
+ templateUrl: './quick-jump-button.component.html',
+ styleUrl: './quick-jump-button.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QuickJumpButtonComponent {
+ /** Emitted when the button is clicked, carrying the session key for navigation. */
+ @Output() jumpClick = new EventEmitter();
+
+ /** The session key to navigate to. Set by the parent agent card. */
+ sessionKey = '';
+
+ onJumpClick(): void {
+ this.jumpClick.emit(this.sessionKey);
+ }
+}
\ No newline at end of file