diff --git a/web-app/src/containers/Login/index.tsx b/web-app/src/containers/Login/index.tsx
new file mode 100644
index 00000000..ef0727f1
--- /dev/null
+++ b/web-app/src/containers/Login/index.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { Button } from '@alifd/next'
+
+interface Props {
+  onGitHubLogin(e: any): void
+}
+
+const styles = {
+  page: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: window.innerHeight - 20,
+  },
+}
+
+export const LoginPage = (props: Props) => (
+  <div style={styles.page}>
+    <div>Login</div>
+    <Button onClick={props.onGitHubLogin}>Sign in With GitHub</Button>
+  </div>
+)
+
+export default () => (
+  <LoginPage
+    onGitHubLogin={(e: any) => {
+      const { value } = e.target
+      console.log('value', value)
+    }}
+  />
+)
diff --git a/web-app/stories/Login.stories.tsx b/web-app/stories/Login.stories.tsx
new file mode 100644
index 00000000..b2e74487
--- /dev/null
+++ b/web-app/stories/Login.stories.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+import { LoginPage } from '../src/containers/Login'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+storiesOf('Login', module)
+  .addDecorator(SideBarDecorator)
+  .add('Page', () => <LoginPage onGitHubLogin={action('onGitHubLogin')} />)