diff --git a/README.md b/README.md
index 3d0ecf8..546b1c9 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,29 @@
-# ShelfFront
+# Shelf_Front Project
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.7.
+An online storefront to showcase products. Users is able to browse an index of all products, see the specifics of a single product, and add products to an order that they can view in a cart page.
 
-## Development server
+# Installation 
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+- Install packages dependencies: `npm install`
+- Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ## Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+# Built with 
+
+- Typescript
+- Angular 13.3.7
+- Angular Material 
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+# Screenshots
 
-## Running end-to-end tests
+![screenshot](src/assets/homepage.jpg)
+![screenshot](src/assets/product_details.jpg)
+![screenshot](src/assets/cart.jpg)
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
-## Further help
+# Author
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Anis Benziane.
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1cf0b6b..b672764 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { ProductItemDetailsComponent } from './components/product-item-details/product-item-details.component';
 import { CartComponent } from './components/cart/cart.component';
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'product/:id', component: ProductItemDetailsComponent },
-  { path: 'cart', component: CartComponent }
+  { path: 'cart', component: CartComponent },
+  { path: 'confirmation', component: ConfirmationComponent}
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3e94d19..6aba5d7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -18,7 +19,10 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCardModule } from '@angular/material/card';
 import { MatSelectModule } from '@angular/material/select';
-import { MatBadgeModule } from '@angular/material/badge'
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 
 
 
@@ -31,13 +35,16 @@ import { MatBadgeModule } from '@angular/material/badge'
     ProductListComponent,
     NavbarComponent,
     ProductItemDetailsComponent,
-    CartComponent
+    CartComponent,
+    ConfirmationComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
 
     MatCommonModule,
     MatToolbarModule,
@@ -45,7 +52,9 @@ import { MatBadgeModule } from '@angular/material/badge'
     MatButtonModule,
     MatCardModule,
     MatSelectModule,
-    MatBadgeModule
+    MatBadgeModule,
+    MatFormFieldModule,
+    MatInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/assets/cart.jpg b/src/assets/cart.jpg
new file mode 100644
index 0000000..3a0acdd
Binary files /dev/null and b/src/assets/cart.jpg differ
diff --git a/src/assets/homepage.jpg b/src/assets/homepage.jpg
new file mode 100644
index 0000000..0ebb9e0
Binary files /dev/null and b/src/assets/homepage.jpg differ
diff --git a/src/assets/product_details.jpg b/src/assets/product_details.jpg
new file mode 100644
index 0000000..4297ec7
Binary files /dev/null and b/src/assets/product_details.jpg differ