diff --git a/store-front/src/app/components/order/order.component.html b/store-front/src/app/components/order/order.component.html
index 8c49296..65e853e 100644
--- a/store-front/src/app/components/order/order.component.html
+++ b/store-front/src/app/components/order/order.component.html
@@ -56,7 +56,7 @@
                 <div *ngIf="missingRequiredField ">
                     <h5 class="alert alert-warning ">There are some fields missing. Field with * is required. </h5>
                 </div>
-                <md-tab-group>
+                <md-tab-group (selectedIndexChange)="selectedChange($event)" [selectedIndex]="selectedTab">
                     <!--1. Shipping Address-->
                     <md-tab label="1. Shipping Address">
                         <div class="panel panel-default ">
@@ -120,7 +120,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <!-- <a data-toggle="collapse " data-parent="#accordion " class="btn btn-warning pull-right " href="#paymentInfo ">Next</a> -->
+                                <a md-raised-button class="mat-primary" (click)="goToPayment()">Next</a>
                             </div>
                         </div>
                     </md-tab>
@@ -278,7 +278,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <a data-toggle="collapse " data-parent="#accordion " class="btn btn-warning pull-right " href="#reviewItems ">Next</a>
+                                <a md-raised-button class="mat-primary" (click)="goToReview()">Next</a>
                             </div>
                         </div>
                     </md-tab>
@@ -340,7 +340,7 @@
                         ></span>{{shoppingCart.grandTotal}}</span></h4>
                                 <br/>
                                 <br/>
-                                <button type="submit " class="btn btn-warning btn-block ">Place your order
+                                <button md-raised-button type="submit " class="btn-block mat-primary">Place your order
                                 </button>
                                 <p>By placing your order, you agree to Le's Bookstore <a href="# ">privacy</a> notice and
                                     <a href="# ">conditions</a> of use.</p>
diff --git a/store-front/src/app/components/order/order.component.ts b/store-front/src/app/components/order/order.component.ts
index bbfd19d..f20fc35 100644
--- a/store-front/src/app/components/order/order.component.ts
+++ b/store-front/src/app/components/order/order.component.ts
@@ -28,6 +28,7 @@ export class OrderComponent implements OnInit {
   private userPayment:UserPayment = new UserPayment();
   private userShipping:UserShipping = new UserShipping();
   private userBilling: UserBilling = new UserBilling();
+  private selectedTab: number;
 
   constructor(private router:Router, private cartService: CartService) { }
 
@@ -36,6 +37,18 @@ export class OrderComponent implements OnInit {
     this.router.navigate(['/bookDetail', this.selectedBook.id]);
   }
 
+  selectedChange(val :number ){
+    this.selectedTab=val;
+  }
+
+  goToPayment() {
+  	this.selectedTab=1;
+  }
+
+  goToReview() {
+  	this.selectedTab=2;
+  }
+
   getCartItemList(){
     this.cartService.getCartItemList().subscribe(
         res=>{
@@ -63,4 +76,6 @@ export class OrderComponent implements OnInit {
     );
   }
 
+
+
 }