diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cd71169..e4bf6bd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,8 @@ import { MemberLevelModule } from 'app/modules/polyglot/member_level/member_leve
 import { MemberModule } from 'app/modules/polyglot/member/member.module';
 import { SiteModule } from 'app/modules/polyglot/site/site.module';
 
+import { ApiModule } from 'app/modules/polyglot/api/api.module';
+
 const routerConfig: ExtraOptions = {
   preloadingStrategy: PreloadAllModules,
   scrollPositionRestoration: 'enabled',
@@ -70,6 +72,8 @@ const routerConfig: ExtraOptions = {
     MemberLevelModule.forRoot(),
     MemberModule.forRoot(),
     SiteModule.forRoot(),
+
+    ApiModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })
diff --git a/src/app/modules/admin/member/partner/components/list.component.ts b/src/app/modules/admin/member/partner/components/list.component.ts
index c49d604..a10a95b 100644
--- a/src/app/modules/admin/member/partner/components/list.component.ts
+++ b/src/app/modules/admin/member/partner/components/list.component.ts
@@ -54,6 +54,7 @@ import {
   ListMembersResponse,
 } from 'app/modules/proto/c2se/member_pb';
 import { Pagination } from 'app/modules/proto/protobuf/pagination_pb';
+import { ApiService } from 'app/modules/polyglot/api/services/api.service';
 @Component({
   selector: 'partner-list',
   templateUrl: './list.component.html',
@@ -119,6 +120,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     private _activatedRoute: ActivatedRoute,
     private _partnerService: PartnerService,
     private __memberService: MemberService,
+    private __apiService: ApiService,
 
     private router: Router,
     private _matDialog: MatDialog
@@ -190,6 +192,15 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       // Mark for check
       this._changeDetectorRef.markForCheck();
     });
+
+    this.__apiService
+      .listBanks()
+      .then((l) => {
+        console.log('list', l.getVendorsList());
+      })
+      .catch((e) => {
+        console.log('error', e);
+      });
   }
 
   /**
diff --git a/src/app/modules/polyglot/api/api.module.ts b/src/app/modules/polyglot/api/api.module.ts
new file mode 100644
index 0000000..416c5f5
--- /dev/null
+++ b/src/app/modules/polyglot/api/api.module.ts
@@ -0,0 +1,16 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { SERVICES } from './services';
+
+@NgModule({})
+export class ApiRootModule {}
+
+@NgModule({})
+export class ApiModule {
+  public static forRoot(): ModuleWithProviders<ApiRootModule> {
+    return {
+      ngModule: ApiRootModule,
+      providers: [...SERVICES],
+    };
+  }
+}
diff --git a/src/app/modules/polyglot/api/services/api.service.ts b/src/app/modules/polyglot/api/services/api.service.ts
new file mode 100644
index 0000000..98bfe59
--- /dev/null
+++ b/src/app/modules/polyglot/api/services/api.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { NatsService } from 'app/core/nats/services/nats.service';
+
+import { Error } from 'app/modules/proto/protobuf/rpc_pb';
+
+import {
+  ListVendorsRequest,
+  ListVendorsResponse,
+} from 'app/modules/proto/c2se/api/vendor_pb';
+import { SUBJECT_LIST_VENDORS } from 'app/modules/proto/c2se/backend/api/vendor_pb';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiService {
+  /**
+   * Constructor
+   */
+  constructor(private __natsService: NatsService) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Accessors
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  listBanks(): Promise<ListVendorsResponse.Result> {
+    return new Promise<ListVendorsResponse.Result>((resolve, reject) => {
+      let req = new ListVendorsRequest();
+
+      this.__natsService
+        .request<ListVendorsResponse.Result>(
+          SUBJECT_LIST_VENDORS,
+          req.serializeBinary(),
+          ListVendorsResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('success', result, result.getVendorsList());
+          return resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          reject(e);
+        });
+    });
+  }
+}
diff --git a/src/app/modules/polyglot/api/services/index.ts b/src/app/modules/polyglot/api/services/index.ts
new file mode 100644
index 0000000..23dfd5a
--- /dev/null
+++ b/src/app/modules/polyglot/api/services/index.ts
@@ -0,0 +1,5 @@
+import { Type } from '@angular/core';
+
+import { ApiService } from './api.service';
+
+export const SERVICES: Type<any>[] = [ApiService];