diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.css b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.css
index e69de29bb2..b1734de9c0 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.css
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.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/app.component.html b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html
index 1387065adf..88e57364c9 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
@@ -2,7 +2,7 @@
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <a class="navbar-brand" href="#">Book Rater</a>
+  <a class="navbar-brand" href="#">Book Rater <span *ngIf="principal.isAdmin()">Admin</span></a>
   <div class="collapse navbar-collapse" id="navbarCollapse">
     <ul class="navbar-nav mr-auto">
     </ul>
@@ -36,12 +36,56 @@
     <div class="row">
       <div class="col-md">
         <div class="row">
-          <div class="col-md-12" *ngFor="let book of books" (click)="selectBook(book)">
+          <div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
             <div class="card">
               <div class="card-block">
-                <h4 class="card-title">Title: {{book.title}}</h4>
-                <h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
-                <p class="card-text">A quick summary of the book</p>
+                <div *ngIf="booksToEdit.indexOf(i) === -1 ; then bookView else bookEdit"></div>
+                <ng-template #bookView>
+                  <button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-danger custom-close" (click)="delete(i)">Delete</button>
+                  <button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-warning custom-close" (click)="editBook(i)">Edit</button>
+                  <h4 class="card-title">Title: {{book.title}}</h4>
+                  <h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
+                </ng-template>
+                <ng-template #bookEdit>
+                  <button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelEditBook(i)">Cancel</button>
+                  <form appClickStopPropagation (ngSubmit)="saveBook(i, newBooks[i])" class="mt-2 mt-md-0" #f1="ngForm">
+                    <div class="form-group">
+                      <label for="title">Title:</label>
+                      <input id="title" name="title" [(ngModel)]="newBooks[i].title" required class="form-control mr-sm-2" type="text">
+                    </div>
+                    <div class="form-group">
+                      <label for="author">Author:</label>
+                      <input id="author" name="author" [(ngModel)]="newBooks[i].author" required class="form-control mr-sm-2" type="text">
+                    </div>
+                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f1.valid">Save</button>
+                  </form>
+                </ng-template>
+
+              </div>
+            </div>
+          </div>
+          <div *ngIf="principal.isAdmin()" class="col-md-12">
+            <div class="card">
+              <div class="card-block">
+                <div *ngIf="!isAddNewBook; then bookPlaceHolder else bookAdd"></div>
+                <ng-template #bookPlaceHolder>
+                  <h4 (click)="activateAddNewBook()" class="card-title center-block">Add New Book</h4>
+                </ng-template>
+                <ng-template #bookAdd>
+                  <button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelAddBook()">Cancel</button>
+                  <form appClickStopPropagation (ngSubmit)="addNewBook(newBook, titleNewBook)" class="mt-2 mt-md-0" #f2="ngForm">
+                    <div class="form-group">
+                      <label for="titleNewBook">Title:</label>
+                      <input id="titleNewBook" name="title" [(ngModel)]="newBook.title" required class="form-control mr-sm-2" type="text" #titleNewBook>
+                    </div>
+                    <div class="form-group">
+                      <label for="authorNewBook">Author:</label>
+                      <input id="authorNewBook" name="author" [(ngModel)]="newBook.author" required class="form-control mr-sm-2" type="text">
+                    </div>
+                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f2.valid">Save</button>
+                  </form>
+                </ng-template>
+
               </div>
             </div>
 
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 94718f34fc..773a8b22e0 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
@@ -24,10 +24,17 @@ export class AppComponent {
   private password: String = '';
 
 
-  principal: Principal = new Principal(true, []);
+  principal: Principal = new Principal(false, []);
+  // principal: Principal = new Principal(true, [new Authority("ROLE_ADMIN")]);
 
   loginFailed: boolean = false;
 
+  booksToEdit: number[] = [];
+
+  newBooks: Book[] = [];
+  isAddNewBook: boolean = false;
+  newBook: Book = new Book(null, '', '');
+
   constructor(private http: Http){}
 
   ngOnInit(): void {
@@ -84,6 +91,7 @@ export class AppComponent {
     let book1: Book = new Book(2, 'Michael Crichton', 'Jurassic Park');
     let book2: Book = new Book(3, 'McLaughlin, Pollice, and West', 'Object Oriented Analysis And Design');
     this.books.push(book, book1, book2);
+    this.books.forEach(book => this.newBooks.push(new Book(book.id, book.author, book.title)))
   }
 
   selectBook(book: Book) {
@@ -94,4 +102,54 @@ export class AppComponent {
     this.selectedBook = null;
   }
 
+  editBook(bookIndex: number) {
+    this.booksToEdit.push(bookIndex);
+  }
+
+  cancelEditBook(bookIndex: number) {
+    if (this.booksToEdit.indexOf(bookIndex) !== -1) {
+      this.booksToEdit.splice(this.booksToEdit.indexOf(bookIndex), 1); //remove the index of the book to edit
+      //get the original book
+      let bookCopy: Book = new Book(this.books[bookIndex].id, this.books[bookIndex].author, this.books[bookIndex].title);
+      this.newBooks.splice(bookIndex,1,bookCopy); //replace the edited book with the old book
+    }
+  }
+
+  saveBook(bookIndex: number, newBook: Book) {
+    console.log(newBook);
+
+    //save the book to the database
+
+    //update the current array of books
+    let book: Book = this.books.find(b => b.id === newBook.id);
+    book.title = newBook.title;
+    book.author = newBook.author;
+    this.booksToEdit.splice(this.booksToEdit.indexOf(bookIndex), 1); //remove the index of the book to edit
+  }
+
+  delete(bookIndex: number) {
+    if (this.selectedBook !== null && this.books[bookIndex].id === this.selectedBook.id) {this.selectedBook = null;}
+
+    this.books.splice(bookIndex, 1); //remove the book at this index;
+    this.newBooks.splice(bookIndex, 1); //remove the editing book at this index
+  }
+
+  activateAddNewBook() {
+    this.isAddNewBook = true;
+    this.newBook = new Book(null, '', '');
+  }
+
+  cancelAddBook() {
+    this.isAddNewBook = false;
+  }
+
+  addNewBook(newBook: Book, element: any) {
+    //write new book to db
+    //on success:
+    this.books.push(newBook);
+    this.newBooks.push(newBook);
+    this.newBook = new Book(null, '', '');
+    element.focus();
+  }
+
 }
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
index 90aba1d6ce..6ae983e57f 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
@@ -5,11 +5,13 @@ import {HttpModule} from "@angular/http";
 import {AppComponent} from "./app.component";
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {RatingComponent} from "./rating/rating.component";
+import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
 
 @NgModule({
   declarations: [
     AppComponent,
-    RatingComponent
+    RatingComponent,
+    ClickStopPropagationDirective
   ],
   imports: [
     BrowserModule,
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/click-stop-propagation.directive.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/click-stop-propagation.directive.ts
new file mode 100644
index 0000000000..9def0a3bd0
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/click-stop-propagation.directive.ts
@@ -0,0 +1,13 @@
+import {Directive, HostListener} from "@angular/core";
+
+@Directive({
+  selector: '[appClickStopPropagation]'
+})
+export class ClickStopPropagationDirective
+{
+  @HostListener("click", ["$event"])
+  public onClick(event: any): void
+  {
+    event.stopPropagation();
+  }
+}