diff --git a/package-lock.json b/package-lock.json
index 216038fa..3716c277 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7858,6 +7858,15 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -7869,15 +7878,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/src/app/core/auth.service.ts b/src/app/core/auth.service.ts
index 4338b112..4362f687 100644
--- a/src/app/core/auth.service.ts
+++ b/src/app/core/auth.service.ts
@@ -108,6 +108,26 @@ export class AuthService {
       .catch(error => console.log(error));
   }
 
+  emailSignUpWithDisplayName(email:string, password:string, displayName:string) {
+    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
+      .then((user) => {
+        //Add a display name to the user.
+       user.updateProfile({
+        displayName: displayName
+      }).then(() => {
+        // Update successful
+        this.authState = user
+      });
+        
+        this.updateUserData()
+      })
+      .catch(error =>{
+         console.log(error);
+         //THrow the exception which results when user signsup
+         throw(error);
+        });
+  }
+
   emailLogin(email: string, password: string) {
     return this.afAuth.auth.signInWithEmailAndPassword(email, password)
       .then((user) => {
diff --git a/src/app/ui/user-form/user-form.component.html b/src/app/ui/user-form/user-form.component.html
index 69be4bdb..f6c192a6 100644
--- a/src/app/ui/user-form/user-form.component.html
+++ b/src/app/ui/user-form/user-form.component.html
@@ -1,21 +1,25 @@
-
-<form [formGroup]="userForm"  *ngIf="newUser"  (ngSubmit)="signup()">
+<form [formGroup]="userForm" *ngIf="newUser" (ngSubmit)="signup()">
 
   <h3>New User Signup</h3>
   <p class="button is-small" (click)="toggleForm()">Already Registered?</p>
   <hr>
 
   <label for="email">Email</label>
-  <input type="email" id="email" class="input"
-         formControlName="email" required >
+  <input type="email" id="email" class="input" formControlName="email" required>
 
   <div *ngIf="formErrors.email" class="notification is-danger">
     {{ formErrors.email }}
   </div>
 
+  <label for="displayName">Name</label>
+  <input type="text" id="displayName" class="input" formControlName="displayName" required>
+
+  <div *ngIf="formErrors.displayName" class="notification is-danger">
+    {{ formErrors.displayName }}
+  </div>
+
   <label for="password">Password</label>
-  <input type="password" id="password" class="input"
-         formControlName="password" required >
+  <input type="password" id="password" class="input" formControlName="password" required>
 
   <div *ngIf="formErrors.password" class="notification is-danger">
     {{ formErrors.password }}
@@ -30,23 +34,21 @@ <h3>New User Signup</h3>
 </form>
 
 
-<form [formGroup]="userForm"  *ngIf="!newUser"  (ngSubmit)="login()">
+<form [formGroup]="userForm" *ngIf="!newUser" (ngSubmit)="login()">
 
   <h3>Existing User Login</h3>
   <p class="btn button is-small" (click)="toggleForm()">New User?</p>
   <hr>
 
   <label for="email">Email</label>
-  <input type="email" id="email" class="input"
-         formControlName="email" required >
+  <input type="email" id="email" class="input" formControlName="email" required>
 
   <div *ngIf="formErrors.email" class="help is-danger">
     {{ formErrors.email }}
   </div>
 
   <label for="password">Password</label>
-  <input type="password" id="password" class="input"
-         formControlName="password" required >
+  <input type="password" id="password" class="input" formControlName="password" required>
 
   <div *ngIf="formErrors.password" class="help is-danger">
     {{ formErrors.password }}
@@ -60,4 +62,4 @@ <h3>Existing User Login</h3>
   <p *ngIf="passReset" class="help is-info">Reset requested. Check your email instructions.</p>
 
 
-</form>
+</form>
\ No newline at end of file
diff --git a/src/app/ui/user-form/user-form.component.ts b/src/app/ui/user-form/user-form.component.ts
index 3e5db5e3..74b1bbb5 100644
--- a/src/app/ui/user-form/user-form.component.ts
+++ b/src/app/ui/user-form/user-form.component.ts
@@ -40,7 +40,9 @@ export class UserFormComponent implements OnInit {
   }
 
   signup(): void {
-    this.auth.emailSignUp(this.userForm.value['email'], this.userForm.value['password'])
+    this.auth.emailSignUpWithDisplayName(this.userForm.value['email'],
+     this.userForm.value['password'], 
+     this.userForm.value['displayName'])
   }
 
   login(): void {
@@ -65,6 +67,8 @@ export class UserFormComponent implements OnInit {
         Validators.maxLength(25)
       ]
       ],
+      'displayName': ['', [
+      ]]
     });
 
     this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));