diff --git a/apps/breadcrumb-demo/src/app/core/navbar/navbar.component.html b/apps/breadcrumb-demo/src/app/core/navbar/navbar.component.html
index 9c84632..3f0adc5 100644
--- a/apps/breadcrumb-demo/src/app/core/navbar/navbar.component.html
+++ b/apps/breadcrumb-demo/src/app/core/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <div class="navbar mat-elevation-z6">
   <nav class="navbar-header">
     <a mat-button [routerLink]="['/']" class="home">TechUnroll</a>
-    <a mat-button [routerLink]="['/mentor']" [queryParams]="{ viaNav: 'true' }" fxHide.lt-md="true">Mentors</a>
+    <a mat-button [routerLink]="['/mentor']" [queryParams]="{ viaNav: 'true', type: 'list' }" fxHide.lt-md="true">Mentors</a>
     <a mat-button [routerLink]="['/mentee']" [queryParams]="{ viaNav: 'true' }" fxHide.lt-md="true">Mentees</a>
     <a mat-button [routerLink]="['/connect']" [queryParams]="{ viaNav: 'true', loggedIn: 'false' }" fxHide.lt-md="true">Connect</a>
     <div fxFlex></div>
diff --git a/apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts b/apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts
index 23c002b..20ecea8 100644
--- a/apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts
+++ b/apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts
@@ -26,8 +26,8 @@ export class MenteeAddComponent implements OnInit {
   allSkills = allLanguages;
   filteredSkills: Observable<string[]>;
 
-  @ViewChild('skillInput', { static: true }) skillInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto', { static: true }) matAutocomplete: MatAutocomplete;
+  @ViewChild('skillInput') skillInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete: MatAutocomplete;
 
   constructor(private fb: FormBuilder, private dataService: DataService, private snackBar: MatSnackBar, private router: Router) {}
 
@@ -62,7 +62,7 @@ export class MenteeAddComponent implements OnInit {
       mentee.skills = this.skills;
 
       this.dataService.addMentee(mentee).subscribe((response: any) => {
-        let navigationExtras: NavigationExtras = {
+        const navigationExtras: NavigationExtras = {
           queryParams: { addedMentor: mentee.id }
         };
 
@@ -73,7 +73,7 @@ export class MenteeAddComponent implements OnInit {
   }
 
   add(event: MatChipInputEvent): void {
-    if (!this.matAutocomplete.isOpen) {
+    if (!this.matAutocomplete?.isOpen) {
       const input = event.input;
       const value = event.value;
 
diff --git a/apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts b/apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts
index e3c47d9..2385511 100644
--- a/apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts
+++ b/apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts
@@ -26,8 +26,8 @@ export class MenteeEditComponent implements OnInit {
   allSkills = allLanguages;
   filteredSkills: Observable<string[]>;
 
-  @ViewChild('skillInput', { static: true }) skillInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto', { static: true }) matAutocomplete: MatAutocomplete;
+  @ViewChild('skillInput') skillInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete: MatAutocomplete;
 
   constructor(
     private fb: FormBuilder,
@@ -80,7 +80,7 @@ export class MenteeEditComponent implements OnInit {
       mentee.available = this.menteeFG.value.available;
       mentee.skills = this.skills;
 
-      let navigationExtras: NavigationExtras = {
+      const navigationExtras: NavigationExtras = {
         queryParams: { editedMentee: this.menteeId }
       };
 
@@ -92,7 +92,7 @@ export class MenteeEditComponent implements OnInit {
   }
 
   add(event: MatChipInputEvent): void {
-    if (!this.matAutocomplete.isOpen) {
+    if (!this.matAutocomplete?.isOpen) {
       const input = event.input;
       const value = event.value;
 
diff --git a/apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts b/apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts
index a9a5614..be48b45 100644
--- a/apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts
+++ b/apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts
@@ -27,8 +27,8 @@ export class MentorAddComponent implements OnInit {
   allSkills = allLanguages;
   filteredSkills: Observable<string[]>;
 
-  @ViewChild('skillInput', { static: true }) skillInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto', { static: true }) matAutocomplete: MatAutocomplete;
+  @ViewChild('skillInput') skillInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete: MatAutocomplete;
 
   constructor(
     private fb: FormBuilder,
@@ -70,7 +70,7 @@ export class MentorAddComponent implements OnInit {
       mentor.skills = this.skills;
 
       this.dataService.addMentor(mentor).subscribe((response: any) => {
-        let navigationExtras: NavigationExtras = {
+        const navigationExtras: NavigationExtras = {
           queryParams: { addedMentor: mentor.id }
         };
 
@@ -81,7 +81,7 @@ export class MentorAddComponent implements OnInit {
   }
 
   add(event: MatChipInputEvent): void {
-    if (!this.matAutocomplete.isOpen) {
+    if (!this.matAutocomplete?.isOpen) {
       const input = event.input;
       const value = event.value;
 
diff --git a/apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts b/apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts
index 13121e7..1816d0f 100644
--- a/apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts
+++ b/apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts
@@ -16,7 +16,7 @@ export class MentorDetailsComponent implements OnInit {
     private dataService: DataService,
     private route: ActivatedRoute,
     private router: Router
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.getMentor();
@@ -32,6 +32,6 @@ export class MentorDetailsComponent implements OnInit {
   }
 
   editMentor() {
-    this.router.navigate(['./edit'], { relativeTo: this.route });
+    this.router.navigate(['./edit'], { relativeTo: this.route, queryParams: { type: 'edit' } });
   }
 }
diff --git a/apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts b/apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts
index 86c04c0..09217ec 100644
--- a/apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts
+++ b/apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts
@@ -26,8 +26,8 @@ export class MentorEditComponent implements OnInit {
   allSkills = allLanguages;
   filteredSkills: Observable<string[]>;
 
-  @ViewChild('skillInput', { static: true }) skillInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto', { static: true }) matAutocomplete: MatAutocomplete;
+  @ViewChild('skillInput') skillInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete: MatAutocomplete;
 
   constructor(
     private fb: FormBuilder,
@@ -92,7 +92,7 @@ export class MentorEditComponent implements OnInit {
   }
 
   add(event: MatChipInputEvent): void {
-    if (!this.matAutocomplete.isOpen) {
+    if (!this.matAutocomplete?.isOpen) {
       const input = event.input;
       const value = event.value;
 
diff --git a/apps/breadcrumb-demo/src/app/mentor/mentor-list/mentor-list.component.html b/apps/breadcrumb-demo/src/app/mentor/mentor-list/mentor-list.component.html
index 78bb0fe..68497c7 100644
--- a/apps/breadcrumb-demo/src/app/mentor/mentor-list/mentor-list.component.html
+++ b/apps/breadcrumb-demo/src/app/mentor/mentor-list/mentor-list.component.html
@@ -1,11 +1,11 @@
 <section class="add-item">
-  <a mat-fab routerLink="add" color="accent" routerLink="add">
+  <a mat-fab routerLink="add" color="accent" routerLink="add" [queryParams]="{ type: 'add' }">
     <mat-icon matTooltip="Add a Mentor">add</mat-icon>
   </a>
 </section>
 
 <section fxLayout="column" fxLayoutGap="12px">
-  <mat-card *ngFor="let mentor of mentors" [routerLink]="[mentor.id]">
+  <mat-card *ngFor="let mentor of mentors" [routerLink]="[mentor.id]" [queryParams]="{ type: 'details' }">
     <mat-card-header>
       <div mat-card-avatar>
         <mat-icon class="person">person</mat-icon>