diff --git a/packages/ui/src/app/demos/fib3r/fib3r-demo.tsx b/packages/ui/src/app/demos/fib3r/fib3r-demo.tsx
index bc2518df..bfb2a838 100644
--- a/packages/ui/src/app/demos/fib3r/fib3r-demo.tsx
+++ b/packages/ui/src/app/demos/fib3r/fib3r-demo.tsx
@@ -92,7 +92,7 @@ class Fib3rDemo extends Component<
                   : 'Welcome to FaaS: Fibonacci as a Service!'
               }
               hexColor={this.state.hexColor}
-              loggedIn={!!this.state.email}
+              loggedInUser={this.state.email}
               onLogoutClick={this.onLogoutClick.bind(this)}
               onLoginClick={this.onLoginClick.bind(this)}
             ></Header>
diff --git a/packages/ui/src/app/header.tsx b/packages/ui/src/app/header.tsx
index 34ec06d7..751d1cb7 100644
--- a/packages/ui/src/app/header.tsx
+++ b/packages/ui/src/app/header.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 export class Header extends React.Component<{
   title: string;
   hexColor: string;
-  loggedIn: boolean;
+  loggedInUser?: string | null;
   titleClassName: string;
   loginClassName: string;
   onLoginClick: () => void;
@@ -19,8 +19,12 @@ export class Header extends React.Component<{
             <Typography className={this.props.titleClassName} variant="h6" component="div" style={{ flexGrow: 1 }}>
               {this.props.title}
             </Typography>
-            <Button className='step-click-login' onClick={this.props.loggedIn ? this.props.onLogoutClick : this.props.onLoginClick} color="inherit">
-              {this.props.loggedIn ? 'Logout' : 'Login'}
+            <Button
+              className="step-click-login"
+              onClick={this.props.loggedInUser ? this.props.onLogoutClick : this.props.onLoginClick}
+              color="inherit"
+            >
+              {this.props.loggedInUser ? this.props.loggedInUser : 'Login'}
             </Button>
           </Toolbar>
         </AppBar>