diff --git a/Angular-UrbanBazaar/src/app/app-routing.module.ts b/Angular-UrbanBazaar/src/app/app-routing.module.ts
index 72e214b..3b205f3 100644
--- a/Angular-UrbanBazaar/src/app/app-routing.module.ts
+++ b/Angular-UrbanBazaar/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './auth/login/login.component';
 import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { CartComponent } from './components/cart/cart.component';
+import { CheckoutComponent } from './components/checkout/checkout.component';
 import { HomeComponent } from './components/home/home.component';
 import { MemberlistComponent } from './components/memberlist/memberlist.component';
 import { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component';
 
 const routes: Routes = [
+  {path:'checkout', component:CheckoutComponent},
   { path: '', component: LoginComponent},
   { path: 'login', component: LoginComponent},
   { path: 'signup', component: SignUpComponent},
diff --git a/Angular-UrbanBazaar/src/app/app.module.ts b/Angular-UrbanBazaar/src/app/app.module.ts
index ac81ea0..57afd4b 100644
--- a/Angular-UrbanBazaar/src/app/app.module.ts
+++ b/Angular-UrbanBazaar/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { LoginComponent } from './auth/login/login.component';
 import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { MemberlistComponent } from './components/memberlist/memberlist.component';
+import { CheckoutComponent } from './components/checkout/checkout.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { MemberlistComponent } from './components/memberlist/memberlist.componen
     LoginComponent,
     SignUpComponent,
     MemberlistComponent,
+    CheckoutComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
index b019222..8f7e7e5 100644
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
@@ -24,8 +24,8 @@
                             <td colspan="4"></td>
                             <td><button (click)=emptyCart() class="CartButtons">Empty Cart</button></td>
                             <td><button routerLink='/home' class="CartButtons">Shop More</button></td>
-                            <td><button class="CartButtons">Checkout</button></td>
-                            <!-- <td><strong>Grand Total : Rs.{{grandTotal}}</strong></td> -->
+                            <td><button (click)=checkout() class="CartButtons">Checkout</button></td>
+                            <td><strong>Grand Total : Rs.{{grandTotal}}</strong></td>
                         </tr>
                     </tbody>
                 </div>
diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
index b4bdab9..33d81a0 100644
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { Cart } from 'src/app/models/cart';
 import { Product } from 'src/app/models/product';
@@ -14,7 +15,8 @@ import { UserService } from 'src/app/services/user.service';
 export class CartComponent implements OnInit {
 
   public cartdetails:Cart[];
-  constructor(private cartservice:CartService,private userservice:UserService) { 
+  public grandTotal = 0;
+  constructor(private cartservice:CartService,private userservice:UserService,private router: Router) { 
     // this.cartdetails = this.cartservice.showCart();
   }
 
@@ -23,7 +25,9 @@ export class CartComponent implements OnInit {
     this.cartservice.showCart()
     .subscribe(res=>{
         this.cartdetails = res;
-        // this.grandTotal = this.cartservice.getTotalPrice();
+        this.cartdetails.forEach((i,index)=>{
+          this.grandTotal+=i.productprice;
+        })
     })
     // let uid = this.userservice.currentUser.userid;
     // this.cartservice.showCart(uid).subscribe(data1=>{
@@ -36,12 +40,19 @@ export class CartComponent implements OnInit {
     // })
 
   }
+
+  checkout()
+  {
+    this.router.navigateByUrl('/checkout');
+  }
+
   removeItem(id:number){
     this.cartservice.deleteCart(id).subscribe(a=>{
       this.cartdetails.forEach((i,index)=>{
         if(i.cartid == id)
         {
           this.cartdetails.splice(index,1)
+          this.grandTotal-=i.productprice;
         }
       })
     });
diff --git a/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.css b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.css
new file mode 100644
index 0000000..1368657
--- /dev/null
+++ b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.css
@@ -0,0 +1,5 @@
+.CartButtons{
+    border-radius: 15px;
+    border-color:antiquewhite ;
+    background-color: beige;
+}
\ No newline at end of file
diff --git a/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.html b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.html
new file mode 100644
index 0000000..3be1bc6
--- /dev/null
+++ b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.html
@@ -0,0 +1,23 @@
+<ng-container *ngIf="cartdetails.length !=0">
+<div class="container">
+<table>
+    <thead>
+        <tr>
+            <th>S.No</th>
+            <th>ProductName</th>
+            <th>ProductPrice</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        <tr *ngFor="let c of cartdetails; let i = index">
+            <td>{{i+1}}</td>
+            <td>{{c.productname}}</td>
+            <td>{{c.productprice}}</td>
+        </tr>
+        <td><strong>Grand Total : Rs.{{grandTotal}}</strong></td>
+    </tbody>
+</table>
+<button (click)=logout() class="CartButtons">log out</button>
+</div>
+</ng-container>
diff --git a/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.spec.ts b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.spec.ts
new file mode 100644
index 0000000..30502b6
--- /dev/null
+++ b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckoutComponent } from './checkout.component';
+
+describe('CheckoutComponent', () => {
+  let component: CheckoutComponent;
+  let fixture: ComponentFixture<CheckoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.ts b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.ts
new file mode 100644
index 0000000..0bc1a3a
--- /dev/null
+++ b/Angular-UrbanBazaar/src/app/components/checkout/checkout.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Cart } from 'src/app/models/cart';
+import { CartService } from 'src/app/services/cart.service';
+
+@Component({
+  selector: 'app-checkout',
+  templateUrl: './checkout.component.html',
+  styleUrls: ['./checkout.component.css']
+})
+export class CheckoutComponent implements OnInit {
+  public cartdetails:Cart[];
+  public grandTotal = 0;
+  constructor(private cartservice:CartService,private router: Router) { 
+
+  }
+
+  logout()
+  {
+    this.router.navigateByUrl("/");
+    this.cartservice.deleteAll().subscribe(b=>{
+      this.cartdetails.forEach((i,index)=>{
+        this.cartdetails.splice(index);
+      })
+    });
+    // alert("db cleaned")
+  }
+
+  ngOnInit(): void {
+    this.cartservice.showCart()
+    .subscribe(res=>{
+        this.cartdetails = res;
+        this.cartdetails.forEach((i,index)=>{
+          this.grandTotal+=i.productprice;
+        })
+    })
+  }
+
+}