diff --git a/package.json b/package.json
index 6ea5254..f55c405 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port 4400",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html
index d3dd758..47ea89c 100644
--- a/src/app/layout/layouts/horizontal/modern/modern.component.html
+++ b/src/app/layout/layouts/horizontal/modern/modern.component.html
@@ -84,8 +84,12 @@
   <div
     class="relative flex flex-0 items-center w-full h-14 sm:h-20 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"
   >
+    <!-- <span class="font-medium text-secondary"
+      >Fuse2 &copy; {{ currentYear }}</span
+    > -->
     <span class="font-medium text-secondary"
-      >Fuse &copy; {{ currentYear }}</span
+      ><img src="assets/images/beteran/Nova_logo(1).png" style="width: 200px" />
+      <p class="mb-0 mt-3">@ COPYRIGHT Nova 2022 ALL RIGHTS RESERVED.</p></span
     >
   </div>
 </div>
diff --git a/src/app/modules/user/main/main.component.html b/src/app/modules/user/main/main.component.html
index 92ac3c0..111f9e2 100644
--- a/src/app/modules/user/main/main.component.html
+++ b/src/app/modules/user/main/main.component.html
@@ -1,100 +1,214 @@
 <div class="flex flex-col flex-auto min-w-0">
   <!-- Main -->
   <div class="wrapper">
-    <section class="banner-section w-ba">
+    <div>
       <img class="banner-bg" src="assets/images/beteran/banner-bg.jpg" />
-      <div class="container h-100 dflex-ac-jc">
-        <div class="center w-100">
+    </div>
+    <!-- Header -->
+    <div
+      class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent"
+    >
+      <div class="flex-1 min-w-0">
+        <!-- Title -->
+        <div class="mt-2">
+          <div class="bal-container ml-auto">
+            <form method="post" name="LoginFrm">
+              <div class="before-login active">
+                <div class="desktop">
+                  <div class="dflex-ac-jc">
+                    <div class="input-panel dflex-ac-jc">
+                      <div class="icon-panel dflex-ac-jc">
+                        <i class="fas fa-user-tie" aria-hidden="true"></i>
+                      </div>
+                      <input
+                        type="text"
+                        placeholder="아이디"
+                        name="IU_ID"
+                        id="IU_ID"
+                      />
+                    </div>
+                    <div class="input-panel dflex-ac-jc">
+                      <div class="icon-panel dflex-ac-jc">
+                        <i class="fas fa-unlock-alt" aria-hidden="true"></i>
+                      </div>
+                      <input
+                        type="password"
+                        placeholder="비밀번호"
+                        name="IU_PW"
+                        id="IU_PW"
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      class="btn-yellow"
+                      onclick="loginChk();"
+                    >
+                      로그인
+                    </button>
+
+                    <button type="button" class="btn-red bonus-link">
+                      회원가입
+                    </button>
+                  </div>
+                </div>
+                <div class="mobile">
+                  <div class="dflex-ac-jc">
+                    <button type="button" class="btn-yellow login-link">
+                      <i class="fa-solid fa-right-to-bracket mr-2"></i> ���
+                    </button>
+
+                    <button type="button" class="btn-red bonus-link">
+                      <i class="fa-solid fa-user-plus mr-2"></i> ȸ������
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <!-- Cards -->
+      <div class="flex justify-center mt-10 sm:mt-20">
+        <div class="w-full max-w-sm md:max-w-7xl">
           <div
-            class="banner-carousel carousel dflex-ac-jc align-content-center w-ba pointer-event"
-            data-ride="carousel"
-            data-pause="false"
-            data-interval="6000"
+            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
           >
-            <div class="carousel-inner">
-              <div class="carousel-item">
-                <div class="text-panel w-ba">
-                  <h1 class="mb-md-1 mb-0">
-                    <span class="font-bold">���긮���� �̺�Ʈ</span>
-                  </h1>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Live Casino &amp; Slot Game
-                  </h2>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Welcom to Online Casino
-                  </h2>
+            <ng-container *ngFor="let component of components">
+              <a
+                class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
+                [href]="
+                  'https://material.angular.io/components/' + component.id
+                "
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img
+                  class="w-full object-cover border-b"
+                  [src]="'assets/images/beteran/' + component.id + '.jpg'"
+                />
+                <div class="py-4 px-5">
+                  <div class="text-xl font-semibold">{{ component.name }}</div>
+                  <div class="mt-1 text-secondary">{{ component.summary }}</div>
                 </div>
-              </div>
-              <div class="carousel-item active">
-                <div class="text-panel w-ba">
-                  <h1 class="mb-md-1 mb-0">
-                    <span class="font-bold">�����ִ� ���԰���</span>
-                  </h1>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Live Casino &amp; Slot Game
-                  </h2>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Welcom to Online Casino
-                  </h2>
-                </div>
-              </div>
-              <div class="carousel-item">
-                <div class="text-panel w-ba">
-                  <h1 class="mb-md-1 mb-0">ȯ���մϴ�!!</h1>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Live Casino &amp; Slot Game
-                  </h2>
-                  <h2 class="mb-md-1 mb-0 font-bold">
-                    Welcom to Online Casino
-                  </h2>
+              </a>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex flex-col items-center px-6 py-10 sm:px-16 sm:pt-18 sm:pb-20 bg-white dark:bg-gray-800 sm:mt-20"
+    >
+      <div class="w-full max-w-7xl">
+        <!-- Features grid -->
+        <div
+          class="grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16 w-full mt-12 sm:mt-16"
+        >
+          <div>
+            <span
+              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
+            >
+              <!-- <mat-icon
+                class="text-white"
+                [svgIcon]="'heroicons_outline:pencil-alt'"
+              ></mat-icon> -->
+              <img class="icon" src="assets/images/beteran/deposit-icon.png" />
+            </span>
+            <div class="mt-4 text-xl font-medium">실시간출금</div>
+            <div class="mt-2 leading-6 text-secondary">
+              Create and edit projects, upload images via drag drop, add
+              categories, add custom fields, create interactive forms and more.
+            </div>
+          </div>
+          <div>
+            <span
+              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
+            >
+              <!-- <mat-icon
+                class="text-white"
+                [svgIcon]="'heroicons_outline:filter'"
+              ></mat-icon> -->
+
+              <img class="icon" src="assets/images/beteran/withdraw-icon.png" />
+            </span>
+            <div class="mt-4 text-xl font-medium">실시간입금</div>
+            <div class="mt-2 leading-6 text-secondary">
+              Search and filter within the projects, categories and custom
+              fields. Save search and filter details for easy access.
+            </div>
+          </div>
+          <div>
+            <span
+              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
+            >
+              <!-- <mat-icon
+                class="text-white"
+                [svgIcon]="'heroicons_outline:refresh'"
+              ></mat-icon> -->
+              <img class="icon" src="assets/images/beteran/notice-icon.png" />
+            </span>
+            <div class="mt-4 text-xl font-medium">공지사항</div>
+            <div class="mt-2 leading-6 text-secondary">
+              <!-- Schedule -->
+              <div
+                class="sm:col-span-2 md:col-span-2 lg:col-span-2 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+              >
+                <div class="flex flex-col mt-1 divide-y">
+                  <ng-container
+                    *ngFor="
+                      let scheduleItem of data.schedule['today'];
+                      trackBy: trackByFn
+                    "
+                  >
+                    <div
+                      class="flex flex-row items-center justify-between py-4 px-0.5"
+                    >
+                      <div class="flex flex-col">
+                        <div class="font-medium">{{ scheduleItem.title }}</div>
+                        <div
+                          class="flex flex-col sm:flex-row sm:items-center -ml-0.5 mt-2 sm:mt-1 space-y-1 sm:space-y-0 sm:space-x-3"
+                        >
+                          <ng-container *ngIf="scheduleItem.time">
+                            <div class="flex items-center">
+                              <mat-icon
+                                class="icon-size-5 text-hint"
+                                [svgIcon]="'heroicons_solid:clock'"
+                              ></mat-icon>
+                              <div class="ml-1.5 text-md text-secondary">
+                                {{ scheduleItem.time }}
+                              </div>
+                            </div>
+                          </ng-container>
+                          <!-- <ng-container *ngIf="scheduleItem.location">
+                            <div class="flex items-center">
+                              <mat-icon
+                                class="icon-size-5 text-hint"
+                                [svgIcon]="'heroicons_solid:location-marker'"
+                              ></mat-icon>
+                              <div class="ml-1.5 text-md text-secondary">
+                                {{ scheduleItem.location }}
+                              </div>
+                            </div>
+                          </ng-container> -->
+                        </div>
+                      </div>
+                      <button mat-icon-button>
+                        <mat-icon
+                          [svgIcon]="'heroicons_solid:chevron-right'"
+                        ></mat-icon>
+                      </button>
+                    </div>
+                  </ng-container>
                 </div>
               </div>
             </div>
-            <ol class="carousel-indicators dflex-ac-jc">
-              <li
-                data-target=".banner-carousel"
-                data-slide-to="0"
-                class=""
-              ></li>
-              <li
-                data-target=".banner-carousel"
-                data-slide-to="1"
-                class="active"
-              ></li>
-              <li
-                data-target=".banner-carousel"
-                data-slide-to="2"
-                class=""
-              ></li>
-            </ol>
           </div>
         </div>
-        <div class="banner-background w-ba">
-          <div class="light">
-            <img src="assets/images/beteran/light.png" />
-          </div>
-          <div class="glow-left">
-            <img src="assets/images/beteran/glow-left.png" />
-          </div>
-          <img
-            class="casino-items"
-            src="assets/images/beteran/casino-items.png"
-          />
-          <img class="girl-left" src="assets/images/beteran/girl-right.png" />
-          <img class="girl-right" src="assets/images/beteran/girl-left.png" />
-          <img
-            class="girl-center"
-            src="assets/images/beteran/girl-center.png"
-          />
-          <div class="glow-right">
-            <img src="assets/images/beteran/glow-right.png" />
-          </div>
-          <img class="candy-slot" src="assets/images/beteran/candy-slot.png" />
-          <img class="money-slot" src="assets/images/beteran/money-slot.png" />
-        </div>
       </div>
-    </section>
-    <header class="header-section w-ba">
+    </div>
+    <!-- <header class="header-section w-ba">
       <div class="container dflex-ac-jc h-100">
         <ul class="bs-ul main-menu sidebar-left">
           <li>
@@ -154,65 +268,10 @@
             >
           </li>
         </ul>
-
-        <div class="bal-container ml-auto">
-          <form method="post" name="LoginFrm">
-            <div class="before-login active">
-              <div class="desktop">
-                <div class="dflex-ac-jc">
-                  <div class="input-panel dflex-ac-jc">
-                    <div class="icon-panel dflex-ac-jc">
-                      <i class="fas fa-user-tie" aria-hidden="true"></i>
-                    </div>
-                    <input
-                      type="text"
-                      placeholder="���̵�"
-                      name="IU_ID"
-                      id="IU_ID"
-                    />
-                  </div>
-                  <div class="input-panel dflex-ac-jc">
-                    <div class="icon-panel dflex-ac-jc">
-                      <i class="fas fa-unlock-alt" aria-hidden="true"></i>
-                    </div>
-                    <input
-                      type="password"
-                      placeholder="��й�ȣ"
-                      name="IU_PW"
-                      id="IU_PW"
-                    />
-                  </div>
-                  <button
-                    type="button"
-                    class="btn-yellow"
-                    onclick="loginChk();"
-                  >
-                    ���
-                  </button>
-
-                  <button type="button" class="btn-red bonus-link">
-                    ȸ������
-                  </button>
-                </div>
-              </div>
-              <div class="mobile">
-                <div class="dflex-ac-jc">
-                  <button type="button" class="btn-yellow login-link">
-                    <i class="fa-solid fa-right-to-bracket mr-2"></i> ���
-                  </button>
-
-                  <button type="button" class="btn-red bonus-link">
-                    <i class="fa-solid fa-user-plus mr-2"></i> ȸ������
-                  </button>
-                </div>
-              </div>
-            </div>
-          </form>
-        </div>
       </div>
-    </header>
+    </header> -->
 
-    <section class="board-section w-ba">
+    <!-- <section class="board-section w-ba">
       <div class="container">
         <div class="row dflex-ac-jc align-items-start">
           <div class="board-panel event-board">
@@ -327,9 +386,9 @@
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
 
-    <footer class="footer-section w-ba">
+    <!-- <footer class="footer-section w-ba">
       <div class="container">
         <div class="row">
           <div class="provider-logo">
@@ -359,7 +418,7 @@
           <p class="mb-0 mt-3">�� COPYRIGHT Nova 2022 ALL RIGHTS RESERVED.</p>
         </div>
       </div>
-    </footer>
+    </footer> -->
     <div class="sn-overlay"></div>
     <button class="scroll-top w-ba" style="display: none">
       <i class="fas fa-caret-up" aria-hidden="true"></i>
diff --git a/src/app/modules/user/main/main.component.ts b/src/app/modules/user/main/main.component.ts
index 800b65a..dec357d 100644
--- a/src/app/modules/user/main/main.component.ts
+++ b/src/app/modules/user/main/main.component.ts
@@ -6,8 +6,175 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
 })
 export class MainComponent {
+  components = [
+    {
+      id: 'ag(1)',
+      name: '에볼루션',
+      summary: 'Evolution',
+      exampleSpecs: {
+        prefix: 'autocomplete-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-autocomplete-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'allbet',
+      name: '프라그메틱',
+      summary: 'PragmaticPlay.',
+      exampleSpecs: {
+        prefix: 'badge-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-badge-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'elysium',
+      name: '드림게이밍',
+      summary: 'DreamGaming',
+      exampleSpecs: {
+        prefix: 'bottom-sheet-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-bottom-sheet-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'elysium',
+      name: '마이크로게이밍',
+      summary: 'MicroGaming',
+      exampleSpecs: {
+        prefix: 'button-',
+        exclude: ['button-toggle-'],
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-button-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'evolution',
+      name: '오리엔탈플러스',
+      summary: 'OrientalPlus',
+      exampleSpecs: {
+        prefix: 'button-toggle-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-button-toggle-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'ezugi',
+      name: '아시안게이밍',
+      summary: 'AsiaGaming',
+      exampleSpecs: {
+        prefix: 'card-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-card-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'ezugi',
+      name: 'CQ9LIVE',
+      summary: 'CQ9LIVE',
+      exampleSpecs: {
+        prefix: 'checkbox-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-checkbox-testing.html',
+        },
+      ],
+    },
+    {
+      id: 'ezugi',
+      name: '이주기',
+      summary: 'Ezugi',
+      exampleSpecs: {
+        prefix: 'chips-',
+      },
+      additionalApiDocs: [
+        {
+          name: 'Testing',
+          path: 'material-chips-testing.html',
+        },
+      ],
+    },
+
+    // {
+    //   id: 'ezugi',
+    //   name: '비보카지노',
+    //   summary: 'VIVO',
+    //   exampleSpecs: {
+    //     prefix: 'core-',
+    //   },
+    //   additionalApiDocs: [
+    //     {
+    //       name: 'Testing',
+    //       path: 'material-core-testing.html',
+    //     },
+    //   ],
+    // },
+  ];
+
+  data = {
+    schedule: {
+      today: [
+        {
+          title: '계좌 등록 안내',
+          time: '2022-06-08',
+        },
+        {
+          title: '오토프로그램 이용 안냐',
+          time: '2022-06-08',
+        },
+        {
+          title: '입출금 규정 안내',
+          time: '2022-06-08',
+        },
+        {
+          title: '원피(가상계좌)사용 안내',
+          time: '2022-06-08',
+        },
+        {
+          title: '입금문의 안내(필독)',
+          time: '2022-06-08',
+        },
+      ],
+    },
+  };
   /**
    * Constructor
    */
   constructor() {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
 }
diff --git a/src/app/modules/user/main/main.module.ts b/src/app/modules/user/main/main.module.ts
index df9f0cf..e2bc0b9 100644
--- a/src/app/modules/user/main/main.module.ts
+++ b/src/app/modules/user/main/main.module.ts
@@ -1,5 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseCardModule } from '@fuse/components/card';
+import { SharedModule } from 'app/shared/shared.module';
+
 import { MainComponent } from 'app/modules/user/main/main.component';
 
 const mainRoutes: Route[] = [
@@ -11,6 +16,12 @@ const mainRoutes: Route[] = [
 
 @NgModule({
   declarations: [MainComponent],
-  imports: [RouterModule.forChild(mainRoutes)],
+  imports: [
+    RouterModule.forChild(mainRoutes),
+    MatButtonModule,
+    MatIconModule,
+    FuseCardModule,
+    SharedModule,
+  ],
 })
 export class MainModule {}