diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
index 3cd5885e6602bae9583206430b52fae67a6a0c7b..20b9d419800a57a6c4c0e110db2c765aecad6419 100644
--- a/src/app/shared/layout/layout.component.html
+++ b/src/app/shared/layout/layout.component.html
@@ -1,5 +1,8 @@
 <div id="layout">
-  <app-navbar [links]="links" [theme]="theme"></app-navbar>
+  <app-navbar [links]="links" [theme]="theme">
+    <ng-content app-navbar-extra select="[app-navbar-extra]"></ng-content>
+    <ng-content app-navbar-extra-narrow select="[app-navbar-extra-narrow]"></ng-content>
+  </app-navbar>
   <main class="content">
     <router-outlet (deactivate)="onDeactivate()"></router-outlet>
   </main>
diff --git a/src/app/showcase-site/showcase-site.component.html b/src/app/showcase-site/showcase-site.component.html
index fab21ab2cddfe69d42386e324800108694902021..9ea1188b4407d82e26dd71744a989d7a821c71a7 100644
--- a/src/app/showcase-site/showcase-site.component.html
+++ b/src/app/showcase-site/showcase-site.component.html
@@ -1 +1,4 @@
-<app-layout [links]="navLinks"></app-layout>
+<app-layout [links]="navLinks">
+  <app-login-button app-navbar-extra class="login-link"></app-login-button>
+  <app-login-button app-navbar-extra-narrow class="text-center login-link"></app-login-button>
+</app-layout>
diff --git a/src/app/showcase-site/showcase-site.component.scss b/src/app/showcase-site/showcase-site.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..76eba4bf645ebaa572aaeefd0bacdcb8478e283a 100644
--- a/src/app/showcase-site/showcase-site.component.scss
+++ b/src/app/showcase-site/showcase-site.component.scss
@@ -0,0 +1,5 @@
+.login-link {
+  display: block;
+  margin: auto 0;
+  padding: 1em 0;
+}