diff --git a/angular-app/src/app/app.component.html b/angular-app/src/app/app.component.html
index a80638b..ca8e032 100644
--- a/angular-app/src/app/app.component.html
+++ b/angular-app/src/app/app.component.html
@@ -3,7 +3,6 @@
   <button mat-menu-item routerLink="/items">Lists</button>
   <button mat-menu-item (click)="openCreateItemDialog()">Create New Item</button>
 </mat-menu>
-
 <main>
   <router-outlet></router-outlet>
 </main>
diff --git a/angular-app/src/app/app.component.ts b/angular-app/src/app/app.component.ts
index e84252f..242dc9c 100644
--- a/angular-app/src/app/app.component.ts
+++ b/angular-app/src/app/app.component.ts
@@ -8,22 +8,25 @@ import { RouterModule } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { CreateItemComponent } from './create-item/create-item.component';
 import { Router } from '@angular/router';
+import { ItemComponent } from './item/item.component';
+import { Item } from './item/item';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CommonModule, MatMenuModule, MatButtonModule, RouterModule],
+  imports: [RouterOutlet, CommonModule, MatMenuModule, MatButtonModule, RouterModule, ItemComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent implements OnInit {
-  title = 'mangodb-angualr';
+  title = 'mangodb-angular';
   items: any[] = [];
   newItem = { name: '', description: '' };
   isLoading : boolean = false;
   showCreateForm: boolean = false; // Toggle for the create form
-
-  constructor(private dialog: MatDialog, private router: Router) {}
+  item : Item | null = null;
+  
+  constructor(private dialog: MatDialog, private router: Router, private itemService: ItemService) {}
 
   ngOnInit(): void {
   }
@@ -35,8 +38,9 @@ export class AppComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe((result) => {
-      //redirecting to the items page
-      this.router.navigate(['/items']);
+      this.itemService.addItem(result).subscribe((item) => {
+        this.router.navigate(['/items']);
+      });
     });
   }
 }
diff --git a/angular-app/src/app/item/item.component.ts b/angular-app/src/app/item/item.component.ts
index c7bd094..15e079c 100644
--- a/angular-app/src/app/item/item.component.ts
+++ b/angular-app/src/app/item/item.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ItemService } from '../services/item.service';
 import { CommonModule } from '@angular/common';
@@ -41,7 +41,6 @@ import {
 export class ItemComponent implements OnInit {
   title = 'mangodb-angualr';
   items: Item[] = [];
-  newItem = { name: '', description: '' };
   isLoading : boolean = false;
   showCreateForm: boolean = false; // Toggle for the create form
   itemToEdit: any = {
@@ -55,7 +54,7 @@ export class ItemComponent implements OnInit {
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
-  
+
   constructor(private itemService: ItemService) {}
 
   ngOnInit(): void {
@@ -73,7 +72,6 @@ export class ItemComponent implements OnInit {
   }
 
   addOrUpdateItem(newItem: Item): void {
-    console.log(newItem);
     if (newItem._id) {
       this.itemService.updateItem(newItem._id, newItem).subscribe((item) => {
         this.loadItems();