diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 25c0da8..f2db5c9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { LayoutModule } from './layout/layout.module';
 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 { from } from 'rxjs';
 @NgModule({
@@ -58,10 +59,10 @@ import { from } from 'rxjs';
     AuthModule.forRoot(),
     DashboardModule.forRoot(),
     UserModule.forRoot(),
-
+    GameModule.forRoot()
   ],
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/src/app/pages/games/component/league-management/league-management.component.html b/src/app/pages/games/component/league-management/league-management.component.html
index b60fe7f..515ab5c 100644
--- a/src/app/pages/games/component/league-management/league-management.component.html
+++ b/src/app/pages/games/component/league-management/league-management.component.html
@@ -38,32 +38,33 @@
           class="league-table"
           #table
           [dataSource]="dataSource"
+          [@animateStagger]="{ value: '50' }"
           matSort
         >
-          <!-- Position Column -->
-          <ng-container matColumnDef="position">
+          <!-- Icon Column -->
+          <ng-container matColumnDef="icon">
             <mat-header-cell *matHeaderCellDef>아이콘</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{
-              element.position
-            }}</mat-cell>
+            <mat-cell *matCellDef="let league">icon</mat-cell>
           </ng-container>
 
-          <!-- Name Column -->
-          <ng-container matColumnDef="name">
+          <!-- KorName Column -->
+          <ng-container matColumnDef="korName">
             <mat-header-cell *matHeaderCellDef>리그명</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
+            <mat-cell *matCellDef="let league">{{ league.korName }}</mat-cell>
           </ng-container>
 
-          <!-- Weight Column -->
-          <ng-container matColumnDef="weight">
+          <!-- 추가방식 Column -->
+          <ng-container matColumnDef="addMethod">
             <mat-header-cell *matHeaderCellDef>추가방식</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{ element.weight }}</mat-cell>
+            <mat-cell *matCellDef="let league">파싱추가</mat-cell>
           </ng-container>
 
-          <!-- Symbol Column -->
-          <ng-container matColumnDef="symbol">
+          <!-- 종목 Column -->
+          <ng-container matColumnDef="sportsEntities">
             <mat-header-cell *matHeaderCellDef>종목</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{ element.symbol }}</mat-cell>
+            <mat-cell *matCellDef="let league">{{
+              league.sportsEntities[0].name
+            }}</mat-cell>
           </ng-container>
 
           <!-- Symbol Column -->
diff --git a/src/app/pages/games/component/league-management/league-management.component.scss b/src/app/pages/games/component/league-management/league-management.component.scss
index c96a909..c2d926f 100644
--- a/src/app/pages/games/component/league-management/league-management.component.scss
+++ b/src/app/pages/games/component/league-management/league-management.component.scss
@@ -90,17 +90,17 @@ app-league-management {
     //   flex: 15%;
     // }
 
-    .mat-column-position {
+    .mat-column-icon {
       max-width: 10%;
       // justify-content: start;
     }
-    .mat-column-name {
+    .mat-column-korName {
       max-width: 50%;
     }
-    .mat-column-weight {
+    .mat-column-addMethod {
       max-width: 15%;
     }
-    .mat-column-symbol {
+    .mat-column-sportsEntities {
       max-width: 10%;
     }
     .mat-column-test {
diff --git a/src/app/pages/games/component/league-management/league-management.component.ts b/src/app/pages/games/component/league-management/league-management.component.ts
index 74cc89b..44f92d6 100644
--- a/src/app/pages/games/component/league-management/league-management.component.ts
+++ b/src/app/pages/games/component/league-management/league-management.component.ts
@@ -1,8 +1,23 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
 
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { FuseUtils } from 'src/@fuse/utils';
+
+import { takeUntil } from 'rxjs/internal/operators';
 import { fuseAnimations } from 'src/@fuse/animations';
+import { LeagueDataSource } from './league-management.data-source';
+import { LeagueService } from 'src/modules/game/service/league.service';
 
 @Component({
   selector: 'app-league-management',
@@ -11,88 +26,138 @@ import { fuseAnimations } from 'src/@fuse/animations';
   animations: fuseAnimations,
   encapsulation: ViewEncapsulation.None
 })
-export class LeagueManagementComponent implements OnInit {
-  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'test'];
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+export class LeagueManagementComponent
+  implements OnInit, OnDestroy, AfterViewInit {
+  dataSource: LeagueDataSource | null;
+  displayedColumns = [
+    // 'engName',
+    'icon',
+    'korName',
+    // 'sevenName',
+    // 'engCountry',
+    // 'korCountry',
+    'addMethod',
+    'sportsEntities',
+    'test'
+  ];
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor() {}
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor(private leagueService: LeagueService) {
+    this._unsubscribeAll = new Subject();
+  }
 
   ngOnInit() {
-    this.dataSource.paginator = this.paginator;
+    this.dataSource = new LeagueDataSource(
+      this.leagueService,
+      this.paginator,
+      this.sort
+    );
+
+    console.log(this.dataSource);
+    // fromEvent(this.filter.nativeElement, 'keyup')
+    //   .pipe(
+    //     takeUntil(this._unsubscribeAll),
+    //     debounceTime(150),
+    //     distinctUntilChanged()
+    //   )
+    //   .subscribe(() => {
+    //     if (!this.dataSource) {
+    //       return;
+    //     }
+    //     this.dataSource.filter = this.filter.nativeElement.value;
+    //   });
   }
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }
 
-export interface PeriodicElement {
-  name: string;
-  position: number;
-  weight: number;
-  symbol: string;
-  test: string;
-}
+// export interface PeriodicElement {
+//   name: string;
+//   position: number;
+//   weight: number;
+//   symbol: string;
+//   test: string;
+// }
 
-const ELEMENT_DATA: PeriodicElement[] = [
-  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
-  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
-  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
-  {
-    position: 4,
-    name: 'Beryllium',
-    weight: 9.0122,
-    symbol: 'Be',
-    test: 'test'
-  },
-  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
-  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
-  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
-  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
-  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
-  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
-  { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
-  {
-    position: 12,
-    name: 'Magnesium',
-    weight: 24.305,
-    symbol: 'Mg',
-    test: 'test'
-  },
-  {
-    position: 13,
-    name: 'Aluminum',
-    weight: 26.9815,
-    symbol: 'Al',
-    test: 'test'
-  },
-  {
-    position: 14,
-    name: 'Silicon',
-    weight: 28.0855,
-    symbol: 'Si',
-    test: 'test'
-  },
-  {
-    position: 15,
-    name: 'Phosphorus',
-    weight: 30.9738,
-    symbol: 'P',
-    test: 'test'
-  },
-  { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
-  {
-    position: 17,
-    name: 'Chlorine',
-    weight: 35.453,
-    symbol: 'Cl',
-    test: 'test'
-  },
-  { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
-  {
-    position: 19,
-    name: 'Potassium',
-    weight: 39.0983,
-    symbol: 'K',
-    test: 'test'
-  },
-  { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
-];
+// const ELEMENT_DATA: PeriodicElement[] = [
+//   { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
+//   { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
+//   { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
+//   {
+//     position: 4,
+//     name: 'Beryllium',
+//     weight: 9.0122,
+//     symbol: 'Be',
+//     test: 'test'
+//   },
+//   { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
+//   { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
+//   { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
+//   { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
+//   { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
+//   { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
+//   { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
+//   {
+//     position: 12,
+//     name: 'Magnesium',
+//     weight: 24.305,
+//     symbol: 'Mg',
+//     test: 'test'
+//   },
+//   {
+//     position: 13,
+//     name: 'Aluminum',
+//     weight: 26.9815,
+//     symbol: 'Al',
+//     test: 'test'
+//   },
+//   {
+//     position: 14,
+//     name: 'Silicon',
+//     weight: 28.0855,
+//     symbol: 'Si',
+//     test: 'test'
+//   },
+//   {
+//     position: 15,
+//     name: 'Phosphorus',
+//     weight: 30.9738,
+//     symbol: 'P',
+//     test: 'test'
+//   },
+//   { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
+//   {
+//     position: 17,
+//     name: 'Chlorine',
+//     weight: 35.453,
+//     symbol: 'Cl',
+//     test: 'test'
+//   },
+//   { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
+//   {
+//     position: 19,
+//     name: 'Potassium',
+//     weight: 39.0983,
+//     symbol: 'K',
+//     test: 'test'
+//   },
+//   { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
+// ];
diff --git a/src/app/pages/games/component/league-management/league-management.data-source.ts b/src/app/pages/games/component/league-management/league-management.data-source.ts
new file mode 100644
index 0000000..0f3e5ac
--- /dev/null
+++ b/src/app/pages/games/component/league-management/league-management.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 { League } from 'src/modules/game/model/league.model';
+import { LeagueService } from 'src/modules/game/service/league.service';
+import { Page } from 'src/modules/common/data/model/page';
+
+export class LeagueDataSource extends DataSource<League> {
+  private filterSubject = new BehaviorSubject('');
+  private pageSubject = new BehaviorSubject<Page<League>>({});
+
+  constructor(
+    private leagueService: LeagueService,
+    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<League> {
+    return this.pageSubject.value;
+  }
+
+  set page(value: Page<League>) {
+    this.pageSubject.next(value);
+  }
+
+  connect(
+    collectionViewer: CollectionViewer
+  ): Observable<League[] | readonly League[]> {
+    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.leagueService.getAllLeague().pipe(
+          map(page => {
+            this.page = page;
+            return page.content;
+          })
+        );
+      })
+    );
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.filterSubject.complete();
+  }
+}
diff --git a/src/app/pages/games/resolver/index.ts b/src/app/pages/games/resolver/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/common/data/model/page.ts b/src/modules/common/data/model/page.ts
index e858820..9b691d4 100644
--- a/src/modules/common/data/model/page.ts
+++ b/src/modules/common/data/model/page.ts
@@ -13,15 +13,15 @@ export interface Pageable {
 }
 
 export interface Page<T> {
-  content: T[] | null;
-  empty: boolean;
-  first: boolean;
-  last: boolean;
-  number: number;
-  numberOfElements: number;
-  pageable: Pageable;
-  size: number;
-  sort: Sort;
-  totalElements: number;
-  totalPages: number;
+  content?: T[] | null;
+  empty?: boolean;
+  first?: boolean;
+  last?: boolean;
+  number?: number;
+  numberOfElements?: number;
+  pageable?: Pageable;
+  size?: number;
+  sort?: Sort;
+  totalElements?: number;
+  totalPages?: number;
 }
diff --git a/src/modules/game/game.module.ts b/src/modules/game/game.module.ts
new file mode 100644
index 0000000..3cd75b1
--- /dev/null
+++ b/src/modules/game/game.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SERVICES } from './service';
+
+@NgModule({
+  imports: [],
+  exports: []
+})
+export class GameRootModule {}
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+  exports: []
+})
+export class GameModule {
+  public static forRoot(): ModuleWithProviders<GameRootModule> {
+    return {
+      ngModule: GameRootModule,
+      providers: [SERVICES]
+    };
+  }
+}
diff --git a/src/modules/game/model/league.model.ts b/src/modules/game/model/league.model.ts
index 29ae673..d1a2cd2 100644
--- a/src/modules/game/model/league.model.ts
+++ b/src/modules/game/model/league.model.ts
@@ -8,5 +8,5 @@ export interface League extends DateAudit {
   sevenName?: string;
   engCountry?: string;
   korCountry?: string;
-  sportsEntities?: Sports;
+  sportsEntities?: Sports[];
 }
diff --git a/src/modules/game/model/sports.model.ts b/src/modules/game/model/sports.model.ts
index dbbdb2e..24c84b7 100644
--- a/src/modules/game/model/sports.model.ts
+++ b/src/modules/game/model/sports.model.ts
@@ -12,6 +12,6 @@ export enum SportsName {
 }
 
 export interface Sports extends DateAudit {
-  id: number;
-  name: SportsName;
+  id?: number;
+  name?: SportsName;
 }
diff --git a/src/modules/game/service/index.ts b/src/modules/game/service/index.ts
new file mode 100644
index 0000000..0af720d
--- /dev/null
+++ b/src/modules/game/service/index.ts
@@ -0,0 +1,3 @@
+import { LeagueService } from './league.service';
+
+export const SERVICES = [LeagueService];
diff --git a/src/modules/game/service/league.service.ts b/src/modules/game/service/league.service.ts
index 7ed9ae4..2d03f23 100644
--- a/src/modules/game/service/league.service.ts
+++ b/src/modules/game/service/league.service.ts
@@ -16,4 +16,56 @@ export class LeagueService {
   public getAllLeague(): Observable<Page<League>> {
     return this.httpClient.get<Page<League>>(`${this.apiBaseUrl}/league`, {});
   }
+
+  public regist(league: League): Observable<League> {
+    const engName = league.engName;
+    const korName = league.korName;
+    const sevenName = league.sevenName;
+    const engCountry = league.engCountry;
+    const korCountry = league.korCountry;
+    const sportsEntities = league.sportsEntities;
+
+    return this.httpClient
+      .post<any>(`${this.apiBaseUrl}/league`, {
+        engName,
+        korName,
+        sevenName,
+        engCountry,
+        korCountry,
+        sportsEntities
+      })
+      .pipe(
+        map(res => {
+          console.log('league regist response: ' + res);
+          return res;
+        })
+      );
+  }
+
+  public updateLeague(league: League): Observable<League> {
+    const id = league.id;
+    const engName = league.engName;
+    const korName = league.korName;
+    const sevenName = league.sevenName;
+    const engCountry = league.engCountry;
+    const korCountry = league.korCountry;
+    const sportsEntities = league.sportsEntities;
+
+    return this.httpClient
+      .put<any>(`${this.apiBaseUrl}/league/${id}`, {
+        id,
+        engName,
+        korName,
+        sevenName,
+        engCountry,
+        korCountry,
+        sportsEntities
+      })
+      .pipe(
+        map(res => {
+          console.log('league update response: ' + res);
+          return res;
+        })
+      );
+  }
 }