diff --git a/demo/src/app/home/home.component.html b/demo/src/app/home/home.component.html
index 88c82ead..f0ad8baa 100644
--- a/demo/src/app/home/home.component.html
+++ b/demo/src/app/home/home.component.html
@@ -23,7 +23,7 @@ <h1>ngx-auth-firebaseui</h1>
 
 <section class="home">
   <div class="container">
-    <ngx-auth-firebaseui-login></ngx-auth-firebaseui-login>
+    <ngx-auth-firebaseui-login appearance="outline" (onCreateAccountRequested)="createAccount()"></ngx-auth-firebaseui-login>
 <!--    <div fxLayout="column">-->
 
 <!--      &lt;!&ndash;toolbar&ndash;&gt;-->
diff --git a/demo/src/app/home/home.component.ts b/demo/src/app/home/home.component.ts
index 50e3b4e5..130d78ec 100644
--- a/demo/src/app/home/home.component.ts
+++ b/demo/src/app/home/home.component.ts
@@ -2,8 +2,8 @@ import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {AuthProvider, Theme} from 'ngx-auth-firebaseui';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTabChangeEvent } from '@angular/material/tabs';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatTabChangeEvent} from '@angular/material/tabs';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs/internal/Subscription';
 
@@ -134,4 +134,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     console.log('Account Delete successful!');
   }
 
+  createAccount() {
+    console.log('create account has beeen requested');
+  }
 }
diff --git a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
index d15418b1..ddc824c9 100644
--- a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
+++ b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
@@ -74,7 +74,10 @@
 
       <div class="register" fxLayout="column" fxLayoutAlign="center center">
         <span class="text">{{dontHaveAnAccountText}}</span>
-        <button mat-button color="primary" type="button">{{createAccountButtonText}}</button>
+        <button mat-button
+                color="primary"
+                type="button"
+                (click)="onCreateAccountRequested.emit()">{{createAccountButtonText}}</button>
       </div>
 
     </div>
diff --git a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
index 29e83c37..c9d28213 100644
--- a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
+++ b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {MatFormFieldAppearance} from '@angular/material';
 import {AuthProvider} from '../../..';
@@ -39,6 +39,7 @@ export class NgxAuthFirebaseuiLoginComponent implements OnInit {
   // Events
   @Output() onSuccess: any;
   @Output() onError: any;
+  @Output() onCreateAccountRequested: EventEmitter<void> = new EventEmitter<void>();
 
   constructor(private _formBuilder: FormBuilder) {
   }