diff --git a/src/app/pages/app.crud.component.html b/src/app/pages/app.crud.component.html
index 092512c..9b9d810 100644
--- a/src/app/pages/app.crud.component.html
+++ b/src/app/pages/app.crud.component.html
@@ -1,20 +1,22 @@
-<div class="grid crud-demo">
+<div class="grid">
     <div class="col-12">
         <div class="card">
             <p-toast></p-toast>
             <p-toolbar styleClass="mb-4">
                 <ng-template pTemplate="left">
-                    <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2 mb-2" (click)="openNew()"></button>
-                    <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger mb-2" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
+                    <div class="my-2">
+                        <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
+                        <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
+                    </div>
                 </ng-template>
 
                 <ng-template pTemplate="right">
-                    <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 mb-2 inline-block"></p-fileUpload>
-                    <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
+                    <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
+                    <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help" (click)="dt.exportCSV()"></button>
                 </ng-template>
             </p-toolbar>
 
-            <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
+            <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" selectionMode="multiple" [rowHover]="true" dataKey="id">
                 <ng-template pTemplate="caption">
                     <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                         <h5 class="m-0">Manage Products</h5>
@@ -44,8 +46,8 @@
                         <td>
                             <p-tableCheckbox [value]="product"></p-tableCheckbox>
                         </td>
-                        <td><span class="p-column-title">Code</span>
-                            {{product.code}}
+                        <td style="min-width:8rem;"><span class="p-column-title">Code</span>
+                            {{product.code || product.id}}
                         </td>
                         <td style="min-width:10rem;">
                             <span class="p-column-title">Name</span>
@@ -82,7 +84,7 @@
                 <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
                 <div class="field">
                     <label for="name">Name</label>
-                    <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
+                    <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus [ngClass]="{'ng-invalid ng-dirty' : submitted && !product.name}"/>
                     <small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
                 </div>
                 <div class="field">
@@ -92,9 +94,9 @@
 
                 <div class="field">
                     <label for="status">Inventory Status</label>
-                    <p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="selectedStatus" placeholder="Select a Status" >
+                    <p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="product.inventoryStatus" placeholder="Select a Status">
                         <ng-template pTemplate="selectedItem">
-                            <span *ngIf="selectedStatus" [class]="'product-badge status-' + selectedStatus.value.toLowerCase()">{{selectedStatus.label}}</span>
+                            <span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.value">{{product.inventoryStatus.label}}</span>
                         </ng-template>
                         <ng-template let-status pTemplate="status">
                             <span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
@@ -103,7 +105,7 @@
                 </div>
 
                 <div class="field">
-                    <label>Category</label>
+                    <label class="mb-3">Category</label>
                     <div class="formgrid grid">
                         <div class="field-radiobutton col-6">
                             <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
@@ -142,6 +144,26 @@
             </ng-template>
         </p-dialog>
 
-        <p-confirmDialog [style]="{width: '350px'}"></p-confirmDialog>
+        <p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
+            <div class="flex align-items-center justify-content-center">
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+                <span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
+            </div>
+            <ng-template pTemplate="footer">
+                <button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductDialog = false"></button>
+                <button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDelete()"></button>
+            </ng-template>
+        </p-dialog>
+
+        <p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
+            <div class="flex align-items-center justify-content-center">
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+                <span>Are you sure you want to delete selected products?</span>
+            </div>
+            <ng-template pTemplate="footer">
+                <button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductsDialog = false"></button>
+                <button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDeleteSelected()"></button>
+            </ng-template>
+        </p-dialog>
     </div>
 </div>
diff --git a/src/app/pages/app.crud.component.ts b/src/app/pages/app.crud.component.ts
index c0e55c0..f498d63 100644
--- a/src/app/pages/app.crud.component.ts
+++ b/src/app/pages/app.crud.component.ts
@@ -11,6 +11,10 @@ export class AppCrudComponent implements OnInit {
 
     productDialog: boolean;
 
+    deleteProductDialog: boolean = false;
+
+    deleteProductsDialog: boolean = false;
+
     products: Product[];
 
     product: Product;
@@ -23,8 +27,6 @@ export class AppCrudComponent implements OnInit {
 
     statuses: any[];
 
-    selectedStatus:any;
-
     rowsPerPageOptions = [5, 10, 20];
 
     constructor(private productService: ProductService, private messageService: MessageService,
@@ -55,16 +57,7 @@ export class AppCrudComponent implements OnInit {
     }
 
     deleteSelectedProducts() {
-        this.confirmationService.confirm({
-            message: 'Are you sure you want to delete the selected products?',
-            header: 'Confirm',
-            icon: 'pi pi-exclamation-triangle',
-            accept: () => {
-                this.products = this.products.filter(val => !this.selectedProducts.includes(val));
-                this.selectedProducts = null;
-                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
-            }
-        });
+        this.deleteProductsDialog = true;
     }
 
     editProduct(product: Product) {
@@ -73,16 +66,22 @@ export class AppCrudComponent implements OnInit {
     }
 
     deleteProduct(product: Product) {
-        this.confirmationService.confirm({
-            message: 'Are you sure you want to delete ' + product.name + '?',
-            header: 'Confirm',
-            icon: 'pi pi-exclamation-triangle',
-            accept: () => {
-                this.products = this.products.filter(val => val.id !== product.id);
-                this.product = {};
-                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
-            }
-        });
+        this.deleteProductDialog = true;
+        this.product = {...product};
+    }
+
+    confirmDeleteSelected(){
+        this.deleteProductsDialog = false;
+        this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+        this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
+        this.selectedProducts = null;
+    }
+
+    confirmDelete(){
+        this.deleteProductDialog = false;
+        this.products = this.products.filter(val => val.id !== this.product.id);
+        this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
+        this.product = {};
     }
 
     hideDialog() {
@@ -95,11 +94,16 @@ export class AppCrudComponent implements OnInit {
 
         if (this.product.name.trim()) {
             if (this.product.id) {
+                // @ts-ignore
+                this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
                 this.products[this.findIndexById(this.product.id)] = this.product;
                 this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
             } else {
                 this.product.id = this.createId();
+                this.product.code = this.createId();
                 this.product.image = 'product-placeholder.svg';
+                // @ts-ignore
+                this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
                 this.products.push(this.product);
                 this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000});
             }
diff --git a/src/styles.scss b/src/styles.scss
index 3314578..5f65713 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -101,60 +101,6 @@
     }
 }
 
-.crud-demo {
-    .p-toolbar {
-        flex-wrap: wrap;
-    }
-
-    /* Responsive */
-    .datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-        display: none;
-    }
-
-    @media screen and (max-width: 960px) {
-        .p-datatable {
-            &.datatable-responsive {
-                .p-datatable-thead > tr > th,
-                .p-datatable-tfoot > tr > td {
-                    display: none !important;
-                }
-
-                .p-datatable-tbody > tr {
-                    border-bottom: 1px solid var(--surface-d);
-                    > td {
-                        text-align: left;
-                        display: flex;
-                        align-items: center;
-                        border: 0 none !important;
-                        width: 100% !important;
-                        float: left;
-                        clear: left;
-                        border: 0 none;
-
-                        .p-column-title {
-                            padding: .4rem;
-                            min-width: 30%;
-                            display: inline-block;
-                            margin: -.4rem 1rem -.4rem -.4rem;
-                            font-weight: bold;
-                        }
-
-                        .p-progressbar {
-                            margin-top: .5rem;
-                        }
-
-                        .actions {
-                            display: flex;
-                            flex-grow: 1;
-                            justify-content: center;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
 .docs {
     i:not([class~="pi"]) {
         background-color: transparent;