diff --git a/examples/basic/src/components/Alert.mdx b/examples/basic/src/components/Alert.mdx
index bf7d408d9..914246b42 100644
--- a/examples/basic/src/components/Alert.mdx
+++ b/examples/basic/src/components/Alert.mdx
@@ -4,6 +4,8 @@ import { Alert } from './Alert'
 export const meta = doc('Alert')
   .category('Components')
 
+# Alert
+
 ## Basic usage
 
 <Alert>Some message</Alert>
diff --git a/examples/basic/src/components/Button.mdx b/examples/basic/src/components/Button.mdx
index 3f36bcbac..69d665cda 100644
--- a/examples/basic/src/components/Button.mdx
+++ b/examples/basic/src/components/Button.mdx
@@ -6,4 +6,6 @@ export const meta = doc('Button')
 
 # Button
 
+## Basic usage
+
 <Button>Click me</Button>
diff --git a/examples/basic/src/hocs/withProps.doc.jsx b/examples/basic/src/hocs/withProps.doc.jsx
deleted file mode 100644
index 71c789de4..000000000
--- a/examples/basic/src/hocs/withProps.doc.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { doc } from 'docz'
-
-doc('withProps')
-  .category('Hocs')
-  .section(() => <div>This section talk about withProps hoc</div>)
diff --git a/examples/basic/src/hocs/withProps.mdx b/examples/basic/src/hocs/withProps.mdx
new file mode 100644
index 000000000..cdd2c8477
--- /dev/null
+++ b/examples/basic/src/hocs/withProps.mdx
@@ -0,0 +1,8 @@
+import { doc } from 'docz'
+
+export const meta = doc('withProp')
+  .category('Hocs')
+
+# withProps
+
+This section talk about withProps hoc
diff --git a/examples/basic/src/index.mdx b/examples/basic/src/index.mdx
index 8c07e81d0..d55fce3e4 100644
--- a/examples/basic/src/index.mdx
+++ b/examples/basic/src/index.mdx
@@ -4,7 +4,8 @@ export const meta = doc('Overview')
   .route('/')
   .order(1)
 
-## Introduction
+# Introduction
+
 A design system can help establish a common vocabulary between everyone in an organization. That’s why I’ve spent a great deal of time coming up with structure and naming for Vue Design System that would make sense. To start opening it up, let’s go through each layer in detail and what the terms mean:
 
 - *Principles* are the foundation of the whole system. They form the basis of a good product and help the team with decision making. They are there to guide you and your team when working with the myriad parts of the system and help you do better and more informed decisions.
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
index 1ed7b9207..a78d54993 100644
--- a/packages/docz-core/package.json
+++ b/packages/docz-core/package.json
@@ -51,8 +51,11 @@
     "resolve": "^1.7.1",
     "shelljs": "^0.8.1",
     "thread-loader": "^1.1.5",
+    "to-vfile": "^4.0.0",
     "ulid": "^2.3.0",
     "unified": "^6.2.0",
+    "unist-util-find": "^1.0.1",
+    "unist-util-is": "^2.1.2",
     "url-loader": "^1.0.1",
     "webpack": "^4.7.0",
     "webpack-chain": "^4.6.0",
diff --git a/packages/docz-theme-default/src/components/Doc.tsx b/packages/docz-theme-default/src/components/Doc.tsx
index c34059926..25cc18d6d 100644
--- a/packages/docz-theme-default/src/components/Doc.tsx
+++ b/packages/docz-theme-default/src/components/Doc.tsx
@@ -1,7 +1,6 @@
 import React, { SFC } from 'react'
 import styled from 'react-emotion'
 import { DocObj } from 'docz'
-import * as Icon from 'react-feather'
 
 import * as colors from '../styles/colors'
 
@@ -12,7 +11,7 @@ const Container = styled('div')`
   margin: 0 auto;
 `
 
-const Title = styled('h2')`
+const Title = styled('h1')`
   position: relative;
   font-size: 48px;
   font-weight: 200;
@@ -29,29 +28,8 @@ const Title = styled('h2')`
   }
 `
 
-const IconLink = styled(Icon.Link)`
-  margin-right: 10px;
-`
-
-const Filepath = styled('div')`
-  display: flex;
-  align-items: center;
-  margin: 15px 0 0;
-  color: ${colors.GRAY_MEDIUM};
-`
-
-export const Doc: SFC<DocObj> = ({
-  id,
-  name,
-  filepath,
-  component: Component,
-}) => (
+export const Doc: SFC<DocObj> = ({ id, component: Component }) => (
   <Container key={id}>
-    <Title>{name}</Title>
-    <Filepath>
-      <IconLink size={15} />
-      <code>{filepath}</code>
-    </Filepath>
-    <Component />
+    <Component components={{ h1: Title }} />
   </Container>
 )
diff --git a/packages/docz/src/index.ts b/packages/docz/src/index.ts
index 17e5aa3ad..696117d0f 100644
--- a/packages/docz/src/index.ts
+++ b/packages/docz/src/index.ts
@@ -1,4 +1,4 @@
-export { Doc, DocObj, Entry, Section } from './Doc'
+export { Doc, DocObj, Entry } from './Doc'
 export { doc } from './Doc'
 export { Docs } from './Docs'
 export { theme } from './theme'
diff --git a/packages/docz/src/types.d.ts b/packages/docz/src/types.d.ts
index b4a11280b..7e5e48e83 100644
--- a/packages/docz/src/types.d.ts
+++ b/packages/docz/src/types.d.ts
@@ -1,2 +1,2 @@
 declare module '@sindresorhus/slugify'
-declare module 'pascalcase'
+declare module 'pascalcase''