diff --git a/apps/angular/projects/catalog/src/pages/product/product.component.html b/apps/angular/projects/catalog/src/pages/product/product.component.html
index f4e5e651..0cc424c2 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.html
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.html
@@ -5,7 +5,9 @@
         <h5 class="card-title">{{ 'AbpCatalog::Products' | abpLocalization }}</h5>
       </div>
       <div class="text-end col col-md-6">
-        <button class="btn btn-primary">{{ 'AbpCatalog::NewProduct' | abpLocalization }}</button>
+        <button class="btn btn-primary" (click)="onCreate()">
+          {{ 'AbpCatalog::NewProduct' | abpLocalization }}
+        </button>
       </div>
     </div>
   </div>
@@ -41,3 +43,53 @@
     </ngx-datatable>
   </div>
 </div>
+
+<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+  <ng-template #abpHeader>
+    <h3>{{ (selected?.id ? 'AbpCatalog::Edit' : 'AbpCatalog::NewProduct') | abpLocalization }}</h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <ng-template #loaderRef
+      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+    ></ng-template>
+
+    <!-- <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
+      <ul ngbNav #nav="ngbNav" class="nav-tabs">
+        <li ngbNavItem>
+          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+          <ng-template ngbNavContent>
+            <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+          </ng-template>
+        </li>
+
+        <li ngbNavItem>
+          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+          <ng-template ngbNavContent>
+            <div
+              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
+              class="form-check mb-2"
+            >
+              <input
+                type="checkbox"
+                class="form-check-input"
+                [attr.id]="'roles-' + i"
+                [formControl]="roleGroup.controls[roles[i].name]"
+              />
+              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
+            </div>
+          </ng-template>
+        </li>
+      </ul>
+
+      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+    </form> -->
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>
+      {{ 'AbpIdentity::Cancel' | abpLocalization }}
+    </button>
+    <abp-button iconClass="fa fa-check">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+  </ng-template>
+</abp-modal>
diff --git a/apps/angular/projects/catalog/src/pages/product/product.component.ts b/apps/angular/projects/catalog/src/pages/product/product.component.ts
index 365d2cc7..a29d12cc 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.ts
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.ts
@@ -1,4 +1,5 @@
 import { ListService } from '@abp/ng.core';
+import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { ProductDto, ProductService } from '@catalog/proxy/products';
 
@@ -11,7 +12,17 @@ import { ProductDto, ProductService } from '@catalog/proxy/products';
 export class ProductComponent implements OnInit {
   items: ProductDto[] = [];
   count = 0;
-  constructor(public readonly productService: ProductService, public readonly list: ListService) {
+
+  selected: ProductDto;
+
+  isModalVisible: boolean;
+
+  modalBusy = false;
+  constructor(
+    public readonly productService: ProductService,
+    public readonly list: ListService,
+    private confirmationService: ConfirmationService
+  ) {
     // TODO: this is an example of paging
     this.list.maxResultCount = 2;
   }
@@ -25,9 +36,29 @@ export class ProductComponent implements OnInit {
     });
   }
 
-  onEdit(row: ProductDto) {
-    // this.productService.edit(row);
+  onEdit(product: ProductDto) {
+    this.selected = product;
+    this.openModal();
+  }
+
+  onCreate() {
+    this.selected = {} as ProductDto;
+    this.openModal();
+  }
+
+  openModal() {
+    this.isModalVisible = true;
   }
 
-  onDelete(row: ProductDto) {}
+  onDelete(product: ProductDto) {
+    this.confirmationService
+      .warn('AbpCatalog::ProductDeletionConfirmationMessage', 'AbpCatalog::AreYouSure', {
+        messageLocalizationParams: [product.name],
+      })
+      .subscribe((status: Confirmation.Status) => {
+        if (status === Confirmation.Status.confirm) {
+          this.productService.delete(product.id).subscribe(() => this.list.get());
+        }
+      });
+  }
 }