diff --git a/README.CN.md b/README.CN.md
index 9cf06893b..937fa328a 100644
--- a/README.CN.md
+++ b/README.CN.md
@@ -1,7 +1,6 @@
 [English](./README.md) | 简体中文 
 
 <p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
-<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
 <h2 align="center">Omi - 前端跨框架跨平台框架</h2>
 <p align="center"><b>基于 Web Components 跨框架并支持小程序开发(omi-kbone)</b></p>
 
diff --git a/README.md b/README.md
index f75a608d1..8a3334612 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,7 @@
 English | [简体中文](./README.CN.md) 
 
 <p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
-<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
 <h2 align="center">Omi -  Front End Cross-Frameworks Framework</h2>
-<p align="center">Merge Web Components, JSX, Virtual DOM, Functional style, observe or Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.</p>
 
 ## With TypeScript
 
diff --git a/index.html b/index.html
index 53013de9b..2fac6cca6 100644
--- a/index.html
+++ b/index.html
@@ -320,32 +320,70 @@
   </div>
   <pre style="position:absolute;left:40px;top:40px;transform:rotateZ(5deg);pointer-events: none;text-transform:none;">
       <code>
-import { define, render } from 'omi'
+import { tag, WeElement, h, extractClass } from 'omi'
+import * as css from './index.scss'
 
-class Store {
-  data = {
-    count: 1
-  }
-  sub = () => {
-    this.data.count--
-  }
-  add = () => {
-    this.data.count++
-  }
+interface Props {
+  size?: 'medium' | 'small' | 'mini',
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+  plain?: boolean,
+  round?: boolean,
+  circle?: boolean,
+  loading?: boolean,
+  disabled?: boolean,
+  icon?: string,
+  autofocus?: boolean,
+  nativeType?: 'button' | 'submit' | 'reset',
+  block?: boolean
+  text?: string
 }
 
-define('my-counter', _ =>
-  &lt;&gt;
-    &lt;button onClick={_.store.sub}&gt;-&lt;/button&gt;
-    &lt;span&gt;{_.store.data.count}&lt;/span&gt;
-    &lt;button onClick={_.store.add}&gt;+&lt;/button&gt;
-  &lt;/&gt;, {
-    use: ['count']
-  }
-))
+@tag('o-button')
+export default class Button extends WeElement&lt;Props&gt;{
+  static css = css
 
-render(&lt;my-counter /&gt;, 'body', new Store)
-       </code>
+  static defaultProps = {
+    plain: false,
+    round: false,
+    circle: false,
+    loading: false,
+    disabled: false,
+    autofocus: false,
+    nativeType: 'button',
+    block: false
+  }
+
+  static propTypes = {
+    size: String,
+    type: String,
+    plain: Boolean,
+    round: Boolean,
+    circle: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    icon: String,
+    autofocus: Boolean,
+    nativeType: String,
+    block: Boolean,
+    text: String
+  }
+
+  render(props) {
+    return &lt;button disabled={props.disabled} {...extractClass(props, 'o-button', {
+      ['o-button-' + props.type]: props.type,
+      ['o-button-' + props.size]: props.size,
+      'is-plain': props.plain,
+      'is-round': props.round,
+      'is-circle': props.circle,
+      'is-disabled': props.disabled,
+      'is-block': props.block
+    })} type={props.nativeType} &gt;
+      {props.loading && &lt;i class='icon-loading'&gt;&lt;/i&gt;}
+      {props.text}
+      &lt;slot&gt;&lt;/slot&gt;
+    &lt;/button&gt;
+  }
+}</code>
   </pre>
 
 
@@ -369,4 +407,4 @@ render(&lt;my-counter /&gt;, 'body', new Store)
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file