diff --git a/apps/cardiovascular-health/src/app/app.component.html b/apps/cardiovascular-health/src/app/app.component.html
index bc32b66a..d238cae0 100644
--- a/apps/cardiovascular-health/src/app/app.component.html
+++ b/apps/cardiovascular-health/src/app/app.component.html
@@ -1,4 +1,6 @@
 <fhir-chart-layout [toolbar]="['loading', 'options']" [showAdvancedOptions]="false">
+  <mat-label>Timeline view</mat-label>
+
   <div class="layout-main">
     <div class="layout-main-top">
       <data-layer-selector [views]="views" active="Cardiovascular"></data-layer-selector>
diff --git a/apps/cardiovascular-health/src/app/app.module.ts b/apps/cardiovascular-health/src/app/app.module.ts
index 859c6e42..c53ec22c 100644
--- a/apps/cardiovascular-health/src/app/app.module.ts
+++ b/apps/cardiovascular-health/src/app/app.module.ts
@@ -19,6 +19,7 @@ import {
 } from '@elimuinformatics/ngx-charts-on-fhir';
 import { environment } from '../environments/environment';
 import { summaryProviders } from './providers/summary-providers';
+import { MatInputModule } from '@angular/material/input';
 
 function initializeFhirClientFactory(service: FhirDataService): () => Promise<void> {
   return () => service.initialize(environment.clientState);
@@ -36,6 +37,7 @@ function initializeFhirClientFactory(service: FhirDataService): () => Promise<vo
     TimelineRangeSelectorModule,
     SummaryRangeSelectorModule,
     DataLayerSelectorModule,
+    MatInputModule,
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: initializeFhirClientFactory, deps: [FhirDataService], multi: true },
diff --git a/apps/showcase/src/app/app.component.html b/apps/showcase/src/app/app.component.html
index 05d6bbb6..cd91128e 100644
--- a/apps/showcase/src/app/app.component.html
+++ b/apps/showcase/src/app/app.component.html
@@ -1,4 +1,6 @@
 <fhir-chart-layout [toolbar]="toolbar" [active]="active">
+  <mat-label>Timeline view</mat-label>
+
   <div class="layout-main">
     <timeline-range-selector class="layout-main-range"></timeline-range-selector>
     <summary-range-selector class="layout-summary-selector"></summary-range-selector>
diff --git a/apps/showcase/src/app/app.module.ts b/apps/showcase/src/app/app.module.ts
index 58454ea2..a58ae054 100644
--- a/apps/showcase/src/app/app.module.ts
+++ b/apps/showcase/src/app/app.module.ts
@@ -18,6 +18,7 @@ import {
 } from '@elimuinformatics/ngx-charts-on-fhir';
 import { environment } from '../environments/environment';
 import { summaryProviders } from './providers/summary-providers';
+import { MatInputModule } from '@angular/material/input';
 
 function initializeFhirClientFactory(service: FhirDataService): () => Promise<void> {
   return () => service.initialize(environment.clientState);
@@ -34,6 +35,7 @@ function initializeFhirClientFactory(service: FhirDataService): () => Promise<vo
     FhirChartLegendModule,
     TimelineRangeSelectorModule,
     SummaryRangeSelectorModule,
+    MatInputModule,
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: initializeFhirClientFactory, deps: [FhirDataService], multi: true },
diff --git a/libs/ngx-charts-on-fhir/src/lib/timeline-range-selector/timeline-range-selector.component.html b/libs/ngx-charts-on-fhir/src/lib/timeline-range-selector/timeline-range-selector.component.html
index 608be652..db1d3626 100644
--- a/libs/ngx-charts-on-fhir/src/lib/timeline-range-selector/timeline-range-selector.component.html
+++ b/libs/ngx-charts-on-fhir/src/lib/timeline-range-selector/timeline-range-selector.component.html
@@ -1,6 +1,5 @@
 <div class="range-selector" *ngIf="maxDate">
   <div class="toggle-buttons">
-    <mat-label>Timeline view</mat-label>
     <mat-button-toggle-group id="rangeselector" name="fontStyle" aria-label="Font Style" [value]="selectedButton">
       <mat-button-toggle
         *ngFor="let rangeButton of rangeSelectorButtons"