diff --git a/libs/common/src/models/action-item.ts b/libs/common/src/models/action-item.ts
index 7f874e9..09673c2 100644
--- a/libs/common/src/models/action-item.ts
+++ b/libs/common/src/models/action-item.ts
@@ -1,8 +1,7 @@
-export interface ActionItem<ID = number | string> {
-  id: ID;
+import { Action } from "./action";
+
+export interface ActionItem<T = any> extends Action<T> {
   name: string;
   icon?: string;
   color?: string;
 }
-
-export type ActionItemEvent<T = any> = [ActionItem, T];
diff --git a/libs/common/src/models/action.ts b/libs/common/src/models/action.ts
new file mode 100644
index 0000000..cfd80d8
--- /dev/null
+++ b/libs/common/src/models/action.ts
@@ -0,0 +1,4 @@
+export interface Action<T = any> {
+  id: string;
+  payload?: T;
+}
diff --git a/libs/common/src/models/public_api.ts b/libs/common/src/models/public_api.ts
index c449416..f50f566 100644
--- a/libs/common/src/models/public_api.ts
+++ b/libs/common/src/models/public_api.ts
@@ -1,2 +1,3 @@
+export * from './action';
 export * from './action-item';
 export * from './menu-item';
\ No newline at end of file
diff --git a/libs/common/src/stores/entity/entity.store.ts b/libs/common/src/stores/entity/entity.store.ts
index a690f9f..d154184 100644
--- a/libs/common/src/stores/entity/entity.store.ts
+++ b/libs/common/src/stores/entity/entity.store.ts
@@ -1,6 +1,4 @@
 import { ComponentStore } from '@ngrx/component-store';
-import { LoadingService } from '@ng-atomic/common/services/loading';
-import { SnackBarService } from '@ng-atomic/common/services/snack-bar';
 import { Observable } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
 
@@ -45,28 +43,16 @@ export abstract class EntityStore<S extends EntityState<Entity>, Entity> extends
 
   createEntity(value: Partial<Entity>) {
     const entity: Entity = ({...this.entity, ...value});
-
-    this.loading.setKey('[pages/stores/pages/store] Create Store');
-
-    return tryCatch(this._createEntity(entity))
-      .catch(error => (console.error(error), this.snackBar.openSnackBar('作成に失敗しました。')))
-      .finally(() => this.loading.removeKey('[pages/stores/pages/store] Create Store'));
+    return tryCatch(this._createEntity(entity));
   }
 
   updateEntity(value: Partial<Entity>) {
     const entity: Entity = ({...this.entity, ...value});
-
-    this.loading.setKey('[pages/stores/pages/store] Create Store');
     return this._updateEntity(entity)
-      .catch(error => (console.error(error), this.snackBar.openSnackBar('更新に失敗しました。')))
-      .finally(() => this.loading.removeKey('[pages/stores/pages/store] Create Store'));
   }
 
   abstract _getEntity(idOrParams: string): Observable<Entity>;
   abstract _createEntity(entity: Entity): Promise<Entity>;
   abstract _updateEntity(entity: Entity): Promise<void>;
 
-  abstract get loading(): LoadingService;
-  abstract get snackBar(): SnackBarService;
-
 }
diff --git a/libs/common/src/utils/mat-dayjs-date/dayjs-date.adapter.ts b/libs/common/src/utils/mat-dayjs-date/dayjs-date.adapter.ts
index 473a298..15b97ef 100644
--- a/libs/common/src/utils/mat-dayjs-date/dayjs-date.adapter.ts
+++ b/libs/common/src/utils/mat-dayjs-date/dayjs-date.adapter.ts
@@ -61,7 +61,7 @@ export class DayjsDateAdapter extends DateAdapter<Dayjs> {
   }
 
   // TODO: Implement
-  setLocale(locale: string) {
+  override setLocale(locale: string) {
     super.setLocale(locale);
 
     const dayJsLocaleData = this.dayJs().localeData();
@@ -180,7 +180,7 @@ export class DayjsDateAdapter extends DateAdapter<Dayjs> {
    * @returns The deserialized date object, either a valid date, null if the value can be
    *     deserialized into a null date (e.g. the empty string), or an invalid date.
    */
-  deserialize(value: any): Dayjs | null {
+   override deserialize(value: any): Dayjs | null {
     let date;
     if (value instanceof Date) {
       date = this.dayJs(value);
diff --git a/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.html b/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.html
index c2688f4..ec7f2b6 100644
--- a/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.html
+++ b/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.html
@@ -1,12 +1,12 @@
-<ng-container [ngSwitch]="actionItems.length">
+<ng-container [ngSwitch]="items?.length ?? 0">
   <ng-container *ngSwitchCase="0"></ng-container>
   <ng-container *ngSwitchCase="1">
-    <button mat-icon-button (click)="actionItemClick.emit([actionItems[0]])">
-      <mat-icon>{{ actionItems[0]?.icon }}</mat-icon>
+    <button mat-icon-button (click)="action.emit(items[0])">
+      <mat-icon>{{ items[0]?.icon }}</mat-icon>
     </button>
   </ng-container>
   <ng-container *ngSwitchDefault>
-    <button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="actionItems.length">
+    <button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="items.length">
       <mat-icon>menu</mat-icon>
     </button>
   </ng-container>
@@ -14,8 +14,8 @@
 
 <mat-menu #menu="matMenu">
   <button 
-    *ngFor="let actionItem of actionItems"
+    *ngFor="let item of items"
     mat-menu-item 
-    (click)="actionItemClick.emit([actionItem])"
-  >{{ actionItem.name }}</button>
+    (click)="action.emit(item)"
+  >{{ item.name }}</button>
 </mat-menu>
diff --git a/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.ts b/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.ts
index e62c6f1..bd9bd62 100644
--- a/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.ts
+++ b/libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'atoms-smart-menu-button',
@@ -9,8 +9,8 @@ import { ActionItem } from '@ng-atomic/common/models';
 })
 export class SmartMenuButtonAtom {
   @Input()
-  actionItems: ActionItem[] = [];
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<ActionItem>();
+  action = new EventEmitter<Action>();
 }
diff --git a/libs/components/src/atoms/smart-menu-button/smart-menu-button.stories.ts b/libs/components/src/atoms/smart-menu-button/smart-menu-button.stories.ts
index 8ff00d7..0c7495c 100644
--- a/libs/components/src/atoms/smart-menu-button/smart-menu-button.stories.ts
+++ b/libs/components/src/atoms/smart-menu-button/smart-menu-button.stories.ts
@@ -10,10 +10,7 @@ export default {
 } as Meta;
 
 const Template: Story = (args) => ({
-  props: {
-    ...args,
-    ...buildActions(['actionItemClick']),
-  },
+  props: {...args, ...buildActions(['action']) },
   moduleMetadata: {
     imports: [
       BrowserModule,
@@ -25,7 +22,7 @@ const Template: Story = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  actionItems: [
+  items: [
     {
       id: 'test-action-01',
       name: 'テスト01',
diff --git a/libs/components/src/molecules/actions-column/actions-column.molecule.html b/libs/components/src/molecules/actions-column/actions-column.molecule.html
index 0f1aa0b..bddeeee 100644
--- a/libs/components/src/molecules/actions-column/actions-column.molecule.html
+++ b/libs/components/src/molecules/actions-column/actions-column.molecule.html
@@ -2,8 +2,8 @@
   <th mat-header-cell *matHeaderCellDef>操作</th>
   <td mat-cell *matCellDef="let item">
     <atoms-smart-menu-button
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit([$event[0], item])"
+      [items]="items"
+      (action)="action.emit({id: $event.id, payload: item})"
     ></atoms-smart-menu-button>
   </td>
 </ng-container>
diff --git a/libs/components/src/molecules/actions-column/actions-column.molecule.ts b/libs/components/src/molecules/actions-column/actions-column.molecule.ts
index 706dcbe..8a3be64 100644
--- a/libs/components/src/molecules/actions-column/actions-column.molecule.ts
+++ b/libs/components/src/molecules/actions-column/actions-column.molecule.ts
@@ -1,6 +1,6 @@
 import { CdkCellDef, CdkColumnDef, CdkHeaderCellDef, CdkTable, TextColumnOptions, TEXT_COLUMN_OPTIONS } from '@angular/cdk/table';
 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'molecules-actions-column',
@@ -21,11 +21,10 @@ export class ActionsColumnMolecule<T> {
   _name!: string;
 
   @Input()
-  actionItems: ActionItem[] = [];
-
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<[ActionItem, T]>();
+  action = new EventEmitter<Action>();
 
   @ViewChild(CdkColumnDef, {static: true})
   columnDef!: CdkColumnDef;
diff --git a/libs/components/src/molecules/actions-column/actions-column.stories.ts b/libs/components/src/molecules/actions-column/actions-column.stories.ts
index c5a782a..a108e81 100644
--- a/libs/components/src/molecules/actions-column/actions-column.stories.ts
+++ b/libs/components/src/molecules/actions-column/actions-column.stories.ts
@@ -11,13 +11,14 @@ export default {
 
 
 const Template: Story = (args) => ({
-  props: {...args, ...buildActions(['actionItemClick'])},
+  props: {...args, ...buildActions(['action'])},
   template: `
   <table mat-table [dataSource]="items" matSort matSortDisableClear matSortDirection="desc">
     <molecules-actions-column
       *ngFor="let name of displayedColumns" 
       [name]="name"
-      [actionItems]="actionItems"
+      [items]="items"
+      (action)="action($event)"
     ></molecules-actions-column>
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
     <tr mat-row *matRowDef="let item; columns: displayedColumns;"></tr>
@@ -32,15 +33,14 @@ const Template: Story = (args) => ({
 });
 
 enum ActionId {
-  TEST1,
-  TEST2,
+  TEST1 = 'test 1',
+  TEST2 = 'test 2',
 }
 
 export const Default = Template.bind({});
 Default.args = {
-  items: [{id: '01'}, {id: '02'}, {id: '03'}],
   displayedColumns: ['__actions'],
-  actionItems: [
+  items: [
     {id: ActionId.TEST1, name: 'TEST 1'},
     {id: ActionId.TEST2, name: 'TEST 2'},
   ]
diff --git a/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.html b/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.html
index edb0b71..2a3c9a3 100644
--- a/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.html
+++ b/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.html
@@ -1,4 +1,4 @@
-<mat-form-field [appearance]="appearance">
+<mat-form-field [appearance]="appearance" [floatLabel]="floatLabel">
   <mat-label>{{ label }}</mat-label>
   <mat-chip-list #chipList>
     <mat-chip *ngFor="let chip of chipsManager.chips" (removed)="remove(chip)">
diff --git a/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.ts b/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.ts
index a6b8f73..5676590 100644
--- a/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.ts
+++ b/libs/components/src/molecules/chips-input-field/chips-input-field.molecule.ts
@@ -22,6 +22,9 @@ export class ChipsInputFieldMolecule {
   @Input()
   control = new FormControl<string>('');
 
+  @Input()
+  floatLabel = 'auto';
+
   @Input()
   label = 'label';
 
diff --git a/libs/components/src/molecules/header/header.module.ts b/libs/components/src/molecules/header/header.module.ts
new file mode 100644
index 0000000..9ee2d0c
--- /dev/null
+++ b/libs/components/src/molecules/header/header.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderMolecule } from './header.molecule';
+
+
+
+@NgModule({
+  declarations: [
+    HeaderMolecule
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    HeaderMolecule
+  ]
+})
+export class HeaderModule { }
diff --git a/libs/components/src/molecules/header/header.molecule.html b/libs/components/src/molecules/header/header.molecule.html
new file mode 100644
index 0000000..9e5c003
--- /dev/null
+++ b/libs/components/src/molecules/header/header.molecule.html
@@ -0,0 +1,2 @@
+<span class="title">{{ title ?? '' }}</span>
+<span class="description">{{ description ?? '' }}</span>
diff --git a/libs/components/src/molecules/header/header.molecule.scss b/libs/components/src/molecules/header/header.molecule.scss
new file mode 100644
index 0000000..d3fa321
--- /dev/null
+++ b/libs/components/src/molecules/header/header.molecule.scss
@@ -0,0 +1,20 @@
+@use 'scoped-var/strict' as * with ($host: 'header');
+@use 'atomic/molecule' as *;
+
+:host {
+	@include molecule($host);
+}
+
+:host {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: flex-end;
+
+	.description {
+		line-height: 1em;
+		font-size: 12px;
+		margin-bottom: 8px;
+		margin-left: 4px;
+	}
+}
diff --git a/libs/components/src/molecules/header/header.molecule.spec.ts b/libs/components/src/molecules/header/header.molecule.spec.ts
new file mode 100644
index 0000000..31679fa
--- /dev/null
+++ b/libs/components/src/molecules/header/header.molecule.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderMolecule } from './header.molecule';
+
+describe('HeaderMolecule', () => {
+  let component: HeaderMolecule;
+  let fixture: ComponentFixture<HeaderMolecule>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderMolecule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderMolecule);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/components/src/molecules/header/header.molecule.ts b/libs/components/src/molecules/header/header.molecule.ts
new file mode 100644
index 0000000..311af1c
--- /dev/null
+++ b/libs/components/src/molecules/header/header.molecule.ts
@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'molecules-header',
+  templateUrl: './header.molecule.html',
+  styleUrls: ['./header.molecule.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HeaderMolecule {
+
+  @Input()
+  title = 'title';
+
+  @Input()
+  description?: string;
+
+}
diff --git a/libs/components/src/molecules/header/header.stories.ts b/libs/components/src/molecules/header/header.stories.ts
new file mode 100644
index 0000000..90f62f5
--- /dev/null
+++ b/libs/components/src/molecules/header/header.stories.ts
@@ -0,0 +1,26 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, Story } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { HeaderMolecule, HeaderModule } from '.';
+
+export default {
+  title: 'Molecules/Header',
+  component: HeaderMolecule,
+} as Meta;
+
+const ACTIONS = {
+  // eventEmitterName: action('eventEmitterName'),
+};
+
+
+const Template: Story = (args) => ({
+  props: {...args, ...ACTIONS},
+  moduleMetadata: {
+    imports: [
+      HeaderModule,
+    ]
+  }
+});
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/libs/components/src/molecules/header/index.ts b/libs/components/src/molecules/header/index.ts
new file mode 100644
index 0000000..21461fa
--- /dev/null
+++ b/libs/components/src/molecules/header/index.ts
@@ -0,0 +1,2 @@
+export { HeaderMolecule } from './header.molecule';
+export { HeaderModule } from './header.module';
diff --git a/libs/components/src/molecules/header/ng-package.json b/libs/components/src/molecules/header/ng-package.json
new file mode 100644
index 0000000..1050cb9
--- /dev/null
+++ b/libs/components/src/molecules/header/ng-package.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/components",
+  "lib": {
+    "entryFile": "index.ts",
+    "styleIncludePaths": [
+      "../../../../node_modules",
+      "../../styles"
+    ]
+  }
+}
diff --git a/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.html b/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.html
index 4416267..dffc4fa 100644
--- a/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.html
+++ b/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.html
@@ -1,3 +1,3 @@
-<ng-container *ngFor="let item of actionItems; trackBy: trackById">
-  <button mat-raised-button color="primary" (click)="actionItemClick.emit([item])">{{ item?.name }}</button>
+<ng-container *ngFor="let item of items; trackBy: trackById">
+  <button mat-raised-button color="primary" (click)="action.emit(item)">{{ item?.name }}</button>
 </ng-container>
\ No newline at end of file
diff --git a/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.ts b/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.ts
index 16b1a33..64743f0 100644
--- a/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.ts
+++ b/libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'organisms-action-buttons-section',
@@ -10,10 +10,10 @@ import { ActionItem } from '@ng-atomic/common/models';
 })
 export class ActionButtonsSectionOrganism {
   @Input()
-  actionItems: ActionItem[] = [];
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<[ActionItem]>();
+  action = new EventEmitter<Action>();
 
   trackById = (item: ActionItem) => item.id;
 }
diff --git a/libs/components/src/organisms/back-navigator/back-navigator.organism.html b/libs/components/src/organisms/back-navigator/back-navigator.organism.html
index f581aef..b323a90 100644
--- a/libs/components/src/organisms/back-navigator/back-navigator.organism.html
+++ b/libs/components/src/organisms/back-navigator/back-navigator.organism.html
@@ -10,8 +10,8 @@
   </div>
   <div>
     <atoms-smart-menu-button
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit($event)"
+      [items]="items"
+      (action)="action.emit($event)"
     ></atoms-smart-menu-button>
   </div>
 </mat-toolbar>
diff --git a/libs/components/src/organisms/back-navigator/back-navigator.organism.ts b/libs/components/src/organisms/back-navigator/back-navigator.organism.ts
index 60d5c4a..b17672e 100644
--- a/libs/components/src/organisms/back-navigator/back-navigator.organism.ts
+++ b/libs/components/src/organisms/back-navigator/back-navigator.organism.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem, ActionItemEvent } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'organisms-back-navigator',
@@ -19,12 +19,12 @@ export class BackNavigatorOrganism {
   description?: string;
 
   @Input()
-  actionItems: ActionItem[] = [];
+  items: ActionItem[] = [];
 
   @Output()
   backButtonClick = new EventEmitter<void>();
 
   @Output()
-  actionItemClick = new EventEmitter<ActionItemEvent>();
+  action = new EventEmitter<Action>();
 
 }
diff --git a/libs/components/src/organisms/navigator/navigator.organism.html b/libs/components/src/organisms/navigator/navigator.organism.html
index f581aef..9ce64a4 100644
--- a/libs/components/src/organisms/navigator/navigator.organism.html
+++ b/libs/components/src/organisms/navigator/navigator.organism.html
@@ -1,17 +1,17 @@
 <mat-toolbar color="primary">
   <div>
-    <button mat-icon-button *ngIf="canBack" (click)="backButtonClick.emit()">
-      <mat-icon>arrow_back</mat-icon>
-    </button>
-    <div class="text">
-      <span class="title">{{ title || '' }}</span>
-      <span class="description">{{ description || '' }}</span>
-    </div>
+    <atoms-smart-menu-button
+      *ngIf="leftItems.length"
+      [items]="leftItems"
+      (action)="action.emit($event)"
+    ></atoms-smart-menu-button>
+    <ng-content></ng-content>
   </div>
   <div>
     <atoms-smart-menu-button
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit($event)"
+      *ngIf="rightItems.length"
+      [items]="rightItems"
+      (action)="action.emit($event)"
     ></atoms-smart-menu-button>
   </div>
 </mat-toolbar>
diff --git a/libs/components/src/organisms/navigator/navigator.organism.scss b/libs/components/src/organisms/navigator/navigator.organism.scss
index 5cda26b..a7ee6d6 100644
--- a/libs/components/src/organisms/navigator/navigator.organism.scss
+++ b/libs/components/src/organisms/navigator/navigator.organism.scss
@@ -9,20 +9,6 @@
   width: 100%;
   height: var(--height);
 
-  div.text {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-end;
-
-    .description {
-      line-height: 1em;
-      font-size: 12px;
-      margin-bottom: 8px;
-      margin-left: 4px;
-    }
-  }
-
   mat-toolbar {
     display: flex;
     width: 100%;
diff --git a/libs/components/src/organisms/navigator/navigator.organism.ts b/libs/components/src/organisms/navigator/navigator.organism.ts
index 10e2d1f..697cd85 100644
--- a/libs/components/src/organisms/navigator/navigator.organism.ts
+++ b/libs/components/src/organisms/navigator/navigator.organism.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem, ActionItemEvent } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'organisms-navigator',
@@ -8,23 +8,12 @@ import { ActionItem, ActionItemEvent } from '@ng-atomic/common/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigatorOrganism {
-
-  @Input()
-  canBack = true;
-
-  @Input()
-  title?: string;
-
   @Input()
-  description?: string;
+  rightItems: ActionItem[] = [];
 
   @Input()
-  actionItems: ActionItem[] = [];
-
-  @Output()
-  backButtonClick = new EventEmitter<void>();
+  leftItems: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<ActionItemEvent>();
-
+  action = new EventEmitter<Action>();
 }
diff --git a/libs/components/src/organisms/paginator/paginator.organism.html b/libs/components/src/organisms/paginator/paginator.organism.html
index 6de4af5..cf867d5 100644
--- a/libs/components/src/organisms/paginator/paginator.organism.html
+++ b/libs/components/src/organisms/paginator/paginator.organism.html
@@ -1,7 +1,10 @@
 <frames-auto-layout horizontal>
   <molecules-chips-input-field
-    [control]="control"
     [appearance]="'legacy'"
+    [control]="control"
+    [floatLabel]="'always'"
+    [label]="''"
+    [hint]="''"
     [placeholder]="placeholder"
   ></molecules-chips-input-field>
   <mat-paginator 
@@ -12,4 +15,3 @@
     aria-label="Select page">
   </mat-paginator>
 </frames-auto-layout>
-
diff --git a/libs/components/src/organisms/paginator/paginator.organism.scss b/libs/components/src/organisms/paginator/paginator.organism.scss
index da1ffc9..96b1f12 100644
--- a/libs/components/src/organisms/paginator/paginator.organism.scss
+++ b/libs/components/src/organisms/paginator/paginator.organism.scss
@@ -9,7 +9,7 @@
     }
 
     mat-paginator {
-      min-width: 400px;
+      min-width: 440px;
     }
   }
 }
\ No newline at end of file
diff --git a/libs/components/src/organisms/smart-table/smart-table.organism.html b/libs/components/src/organisms/smart-table/smart-table.organism.html
index 7ac2cfd..d7c4f9d 100644
--- a/libs/components/src/organisms/smart-table/smart-table.organism.html
+++ b/libs/components/src/organisms/smart-table/smart-table.organism.html
@@ -9,8 +9,8 @@
     <molecules-actions-column 
       *ngSwitchCase="'__actions'" 
       name="__actions" 
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit($event)"
+      [items]="menuItems"
+      (action)="action.emit($event)"
     ></molecules-actions-column>
     <molecules-smart-column
       *ngSwitchDefault
diff --git a/libs/components/src/organisms/smart-table/smart-table.organism.ts b/libs/components/src/organisms/smart-table/smart-table.organism.ts
index 10b0ee3..99494cf 100644
--- a/libs/components/src/organisms/smart-table/smart-table.organism.ts
+++ b/libs/components/src/organisms/smart-table/smart-table.organism.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 
 @Component({
@@ -28,7 +28,7 @@ export class SmartTableOrganism<Item extends object> {
   pageSize: number = 0;
 
   @Input()
-  actionItems: ActionItem[] = [];
+  menuItems: ActionItem[] = [];
 
   @Input()
   selectedIdSet = new Set<string>();
@@ -40,7 +40,7 @@ export class SmartTableOrganism<Item extends object> {
   sortOrder?: 'asc' | 'desc';
 
   @Output()
-  actionItemClick = new EventEmitter<[ActionItem, Item]>();
+  action = new EventEmitter<Action>();
 
   @Output()
   headerClick = new EventEmitter<string>();
@@ -54,4 +54,5 @@ export class SmartTableOrganism<Item extends object> {
   @Output()
   itemCheck = new EventEmitter<[Item, boolean]>();
   
+  trackByColumnName = (columnName: string) => columnName;
 }
diff --git a/libs/components/src/organisms/smart-table/smart-table.stories.ts b/libs/components/src/organisms/smart-table/smart-table.stories.ts
index ec6f4eb..9c71b9d 100644
--- a/libs/components/src/organisms/smart-table/smart-table.stories.ts
+++ b/libs/components/src/organisms/smart-table/smart-table.stories.ts
@@ -2,6 +2,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, Story } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 import { SmartTableOrganism, SmartTableModule } from '.';
+import { buildActions } from '@ng-atomic/storybook';
 
 export default {
   title: 'Organisms/SmartTable',
@@ -13,14 +14,8 @@ export default {
   }
 } as Meta;
 
-const ACTIONS = {
-  pageChange: action('pageChange'),
-  headerClick: action('headerClick'),
-};
-
-
 const Template: Story = (args) => ({
-  props: {...args, ...ACTIONS},
+  props: {...args, ...buildActions(['action', 'pagesChange', 'headerClick'])},
   moduleMetadata: {
     imports: [
       BrowserAnimationsModule,
@@ -30,23 +25,19 @@ const Template: Story = (args) => ({
 });
 
 enum ActionId {
-  MENU_1,
-  MENU_2,
+  MENU_1 = 'MENU 1',
+  MENU_2 = 'MENU 2',
 }
 
 export const Default = Template.bind({});
 Default.args = {
-  actionItems: [
-    {id: ActionId.MENU_1, name: 'Menu 1'},
-    {id: ActionId.MENU_2, name: 'Menu 2'},
-  ],
   page: {
     pageIndex: 1,
     previousPageIndex: 0,
     pageSize: 20,
     length: 100,
   },
-  columns: ['id', 'name', 'description'],
+  columns: ['id', 'name', 'description', '__actions'],
   items: [
     { id: 11, name: 'Dr Nice', description: '', realName: 'Alex' },
     { id: 12, name: 'Narco', description: '', realName: 'Alex' },
@@ -59,6 +50,10 @@ Default.args = {
     { id: 19, name: 'Magma', description: '', realName: 'Alex' },
     { id: 20, name: 'Tornado', description: '', realName: 'Alex' }
   ],
+  menuItems: [
+    {id: ActionId.MENU_1, name: 'Menu 1'},
+    {id: ActionId.MENU_2, name: 'Menu 2'},
+  ],
   sortKey: 'id',
   sortOrder: 'asc',
 };
diff --git a/libs/components/src/templates/entrance/entrance.template.html b/libs/components/src/templates/entrance/entrance.template.html
index 548806e..36eadd1 100644
--- a/libs/components/src/templates/entrance/entrance.template.html
+++ b/libs/components/src/templates/entrance/entrance.template.html
@@ -11,9 +11,7 @@
       label="パスワード"
       [control]="form.get('password')"
     ></organisms-text-input-section>
-    <organisms-action-buttons-section
-      [actionItems]="actionItems"
-    ></organisms-action-buttons-section>
+    <organisms-action-buttons-section [items]="actionItems"></organisms-action-buttons-section>
     <organisms-social-login-section
       (signInWithGoogleButtonClick)="signInWithGoogleButtonClick.emit()"
     ></organisms-social-login-section>
diff --git a/libs/components/src/templates/smart-crud/smart-crud.module.ts b/libs/components/src/templates/smart-crud/smart-crud.module.ts
index 1baccc4..47714d7 100644
--- a/libs/components/src/templates/smart-crud/smart-crud.module.ts
+++ b/libs/components/src/templates/smart-crud/smart-crud.module.ts
@@ -3,8 +3,9 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ScrollModule } from '@ng-atomic/components/frames/scroll';
 import { AutoLayoutModule } from '@ng-atomic/components/frames/auto-layout';
+import { HeaderModule } from '@ng-atomic/components/molecules/header';
 import { ActionButtonsSectionModule } from '@ng-atomic/components/organisms/action-buttons-section';
-import { BackNavigatorModule } from '@ng-atomic/components/organisms/back-navigator';
+import { NavigatorModule } from '@ng-atomic/components/organisms/navigator';
 import { TextInputSectionModule } from '@ng-atomic/components/organisms/text-input-section';
 import { DateInputSectionModule } from '@ng-atomic/components/organisms/date-input-section';
 import { SelectInputSectionModule } from '@ng-atomic/components/organisms/select-input-section';
@@ -29,10 +30,12 @@ import { SmartCrudTemplate } from './smart-crud.template';
     ScrollModule,
     // Organisms
     ActionButtonsSectionModule,
-    BackNavigatorModule,
+    NavigatorModule,
     DateInputSectionModule,
     TextInputSectionModule,
     SelectInputSectionModule,
+    // Molecules
+    HeaderModule,
   ],
   exports: [
     SmartCrudTemplate
diff --git a/libs/components/src/templates/smart-crud/smart-crud.template.html b/libs/components/src/templates/smart-crud/smart-crud.template.html
index b74ad39..6653b15 100644
--- a/libs/components/src/templates/smart-crud/smart-crud.template.html
+++ b/libs/components/src/templates/smart-crud/smart-crud.template.html
@@ -1,12 +1,12 @@
 <frames-scroll>
-  <organisms-back-navigator 
-    [actionItems]="menuActionItems"
-    [canBack]="canBack"
-    [title]="title"
-    (actionItemClick)="actionItemClick.emit($event)"
-    (backButtonClick)="backButtonClick.emit()"
+  <organisms-navigator 
+    [leftItems]="canBack ? navigatorLeftItems : []"
+    [rightItems]="navigatorMenuItems"
+    (action)="onAction($event)"
     navigator
-  ></organisms-back-navigator>
+  >
+    <molecules-header [title]="title"></molecules-header>
+  </organisms-navigator>
   <frames-auto-layout vertical contents>
     <ng-container *ngFor="let entry of controls; trackBy:trackByIndex" [ngSwitch]="(entry[0] | smartField)?.type">
       <organisms-select-input-section
@@ -33,8 +33,8 @@
       ></organisms-text-input-section>
     </ng-container>
     <organisms-action-buttons-section
-      [actionItems]="actionItems"
-      (actionItemClick)="onActionButtonClick($event)"
+      [items]="actionItems"
+      (action)="onAction($event)"
     ></organisms-action-buttons-section>
   </frames-auto-layout>
 </frames-scroll>
\ No newline at end of file
diff --git a/libs/components/src/templates/smart-crud/smart-crud.template.ts b/libs/components/src/templates/smart-crud/smart-crud.template.ts
index ba87a6c..9b825fb 100644
--- a/libs/components/src/templates/smart-crud/smart-crud.template.ts
+++ b/libs/components/src/templates/smart-crud/smart-crud.template.ts
@@ -1,7 +1,14 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem, ActionItemEvent } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 import { FormGroup } from '@ngneat/reactive-forms';
 
+export enum ActionId {
+  BACK = '[@ng-atomic/components/templates/smart-crud] Back',
+  CREATE = '[@ng-atomic/components/templates/smart-crud] Create',
+  UPDATE = '[@ng-atomic/components/templates/smart-crud] Update',
+  DELETE = '[@ng-atomic/components/templates/smart-crud] Delete',
+}
+
 @Component({
   selector: 'templates-smart-crud',
   templateUrl: './smart-crud.template.html',
@@ -24,10 +31,13 @@ export class SmartCrudTemplate {
   mode: 'create' | 'update' = 'create';
 
   @Input()
-  menuActionItems: ActionItem[] = [];
+  navigatorMenuItems: ActionItem[] = [{id: ActionId.DELETE, name: '削除'}];
+
+  @Input()
+  title: string = 'title';
 
   @Output()
-  actionItemClick = new EventEmitter<ActionItemEvent>();
+  action = new EventEmitter<Action>();
 
   @Output()
   backButtonClick = new EventEmitter();
@@ -38,17 +48,12 @@ export class SmartCrudTemplate {
   @Output()
   updateButtonClick = new EventEmitter<void>();
 
-  get title(): string {
-    switch (this.mode) {
-      case 'create': return `${this.name}の作成`;
-      case 'update': return `${this.name}の更新`;
-    }
-  }
+  navigatorLeftItems = [{ id: ActionId.BACK, icon: 'arrow_back' }];
 
   get actionItems(): ActionItem[] {
     switch (this.mode) {
-      case 'create': return [{id: 'create', name: '作成'}];
-      case 'update': return [{id: 'update', name: '更新'}];
+      case 'create': return [{id: ActionId.CREATE, name: '作成'}];
+      case 'update': return [{id: ActionId.UPDATE, name: '更新'}];
     }
   }
 
@@ -58,10 +63,12 @@ export class SmartCrudTemplate {
 
   trackByIndex = (index: number) => index;
 
-  onActionButtonClick([{id}]: [ActionItem]): void {
-    switch(id) {
-      case 'create': return this.createButtonClick.emit();
-      case 'update': return this.updateButtonClick.emit();
+  onAction(action: Action): void {
+    switch(action.id) {
+      case ActionId.BACK: return this.backButtonClick.emit();
+      case ActionId.CREATE: return this.createButtonClick.emit();
+      case ActionId.UPDATE: return this.updateButtonClick.emit();
+      default: return this.action.emit(action);
     }
   }
 }
diff --git a/libs/components/src/templates/smart-index/smart-index.module.ts b/libs/components/src/templates/smart-index/smart-index.module.ts
index f9fff7b..3430c22 100644
--- a/libs/components/src/templates/smart-index/smart-index.module.ts
+++ b/libs/components/src/templates/smart-index/smart-index.module.ts
@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AutoLayoutModule } from '@ng-atomic/components/frames/auto-layout';
 import { ScrollModule } from '@ng-atomic/components/frames/scroll';
+import { HeaderModule } from '@ng-atomic/components/molecules/header';
 import { SmartTableModule } from '@ng-atomic/components/organisms/smart-table';
-import { BackNavigatorModule } from '@ng-atomic/components/organisms/back-navigator';
+import { NavigatorModule } from '@ng-atomic/components/organisms/navigator';
 import { PaginatorModule } from '@ng-atomic/components/organisms/paginator';
 
 import { SmartIndexTemplate } from './smart-index.template';
@@ -21,7 +22,9 @@ import { SmartIndexTemplate } from './smart-index.template';
     // Organisms
     PaginatorModule,
     SmartTableModule,
-    BackNavigatorModule,
+    NavigatorModule,
+    // Molecules
+    HeaderModule,
   ],
   exports: [
     SmartIndexTemplate
diff --git a/libs/components/src/templates/smart-index/smart-index.stories.ts b/libs/components/src/templates/smart-index/smart-index.stories.ts
index 1dabfc5..be57bb9 100644
--- a/libs/components/src/templates/smart-index/smart-index.stories.ts
+++ b/libs/components/src/templates/smart-index/smart-index.stories.ts
@@ -14,7 +14,7 @@ const Template: Story = (args) => ({
   props: {
     ...args,
     ...buildActions([
-      'actionItemClick',
+      'action',
       'backButtonClick',
       'checkboxClick',
       'pageChange',
@@ -30,9 +30,9 @@ const Template: Story = (args) => ({
 });
 
 enum ActionId {
-  CREATE,
-  EDIT,
-  CALL,
+  CREATE = 'create',
+  EDIT = 'Edit',
+  CALL = 'Call',
 }
 
 export const Default = Template.bind({});
@@ -51,11 +51,11 @@ Default.args = {
     { id: 19, name: 'Magma', description: '', realName: 'Alex' },
     { id: 20, name: 'Tornado', description: '', realName: 'Alex' }
   ],
-  actionItems: [
+  menuItems: [
     { id: ActionId.CALL, name: 'Call' },
     { id: ActionId.EDIT, name: 'Edit' },
   ],
-  menuActionItems: [
+  globalMenuItems: [
     { id: ActionId.CREATE, name: 'Create' },
   ],
   selectedIdSet: new Set<string>([11 as never as string]),
diff --git a/libs/components/src/templates/smart-index/smart-index.template.html b/libs/components/src/templates/smart-index/smart-index.template.html
index 204bab8..a4556d3 100644
--- a/libs/components/src/templates/smart-index/smart-index.template.html
+++ b/libs/components/src/templates/smart-index/smart-index.template.html
@@ -1,22 +1,21 @@
 <frames-scroll>
-  <organisms-back-navigator
-    [canBack]="canBack"
-    [title]="title"
-    [description]="description"
-    [actionItems]="globalMenuItems"
-    (actionItemClick)="action.emit($event)"
-    (backButtonClick)="backButtonClick.emit()"
+  <organisms-navigator
+    [leftItems]="canBack ? navigatorLeftItems : []"
+    [rightItems]="navigatorMenuItems"
+    (action)="onAction($event)"
     navigator
-  ></organisms-back-navigator>
+  >
+    <molecules-header [title]="title" [description]="description"></molecules-header>
+  </organisms-navigator>
   <frames-auto-layout vertical contents>
     <organisms-smart-table
       [items]="items"
-      [actionItems]="menuItems"
+      [menuItems]="rowMenuItems"
       [columns]="properties"
       [selectedIdSet]="selectedIdSet"
       [sortKey]="sortKey"
       [sortOrder]="sortOrder"
-      (actionItemClick)="action.emit($event)"
+      (action)="action.emit($event)"
       (checkboxClick)="checkboxClick.emit($event)"
       (headerClick)="tableHeaderClick.emit($event)"
     ></organisms-smart-table>
diff --git a/libs/components/src/templates/smart-index/smart-index.template.ts b/libs/components/src/templates/smart-index/smart-index.template.ts
index 441836b..e8a6f2c 100644
--- a/libs/components/src/templates/smart-index/smart-index.template.ts
+++ b/libs/components/src/templates/smart-index/smart-index.template.ts
@@ -1,10 +1,14 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 import { FormControl } from '@ngneat/reactive-forms';
 
 export interface Page extends PageEvent { }
 
+export enum ActionId {
+  BACK = '[@ng-atomic/components/templates/smart-crud] Back',
+}
+
 export class Page {
   static fromObj(event: PageEvent = {pageSize: 50, pageIndex: 0, length: 100}): Page {
     return Object.assign(new Page(), event);
@@ -36,7 +40,7 @@ export class SmartIndexTemplate<T> {
   canBack = false;
 
   @Input()
-  queryControl = new FormControl<string>();
+  queryControl = new FormControl<string>('');
 
   @Input()
   title: string = '';
@@ -48,10 +52,10 @@ export class SmartIndexTemplate<T> {
   items: T[] = [];
 
   @Input()
-  menuItems: ActionItem[] = [];
+  rowMenuItems: ActionItem[] = [];
 
   @Input()
-  globalMenuItems: ActionItem[] = [];
+  navigatorMenuItems: ActionItem[] = [];
 
   @Input()
   properties: (keyof T)[] =  [];
@@ -79,7 +83,7 @@ export class SmartIndexTemplate<T> {
   queryPlaceholder = '';
 
   @Output()
-  action = new EventEmitter<string>();
+  action = new EventEmitter<Action>();
 
   @Output()
   backButtonClick = new EventEmitter();
@@ -93,4 +97,12 @@ export class SmartIndexTemplate<T> {
   @Output()
   tableHeaderClick = new EventEmitter<string>();
 
+  navigatorLeftItems = [{ id: ActionId.BACK, icon: 'arrow_back' }];
+
+  onAction(action: Action): void {
+    switch(action.id) {
+      case ActionId.BACK: return this.backButtonClick.emit();
+      default: return this.action.emit(action);
+    }
+  }
 }