diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index 18a2cc9..34b1610 100644
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -71,7 +71,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPORT_RESULT_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/sport-result',
       },
       {
         id: 'sportMixManagement',
@@ -79,7 +79,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SPORT_MIX_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/sport-mix',
       },
       {
         id: 'miniGame',
@@ -87,7 +87,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.MINI_GAME.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/mini-game',
       },
       {
         id: 'miniGameManagement',
@@ -95,7 +95,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.MINI_GAME_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/mini-game-settings',
       },
       {
         id: 'excelRegist',
@@ -103,7 +103,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.EXCEL_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/excel-regist',
       },
       {
         id: 'betHistory',
@@ -111,7 +111,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.BET_HISTORY.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/bet-history',
       },
       {
         id: 'settlement',
@@ -119,7 +119,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.SETTLEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/settlement',
       },
       {
         id: 'itemManagement',
@@ -127,15 +127,15 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.ITEM_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/item-management',
       },
       {
         id: 'leagueManagement',
-        title: '종목관리',
+        title: '리그관리',
         translate: 'NAV.LEAGUE_MANAGEMENT.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management/league-management',
       },
       {
         id: 'exceptAutoRegist',
@@ -143,7 +143,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.EXCEPT_AUTO_REGIST.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/sample',
+        url: '/pages/games/management//except-auto-regist',
       }
     ]
   },
diff --git a/src/app/pages/games/component/excel-regist/excel-regist.component.html b/src/app/pages/games/component/excel-regist/excel-regist.component.html
new file mode 100644
index 0000000..51a505b
--- /dev/null
+++ b/src/app/pages/games/component/excel-regist/excel-regist.component.html
@@ -0,0 +1,35 @@
+<div id="orders" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
+
+      <!-- APP TITLE -->
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          shopping_basket
+        </mat-icon>
+        <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
+      </div>
+      <!-- / APP TITLE -->
+
+    </div>
+
+  </div>
+  <div _ngcontent-yro-c52 class="content p-24">
+    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+      <mat-button-toggle value="bold">Bold</mat-button-toggle>
+      <mat-button-toggle value="italic">Italic</mat-button-toggle>
+      <mat-button-toggle value="underline">Underline</mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+  <div class="example-button-row">
+    <button mat-raised-button color="accent">Primary</button>
+  </div>
\ No newline at end of file
diff --git a/src/app/pages/games/component/excel-regist/excel-regist.component.scss b/src/app/pages/games/component/excel-regist/excel-regist.component.scss
new file mode 100644
index 0000000..3408788
--- /dev/null
+++ b/src/app/pages/games/component/excel-regist/excel-regist.component.scss
@@ -0,0 +1,4 @@
+.example-button-row button,
+.example-button-row a {
+  margin-right: 8px;
+}
diff --git a/src/app/pages/games/component/excel-regist/excel-regist.component.spec.ts b/src/app/pages/games/component/excel-regist/excel-regist.component.spec.ts
new file mode 100644
index 0000000..914279f
--- /dev/null
+++ b/src/app/pages/games/component/excel-regist/excel-regist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExcelRegistComponent } from './excel-regist.component';
+
+describe('ExcelRegistComponent', () => {
+  let component: ExcelRegistComponent;
+  let fixture: ComponentFixture<ExcelRegistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExcelRegistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExcelRegistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/games/component/excel-regist/excel-regist.component.ts b/src/app/pages/games/component/excel-regist/excel-regist.component.ts
new file mode 100644
index 0000000..61322fc
--- /dev/null
+++ b/src/app/pages/games/component/excel-regist/excel-regist.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-excel-regist',
+  templateUrl: './excel-regist.component.html',
+  styleUrls: ['./excel-regist.component.scss']
+})
+export class ExcelRegistComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/pages/games/component/index.ts b/src/app/pages/games/component/index.ts
new file mode 100644
index 0000000..34dcdbd
--- /dev/null
+++ b/src/app/pages/games/component/index.ts
@@ -0,0 +1,13 @@
+import { SportResultComponent } from './sport-result/sport-result.component';
+import { SportMixComponent } from '../component/sport-mix/sport-mix.component';
+import { MiniGameComponent } from '../component/mini-game/mini-game.component';
+import { MiniGameSettingsComponent } from '../component/mini-game-settings/mini-game-settings.component';
+import { ExcelRegistComponent } from '../component/excel-regist/excel-regist.component';
+
+export const COMPONENTS = [
+  SportResultComponent,
+  SportMixComponent,
+  MiniGameComponent,
+  MiniGameSettingsComponent,
+  ExcelRegistComponent
+];
diff --git a/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.html b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.html
new file mode 100644
index 0000000..e85d53a
--- /dev/null
+++ b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.html
@@ -0,0 +1,121 @@
+<div id="orders" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
+
+      <!-- APP TITLE -->
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          shopping_basket
+        </mat-icon>
+        <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+      <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order">
+        </div>
+      </div>
+      <!-- / SEARCH -->
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+
+      <mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
+
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">{{order.id}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Reference Column -->
+        <ng-container matColumnDef="reference">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">{{order.reference}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="customer">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">
+              {{order.customer.firstName}}
+              {{order.customer.lastName}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="total">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              {{order.total | currency:'USD':'symbol'}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Payment Column -->
+        <ng-container matColumnDef="payment">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.payment.method}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{order.status[0].name}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Date Column -->
+        <ng-container matColumnDef="date">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.date}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
+
+        <mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
+          [routerLink]="'/apps/e-commerce/orders/'+order.id">
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
+      </mat-paginator>
+
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
\ No newline at end of file
diff --git a/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.scss b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.scss
new file mode 100644
index 0000000..0df904e
--- /dev/null
+++ b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.scss
@@ -0,0 +1,122 @@
+@import "src/@fuse/scss/fuse";
+
+e-commerce-orders {
+
+    #orders {
+
+        .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;
+                }
+            }
+        }
+    }
+
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .orders-table {
+        flex: 1 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        .mat-header-row {
+            min-height: 64px;
+        }
+
+        .order {
+            position: relative;
+            cursor: pointer;
+            height: 84px;
+        }
+
+        .mat-cell {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .mat-column-id {
+            flex: 0 1 84px;
+        }
+
+        .mat-column-image {
+            flex: 0 1 84px;
+
+            .product-image {
+                width: 52px;
+                height: 52px;
+                border: 1px solid rgba(0, 0, 0, .12);
+            }
+        }
+
+        .mat-column-buttons {
+            flex: 0 1 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/games/component/mini-game-settings/mini-game-settings.component.spec.ts b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.spec.ts
new file mode 100644
index 0000000..d9d2f2c
--- /dev/null
+++ b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MiniGameSettingsComponent } from './mini-game-settings.component';
+
+describe('MiniGameSettingsComponent', () => {
+  let component: MiniGameSettingsComponent;
+  let fixture: ComponentFixture<MiniGameSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MiniGameSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MiniGameSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.ts b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.ts
new file mode 100644
index 0000000..411ee68
--- /dev/null
+++ b/src/app/pages/games/component/mini-game-settings/mini-game-settings.component.ts
@@ -0,0 +1,58 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+
+@Component({
+  selector: 'app-mini-game-settings',
+  templateUrl: './mini-game-settings.component.html',
+  styleUrls: ['./mini-game-settings.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
+})
+export class MiniGameSettingsComponent implements OnInit, OnDestroy {
+
+  displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
+
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    fromEvent(this.filter.nativeElement, 'keyup')
+      .pipe(
+        // takeUntil(this._unsubscribeAll),
+        // debounceTime(150),
+        // distinctUntilChanged()
+      )
+      .subscribe(() => {
+        // if (!this.dataSource) {
+        //   return;
+        // }
+        // this.dataSource.filter = this.filter.nativeElement.value;
+      });
+  }
+
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+}
diff --git a/src/app/pages/games/component/mini-game/mini-game.component.html b/src/app/pages/games/component/mini-game/mini-game.component.html
new file mode 100644
index 0000000..e85d53a
--- /dev/null
+++ b/src/app/pages/games/component/mini-game/mini-game.component.html
@@ -0,0 +1,121 @@
+<div id="orders" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
+
+      <!-- APP TITLE -->
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          shopping_basket
+        </mat-icon>
+        <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+      <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order">
+        </div>
+      </div>
+      <!-- / SEARCH -->
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+
+      <mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
+
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">{{order.id}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Reference Column -->
+        <ng-container matColumnDef="reference">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">{{order.reference}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="customer">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">
+              {{order.customer.firstName}}
+              {{order.customer.lastName}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="total">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              {{order.total | currency:'USD':'symbol'}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Payment Column -->
+        <ng-container matColumnDef="payment">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.payment.method}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{order.status[0].name}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Date Column -->
+        <ng-container matColumnDef="date">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.date}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
+
+        <mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
+          [routerLink]="'/apps/e-commerce/orders/'+order.id">
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
+      </mat-paginator>
+
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
\ No newline at end of file
diff --git a/src/app/pages/games/component/mini-game/mini-game.component.scss b/src/app/pages/games/component/mini-game/mini-game.component.scss
new file mode 100644
index 0000000..0df904e
--- /dev/null
+++ b/src/app/pages/games/component/mini-game/mini-game.component.scss
@@ -0,0 +1,122 @@
+@import "src/@fuse/scss/fuse";
+
+e-commerce-orders {
+
+    #orders {
+
+        .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;
+                }
+            }
+        }
+    }
+
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .orders-table {
+        flex: 1 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        .mat-header-row {
+            min-height: 64px;
+        }
+
+        .order {
+            position: relative;
+            cursor: pointer;
+            height: 84px;
+        }
+
+        .mat-cell {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .mat-column-id {
+            flex: 0 1 84px;
+        }
+
+        .mat-column-image {
+            flex: 0 1 84px;
+
+            .product-image {
+                width: 52px;
+                height: 52px;
+                border: 1px solid rgba(0, 0, 0, .12);
+            }
+        }
+
+        .mat-column-buttons {
+            flex: 0 1 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/games/component/mini-game/mini-game.component.spec.ts b/src/app/pages/games/component/mini-game/mini-game.component.spec.ts
new file mode 100644
index 0000000..491e82b
--- /dev/null
+++ b/src/app/pages/games/component/mini-game/mini-game.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MiniGameComponent } from './mini-game.component';
+
+describe('MiniGameComponent', () => {
+  let component: MiniGameComponent;
+  let fixture: ComponentFixture<MiniGameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MiniGameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MiniGameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/games/component/mini-game/mini-game.component.ts b/src/app/pages/games/component/mini-game/mini-game.component.ts
new file mode 100644
index 0000000..a93026e
--- /dev/null
+++ b/src/app/pages/games/component/mini-game/mini-game.component.ts
@@ -0,0 +1,57 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+@Component({
+  selector: 'app-mini-game',
+  templateUrl: './mini-game.component.html',
+  styleUrls: ['./mini-game.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
+})
+export class MiniGameComponent implements OnInit, OnDestroy {
+
+  displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
+
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    fromEvent(this.filter.nativeElement, 'keyup')
+      .pipe(
+        // takeUntil(this._unsubscribeAll),
+        // debounceTime(150),
+        // distinctUntilChanged()
+      )
+      .subscribe(() => {
+        // if (!this.dataSource) {
+        //   return;
+        // }
+        // this.dataSource.filter = this.filter.nativeElement.value;
+      });
+  }
+
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+}
diff --git a/src/app/pages/games/component/sport-mix/sport-mix.component.html b/src/app/pages/games/component/sport-mix/sport-mix.component.html
new file mode 100644
index 0000000..f38764f
--- /dev/null
+++ b/src/app/pages/games/component/sport-mix/sport-mix.component.html
@@ -0,0 +1,121 @@
+<div id="orders" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
+
+      <!-- APP TITLE -->
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          shopping_basket
+        </mat-icon>
+        <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+      <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order">
+        </div>
+      </div>
+      <!-- / SEARCH -->
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+
+      <mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
+
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">{{order.id}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Reference Column -->
+        <ng-container matColumnDef="reference">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">{{order.reference}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="customer">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">
+              {{order.customer.firstName}}
+              {{order.customer.lastName}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="total">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              {{order.total | currency:'USD':'symbol'}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Payment Column -->
+        <ng-container matColumnDef="payment">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.payment.method}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{order.status[0].name}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Date Column -->
+        <ng-container matColumnDef="date">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.date}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
+
+        <mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
+          [routerLink]="'/apps/e-commerce/orders/'+order.id">
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
+      </mat-paginator>
+
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/games/component/sport-mix/sport-mix.component.scss b/src/app/pages/games/component/sport-mix/sport-mix.component.scss
new file mode 100644
index 0000000..0df904e
--- /dev/null
+++ b/src/app/pages/games/component/sport-mix/sport-mix.component.scss
@@ -0,0 +1,122 @@
+@import "src/@fuse/scss/fuse";
+
+e-commerce-orders {
+
+    #orders {
+
+        .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;
+                }
+            }
+        }
+    }
+
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .orders-table {
+        flex: 1 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        .mat-header-row {
+            min-height: 64px;
+        }
+
+        .order {
+            position: relative;
+            cursor: pointer;
+            height: 84px;
+        }
+
+        .mat-cell {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .mat-column-id {
+            flex: 0 1 84px;
+        }
+
+        .mat-column-image {
+            flex: 0 1 84px;
+
+            .product-image {
+                width: 52px;
+                height: 52px;
+                border: 1px solid rgba(0, 0, 0, .12);
+            }
+        }
+
+        .mat-column-buttons {
+            flex: 0 1 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/games/component/sport-mix/sport-mix.component.spec.ts b/src/app/pages/games/component/sport-mix/sport-mix.component.spec.ts
new file mode 100644
index 0000000..2160010
--- /dev/null
+++ b/src/app/pages/games/component/sport-mix/sport-mix.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SportMixComponent } from './sport-mix.component';
+
+describe('SportMixComponent', () => {
+  let component: SportMixComponent;
+  let fixture: ComponentFixture<SportMixComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SportMixComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SportMixComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/games/component/sport-mix/sport-mix.component.ts b/src/app/pages/games/component/sport-mix/sport-mix.component.ts
new file mode 100644
index 0000000..31302bf
--- /dev/null
+++ b/src/app/pages/games/component/sport-mix/sport-mix.component.ts
@@ -0,0 +1,57 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+@Component({
+  selector: 'app-sport-mix',
+  templateUrl: './sport-mix.component.html',
+  styleUrls: ['./sport-mix.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
+})
+export class SportMixComponent implements OnInit, OnDestroy {
+
+  displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
+
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    fromEvent(this.filter.nativeElement, 'keyup')
+      .pipe(
+        // takeUntil(this._unsubscribeAll),
+        // debounceTime(150),
+        // distinctUntilChanged()
+      )
+      .subscribe(() => {
+        // if (!this.dataSource) {
+        //   return;
+        // }
+        // this.dataSource.filter = this.filter.nativeElement.value;
+      });
+  }
+
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+}
diff --git a/src/app/pages/games/component/sport-result/sport-result.component.html b/src/app/pages/games/component/sport-result/sport-result.component.html
new file mode 100644
index 0000000..e85d53a
--- /dev/null
+++ b/src/app/pages/games/component/sport-result/sport-result.component.html
@@ -0,0 +1,121 @@
+<div id="orders" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
+
+      <!-- APP TITLE -->
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          shopping_basket
+        </mat-icon>
+        <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+      <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order">
+        </div>
+      </div>
+      <!-- / SEARCH -->
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+
+      <mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
+
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">{{order.id}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Reference Column -->
+        <ng-container matColumnDef="reference">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">{{order.reference}}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="customer">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="text-truncate">
+              {{order.customer.firstName}}
+              {{order.customer.lastName}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="total">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              {{order.total | currency:'USD':'symbol'}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Payment Column -->
+        <ng-container matColumnDef="payment">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.payment.method}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{order.status[0].name}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Date Column -->
+        <ng-container matColumnDef="date">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{order.date}}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
+
+        <mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
+          [routerLink]="'/apps/e-commerce/orders/'+order.id">
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
+      </mat-paginator>
+
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
\ No newline at end of file
diff --git a/src/app/pages/games/component/sport-result/sport-result.component.scss b/src/app/pages/games/component/sport-result/sport-result.component.scss
new file mode 100644
index 0000000..0df904e
--- /dev/null
+++ b/src/app/pages/games/component/sport-result/sport-result.component.scss
@@ -0,0 +1,122 @@
+@import "src/@fuse/scss/fuse";
+
+e-commerce-orders {
+
+    #orders {
+
+        .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;
+                }
+            }
+        }
+    }
+
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .orders-table {
+        flex: 1 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        .mat-header-row {
+            min-height: 64px;
+        }
+
+        .order {
+            position: relative;
+            cursor: pointer;
+            height: 84px;
+        }
+
+        .mat-cell {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .mat-column-id {
+            flex: 0 1 84px;
+        }
+
+        .mat-column-image {
+            flex: 0 1 84px;
+
+            .product-image {
+                width: 52px;
+                height: 52px;
+                border: 1px solid rgba(0, 0, 0, .12);
+            }
+        }
+
+        .mat-column-buttons {
+            flex: 0 1 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/games/component/sport-result/sport-result.component.spec.ts b/src/app/pages/games/component/sport-result/sport-result.component.spec.ts
new file mode 100644
index 0000000..b8db036
--- /dev/null
+++ b/src/app/pages/games/component/sport-result/sport-result.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SportResultComponent } from './sport-result.component';
+
+describe('SportResultComponent', () => {
+  let component: SportResultComponent;
+  let fixture: ComponentFixture<SportResultComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SportResultComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SportResultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/games/component/sport-result/sport-result.component.ts b/src/app/pages/games/component/sport-result/sport-result.component.ts
new file mode 100644
index 0000000..2baee24
--- /dev/null
+++ b/src/app/pages/games/component/sport-result/sport-result.component.ts
@@ -0,0 +1,56 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+@Component({
+  selector: 'app-sport-result',
+  templateUrl: './sport-result.component.html',
+  styleUrls: ['./sport-result.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
+})
+export class SportResultComponent implements OnInit, OnDestroy {
+
+  displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
+
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    fromEvent(this.filter.nativeElement, 'keyup')
+      .pipe(
+        // takeUntil(this._unsubscribeAll),
+        // debounceTime(150),
+        // distinctUntilChanged()
+      )
+      .subscribe(() => {
+        // if (!this.dataSource) {
+        //   return;
+        // }
+        // this.dataSource.filter = this.filter.nativeElement.value;
+      });
+  }
+
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+}
diff --git a/src/app/pages/games/games-routing.module.ts b/src/app/pages/games/games-routing.module.ts
new file mode 100644
index 0000000..87a227c
--- /dev/null
+++ b/src/app/pages/games/games-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'management',
+    loadChildren: './manage/manage.module#ManageModule'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GamesRoutingModule { }
diff --git a/src/app/pages/games/games.module.ts b/src/app/pages/games/games.module.ts
new file mode 100644
index 0000000..0cf6b3d
--- /dev/null
+++ b/src/app/pages/games/games.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { GamesRoutingModule } from './games-routing.module';
+import { MiniGameSettingsComponent } from './component/mini-game-settings/mini-game-settings.component';
+import { ExcelRegistComponent } from './component/excel-regist/excel-regist.component';
+
+@NgModule({
+
+  imports: [
+    FuseSharedModule,
+    GamesRoutingModule
+  ],
+
+})
+export class GamesModule { }
diff --git a/src/app/pages/games/manage/manage-routing.module.ts b/src/app/pages/games/manage/manage-routing.module.ts
new file mode 100644
index 0000000..ce9f289
--- /dev/null
+++ b/src/app/pages/games/manage/manage-routing.module.ts
@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SportResultComponent } from '../component/sport-result/sport-result.component';
+import { SportMixComponent } from '../component/sport-mix/sport-mix.component';
+import { MiniGameComponent } from '../component/mini-game/mini-game.component';
+import { MiniGameSettingsComponent } from '../component/mini-game-settings/mini-game-settings.component';
+import { ExcelRegistComponent } from '../component/excel-regist/excel-regist.component';
+
+const routes: Routes = [
+
+  {
+    path: 'sport-result',
+    component: SportResultComponent,
+  },
+  {
+    path: 'sport-mix',
+    component: SportMixComponent
+  },
+  {
+    path: 'mini-game',
+    component: MiniGameComponent
+  },
+  {
+    path: 'mini-game-settings',
+    component: MiniGameSettingsComponent
+  },
+  {
+    path: 'excel-regist',
+    component: ExcelRegistComponent
+  },
+  // {
+  //   path: 'connect',
+  //   component: UserConnectComponent
+  // },
+  // {
+  //   path: 'regist',
+  //   component: UserRegistComponent
+  // },
+  // {
+  //   path: 'fees',
+  //   component: UserFeesComponent
+  // }
+  // ,
+  // {
+  //   path: 'attendance',
+  //   component: UserAttendanceComponent
+  // }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ManageRoutingModule { }
diff --git a/src/app/pages/games/manage/manage.module.ts b/src/app/pages/games/manage/manage.module.ts
new file mode 100644
index 0000000..49ec70f
--- /dev/null
+++ b/src/app/pages/games/manage/manage.module.ts
@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatRippleModule } from '@angular/material/core';
+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 { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
+
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { ManageRoutingModule } from './manage-routing.module';
+import { COMPONENTS } from '../component';
+
+import { MatStepperModule } from '@angular/material/stepper';
+
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatChipsModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSortModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatTabsModule,
+    MatStepperModule,
+    MatToolbarModule,
+    MatTooltipModule,
+
+    AngularCalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
+
+    FuseSharedModule,
+    ManageRoutingModule
+
+  ],
+  declarations: [...COMPONENTS],
+})
+export class ManageModule { }
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index d959c96..40c1a60 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -5,6 +5,10 @@ const routes: Routes = [
   {
     path: 'users',
     loadChildren: './users/users.module#UsersModule'
+  },
+  {
+    path: 'games',
+    loadChildren: './games/games.module#GamesModule'
   }
 ];
 
diff --git a/src/app/pages/users/user/user.module.ts b/src/app/pages/users/user/user.module.ts
index eae7b82..18eaef6 100644
--- a/src/app/pages/users/user/user.module.ts
+++ b/src/app/pages/users/user/user.module.ts
@@ -22,10 +22,7 @@ import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-ca
 import { FuseSharedModule } from 'src/@fuse/shared.module';
 import { UserRoutingModule } from './user-routing.module';
 import { COMPONENTS } from './component';
-import { UserRegistComponent } from './component/user-regist/user-regist.component';
 import { MatStepperModule } from '@angular/material/stepper';
-import { UserFeesComponent } from './component/user-fees/user-fees.component';
-import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
 
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
@@ -59,7 +56,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
     UserRoutingModule
   ],
-  declarations: [...COMPONENTS, UserRegistComponent, UserFeesComponent, UserAttendanceComponent],
+  declarations: [...COMPONENTS],
 
 })
 export class UserModule { }