diff --git a/src/app/pages/specials/special/component/check-notice.component.html b/src/app/pages/specials/special/component/check-notice.component.html
index 4968357..5170fef 100644
--- a/src/app/pages/specials/special/component/check-notice.component.html
+++ b/src/app/pages/specials/special/component/check-notice.component.html
@@ -1 +1,100 @@
-<p>check-notice works!</p>
+<div id="check-notice" 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="row"
+      fxLayoutAlign="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <div
+          fxLayout="column"
+          fxLayoutAlign="start start"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+        >
+          <div class="h2">
+            점검공지 관리
+          </div>
+
+          <div class="subtitle secondary-text">
+            <span>점검공지 메세지 설정</span>
+          </div>
+        </div>
+      </div>
+      <!-- / APP TITLE -->
+      <button
+        mat-raised-button
+        class="save-product-button"
+        (click)="saveCheckNotice()"
+      >
+        <span>SAVE</span>
+      </button>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <!-- CONTENT -->
+      <div class="content">
+        <form
+          name="noticeCheckForm"
+          [formGroup]="noticeCheckForm"
+          class="check-notice w-100-p"
+          fxLayout="column"
+          fxFlex
+        >
+          <mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
+            <mat-tab label="오픈 메세지 설정">
+              <div class="tab-content p-24" fusePerfectScrollbar>
+                <mat-form-field
+                  appearance="outline"
+                  floatLabel="always"
+                  class="w-100-p"
+                >
+                  <mat-label>오픈 메세지 입력</mat-label>
+                  <textarea
+                    matInput
+                    placeholder="check-notice Description"
+                    name="description"
+                    formControlName="description"
+                    rows="25"
+                  >
+                  </textarea>
+                </mat-form-field>
+              </div>
+            </mat-tab>
+
+            <mat-tab label="점검 메세지 설정">
+              <div class="tab-content p-24" fusePerfectScrollbar>
+                <mat-form-field
+                  appearance="outline"
+                  floatLabel="always"
+                  class="w-100-p"
+                >
+                  <mat-label>점검 메세지 입력</mat-label>
+                  <textarea
+                    matInput
+                    placeholder="check-notice Description"
+                    name="description"
+                    formControlName="description"
+                    rows="25"
+                  >
+                  </textarea>
+                </mat-form-field>
+              </div>
+            </mat-tab>
+          </mat-tab-group>
+        </form>
+      </div>
+      <!-- / CONTENT -->
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/specials/special/component/check-notice.component.scss b/src/app/pages/specials/special/component/check-notice.component.scss
index e69de29..c5073a1 100644
--- a/src/app/pages/specials/special/component/check-notice.component.scss
+++ b/src/app/pages/specials/special/component/check-notice.component.scss
@@ -0,0 +1,62 @@
+#app-check-notice {
+  .header {
+    .check-notice-image {
+      overflow: hidden;
+      width: 56px;
+      min-width: 56px;
+      max-width: 56px;
+      height: 56px;
+      min-height: 56px;
+      max-height: 56px;
+      border-radius: 4px;
+
+      img {
+        height: 100%;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    .subtitle {
+      margin: 6px 0 0 0;
+    }
+  }
+
+  .content {
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+      flex: 1 1 auto;
+      max-width: 100%;
+    }
+
+    .mat-tab-body-content {
+      display: flex;
+    }
+
+    .mat-tab-label {
+      height: 64px;
+    }
+
+    .check-notice-image {
+      overflow: hidden;
+      width: 128px;
+      height: 128px;
+      margin-right: 16px;
+      margin-bottom: 16px;
+      border-radius: 4px;
+
+      img {
+        height: 100%;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    // Temporary prefix alignment fix
+    .mat-form-field-appearance-outline .mat-form-field-prefix,
+    .mat-form-field-appearance-outline .mat-form-field-suffix {
+      top: 0;
+    }
+  }
+}
diff --git a/src/app/pages/specials/special/component/check-notice.component.ts b/src/app/pages/specials/special/component/check-notice.component.ts
index 9da7026..25c87ab 100644
--- a/src/app/pages/specials/special/component/check-notice.component.ts
+++ b/src/app/pages/specials/special/component/check-notice.component.ts
@@ -1,12 +1,70 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewEncapsulation,
+  AfterViewInit,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+import { MatTabChangeEvent } from '@angular/material';
+import { fuseAnimations } from 'src/@fuse/animations';
+
+import { Subject } from 'rxjs';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-check-notice',
   templateUrl: './check-notice.component.html',
-  styleUrls: ['./check-notice.component.scss']
+  styleUrls: ['./check-notice.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations
 })
-export class CheckNoticeComponent implements OnInit {
-  constructor() {}
+export class CheckNoticeComponent implements OnInit, OnDestroy, AfterViewInit {
+  noticeCheckForm: FormGroup;
+  idx: number;
 
-  ngOnInit() {}
+  @ViewChild('tabGroup', { static: true }) tabGroup;
+
+  // Private
+  private unSubScribeAll: Subject<any>;
+
+  constructor(private fb: FormBuilder) {
+    // Set the private defaults
+    this.unSubScribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    this.noticeCheckForm = this.fb.group({
+      description: ''
+    });
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this.unSubScribeAll.next();
+    this.unSubScribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {
+    console.log(this.tabGroup.selectedIndex);
+  }
+  /**
+   * Save product
+   */
+  saveCheckNotice(): void {
+    const data = this.noticeCheckForm.getRawValue();
+    // console.log(this.selectedIndex);
+    console.log(data);
+    console.log(this.idx);
+  }
+
+  tabChanged(tabChangeEvent: MatTabChangeEvent): void {
+    console.log('tabChangeEvent => ', tabChangeEvent);
+    console.log('index => ', tabChangeEvent.index);
+    this.idx = tabChangeEvent.index;
+  }
 }
diff --git a/src/app/pages/specials/special/special.module.ts b/src/app/pages/specials/special/special.module.ts
index 287841a..52242e8 100644
--- a/src/app/pages/specials/special/special.module.ts
+++ b/src/app/pages/specials/special/special.module.ts
@@ -12,6 +12,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
+
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';