diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f2db5c9..ea9c7f2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { AuthModule } from 'src/modules/auth/auth.module';
 import { DashboardModule } from 'src/modules/dashboard/dashboard.module';
 import { UserModule } from 'src/modules/user/user.module';
 import { GameModule } from 'src/modules/game/game.module';
+import { SitesModule } from 'src/modules/sites/sites.module';
 
 import { from } from 'rxjs';
 @NgModule({
@@ -59,7 +60,8 @@ import { from } from 'rxjs';
     AuthModule.forRoot(),
     DashboardModule.forRoot(),
     UserModule.forRoot(),
-    GameModule.forRoot()
+    GameModule.forRoot(),
+    SitesModule.forRoot()
   ],
   declarations: [AppComponent],
   providers: [],
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 40c1a60..65de30a 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -9,6 +9,10 @@ const routes: Routes = [
   {
     path: 'games',
     loadChildren: './games/games.module#GamesModule'
+  },
+  {
+    path: 'sites',
+    loadChildren: './sites/sites.module#SitesModule'
   }
 ];
 
@@ -16,4 +20,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class PagesRoutingModule { }
+export class PagesRoutingModule {}
diff --git a/src/app/pages/sites/bank-info/bank-info-routing.module.ts b/src/app/pages/sites/bank-info/bank-info-routing.module.ts
new file mode 100644
index 0000000..65c72cd
--- /dev/null
+++ b/src/app/pages/sites/bank-info/bank-info-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListComponent } from './component/list.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ListComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BankInfoRoutingModule {}
diff --git a/src/app/pages/sites/bank-info/bank-info.module.ts b/src/app/pages/sites/bank-info/bank-info.module.ts
new file mode 100644
index 0000000..539395e
--- /dev/null
+++ b/src/app/pages/sites/bank-info/bank-info.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
+
+import { BankInfoRoutingModule } from './bank-info-routing.module';
+import { ListComponent } from './component/list.component';
+
+import { COMPONENTS } from './component';
+// import { RESOLVERS } from './resolver';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatPaginatorModule,
+
+    FuseSharedModule,
+    FuseWidgetModule,
+
+    BankInfoRoutingModule
+  ],
+
+  declarations: [...COMPONENTS]
+  // providers: [...RESOLVERS]
+})
+export class BankInfoModule {}
diff --git a/src/app/pages/sites/bank-info/component/index.ts b/src/app/pages/sites/bank-info/component/index.ts
new file mode 100644
index 0000000..04759eb
--- /dev/null
+++ b/src/app/pages/sites/bank-info/component/index.ts
@@ -0,0 +1,3 @@
+import { ListComponent } from './list.component';
+
+export const COMPONENTS = [ListComponent];
diff --git a/src/app/pages/sites/bank-info/component/list.component.html b/src/app/pages/sites/bank-info/component/list.component.html
new file mode 100644
index 0000000..7c1fe15
--- /dev/null
+++ b/src/app/pages/sites/bank-info/component/list.component.html
@@ -0,0 +1 @@
+<p>list works!</p>
diff --git a/src/app/pages/sites/bank-info/component/list.component.scss b/src/app/pages/sites/bank-info/component/list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/sites/bank-info/component/list.component.ts b/src/app/pages/sites/bank-info/component/list.component.ts
new file mode 100644
index 0000000..54b9e42
--- /dev/null
+++ b/src/app/pages/sites/bank-info/component/list.component.ts
@@ -0,0 +1,30 @@
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/internal/operators';
+
+import { MatTableDataSource } from '@angular/material/table';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+@Component({
+  selector: 'app-page-sites-bank-info-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
+})
+export class ListComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/src/app/pages/sites/bank-info/component/list.data-source.ts b/src/app/pages/sites/bank-info/component/list.data-source.ts
new file mode 100644
index 0000000..cbe183e
--- /dev/null
+++ b/src/app/pages/sites/bank-info/component/list.data-source.ts
@@ -0,0 +1,73 @@
+import { DataSource } from '@angular/cdk/table';
+
+import { BehaviorSubject, Observable, merge } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { CollectionViewer } from '@angular/cdk/collections';
+
+import { BankInfo } from 'src/modules/sites/bank-info/model/bank-info.model';
+import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service';
+import { Page } from 'src/modules/common/data/model/page';
+
+export class BankInfoDataSource extends DataSource<BankInfo> {
+  private filterSubject = new BehaviorSubject('');
+  private pageSubject = new BehaviorSubject<Page<BankInfo>>({});
+
+  constructor(
+    private bankInfoService: BankInfoService,
+    private paginator: MatPaginator,
+    private sort: MatSort
+  ) {
+    super();
+  }
+
+  // Filter
+  get filter(): string {
+    return this.filterSubject.value;
+  }
+
+  set filter(filter: string) {
+    this.filterSubject.next(filter);
+  }
+
+  get page(): Page<BankInfo> {
+    return this.pageSubject.value;
+  }
+
+  set page(value: Page<BankInfo>) {
+    this.pageSubject.next(value);
+  }
+
+  connect(
+    collectionViewer: CollectionViewer
+  ): Observable<BankInfo[] | readonly BankInfo[]> {
+    const displayDataChanges = [
+      this.paginator.page,
+      this.sort.sortChange,
+      this.filterSubject
+    ];
+
+    return merge(...displayDataChanges).pipe(
+      switchMap(() => {
+        const filter = this.filter;
+        const sortActive = this.sort.active;
+        const sortDirection = this.sort.direction;
+        const pageIndex = this.paginator.pageIndex;
+        const pageSize = this.paginator.pageSize;
+
+        return this.bankInfoService.getBankInfos().pipe(
+          map(page => {
+            this.page = page;
+            return page.content;
+          })
+        );
+      })
+    );
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.filterSubject.complete();
+  }
+}
diff --git a/src/app/pages/sites/sites-routing.module.ts b/src/app/pages/sites/sites-routing.module.ts
new file mode 100644
index 0000000..bcfbbdc
--- /dev/null
+++ b/src/app/pages/sites/sites-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'bank-info',
+    loadChildren: './bank-info/bank-info.module#BankInfoModule'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SitesRoutingModule {}
diff --git a/src/app/pages/sites/sites.module.ts b/src/app/pages/sites/sites.module.ts
new file mode 100644
index 0000000..47ed392
--- /dev/null
+++ b/src/app/pages/sites/sites.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { SitesRoutingModule } from './sites-routing.module';
+
+@NgModule({
+  imports: [FuseSharedModule, SitesRoutingModule]
+})
+export class SitesModule {}
diff --git a/src/modules/sites/bank-info/model/bank-info.model.ts b/src/modules/sites/bank-info/model/bank-info.model.ts
new file mode 100644
index 0000000..105a747
--- /dev/null
+++ b/src/modules/sites/bank-info/model/bank-info.model.ts
@@ -0,0 +1,9 @@
+import { DateAudit } from 'src/modules/common/data/model/audit';
+
+export interface BankInfo extends DateAudit {
+  id?: number;
+  name?: string;
+  number?: string;
+  holder?: string;
+  description?: string;
+}
diff --git a/src/modules/sites/bank-info/service/bank-info.service.ts b/src/modules/sites/bank-info/service/bank-info.service.ts
new file mode 100644
index 0000000..2876df6
--- /dev/null
+++ b/src/modules/sites/bank-info/service/bank-info.service.ts
@@ -0,0 +1,28 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { BankInfo } from '../model/bank-info.model';
+import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
+import { Page } from 'src/modules/common/data/model/page';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BankInfoService {
+  constructor(
+    @Inject(API_BASE_URL) private apiBaseUrl: string,
+    private httpClient: HttpClient
+  ) {}
+
+  public getBankInfos(): Observable<Page<BankInfo>> {
+    return this.httpClient.get<Page<BankInfo>>(
+      `${this.apiBaseUrl}/bank-info`,
+      {}
+    );
+  }
+
+  // public getUser(id: number): Observable<User> {
+  //   return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
+  // }
+}
diff --git a/src/modules/sites/bank-info/service/index.ts b/src/modules/sites/bank-info/service/index.ts
new file mode 100644
index 0000000..52c2b11
--- /dev/null
+++ b/src/modules/sites/bank-info/service/index.ts
@@ -0,0 +1,3 @@
+import { BankInfoService } from './bank-info.service';
+
+export const BANK_INFO_SERVICES = [BankInfoService];
diff --git a/src/modules/sites/sites.module.ts b/src/modules/sites/sites.module.ts
new file mode 100644
index 0000000..1c4e865
--- /dev/null
+++ b/src/modules/sites/sites.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BANK_INFO_SERVICES } from './bank-info/service';
+
+@NgModule({
+  imports: [],
+  exports: []
+})
+export class SitesRootModule {}
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+  exports: []
+})
+export class SitesModule {
+  public static forRoot(): ModuleWithProviders<SitesRootModule> {
+    return {
+      ngModule: SitesRootModule,
+      providers: [BANK_INFO_SERVICES]
+    };
+  }
+}