At this point, we are displaying the raw JSON content of the messages. Let's replace this with the Material List. We also need a link so that we can get back to the list of chat groups. Let's get started:

1. Replace the ul element in the messages.component.html file with the following code:

      <button mat-button [routerLink]="['/chat']">Back to Groups</button>

      <mat-list>
        <h3 mat-subheader>{{ group }}</h3>
        <mat-list-item *ngFor="let message of messages | async">
          {{ message.text }}
        </mat-list-item>
      </mat-list>

2. The output of the preceding code is as follows:

Congratulations! You can now navigate between groups with ease. The messages list also looks cleaner.

Now, let's take a look at the possible improvements we can make in our spare time.