diff --git a/src/app/mock-api/apps/settings/basic/api.ts b/src/app/mock-api/apps/settings/basic/api.ts
index db372d9..7c00a67 100644
--- a/src/app/mock-api/apps/settings/basic/api.ts
+++ b/src/app/mock-api/apps/settings/basic/api.ts
@@ -7,7 +7,7 @@ import { basicSetting as basicSettingData } from './data';
   providedIn: 'root',
 })
 export class BasicSettingMockApi {
-  private _basicSetting: any[] = basicSettingData;
+  private _basicSetting: any = basicSettingData;
 
   /**
    * Constructor
diff --git a/src/app/mock-api/apps/settings/basic/data.ts b/src/app/mock-api/apps/settings/basic/data.ts
index 7ab80d1..ae3bccb 100644
--- a/src/app/mock-api/apps/settings/basic/data.ts
+++ b/src/app/mock-api/apps/settings/basic/data.ts
@@ -2,131 +2,101 @@
 
 import { SiteStatusType } from 'app/modules/admin/settings/basic/types/site-status.type';
 
-export const basicSetting = [
-  {
-    siteStatus: SiteStatusType.joinAvailable,
-    memo: '메모 테스트',
-    earnSettings: [
-      {
-        lv1: [
-          {
-            earnFirst: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-          {
-            earnEvery: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-        ],
-      },
-      {
-        lv2: [
-          {
-            earnFirst: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-          {
-            earnEvery: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-        ],
-      },
-      {
-        lv3: [
-          {
-            earnFirst: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-          {
-            earnEvery: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-        ],
-      },
-      {
-        lv4: [
-          {
-            earnFirst: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-          {
-            earnEvery: {
-              rate: '15',
-              isUse: true,
-              maxEarnMoney: '10000',
-            },
-          },
-        ],
-      },
-    ],
-    gameSetting: [
-      {
-        name: '스포츠게임 가져오기',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '다른서버에서 경기가져오고 있음(5분)',
-      },
-      {
-        name: '스포츠게임 결과 가져오기',
-        isUse: false,
-        memo: '슬롯 사이트 메모',
-        description: '다른서버에서 경기결과 가져오고 있음(5분)',
-      },
-      {
-        name: '실시간게임 가져오기',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '하루한번 21시50분에 가져옴',
-      },
-      {
-        name: '실시간게임 결과처리/정산',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '5분 단위로 체크(4분35초, 40초, 54초, 50초, 55초 정각)',
-      },
-      {
-        name: '스포츠실시간 포인트 정산',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '10초마다 완료된 경기 포인트 정산',
-      },
-      {
-        name: '카지노 로그 가져오기',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '20초마다 마지막 로그 가져옴',
-      },
-      {
-        name: '카지노 포인트 정산',
-        isUse: true,
-        memo: '슬롯 사이트 메모',
-        description: '5분마다 정산내용 DB저장',
-      },
-    ],
-  },
-  // siteStatus?: SiteStatusType;
-  // memo?: string;
-  // earnSetting?: any;
-  // gameSetting?: any;
-];
+export const basicSetting = {
+  infos: [
+    {
+      name: '사이트 ON/OFF 설정',
+      content: SiteStatusType.joinAvailable,
+    },
+    {
+      name: '메모',
+      content: '메모 테스트',
+    },
+  ],
+  earnSettings: [
+    {
+      level: 'LV1',
+      firstRate: '15',
+      firstIsUse: true,
+      firstMaxEarnMoney: '10000',
+      everyRate: '15',
+      everyIsUse: true,
+      everyMaxEarnMoney: '10000',
+    },
+    {
+      level: 'LV2',
+      firstRate: '15',
+      firstIsUse: true,
+      firstMaxEarnMoney: '10000',
+      everyRate: '15',
+      everyIsUse: true,
+      everyMaxEarnMoney: '10000',
+    },
+    {
+      level: 'LV3',
+      firstRate: '15',
+      firstIsUse: true,
+      firstMaxEarnMoney: '10000',
+      everyRate: '15',
+      everyIsUse: true,
+      everyMaxEarnMoney: '10000',
+    },
+    {
+      level: 'LV4',
+      firstRate: '15',
+      firstIsUse: true,
+      firstMaxEarnMoney: '10000',
+      everyRate: '15',
+      everyIsUse: true,
+      everyMaxEarnMoney: '10000',
+    },
+  ],
+  gameSetting: [
+    {
+      name: '스포츠게임 가져오기',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '다른서버에서 경기가져오고 있음(5분)',
+    },
+    {
+      name: '스포츠게임 결과 가져오기',
+      isUse: false,
+      memo: '슬롯 사이트 메모',
+      description: '다른서버에서 경기결과 가져오고 있음(5분)',
+    },
+    {
+      name: '실시간게임 가져오기',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '하루한번 21시50분에 가져옴',
+    },
+    {
+      name: '실시간게임 결과처리/정산',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '5분 단위로 체크(4분35초, 40초, 54초, 50초, 55초 정각)',
+    },
+    {
+      name: '스포츠실시간 포인트 정산',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '10초마다 완료된 경기 포인트 정산',
+    },
+    {
+      name: '카지노 로그 가져오기',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '20초마다 마지막 로그 가져옴',
+    },
+    {
+      name: '카지노 포인트 정산',
+      isUse: true,
+      memo: '슬롯 사이트 메모',
+      description: '5분마다 정산내용 DB저장',
+    },
+  ],
+};
+// siteStatus?: SiteStatusType;
+// memo?: string;
+// earnSetting?: any;
+// gameSetting?: any;
diff --git a/src/app/modules/admin/settings/basic/basic.module.ts b/src/app/modules/admin/settings/basic/basic.module.ts
index 69fb13c..21a6bf0 100644
--- a/src/app/modules/admin/settings/basic/basic.module.ts
+++ b/src/app/modules/admin/settings/basic/basic.module.ts
@@ -10,6 +10,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRippleModule } from '@angular/material/core';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTableModule } from '@angular/material/table';
 import { MatMenuModule } from '@angular/material/menu';
@@ -43,6 +44,7 @@ import { basicSettingRoutes } from './basic.routing';
     MatTableModule,
     MatMenuModule,
     MatDividerModule,
+    MatSlideToggleModule,
   ],
 })
 export class BasicModule {}
diff --git a/src/app/modules/admin/settings/basic/components/list.component.html b/src/app/modules/admin/settings/basic/components/list.component.html
index 8430f08..f41a6bd 100644
--- a/src/app/modules/admin/settings/basic/components/list.component.html
+++ b/src/app/modules/admin/settings/basic/components/list.component.html
@@ -13,14 +13,14 @@
             <table
               class="min-w-240 overflow-y-visible"
               mat-table
-              [dataSource]="currentUserDataSource"
+              [dataSource]="basicInfoSettingDataSource"
             >
               <!-- Total -->
               <ng-container matColumnDef="info">
                 <th mat-header-cell *matHeaderCellDef>정보</th>
-                <td mat-cell *matCellDef="let user">
+                <td mat-cell *matCellDef="let info">
                   <span class="font-medium text-right">
-                    {{ user.highRank }}
+                    {{ info.name }}
                   </span>
                 </td>
               </ng-container>
@@ -28,16 +28,16 @@
               <!-- Expenses amount -->
               <ng-container matColumnDef="description">
                 <th mat-header-cell *matHeaderCellDef>내용</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.rank }}
-                </td>
+                <td mat-cell *matCellDef="let info">{{ info.content }}</td>
               </ng-container>
 
               <!-- Expenses amount -->
               <ng-container matColumnDef="updateBtn">
                 <th mat-header-cell *matHeaderCellDef>수정</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.rank }}
+                <td mat-cell *matCellDef="let basicSetting">
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">수정</button>
+                  </div>
                 </td>
               </ng-container>
 
@@ -63,14 +63,14 @@
             <table
               class="min-w-240 overflow-y-visible"
               mat-table
-              [dataSource]="currentUserDataSource"
+              [dataSource]="basicEarnSettingDataSource"
             >
               <!-- Type -->
               <ng-container matColumnDef="level" sticky>
                 <th mat-header-cell *matHeaderCellDef>레벨</th>
-                <td mat-cell *matCellDef="let user">
+                <td mat-cell *matCellDef="let earn">
                   <span class="flex items-center">
-                    {{ user.level }}
+                    {{ earn.level }}
                   </span>
                 </td>
               </ng-container>
@@ -78,9 +78,9 @@
               <!-- Total -->
               <ng-container matColumnDef="firstRate">
                 <th mat-header-cell *matHeaderCellDef>요율</th>
-                <td mat-cell *matCellDef="let user">
+                <td mat-cell *matCellDef="let earn">
                   <span class="font-medium text-right">
-                    {{ user.highRank }}
+                    {{ earn.firstRate }}
                   </span>
                 </td>
               </ng-container>
@@ -88,39 +88,47 @@
               <!-- Expenses amount -->
               <ng-container matColumnDef="firstIsUse">
                 <th mat-header-cell *matHeaderCellDef>사용여부</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.rank }}
+                <td mat-cell *matCellDef="let earn">
+                  <div class="sm:col-span-4 flex items-center justify-between">
+                    <mat-slide-toggle
+                      class="ml-4"
+                      [color]="'primary'"
+                      [formControlName]="'twoStep'"
+                      #twoStepToggle
+                    >
+                    </mat-slide-toggle>
+                  </div>
                 </td>
               </ng-container>
 
               <!-- Expenses percentage -->
               <ng-container matColumnDef="firstMaxMoney">
                 <th mat-header-cell *matHeaderCellDef>최대금액</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.level }}
+                <td mat-cell *matCellDef="let earn">
+                  {{ earn.firstMaxEarnMoney }}
                 </td>
               </ng-container>
 
               <!-- Remaining amount -->
               <ng-container matColumnDef="everyRate">
                 <th mat-header-cell *matHeaderCellDef>요율</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.signinId }}
+                <td mat-cell *matCellDef="let earn">
+                  {{ earn.everyRate }}
                 </td>
               </ng-container>
 
               <!-- Remaining percentage -->
               <ng-container matColumnDef="everyIsUse">
                 <th mat-header-cell *matHeaderCellDef>사용여부</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.nickname }}
+                <td mat-cell *matCellDef="let earn">
+                  {{ earn.everyIsUse }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="everyMaxMoney">
                 <th mat-header-cell *matHeaderCellDef>최대금액</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.currentLocation }}
+                <td mat-cell *matCellDef="let earn">
+                  {{ earn.everyMaxEarnMoney }}
                 </td>
               </ng-container>
 
@@ -155,15 +163,15 @@
             <table
               class="min-w-240 overflow-y-visible"
               mat-table
-              [dataSource]="currentUserDataSource"
+              [dataSource]="basicGameSettingDataSource"
             >
               <!-- Type -->
               <ng-container matColumnDef="title" sticky>
                 <th mat-header-cell *matHeaderCellDef>제목</th>
-                <td mat-cell *matCellDef="let user">
+                <td mat-cell *matCellDef="let game">
                   <span class="flex items-center">
                     <span class="w-2 h-2 rounded-full"></span>
-                    <span class="ml-3 leading-4">{{ user.signinId }}</span>
+                    <span class="ml-3 leading-4">{{ game.name }}</span>
                   </span>
                 </td>
               </ng-container>
@@ -171,34 +179,42 @@
               <!-- Total -->
               <ng-container matColumnDef="isUse">
                 <th mat-header-cell *matHeaderCellDef>사용여부</th>
-                <td mat-cell *matCellDef="let user">
-                  <span class="font-medium text-right">
-                    {{ user.highRank }}
-                  </span>
+                <td mat-cell *matCellDef="let game">
+                  <div class="sm:col-span-4 flex items-center justify-between">
+                    <mat-slide-toggle
+                      class="ml-4"
+                      [color]="'primary'"
+                      [formControlName]="'twoStep'"
+                      #twoStepToggle
+                    >
+                    </mat-slide-toggle>
+                  </div>
                 </td>
               </ng-container>
 
               <!-- Expenses amount -->
               <ng-container matColumnDef="memo">
                 <th mat-header-cell *matHeaderCellDef>메모</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.rank }}
+                <td mat-cell *matCellDef="let game">
+                  {{ game.memo }}
                 </td>
               </ng-container>
 
               <!-- Expenses percentage -->
               <ng-container matColumnDef="description">
                 <th mat-header-cell *matHeaderCellDef>내용</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.level }}
+                <td mat-cell *matCellDef="let game">
+                  {{ game.description }}
                 </td>
               </ng-container>
 
               <!-- Remaining amount -->
               <ng-container matColumnDef="updateBtn">
                 <th mat-header-cell *matHeaderCellDef>수정</th>
-                <td mat-cell *matCellDef="let user">
-                  {{ user.signinId }}
+                <td mat-cell *matCellDef="let game">
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">수정</button>
+                  </div>
                 </td>
               </ng-container>
 
diff --git a/src/app/modules/admin/settings/basic/components/list.component.ts b/src/app/modules/admin/settings/basic/components/list.component.ts
index ee36dfc..612577b 100644
--- a/src/app/modules/admin/settings/basic/components/list.component.ts
+++ b/src/app/modules/admin/settings/basic/components/list.component.ts
@@ -89,7 +89,12 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     'updateBtn',
   ];
 
-  currentUserDataSource: MatTableDataSource<any> = new MatTableDataSource();
+  basicInfoSettingDataSource: MatTableDataSource<any> =
+    new MatTableDataSource();
+  basicEarnSettingDataSource: MatTableDataSource<any> =
+    new MatTableDataSource();
+  basicGameSettingDataSource: MatTableDataSource<any> =
+    new MatTableDataSource();
 
   basicSetting$!: Observable<BasicSetting | undefined>;
 
@@ -115,6 +120,17 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
+    // Get the products
+    this._basicService.basicSetting$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((basicSetting: any | undefined) => {
+        this.basicInfoSettingDataSource = basicSetting.infos;
+        this.basicEarnSettingDataSource = basicSetting.earnSettings;
+        this.basicGameSettingDataSource = basicSetting.gameSetting;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+
     // Get the products
     this.basicSetting$ = this._basicService.basicSetting$;
   }