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 2b886ba981..1387065adf 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
@@ -57,9 +57,7 @@
             <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>
-            Rating: <div *ngIf="principal.authenticated" class="progress">
-              <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5"></div>
-            </div>
+            <app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id"></app-rating>
           </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 5256ad2244..94718f34fc 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,6 +23,7 @@ export class AppComponent {
   private username: String = '';
   private password: String = '';
 
+
   principal: Principal = new Principal(true, []);
 
   loginFailed: boolean = false;
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 e69de29bb2..9c5c93b041 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
@@ -0,0 +1,3 @@
+div.progress {
+  margin-top: 5px;
+}
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 cf92591c80..35ff7afb6d 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,3 +1,16 @@
-<p>
-  rating works!
-</p>
+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>
+</div>
+
+<form (ngSubmit)="onSubmit(f)" #f="ngForm">
+  <div class="form-check form-check-inline" *ngFor="let star of stars; let i = index;">
+    <label  class="form-check-label">
+      <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>
+</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 44b517edf7..a3ef33573a 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,15 +1,44 @@
-import {Component, OnInit} from "@angular/core";
+import {Component, OnInit, Input, OnChanges} from "@angular/core";
+import {Rating} from "../rating";
 
 @Component({
   selector: 'app-rating',
   templateUrl: './rating.component.html',
   styleUrls: ['./rating.component.css']
 })
-export class RatingComponent implements OnInit {
+export class RatingComponent implements OnInit, OnChanges {
+
+  @Input() bookId: number;
+
+  ratings: Rating[] = [];
+  stars: number[] = [1,2,3,4,5];
+  newRating: Rating = null;
 
   constructor() { }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  ngOnChanges() {
+    this.newRating = new Rating(null, this.bookId, 1);
+    this.ratings = [];
+    this.loadRatings();
+  }
+
+  findWidth(rating: Rating): String {
+    let percent: number = (rating.stars/5)*100;
+    return percent.toString() + '%';
+  }
+
+  private loadRatings() {
+    let rating: Rating = new Rating(1, this.bookId, this.bookId);
+    let rating1: Rating = new Rating(1, this.bookId, this.bookId);
+    this.ratings.push(rating, rating1);
+  }
+
+  onSubmit() {
+    console.log(this.newRating);
+    let ratingCopy: Rating = Object.assign({}, this.newRating, {id: 101});
+    this.ratings.push(ratingCopy);
   }
 
 }