diff --git a/src/app/modules/beteran/compose/compose.module.ts b/src/app/modules/beteran/compose/compose.module.ts
index 701bf13..ceef0b5 100644
--- a/src/app/modules/beteran/compose/compose.module.ts
+++ b/src/app/modules/beteran/compose/compose.module.ts
@@ -8,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
@@ -28,6 +29,7 @@ import { COMPOSE } from './compose';
     MatDialogModule,
     MatSelectModule,
     MatButtonToggleModule,
+    MatExpansionModule,
 
     FuseCardModule,
     SharedModule,
diff --git a/src/app/modules/beteran/compose/compose/notice-compose.component.html b/src/app/modules/beteran/compose/compose/notice-compose.component.html
index bea4966..06bb438 100644
--- a/src/app/modules/beteran/compose/compose/notice-compose.component.html
+++ b/src/app/modules/beteran/compose/compose/notice-compose.component.html
@@ -3,7 +3,7 @@
   <div
     class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
   >
-    <div class="text-lg font-medium">Notice</div>
+    <div class="text-lg font-medium">공지사항</div>
     <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
       <mat-icon
         class="text-current"
@@ -11,113 +11,52 @@
       ></mat-icon>
     </button>
   </div>
-
-  <!-- Compose form -->
   <form
     class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
     [formGroup]="composeForm"
   >
-    <!-- To -->
-    <mat-form-field>
-      <mat-label>To</mat-label>
-      <input matInput [formControlName]="'to'" />
-      <div class="copy-fields-toggles" matSuffix>
-        <span
-          class="text-sm font-medium cursor-pointer select-none hover:underline"
-          *ngIf="!copyFields.cc"
-          (click)="showCopyField('cc')"
-        >
-          Cc
-        </span>
-        <span
-          class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
-          *ngIf="!copyFields.bcc"
-          (click)="showCopyField('bcc')"
-        >
-          Bcc
-        </span>
+    <ng-container *ngIf="notice">
+      <ng-container *ngIf="notice.length > 0; else noNotice">
+        <div class="grid">
+          <mat-accordion>
+            <div
+              class="notice-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
+              style="font-size: x-small"
+            >
+              <span>번호</span>
+              <span>내용</span>
+              <span>날짜</span>
+            </div>
+            <!-- <ng-container *ngIf="notice"> -->
+            <!-- <ng-container *ngFor="let info of notice; trackBy: __trackByFn"> -->
+            <mat-expansion-panel *ngFor="let info of notice">
+              <mat-expansion-panel-header>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span>{{ info.idx }}</span
+                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>{{ info.title }}</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>{{ info.applicationDate }}</span>
+              </mat-expansion-panel-header>
+              <div>
+                {{ info.contents }}
+              </div>
+            </mat-expansion-panel>
+            <!-- </ng-container> -->
+            <!-- </ng-container> -->
+          </mat-accordion>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <ng-template #noNotice>
+      <div
+        class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+      >
+        There are no data!
       </div>
-    </mat-form-field>
-
-    <!-- Cc -->
-    <mat-form-field *ngIf="copyFields.cc">
-      <mat-label>Cc</mat-label>
-      <input matInput [formControlName]="'cc'" />
-    </mat-form-field>
-
-    <!-- Bcc -->
-    <mat-form-field *ngIf="copyFields.bcc">
-      <mat-label>Bcc</mat-label>
-      <input matInput [formControlName]="'bcc'" />
-    </mat-form-field>
-
-    <!-- Subject -->
-    <mat-form-field>
-      <mat-label>Subject</mat-label>
-      <input matInput [formControlName]="'subject'" />
-    </mat-form-field>
-
-    <!-- Body -->
-    <!-- <quill-editor
-      class="mt-2"
-      [formControlName]="'body'"
-      [modules]="quillModules"
-    ></quill-editor> -->
-
-    <!-- Actions -->
-    <div
-      class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
-    >
-      <div class="-ml-2">
-        <!-- Attach file -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:paper-clip'"
-          ></mat-icon>
-        </button>
-        <!-- Insert link -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:link'"
-          ></mat-icon>
-        </button>
-        <!-- Insert emoji -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:emoji-happy'"
-          ></mat-icon>
-        </button>
-        <!-- Insert image -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:photograph'"
-          ></mat-icon>
-        </button>
-      </div>
-
-      <div class="flex items-center mt-4 sm:mt-0">
-        <!-- Discard -->
-        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
-          Discard
-        </button>
-        <!-- Save as draft -->
-        <button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
-          <span>Save as draft</span>
-        </button>
-        <!-- Send -->
-        <button
-          class="order-first sm:order-last"
-          mat-flat-button
-          [color]="'primary'"
-          (click)="send()"
-        >
-          Send
-        </button>
-      </div>
-    </div>
+    </ng-template>
   </form>
 </div>
diff --git a/src/app/modules/beteran/compose/compose/notice-compose.component.ts b/src/app/modules/beteran/compose/compose/notice-compose.component.ts
index 265a577..8825175 100644
--- a/src/app/modules/beteran/compose/compose/notice-compose.component.ts
+++ b/src/app/modules/beteran/compose/compose/notice-compose.component.ts
@@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'notice-compose',
   templateUrl: './notice-compose.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .notice-grid {
+        /*                      번호   내용  날짜   */
+        grid-template-columns: 100px 250px 100px;
+      }
+    `,
+  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class NoticeComposeComponent implements OnInit {
@@ -29,6 +38,21 @@ export class NoticeComposeComponent implements OnInit {
     private _formBuilder: FormBuilder
   ) {}
 
+  notice = [
+    {
+      idx: '1',
+      title: '계좌등록안내',
+      contents: '안녕하세요. 운영진입니다dkfjkjdfkjdkfjfkjdkjkdfjdkjk',
+      applicationDate: '2022.08.23',
+    },
+    {
+      idx: '2',
+      title: '오토프로그램 이용안내',
+      contents: '안녕하세요. 운영진입니다',
+      applicationDate: '2022.08.23',
+    },
+  ];
+
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
   // -----------------------------------------------------------------------------------------------------
@@ -91,4 +115,14 @@ export class NoticeComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
 }