diff --git a/apps/angular/projects/catalog/config/ng-package.json b/apps/angular/projects/catalog/config/ng-package.json
new file mode 100644
index 00000000..2f592534
--- /dev/null
+++ b/apps/angular/projects/catalog/config/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/catalog/config",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/apps/angular/projects/catalog/package.json b/apps/angular/projects/catalog/package.json
index f6cdbadd..d006325f 100644
--- a/apps/angular/projects/catalog/package.json
+++ b/apps/angular/projects/catalog/package.json
@@ -1,11 +1,14 @@
 {
-  "name": "catalog",
+  "name": "@eshoponabp/catalog",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
+    "@angular/core": "^12.2.0",
+    "@abp/ng.theme.shared": "~5.0.0-rc.1",
+    "@abp/ng.core": "~5.0.0-rc.1",
+    "@ngx-validate/core": "~0.1.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/angular/projects/catalog/src/pages/product/product-routing.module.ts b/apps/angular/projects/catalog/src/pages/product/product-routing.module.ts
index 54eb7690..9c36cee6 100644
--- a/apps/angular/projects/catalog/src/pages/product/product-routing.module.ts
+++ b/apps/angular/projects/catalog/src/pages/product/product-routing.module.ts
@@ -1,7 +1,7 @@
 import { AuthGuard, PermissionGuard } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { eCatalogPolicyNames } from '@catalog/config';
+import { eCatalogPolicyNames } from '@eshoponabp/catalog/config';
 import { ProductComponent } from './product.component';
 
 const routes: Routes = [
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 8a637087..898b4918 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.html
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.html
@@ -55,6 +55,10 @@
         [name]="'CatalogService::DisplayName:Name' | abpLocalization"
         prop="name"
       ></ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'CatalogService::DisplayName:ImageName' | abpLocalization"
+        prop="imageName"
+      ></ngx-datatable-column>
       <ngx-datatable-column
         [name]="'CatalogService::DisplayName:Price' | abpLocalization"
         prop="price"
@@ -107,6 +111,19 @@
         />
       </div>
 
+      <div class="mb-3">
+        <label class="form-label" for="imageName">
+          {{ 'CatalogService::DisplayName:ImageName' | abpLocalization }} *
+        </label>
+        <input
+          type="text"
+          class="form-control"
+          id="imageName"
+          formControlName="imageName"
+          [placeholder]="'CatalogService::DisplayName:ImageName' | abpLocalization"
+        />
+      </div>
+
       <div class="mb-3">
         <label class="form-label" for="price">
           {{ 'CatalogService::DisplayName:Price' | abpLocalization }} *
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 a7562336..76519797 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.ts
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.ts
@@ -2,9 +2,11 @@ import { ListService } from '@abp/ng.core';
 import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { eCatalogPolicyNames } from '@catalog/config';
-import { ProductDto, ProductService } from '@catalog/proxy/products';
+import { eCatalogPolicyNames } from '@eshoponabp/catalog/config';
 import { finalize } from 'rxjs/operators';
+import { ProductDto } from '../../lib/proxy/products/models';
+import { ProductService } from '../../lib/proxy/products/product.service';
+
 @Component({
   selector: 'lib-product',
   templateUrl: './product.component.html',
@@ -35,7 +37,7 @@ export class ProductComponent implements OnInit {
     private fb: FormBuilder
   ) {
     // TODO: this is an example of paging
-    this.list.maxResultCount = 20;
+    this.list.maxResultCount = 10;
   }
 
   ngOnInit(): void {
@@ -51,6 +53,7 @@ export class ProductComponent implements OnInit {
     this.form = this.fb.group({
       name: [this.selected.name, { validators: [Validators.required] }],
       code: [this.selected.code, { validators: [Validators.required] }],
+      imageName: [this.selected.imageName, { validators: [Validators.required] }],
       price: [this.selected.price, { validators: [Validators.required] }],
       stockCount: [this.selected.stockCount, { validators: [Validators.required] }],
     });
diff --git a/apps/angular/projects/catalog/src/public-api.ts b/apps/angular/projects/catalog/src/public-api.ts
new file mode 100644
index 00000000..d310be98
--- /dev/null
+++ b/apps/angular/projects/catalog/src/public-api.ts
@@ -0,0 +1,4 @@
+export * from './catalog-routing.module';
+export * from './catalog.module';
+export * from './lib/proxy/products';
+export * from './pages';
diff --git a/apps/angular/src/app/app-routing.module.ts b/apps/angular/src/app/app-routing.module.ts
index eb31ebba..22f64039 100644
--- a/apps/angular/src/app/app-routing.module.ts
+++ b/apps/angular/src/app/app-routing.module.ts
@@ -27,7 +27,7 @@ const routes: Routes = [
   },
   {
     path: 'catalog',
-    loadChildren: () => import('@catalog/catalog.module').then(m => m.CatalogModule),
+    loadChildren: () => import('@eshoponabp/catalog').then(m => m.CatalogModule),
   },
 ];
 
diff --git a/apps/angular/src/app/app.module.ts b/apps/angular/src/app/app.module.ts
index af512779..697f05af 100644
--- a/apps/angular/src/app/app.module.ts
+++ b/apps/angular/src/app/app.module.ts
@@ -9,7 +9,7 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CatalogConfigModule } from '@catalog/config';
+import { CatalogConfigModule } from '@eshoponabp/catalog/config';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
diff --git a/apps/angular/tsconfig.json b/apps/angular/tsconfig.json
index 5467b5b8..8b1f5709 100644
--- a/apps/angular/tsconfig.json
+++ b/apps/angular/tsconfig.json
@@ -14,14 +14,13 @@
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "paths": {
-      "@catalog/config": [
+      "@eshoponabp/catalog/config": [
+        "node_modules/@eshoponabp/catalog/config",
         "projects/catalog/config/src/public-api.ts"
       ],
-      "@catalog/proxy/products": [
-        "projects/catalog/src/lib/proxy/products/index.ts"
-      ],
-      "@catalog/*": [
-        "projects/catalog/src/*",
+      "@eshoponabp/catalog": [
+        "node_modules/@eshoponabp/catalog",
+        "projects/catalog/src/public-api.ts",
       ],
     }
   },
diff --git a/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/en.json b/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/en.json
index 95aa40f1..ae6e53d5 100644
--- a/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/en.json
+++ b/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/en.json
@@ -13,6 +13,7 @@
     "Products": "Products",
     "DisplayName:Name": "Name",
     "DisplayName:Code": "Code",
+    "DisplayName:ImageName": "Image Name",
     "DisplayName:Price": "Price",
     "DisplayName:StockCount": "StockCount",
     "ProductDeletionConfirmationMessage": "Are you sure you want to delete this {0} product?"
diff --git a/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/tr.json b/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/tr.json
index dc61da7c..235e6cc6 100644
--- a/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/tr.json
+++ b/services/catalog/src/EShopOnAbp.CatalogService.Domain.Shared/Localization/CatalogService/tr.json
@@ -13,6 +13,7 @@
     "Products": "Ürünler",
     "DisplayName:Name": "İsim",
     "DisplayName:Code": "Kod",
+    "DisplayName:ImageName": "Resim Adı",
     "DisplayName:Price": "Fiyat",
     "DisplayName:StockCount": "Stok Adedi",
     "ProductDeletionConfirmationMessage": "{0} ürününü silmek istediğinizden emin misiniz?"