diff --git a/README.md b/README.md
index a13585b..e03b9c3 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ npm install -g @compositor/x0
 [build-badge]: https://img.shields.io/travis/c8r/x0/master.svg?style=flat-square
 [build]: https://travis-ci.org/c8r/x0
 
-<img src='docs/demo.gif' class='demo-image' />
+<img src='docs/hello-x0.gif' class='demo-image' />
 
 ## Features
 
diff --git a/demo/count.js b/demo/count.js
new file mode 100644
index 0000000..192f2d4
--- /dev/null
+++ b/demo/count.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default class extends React.Component {
+  static getInitialProps = async () => {
+    return {
+      asyncProps: 'hello'
+    }
+  }
+
+  render () {
+    const {
+      count,
+      update
+    } = this.props
+
+    return (
+      <div>
+        <Link to='/'>Home</Link>
+        <Link to='/about'>About</Link>
+        <h1>Hello x0</h1>
+        <samp>{count}</samp>
+        <button onClick={e => update(dec)}>-</button>
+        <button onClick={e => update(inc)}>+</button>
+      </div>
+    )
+  }
+}
+
+const dec = s => ({ count: s.count - 1 })
+const inc = s => ({ count: s.count + 1 })
diff --git a/demo/index.js b/demo/index.js
index 192f2d4..fc768ff 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,31 +1,25 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Logo } from '@compositor/logo'
+import { Box, Text, Heading } from 'rebass'
 
-export default class extends React.Component {
-  static getInitialProps = async () => {
-    return {
-      asyncProps: 'hello'
-    }
-  }
-
-  render () {
-    const {
-      count,
-      update
-    } = this.props
-
-    return (
-      <div>
-        <Link to='/'>Home</Link>
-        <Link to='/about'>About</Link>
-        <h1>Hello x0</h1>
-        <samp>{count}</samp>
-        <button onClick={e => update(dec)}>-</button>
-        <button onClick={e => update(inc)}>+</button>
-      </div>
-    )
-  }
-}
-
-const dec = s => ({ count: s.count - 1 })
-const inc = s => ({ count: s.count + 1 })
+export default props =>
+  <Box
+    px={4}
+    pt={0}
+    pb={7}
+    color='white'
+    bg='black'>
+    <Logo
+      horizontal
+      size={256}
+      color='cyan'
+      backgroundColor='black'
+    />
+    <Heading
+      is='h1'
+      px={4}
+      ml={2}
+      fontSize={7}>
+      <Text is='span' color='cyan'>Hello</Text> x0
+    </Heading>
+  </Box>
diff --git a/docs/demo.gif b/docs/demo.gif
deleted file mode 100644
index 55bb6ca..0000000
Binary files a/docs/demo.gif and /dev/null differ
diff --git a/docs/demo.mp4 b/docs/demo.mp4
deleted file mode 100644
index decca5e..0000000
Binary files a/docs/demo.mp4 and /dev/null differ
diff --git a/docs/hello-x0.gif b/docs/hello-x0.gif
new file mode 100644
index 0000000..ff6cb4b
Binary files /dev/null and b/docs/hello-x0.gif differ
diff --git a/docs/hello-x0.mp4 b/docs/hello-x0.mp4
new file mode 100644
index 0000000..2884077
Binary files /dev/null and b/docs/hello-x0.mp4 differ
diff --git a/docs/index.js b/docs/index.js
index aa68a59..52d8dc5 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -39,8 +39,8 @@ export default class extends React.Component {
               loop
               muted
               playsInline
-              poster='demo.gif'
-              src='demo.mp4'
+              poster='hello-x0.gif'
+              src='hello-x0.mp4'
             />
           </Box>
           <Pre>npm i -g @compositor/x0</Pre>