diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html
index 4eb1d5da3d..39d7fe96c5 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html
@@ -9,10 +9,10 @@
     <div *ngIf="!principal.authenticated; then loginForm else loginMessage"></div>
     <ng-template #loginForm>
       <form (ngSubmit)="onLogin(f)" class="form-inline mt-2 mt-md-0" #f="ngForm">
-        <input name="username" [(ngModel)]="credentials.username" required class="form-control mr-sm-2" type="text" placeholder="Username">
-        <input name="password" [(ngModel)]="credentials.password" required class="form-control mr-sm-2" type="password" placeholder="Password">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f.valid">Login</button>
-      </form>
+      <input name="username" [(ngModel)]="credentials.username" required class="form-control mr-sm-2" type="text" placeholder="Username">
+      <input name="password" [(ngModel)]="credentials.password" required class="form-control mr-sm-2" type="password" placeholder="Password">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f.valid">Login</button>
+    </form>
     </ng-template>
     <ng-template #loginMessage>
       <button type="button" class="btn btn-link" (click)="onLogout()">Logout</button>
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
index c3ba5b6329..653b828616 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
@@ -23,7 +23,7 @@ export class AppComponent {
 
 
   principal: Principal = new Principal(false, []);
-  // principal: Principal = new Principal(true, [new Authority("ROLE_ADMIN")]);
+  // principal: Principal = new Principal(true, [new Authority("ROLE_USER")]);
 
   loginFailed: boolean = false;
 
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html
index e5e589485b..5828e742e8 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html
@@ -6,6 +6,6 @@
     <h4 class="card-title">Title: {{selectedBook.title}}</h4>
     <h6 class="card-subtitle mb-2 text-muted">Author: {{selectedBook.author}}</h6>
     <p class="card-text">A quick summary of the book</p>
-    <app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id"></app-rating>
+    <app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id" [principal]="principal"></app-rating>
   </div>
 </div>
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.css b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.css
index e69de29bb2..b1734de9c0 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.css
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.css
@@ -0,0 +1,3 @@
+.custom-close {
+  float:right;
+}
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
index feb5f580d2..a64c40cfdb 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
@@ -14,7 +14,7 @@ export class BookListComponent implements OnInit {
 
   books: Book[] = [];
   newBooks: Book[] = [];
-  newBook: Book = new Book(null, '', '');
+  newBook: Book = new Book(Math.floor(Math.random() * 1000), '', '');
   booksToEdit: number[] = [];
   isAddNewBook: boolean = false;
   selectedBook: Book = null;
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.css b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.css
index 9c5c93b041..b137bc23dd 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.css
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.css
@@ -1,3 +1,11 @@
 div.progress {
   margin-top: 5px;
 }
+
+.rating:hover {
+  border: solid blue;
+}
+
+.selected {
+  border: solid blue;
+}
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.html b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.html
index 35ff7afb6d..42e5d40700 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.html
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.html
@@ -1,7 +1,14 @@
 Ratings:
-<div *ngFor="let rating of ratings">
-  <div class="progress">
-    <div class="progress-bar bg-success" role="progressbar" [style.width]="findWidth(rating)" [attr.aria-valuenow]="rating.stars" aria-valuemin="0" aria-valuemax="5"></div>
+<div *ngFor="let rating of ratings; let i = index;" class="row">
+  <div class="col-md-10">
+    <div class="progress"  [ngClass]="{'selected': principal.isAdmin() && rating === newRating, 'rating': principal.isAdmin()}" (click)="selectRating(rating)">
+      <div class="progress-bar bg-success" role="progressbar" [style.width]="findWidth(rating)" [attr.aria-valuenow]="rating.stars" aria-valuemin="0" aria-valuemax="5"></div>
+    </div>
+  </div>
+  <div class="col-md-1">
+    <button *ngIf="principal?.isAdmin()" type="button" class="close" aria-label="Close" (click)="deleteRating(i)">
+      <span aria-hidden="true">&times;</span>
+    </button>
   </div>
 </div>
 
@@ -11,6 +18,7 @@ Ratings:
       <input class="form-check-input" type="radio" name="star" [(ngModel)]="newRating.stars" [value]="star">{{star}}
     </label>
   </div>
-  <button type="submit" class="btn btn-secondary" [disabled]="!f.valid">Add Rating</button>
+  <button *ngIf="newRating.id === null" type="submit" class="btn btn-secondary" [disabled]="!f.valid">Add Rating</button>
+  <button *ngIf="principal.isAdmin() && newRating.id !== null" type="button" class="btn btn-secondary" (click)="cancelSelection()">Cancel</button>
 </form>
 
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.ts
index a3ef33573a..caa7ad5a99 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/rating/rating.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit, Input, OnChanges} from "@angular/core";
 import {Rating} from "../rating";
+import {Principal} from "../principal";
 
 @Component({
   selector: 'app-rating',
@@ -9,7 +10,7 @@ import {Rating} from "../rating";
 export class RatingComponent implements OnInit, OnChanges {
 
   @Input() bookId: number;
-
+  @Input() principal: Principal = null;
   ratings: Rating[] = [];
   stars: number[] = [1,2,3,4,5];
   newRating: Rating = null;
@@ -30,15 +31,32 @@ export class RatingComponent implements OnInit, OnChanges {
   }
 
   private loadRatings() {
-    let rating: Rating = new Rating(1, this.bookId, this.bookId);
-    let rating1: Rating = new Rating(1, this.bookId, this.bookId);
+    let rating: Rating = new Rating(1, this.bookId, 1);
+    let rating1: Rating = new Rating(1, this.bookId, 1);
     this.ratings.push(rating, rating1);
   }
 
   onSubmit() {
     console.log(this.newRating);
-    let ratingCopy: Rating = Object.assign({}, this.newRating, {id: 101});
+    let ratingCopy: Rating = Object.assign({}, this.newRating, {id: Math.floor(Math.random() * 1000)});
     this.ratings.push(ratingCopy);
   }
 
+  selectRating(rating: Rating) {
+    if (this.principal.isAdmin()) {
+      this.newRating = rating;
+    }
+  }
+
+  cancelSelection() {
+    this.newRating = new Rating(null, this.bookId, 1);
+  }
+
+  deleteRating(index: number) {
+    if (this.ratings[index] === this.newRating) {
+      this.newRating = new Rating(null, this.bookId, 1);
+    }
+    this.ratings.splice(index, 1);
+  }
+
 }