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 dcbc8e84e6..4eb1d5da3d 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
@@ -36,59 +36,8 @@
     <div class="row">
       <div class="col-md">
         <div class="row">
-          <div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
-            <div class="card">
-              <div class="card-block">
-                <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>
-
+          <div class="col-md-12">
+            <app-book-list [principal]="principal" (onBookSelected)="selectBook($event)"></app-book-list>
           </div>
         </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 773a8b22e0..c3ba5b6329 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
@@ -16,8 +16,6 @@ export class AppComponent {
     password: ''
   };
 
-  books: Book[] = [];
-
   selectedBook: Book = null;
 
   private username: String = '';
@@ -29,16 +27,10 @@ export class AppComponent {
 
   loginFailed: boolean = false;
 
-  booksToEdit: number[] = [];
-
-  newBooks: Book[] = [];
-  isAddNewBook: boolean = false;
-  newBook: Book = new Book(null, '', '');
-
   constructor(private http: Http){}
 
   ngOnInit(): void {
-    this.loadBooks();
+
   }
 
   onLogin(form: NgForm) {
@@ -86,70 +78,12 @@ export class AppComponent {
       });
   }
 
-  loadBooks() {
-    let book: Book = new Book(1, 'Tom Sawyer', 'Huckleberry Finn');
-    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)))
+  closeBookDetail() {
+    this.selectedBook = null;
   }
 
   selectBook(book: Book) {
     this.selectedBook = book;
   }
 
-  closeBookDetail() {
-    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 db913f3972..ca3046b7bc 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
@@ -7,13 +7,15 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {RatingComponent} from "./rating/rating.component";
 import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
 import {BookDetailComponent} from "./book/book-detail/book-detail.component";
+import {BookListComponent} from "./book/book-list/book-list.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     RatingComponent,
     ClickStopPropagationDirective,
-    BookDetailComponent
+    BookDetailComponent,
+    BookListComponent
   ],
   imports: [
     BrowserModule,
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
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.html b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.html
new file mode 100644
index 0000000000..e6bb831a54
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.html
@@ -0,0 +1,54 @@
+<div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
+  <div class="card">
+    <div class="card-block">
+      <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>
+
+</div>
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
new file mode 100644
index 0000000000..feb5f580d2
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
@@ -0,0 +1,92 @@
+import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
+import {Principal} from "../../principal";
+import {Book} from "../../book";
+
+@Component({
+  selector: 'app-book-list',
+  templateUrl: './book-list.component.html',
+  styleUrls: ['./book-list.component.css']
+})
+export class BookListComponent implements OnInit {
+
+  @Input() principal: Principal = null;
+  @Output() onBookSelected: EventEmitter<Book> = new EventEmitter<Book>();
+
+  books: Book[] = [];
+  newBooks: Book[] = [];
+  newBook: Book = new Book(null, '', '');
+  booksToEdit: number[] = [];
+  isAddNewBook: boolean = false;
+  selectedBook: Book = null;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.loadBooks();
+  }
+
+  loadBooks() {
+    let book: Book = new Book(1, 'Tom Sawyer', 'Huckleberry Finn');
+    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)))
+  }
+
+  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
+    }
+  }
+
+  editBook(bookIndex: number) {
+    this.booksToEdit.push(bookIndex);
+  }
+
+  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, '', '');
+  }
+
+  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();
+  }
+
+  cancelAddBook() {
+    this.isAddNewBook = false;
+  }
+
+
+  selectBook(book: Book) {
+    this.selectedBook = book;
+    this.onBookSelected.emit(book);
+  }
+
+}