diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index 84b84fc..cbf292f 100644
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -71,7 +71,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.SPORT_RESULT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/sport-result',
+        url: '/pages/games/management/sport-result'
       },
       {
         id: 'sportMix_management',
@@ -79,7 +79,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.SPORT_MIX.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/sport-mix',
+        url: '/pages/games/management/sport-mix'
       },
       {
         id: 'mini_game',
@@ -87,7 +87,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.MINI_GAME.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/mini-game',
+        url: '/pages/games/management/mini-game'
       },
       {
         id: 'mini_game_management',
@@ -95,7 +95,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.MINI_GAME_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/mini-game-settings',
+        url: '/pages/games/management/mini-game-settings'
       },
       {
         id: 'excel_regist',
@@ -103,7 +103,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.EXCEL_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/excel-regist',
+        url: '/pages/games/management/excel-regist'
       },
       {
         id: 'bet_history',
@@ -111,7 +111,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.BET_HISTORY.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/bet-history',
+        url: '/pages/games/management/bet-history'
       },
       {
         id: 'settlement',
@@ -119,7 +119,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.SETTLEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/settlement',
+        url: '/pages/games/management/settlement'
       },
       {
         id: 'item_management',
@@ -127,7 +127,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.ITEM_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/item-management',
+        url: '/pages/games/management/item-management'
       },
       {
         id: 'league_management',
@@ -135,7 +135,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.LEAGUE_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/league-management',
+        url: '/pages/games/management/league-management'
       },
       {
         id: 'except_auto_regist',
@@ -143,7 +143,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.GAME.EXCEPT_AUTO_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/games/management/except-auto-regist',
+        url: '/pages/games/management/except-auto-regist'
       }
     ]
   },
@@ -159,7 +159,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.DEPOSIT_WITHDRAWAL.DEPOST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/deposit/management/deposit-management',
+        url: '/pages/deposit/management/deposit-management'
       },
       {
         id: 'withdrawal',
@@ -167,7 +167,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.DEPOSIT_WITHDRAWAL.WITHDRAWAL.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/deposit/management/withdrawal-management',
+        url: '/pages/deposit/management/withdrawal-management'
       },
       {
         id: 'money_log',
@@ -175,7 +175,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.DEPOSIT_WITHDRAWAL.MONEY_LOG.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/deposit/management/money-log',
+        url: '/pages/deposit/management/money-log'
       },
       {
         id: 'point_log',
@@ -183,7 +183,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.DEPOSIT_WITHDRAWAL.POINT_LOG.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/deposit/management/point-log',
+        url: '/pages/deposit/management/point-log'
       },
       {
         id: 'daily_settlement',
@@ -191,7 +191,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.DEPOSIT_WITHDRAWAL.DAILY_SETTLEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/deposit/management/dauly-settlement',
+        url: '/pages/deposit/management/dauly-settlement'
       }
     ]
   },
@@ -207,7 +207,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.INFO.SERVICE_CENTER_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'send_message',
@@ -215,7 +215,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.INFO.SEND_MESSAGE_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'free_board',
@@ -223,43 +223,39 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.INFO.FREE_BOARD_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
-      }
-      ,
+        url: '/sample'
+      },
       {
         id: 'bet_rule',
         title: '배팅규정',
         translate: 'NAV.INFO.BET_RULE.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
-      }
-      ,
+        url: '/sample'
+      },
       {
         id: 'popup_setting',
         title: '팝업창',
         translate: 'NAV.INFO.POPUP_SETTING.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
-      }
-      ,
+        url: '/sample'
+      },
       {
         id: 'main_event_regist',
         title: '메인 이벤트 등록',
         translate: 'NAV.INFO.MAIN_EVENT_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
-      }
-      ,
+        url: '/sample'
+      },
       {
         id: 'notice_board',
         title: '공지사항 관리',
         translate: 'NAV.INFO.NOTICE_BOARD_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'board_regist',
@@ -267,7 +263,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.INFO.BOARD_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       }
     ]
   },
@@ -283,7 +279,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.DEFAULT_SET.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'account_separate',
@@ -291,7 +287,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.ACCOUNT_SEPARATE.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/sites/bank-info'
       },
       {
         id: 'set_bet_amount',
@@ -299,7 +295,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.SET_BET_AMOUNT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'block_ip',
@@ -307,7 +303,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.BLOCK_IP.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'admin_ip',
@@ -315,7 +311,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.ADMIN_IP.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'set_level',
@@ -323,7 +319,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SITE.SET_LEVEL.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       }
     ]
   },
@@ -339,7 +335,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPECIAL.ROULETTE_COUPON.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'fix_bonus',
@@ -347,7 +343,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPECIAL.FIX_BONUS.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'mini_game_martin',
@@ -355,7 +351,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPECIAL.MINI_GAME_MARTIN.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'set_alert',
@@ -363,7 +359,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPECIAL.SET_ALERT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       },
       {
         id: 'check_notice',
@@ -371,7 +367,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPECIAL.CHECK_NOTICE.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/sample'
       }
     ]
   },
diff --git a/src/app/pages/sites/bank-info/component/list.component.html b/src/app/pages/sites/bank-info/component/list.component.html
index 7c1fe15..574597d 100644
--- a/src/app/pages/sites/bank-info/component/list.component.html
+++ b/src/app/pages/sites/bank-info/component/list.component.html
@@ -1 +1,107 @@
-<p>list works!</p>
+<div id="bank-info" class="page-layout simple fullwidth" fxLayout="column">
+  <!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
+  <!-- HEADER -->
+  <div
+    class="header accent p-24 h-160"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+  >
+    <div fxLayout="column" fxLayoutAlign="center start">
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="secondary-text s-18">home</mat-icon>
+        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+        <span class="secondary-text">User Interface</span>
+      </div>
+      <div class="h1 mt-16">계좌분리 관리</div>
+    </div>
+  </div>
+  <!-- / HEADER -->
+
+  <!-- CONTENT -->
+  <div class="content p-24">
+    <div class="h1">
+      계좌분리
+    </div>
+
+    <div
+      class="mb-24"
+      fxLayout="column"
+      fxLayoutAlign="start"
+      fxLayout.gt-md="row"
+    >
+      <div
+        class="mat-elevation-z8 p-24 mr-24"
+        fxFlex="3 0 auto"
+        fxLayout="column"
+      >
+        <form
+          name="bankInfoForm"
+          [formGroup]="bankInfoForm"
+          (ngSubmit)="bankInfoUpdate()"
+          novalidate
+        >
+          <mat-table
+            class="bank-info-table"
+            #table
+            [dataSource]="dataSource"
+            [@animateStagger]="{ value: '50' }"
+            matSort
+            formArrayName="items"
+          >
+            <!-- Icon Column [formGroupName] -->
+            <ng-container matColumnDef="id">
+              <mat-header-cell *matHeaderCellDef>계좌순번</mat-header-cell>
+              <mat-cell
+                *matCellDef="let bankInfo; let i = index"
+                [formGroupName]="i"
+                >{{ bankInfo.id }}</mat-cell
+              >
+            </ng-container>
+
+            <!-- KorName Column -->
+            <ng-container matColumnDef="name">
+              <mat-header-cell *matHeaderCellDef>은행명</mat-header-cell>
+              <mat-cell *matCellDef="let bankInfo">{{
+                bankInfo.name
+              }}</mat-cell>
+            </ng-container>
+
+            <!-- 추가방식 Column -->
+            <ng-container matColumnDef="number">
+              <mat-header-cell *matHeaderCellDef>계좌번호</mat-header-cell>
+              <mat-cell *matCellDef="let bankInfo">{{
+                bankInfo.number
+              }}</mat-cell>
+            </ng-container>
+
+            <!-- 종목 Column -->
+            <ng-container matColumnDef="holder">
+              <mat-header-cell *matHeaderCellDef>예금주</mat-header-cell>
+              <mat-cell *matCellDef="let bankInfo">{{
+                bankInfo.holder
+              }}</mat-cell>
+            </ng-container>
+
+            <!-- Symbol Column -->
+            <ng-container matColumnDef="description">
+              <mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
+              <mat-cell *matCellDef="let bankInfo">{{
+                bankInfo.description
+              }}</mat-cell>
+            </ng-container>
+
+            <mat-header-row
+              *matHeaderRowDef="displayedColumns"
+            ></mat-header-row>
+            <mat-row
+              *matRowDef="let row; columns: displayedColumns"
+              class="league"
+              matRipple
+            ></mat-row>
+          </mat-table>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- / CONTENT -->
+</div>
diff --git a/src/app/pages/sites/bank-info/component/list.component.scss b/src/app/pages/sites/bank-info/component/list.component.scss
index e69de29..8abc401 100644
--- a/src/app/pages/sites/bank-info/component/list.component.scss
+++ b/src/app/pages/sites/bank-info/component/list.component.scss
@@ -0,0 +1,140 @@
+@import 'src/@fuse/scss/fuse';
+
+app-page-sites-bank-info-list {
+  #bank-info {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .bank-info-table {
+    color: black;
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.301);
+    overflow: auto;
+    // -webkit-overflow-scrolling: touch;
+
+    .bankInfo {
+      position: relative;
+      cursor: pointer;
+      // height: 84px;
+    }
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    //First column and header
+    // .mat-header-cell:first-child,
+    // .mat-cell:first-child {
+    //   flex: 10%;
+    // }
+    // //Second column and header
+    // .mat-header-cell:nth-child(2),
+    // .mat-cell:nth-child(2) {
+    //   flex: 30%;
+    // }
+    // .mat-header-cell:nth-child(3),
+    // .mat-cell:nth-child(2) {
+    //   flex: 20%;
+    // }
+    // .mat-header-cell:nth-child(4),
+    // .mat-cell:nth-child(2) {
+    //   flex: 15%;
+    // }
+    // //Last column and header
+    // .mat-header-cell:last-child,
+    // .mat-cell:last-child {
+    //   flex: 15%;
+    // }
+
+    .mat-column-icon {
+      max-width: 11%;
+      // justify-content: start;
+    }
+    .mat-column-korName {
+      max-width: 22%;
+    }
+    .mat-column-addMethod {
+      max-width: 22%;
+    }
+    .mat-column-sportsEntities {
+      max-width: 22%;
+    }
+    .mat-column-test {
+      max-width: 22%;
+      // justify-content: flex-end;
+    }
+    .mat-column-image {
+      flex: 1 0 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+    .mat-column-buttons {
+      flex: 0 0 80px;
+    }
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/sites/bank-info/component/list.component.ts b/src/app/pages/sites/bank-info/component/list.component.ts
index 54b9e42..15ac2da 100644
--- a/src/app/pages/sites/bank-info/component/list.component.ts
+++ b/src/app/pages/sites/bank-info/component/list.component.ts
@@ -7,6 +7,8 @@ import {
   ViewEncapsulation,
   AfterViewInit
 } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { takeUntil } from 'rxjs/internal/operators';
@@ -15,6 +17,15 @@ import { MatTableDataSource } from '@angular/material/table';
 
 import { fuseAnimations } from 'src/@fuse/animations';
 import { FuseUtils } from 'src/@fuse/utils';
+import { BankInfoDataSource } from './list.data-source';
+import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service';
+import {
+  FormGroup,
+  FormBuilder,
+  Validators,
+  FormArray,
+  FormControl
+} from '@angular/forms';
 
 @Component({
   selector: 'app-page-sites-bank-info-list',
@@ -23,8 +34,59 @@ import { FuseUtils } from 'src/@fuse/utils';
   animations: fuseAnimations,
   encapsulation: ViewEncapsulation.None
 })
-export class ListComponent implements OnInit {
-  constructor() {}
+export class ListComponent implements OnInit, OnDestroy, AfterViewInit {
+  dataSource: BankInfoDataSource | null;
+  displayedColumns = ['id', 'name', 'number', 'holder', 'description'];
+  bankInfoForm: FormGroup;
+  bankInfoFormArray: FormArray;
 
-  ngOnInit() {}
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor(
+    private bankInfoService: BankInfoService,
+    private fb: FormBuilder
+  ) {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    this.dataSource = new BankInfoDataSource(this.bankInfoService);
+
+    this.bankInfoForm = this.fb.group({
+      items: this.createFormArray()
+    });
+  }
+
+  createFormArray(): FormArray {
+    return new FormArray(
+      this.dataSource[0](
+        item =>
+          new FormGroup({
+            id: new FormControl(item.id),
+            name: new FormControl(item.name, [Validators.required]),
+            number: new FormControl(item.number, [Validators.required]),
+            holder: new FormControl(item.holder, [Validators.required]),
+            description: new FormControl(item.description, [
+              Validators.required
+            ])
+          })
+      )
+    );
+  }
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
+
+  bankInfoUpdate(): void {}
 }
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
index cbe183e..be23818 100644
--- a/src/app/pages/sites/bank-info/component/list.data-source.ts
+++ b/src/app/pages/sites/bank-info/component/list.data-source.ts
@@ -13,53 +13,21 @@ 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>>({});
+  // private pageSubject = new BehaviorSubject<Page<BankInfo>>({});
 
-  constructor(
-    private bankInfoService: BankInfoService,
-    private paginator: MatPaginator,
-    private sort: MatSort
-  ) {
+  constructor(private bankInfoService: BankInfoService) {
     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
-    ];
+    const displayDataChanges = [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;
           })
         );
diff --git a/src/modules/sites/bank-info/service/bank-info.service.ts b/src/modules/sites/bank-info/service/bank-info.service.ts
index 2876df6..69d8339 100644
--- a/src/modules/sites/bank-info/service/bank-info.service.ts
+++ b/src/modules/sites/bank-info/service/bank-info.service.ts
@@ -17,7 +17,7 @@ export class BankInfoService {
 
   public getBankInfos(): Observable<Page<BankInfo>> {
     return this.httpClient.get<Page<BankInfo>>(
-      `${this.apiBaseUrl}/bank-info`,
+      `${this.apiBaseUrl}/bank_info`,
       {}
     );
   }