We now have AuthService for authentication and SignInModalComponent for users to enter their email and password, and we need a lightweight home screen ( HomeComponent ) to connect them. When a user is unauthenticated, clicking the Sign In button on the home screen opens the CDK Sign-In modal. The user then enters their email and password to complete authentication and navigate to the /dashboard route.

In addition, HeaderComponent no longer displays only static text. It now renders a Home icon link on the left edge and a conditional Sign-Out button on the right edge.

Caption: The unauthenticated Home screen displaying the left-aligned Home icon in the header, the "Sign In" button in the hero card, and the feature metadata cards.

Architecture & Mental Model

HomeComponent and HeaderComponent share the AuthService.isAuthenticated computed signal to coordinate the UI across three states:

Unauthenticated /home : HeaderComponent displays only the left-aligned Home icon link ( /home ), and HomeComponent renders…