diff --git a/projects/ui-authentication/src/lib/components/change-password.component.stories.ts b/projects/ui-authentication/src/lib/components/change-password.component.stories.ts
new file mode 100644
index 0000000..0f1f78c
--- /dev/null
+++ b/projects/ui-authentication/src/lib/components/change-password.component.stories.ts
@@ -0,0 +1,72 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { ChangePasswordComponent } from './change-password.component';
+import { AuthenticationUiModule } from '../authentication-ui.module';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ChangeDetectorRef } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { I18nService, UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
+import { LogService } from '@ucap/logger';
+import { Company } from '@ucap/api-external';
+
+export default {
+  title: 'ChangePasswordComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+
+        CommonModule,
+        ReactiveFormsModule,
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+
+        I18nModule
+      ],
+      providers: [
+        AuthenticationUiModule,
+        { provide: FormBuilder, useValue: new FormBuilder() },
+        { provide: I18nService, useValue: new I18nService(new LogService({})) },
+        {
+          provide: UCAP_I18N_NAMESPACE,
+          useValue: 'authentication'
+        }
+      ]
+    })
+  ],
+  excludeStories: /.*Data$/
+};
+
+export const actionsData = {
+  changePassword: action('changePassword')
+};
+
+export const inputData = {};
+
+export const Default = () => ({
+  component: ChangePasswordComponent,
+  props: {
+    loginId: 'test01',
+    phoneNumber: '01011112222',
+    encryptedLoginPw: 'encPw',
+    changePassword: actionsData.changePassword
+  }
+});
diff --git a/projects/ui-authentication/src/lib/components/login.component.stories.ts b/projects/ui-authentication/src/lib/components/login.component.stories.ts
new file mode 100644
index 0000000..801246b
--- /dev/null
+++ b/projects/ui-authentication/src/lib/components/login.component.stories.ts
@@ -0,0 +1,85 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { AuthenticationUiModule } from '../authentication-ui.module';
+import { LoginComponent } from './login.component';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ChangeDetectorRef } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { I18nService, UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
+import { LogService } from '@ucap/logger';
+import { Company } from '@ucap/api-external';
+
+export default {
+  title: 'LoginComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+
+        CommonModule,
+        ReactiveFormsModule,
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+
+        I18nModule
+      ],
+      providers: [
+        AuthenticationUiModule,
+        { provide: I18nService, useValue: new I18nService(new LogService({})) },
+        {
+          provide: UCAP_I18N_NAMESPACE,
+          useValue: 'authentication'
+        }
+      ]
+    })
+  ],
+  excludeStories: /.*Data$/
+};
+
+export const actionsData = {
+  login: action('login')
+};
+
+export const inputData = {
+  companyList: [
+    { companyName: 'LG CNS', companyCode: 'GUC100' },
+    { companyName: 'LG UCAP', companyCode: 'GUC101' }
+  ] as Company[]
+};
+
+export const Default = () => ({
+  component: LoginComponent,
+  props: {
+    companyList: inputData.companyList,
+    login: actionsData.login
+  }
+});
+
+export const InputContents = () => ({
+  component: LoginComponent,
+  props: {
+    companyList: inputData.companyList,
+    companyCode: 'GUC100',
+    loginId: 'test-loginid',
+    // loginPw: '111111',
+    login: actionsData.login
+  }
+});