diff --git a/src/app/pages/infos/info/component/service-center.component.html b/src/app/pages/infos/info/component/service-center.component.html
index af63e6f..e48d551 100644
--- a/src/app/pages/infos/info/component/service-center.component.html
+++ b/src/app/pages/infos/info/component/service-center.component.html
@@ -1 +1,167 @@
-<p>service-center works!</p>
+<div id="service-center" 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' } }"
+          >고객센터 관리</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="service-center"
+        #table
+        [dataSource]="dataSource"
+        matSort
+        [@animateStagger]="{ value: '50' }"
+        fusePerfectScrollbar
+      >
+        <ng-container matColumnDef="idx">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >번호</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter; let i = index">
+            <p class="text-truncate">{{ i }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- ID/Nickname Column -->
+        <ng-container matColumnDef="title">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >제목</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Phone Column -->
+        <ng-container matColumnDef="contents">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >내용</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
+            <p class="text-truncate">010-3004-2001</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="register">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+            >작성자</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+              1,000,000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Point Column -->
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >작성일</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              <!-- {{ user.point }} -->
+              5000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Level Column -->
+        <ng-container matColumnDef="contactStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >문의상태</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
+            <p class="text-truncate">
+              <!-- {{ user.level }} -->
+              브론즈
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="removeBtn">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >삭제버튼</mat-header-cell
+          >
+          <mat-cell *matCellDef="let user">
+            <p class="text-truncate ">
+              <button mat-raised-button class="mat-accent">
+                삭제
+              </button>
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></mat-header-row>
+
+        <mat-row
+          *matRowDef="let user; columns: displayedColumns"
+          class="user"
+          matRipple
+          [routerLink]="'/pages/users/management/list/' + user.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/infos/info/component/service-center.component.scss b/src/app/pages/infos/info/component/service-center.component.scss
index e69de29..e65611c 100644
--- a/src/app/pages/infos/info/component/service-center.component.scss
+++ b/src/app/pages/infos/info/component/service-center.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-service-center {
+  #service-center {
+    .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%;
+  }
+
+  .service-center-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      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, 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/infos/info/component/service-center.component.ts b/src/app/pages/infos/info/component/service-center.component.ts
index 8976900..1766de4 100644
--- a/src/app/pages/infos/info/component/service-center.component.ts
+++ b/src/app/pages/infos/info/component/service-center.component.ts
@@ -1,12 +1,86 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+
+import { ServiceCenterService } from 'src/modules/infos/service-center/service/service-center.service';
+import { ServiceCenterDataSource } from './service-center.data-source';
 
 @Component({
   selector: 'app-service-center',
   templateUrl: './service-center.component.html',
-  styleUrls: ['./service-center.component.scss']
+  styleUrls: ['./service-center.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations
 })
-export class ServiceCenterComponent implements OnInit {
-  constructor() {}
+export class ServiceCenterComponent
+  implements OnInit, OnDestroy, AfterViewInit {
+  dataSource: ServiceCenterDataSource | null;
 
-  ngOnInit() {}
+  displayedColumns = [
+    'idx',
+    'title',
+    'contents',
+    'register',
+    'createdAt',
+    'contactStatus'
+  ];
+  private unsubscribeAll: Subject<any>;
+
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  constructor(
+    private fb: FormBuilder,
+    private serviceCenterService: ServiceCenterService
+  ) {
+    // Set the private defaults
+    this.unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Subscribe to update order on changes
+    this.dataSource = new ServiceCenterDataSource(
+      this.serviceCenterService,
+      this.paginator,
+      this.sort
+    );
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this.unsubscribeAll.next();
+    this.unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }
diff --git a/src/app/pages/infos/info/component/service-center.data-source.ts b/src/app/pages/infos/info/component/service-center.data-source.ts
new file mode 100644
index 0000000..9e4541d
--- /dev/null
+++ b/src/app/pages/infos/info/component/service-center.data-source.ts
@@ -0,0 +1,64 @@
+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 { ServiceCenter } from 'src/modules/infos/service-center/model/service-center.model';
+import { ServiceCenterService } from 'src/modules/infos/service-center/service/service-center.service';
+
+export class ServiceCenterDataSource extends DataSource<ServiceCenter> {
+  private filterSubject = new BehaviorSubject('');
+
+  constructor(
+    private serviceCenterService: ServiceCenterService,
+    private paginator: MatPaginator,
+    private sort: MatSort
+  ) {
+    super();
+  }
+
+  // Filter
+  get filter(): string {
+    return this.filterSubject.value;
+  }
+
+  set filter(filter: string) {
+    this.filterSubject.next(filter);
+  }
+
+  connect(
+    collectionViewer: CollectionViewer
+  ): Observable<ServiceCenter[] | readonly ServiceCenter[]> {
+    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.userService.getAllUsers().pipe(
+    //       map(page => {
+    //         return page.content;
+    //       })
+    //     );
+    //   })
+    // );
+
+    return null;
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.filterSubject.complete();
+  }
+}
diff --git a/src/modules/infos/infos.module.ts b/src/modules/infos/infos.module.ts
index 18fb69b..efa26f8 100644
--- a/src/modules/infos/infos.module.ts
+++ b/src/modules/infos/infos.module.ts
@@ -1,6 +1,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { POPUP_SET_SERVICES } from './popup-set/service';
+import { SERVICE_CENTER_SERVICES } from './service-center/service';
 
 @NgModule({
   imports: [],
@@ -17,7 +18,7 @@ export class InfosModule {
   public static forRoot(): ModuleWithProviders<InfosRootModule> {
     return {
       ngModule: InfosRootModule,
-      providers: [POPUP_SET_SERVICES]
+      providers: [POPUP_SET_SERVICES, SERVICE_CENTER_SERVICES]
     };
   }
 }
diff --git a/src/modules/infos/service-center/model/service-center.model.ts b/src/modules/infos/service-center/model/service-center.model.ts
new file mode 100644
index 0000000..666b849
--- /dev/null
+++ b/src/modules/infos/service-center/model/service-center.model.ts
@@ -0,0 +1,13 @@
+import { DateAudit } from 'src/modules/common/data/model/audit';
+
+export interface ServiceCenter extends DateAudit {
+  id?: number;
+  thumbNail?: string;
+  title?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  imageX?: number;
+  imageY?: number;
+  openStatus?: boolean;
+  popupEffect?: number;
+}
diff --git a/src/modules/infos/service-center/service/index.ts b/src/modules/infos/service-center/service/index.ts
new file mode 100644
index 0000000..7796c45
--- /dev/null
+++ b/src/modules/infos/service-center/service/index.ts
@@ -0,0 +1,3 @@
+import { ServiceCenterService } from './service-center.service';
+
+export const SERVICE_CENTER_SERVICES = [ServiceCenterService];
diff --git a/src/modules/infos/service-center/service/service-center.service.ts b/src/modules/infos/service-center/service/service-center.service.ts
new file mode 100644
index 0000000..7025f97
--- /dev/null
+++ b/src/modules/infos/service-center/service/service-center.service.ts
@@ -0,0 +1,26 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import { ServiceCenter } from '../model/service-center.model';
+import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
+import { Page } from 'src/modules/common/data/model/page';
+import { FormArray } from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServiceCenterService {
+  constructor(
+    @Inject(API_BASE_URL) private apiBaseUrl: string,
+    private httpClient: HttpClient
+  ) {}
+
+  // public getBankInfos(): Observable<Page<BankInfo>> {
+  //   return this.httpClient.get<Page<BankInfo>>(
+  //     `${this.apiBaseUrl}/bank_info`,
+  //     {}
+  //   );
+  // }
+}