diff --git a/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.component.ts b/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.component.ts
index c150a1365..2df86724c 100644
--- a/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.component.ts
+++ b/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.component.ts
@@ -1,41 +1,38 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { SubscriptionLifecycle } from '@hypertrace/common';
-
-import { Dashboard } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
-import { traceDetailDashboard } from '../trace-detail.dashboard';
-import { TraceDetails, TraceDetailService } from './../trace-detail.service';
+import { map } from 'rxjs/operators';
+import { TraceDetailService } from './../trace-detail.service';
+import { traceSequenceDashboard } from './trace-sequence.dashboard';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ht-navigable-dashboard
+      *htLoadAsync="this.traceVariables$ as traceVariables"
       class="scrollable-container"
       [padding]="0"
-      navLocation="${traceDetailDashboard.location}"
-      (dashboardReady)="this.onDashboardReady($event)"
+      [variables]="traceVariables"
+      navLocation="${traceSequenceDashboard.location}"
     >
     </ht-navigable-dashboard>
   `
 })
 export class TraceSequenceComponent {
-  public readonly traceDetails$: Observable<TraceDetails>;
-
-  public constructor(
-    private readonly subscriptionLifecycle: SubscriptionLifecycle,
-    private readonly traceDetailService: TraceDetailService
-  ) {
-    this.traceDetails$ = this.traceDetailService.fetchTraceDetails();
-  }
+  public readonly traceVariables$: Observable<TraceDetailVariables>;
 
-  public onDashboardReady(dashboard: Dashboard): void {
-    this.subscriptionLifecycle.add(
-      this.traceDetails$.subscribe(traceDetails => {
-        dashboard.setVariable('traceId', traceDetails.id);
-        dashboard.setVariable('spanId', traceDetails.entrySpanId);
-        dashboard.setVariable('startTime', traceDetails.startTime);
-        dashboard.refresh();
-      })
+  public constructor(private readonly traceDetailService: TraceDetailService) {
+    this.traceVariables$ = this.traceDetailService.fetchTraceDetails().pipe(
+      map(details => ({
+        traceId: details.id,
+        startTime: details.startTime,
+        spanId: details.entrySpanId
+      }))
     );
   }
 }
+
+interface TraceDetailVariables {
+  traceId: string;
+  startTime?: string | number;
+  spanId?: string;
+}
diff --git a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.dashboard.ts b/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.dashboard.ts
similarity index 74%
rename from projects/distributed-tracing/src/pages/trace-detail/trace-detail.dashboard.ts
rename to projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.dashboard.ts
index bd6770239..8d4d32acd 100644
--- a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.dashboard.ts
+++ b/projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.dashboard.ts
@@ -1,7 +1,7 @@
-import { DashboardDefaultConfiguration } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
+import { DashboardDefaultConfiguration } from '../../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
 
-export const traceDetailDashboard: DashboardDefaultConfiguration = {
-  location: 'TRACE_DETAIL',
+export const traceSequenceDashboard: DashboardDefaultConfiguration = {
+  location: 'TRACE_SEQUENCE',
   json: {
     type: 'container-widget',
     layout: {
diff --git a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts b/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts
index f4716ea24..576bb1def 100644
--- a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts
+++ b/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts
@@ -17,7 +17,7 @@ import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapp
 import { TracingDashboardModule } from '../../shared/dashboard/tracing-dashboard.module';
 import { TraceLogsComponent } from './logs/trace-logs.component';
 import { TraceSequenceComponent } from './sequence/trace-sequence.component';
-import { traceDetailDashboard } from './trace-detail.dashboard';
+import { traceSequenceDashboard } from './sequence/trace-sequence.dashboard';
 import { TraceDetailPageComponent } from './trace-detail.page.component';
 
 const ROUTE_CONFIG: TraceRoute[] = [
@@ -56,7 +56,7 @@ const ROUTE_CONFIG: TraceRoute[] = [
     FormattingModule,
     CopyShareableLinkToClipboardModule,
     DownloadJsonModule,
-    NavigableDashboardModule.withDefaultDashboards(traceDetailDashboard),
+    NavigableDashboardModule.withDefaultDashboards(traceSequenceDashboard),
     NavigableTabModule,
     LogEventsTableModule
   ]
diff --git a/projects/distributed-tracing/src/public-api.ts b/projects/distributed-tracing/src/public-api.ts
index b6357922b..489caa6e3 100644
--- a/projects/distributed-tracing/src/public-api.ts
+++ b/projects/distributed-tracing/src/public-api.ts
@@ -109,7 +109,7 @@ export * from './shared/components/table/tracing-table-cell-type';
 // Waterfall
 export { WaterfallData } from './shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
 export { TraceWaterfallDataSourceModel } from './shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model';
-export { traceDetailDashboard } from './pages/trace-detail/trace-detail.dashboard';
+export { traceSequenceDashboard } from './pages/trace-detail/sequence/trace-sequence.dashboard';
 export { TraceDetailPageComponent } from './pages/trace-detail/trace-detail.page.component';
 export { LogEvent } from './shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
 
diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts
index cd50538ca..c5a636468 100644
--- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts
+++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts
@@ -11,11 +11,12 @@ import {
   NavigableTabModule,
   SummaryValueModule
 } from '@hypertrace/components';
-import { LogEventsTableModule } from '@hypertrace/distributed-tracing';
+import { LogEventsTableModule, NavigableDashboardModule } from '@hypertrace/distributed-tracing';
 import { ObservabilityDashboardModule } from '../../shared/dashboard/observability-dashboard.module';
 import { ApiTraceDetailPageComponent } from './api-trace-detail.page.component';
 import { ApiTraceLogsComponent } from './logs/api-trace-logs.component';
 import { ApiTraceSequenceComponent } from './sequence/api-trace-sequence.component';
+import { apiTraceSequenceDashboard } from './sequence/api-trace-sequence.dashboard';
 
 const ROUTE_CONFIG: TraceRoute[] = [
   {
@@ -53,7 +54,8 @@ const ROUTE_CONFIG: TraceRoute[] = [
     ButtonModule,
     CopyShareableLinkToClipboardModule,
     NavigableTabModule,
-    LogEventsTableModule
+    LogEventsTableModule,
+    NavigableDashboardModule.withDefaultDashboards(apiTraceSequenceDashboard)
   ]
 })
 export class ApiTraceDetailPageModule {}
diff --git a/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.component.ts b/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.component.ts
index 3c51f44e0..0a0ec4407 100644
--- a/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.component.ts
+++ b/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.component.ts
@@ -1,60 +1,35 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { SubscriptionLifecycle } from '@hypertrace/common';
-
-import { Dashboard, ModelJson } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
-import { ApiTraceDetails, ApiTraceDetailService } from './../api-trace-detail.service';
+import { map } from 'rxjs/operators';
+import { ApiTraceDetailService } from './../api-trace-detail.service';
+import { apiTraceSequenceDashboard } from './api-trace-sequence.dashboard';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ht-application-aware-dashboard
-      [json]="this.defaultJson"
+    <ht-navigable-dashboard
+      *htLoadAsync="this.traceVariables$ as traceVariables"
+      navLocation="${apiTraceSequenceDashboard.location}"
       [padding]="0"
-      (dashboardReady)="this.onDashboardReady($event)"
+      [variables]="traceVariables"
     >
-    </ht-application-aware-dashboard>
+    </ht-navigable-dashboard>
   `
 })
 export class ApiTraceSequenceComponent {
-  public readonly traceDetails$: Observable<ApiTraceDetails>;
-
-  public readonly defaultJson: ModelJson = {
-    type: 'container-widget',
-    layout: {
-      type: 'auto-container-layout',
-      'enable-style': false
-    },
-    children: [
-      {
-        type: 'waterfall-widget',
-        title: 'Sequence Diagram',
-        data: {
-          type: 'api-trace-waterfall-data-source',
-          // tslint:disable-next-line: no-invalid-template-strings
-          'trace-id': '${traceId}',
-          // tslint:disable-next-line: no-invalid-template-strings
-          'start-time': '${startTime}'
-        }
-      }
-    ]
-  };
-
-  public constructor(
-    private readonly subscriptionLifecycle: SubscriptionLifecycle,
-    private readonly apiTraceDetailService: ApiTraceDetailService
-  ) {
-    this.traceDetails$ = this.apiTraceDetailService.fetchTraceDetails();
-  }
+  public readonly traceVariables$: Observable<ApiTraceDetailVariables>;
 
-  public onDashboardReady(dashboard: Dashboard): void {
-    this.subscriptionLifecycle.add(
-      this.traceDetails$.subscribe(traceDetails => {
-        dashboard.setVariable('traceId', traceDetails.id);
-        dashboard.setVariable('traceType', traceDetails.type);
-        dashboard.setVariable('startTime', traceDetails.startTime);
-        dashboard.refresh();
-      })
+  public constructor(private readonly apiTraceDetailService: ApiTraceDetailService) {
+    this.traceVariables$ = this.apiTraceDetailService.fetchTraceDetails().pipe(
+      map(details => ({
+        traceId: details.id,
+        startTime: details.startTime
+      }))
     );
   }
 }
+
+interface ApiTraceDetailVariables {
+  traceId: string;
+  startTime?: string | number;
+}
diff --git a/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.dashboard.ts b/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.dashboard.ts
new file mode 100644
index 000000000..0b127c5c5
--- /dev/null
+++ b/projects/observability/src/pages/api-trace-detail/sequence/api-trace-sequence.dashboard.ts
@@ -0,0 +1,25 @@
+import { DashboardDefaultConfiguration } from '@hypertrace/distributed-tracing';
+
+export const apiTraceSequenceDashboard: DashboardDefaultConfiguration = {
+  location: 'API_TRACE_SEQUENCE',
+  json: {
+    type: 'container-widget',
+    layout: {
+      type: 'auto-container-layout',
+      'enable-style': false
+    },
+    children: [
+      {
+        type: 'waterfall-widget',
+        title: 'Sequence Diagram',
+        data: {
+          type: 'api-trace-waterfall-data-source',
+          // tslint:disable-next-line: no-invalid-template-strings
+          'trace-id': '${traceId}',
+          // tslint:disable-next-line: no-invalid-template-strings
+          'start-time': '${startTime}'
+        }
+      }
+    ]
+  }
+};