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 88e57364c9..dcbc8e84e6 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
@@ -93,17 +93,7 @@
         </div>
       </div>
       <div *ngIf="selectedBook != null" class="col-md-3">
-        <div class="card">
-          <div class="card-block">
-            <button type="button" class="close" aria-label="Close" (click)="closeBookDetail()">
-              <span aria-hidden="true">&times;</span>
-            </button>
-            <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>
-          </div>
-        </div>
+        <app-book-detail [selectedBook]="selectedBook" [principal]="principal" (closeBook)="closeBookDetail()"></app-book-detail>
       </div>
     </div>
   </div>
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 6ae983e57f..db913f3972 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
@@ -6,12 +6,14 @@ 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";
+import {BookDetailComponent} from "./book/book-detail/book-detail.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     RatingComponent,
-    ClickStopPropagationDirective
+    ClickStopPropagationDirective,
+    BookDetailComponent
   ],
   imports: [
     BrowserModule,
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.css b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.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-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
new file mode 100644
index 0000000000..e5e589485b
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.html
@@ -0,0 +1,11 @@
+<div class="card">
+  <div class="card-block">
+    <button type="button" class="close" aria-label="Close" (click)="closeBookDetail()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+    <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>
+  </div>
+</div>
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.ts
new file mode 100644
index 0000000000..84cdec720b
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-detail/book-detail.component.ts
@@ -0,0 +1,26 @@
+import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
+import {Book} from "../../book";
+import {Principal} from "../../principal";
+
+@Component({
+  selector: 'app-book-detail',
+  templateUrl: './book-detail.component.html',
+  styleUrls: ['./book-detail.component.css']
+})
+export class BookDetailComponent implements OnInit {
+
+  @Input() selectedBook: Book = null;
+  @Input() principal: Principal = null;
+  @Output() closeBook: EventEmitter<any> = new EventEmitter<any>();
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  closeBookDetail() {
+    this.closeBook.emit(null);
+  }
+
+}