diff --git a/demo/documentation/components/steps/enUS/content.md b/demo/documentation/components/steps/enUS/content.md
index e621730f6..ea1e2edf2 100644
--- a/demo/documentation/components/steps/enUS/content.md
+++ b/demo/documentation/components/steps/enUS/content.md
@@ -4,24 +4,30 @@
   :current="current"
   :status="currentStatus"
 >
-  <n-step
-    title="I Me Mine"
-    :content="content1"
-  />
-  <n-step
-    title="Let It Be"
-    :content="content2"
-
-  />
-  <n-step
-    title="Come Together"
-    :content="content3"
-  />
-  <n-step
-    title="Something"
-    :content="content4"
-
-  />
+  <n-step title="I Me Mine">
+    <div class="n-step-description">
+      <p>Al through the day, I me mine I me mine, I me mine</p>
+      <n-button :type="current === 1 ? currentStatus : null" size="small" @click="handleButton1Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Let It Be">
+    <div class="n-step-description">
+      <p>When I find myself in times of trouble Mother Mary comes to me</p>
+      <n-button :type="current === 2 ? currentStatus : null" size="small" @click="handleButton2Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Come Together">
+    <div class="n-step-description">
+      <p>Here come old flat top He come grooving up slowly</p>
+      <n-button :type="current === 3 ? currentStatus : null" size="small" @click="handleButton3Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Something">
+    <div class="n-step-description">
+      <p>Something in the way she moves Attracts me like no other lover</p>
+      <n-button :type="current === 4 ? currentStatus : null" size="small" @click="handleButton4Click">click me</n-button>
+    </div>
+  </n-step>
 </n-steps>
 
 <n-radio-group v-model="currentStatus" size="medium" name="basic">
@@ -79,66 +85,6 @@ export default {
         console.log('click 4, do something')
         this.current = 1
       }
-    },
-    content1 (h) {
-      return h(
-        'n-button',
-        {
-          props: {
-            type: this.current === 1 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton1Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content2 (h) {
-      return h(
-        'n-button',
-        {
-          props: {
-            type: this.current === 2 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton2Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content3 (h) {
-      return h(
-        'n-button',
-        {
-          props: {
-            type: this.current === 3 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton3Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content4 (h) {
-      return h(
-        'n-button',
-        {
-          props: {
-            type: this.current === 4 ? this.currentStatus : null,
-            size: "small"
-          },
-          on: {
-            click: this.handleButton4Click
-          }
-        },
-        ['click me']
-      )
     }
   }
 }
diff --git a/demo/documentation/components/steps/enUS/index.md b/demo/documentation/components/steps/enUS/index.md
index 5e75bf881..41821f1d9 100644
--- a/demo/documentation/components/steps/enUS/index.md
+++ b/demo/documentation/components/steps/enUS/index.md
@@ -6,6 +6,7 @@
 basic
 size
 vertical
+content
 ```
 
 ## Props
diff --git a/demo/documentation/components/steps/zhCN/content.md b/demo/documentation/components/steps/zhCN/content.md
index 98d643fa6..53d8c9f5e 100644
--- a/demo/documentation/components/steps/zhCN/content.md
+++ b/demo/documentation/components/steps/zhCN/content.md
@@ -4,28 +4,30 @@
   :current="current"
   :status="currentStatus"
 >
-  <n-step
-    title="I Me Mine"
-    description="All through the day, I me mine I me mine, I me mine"
-    :content="content1"
-  />
-  <n-step
-    title="Let It Be"
-    description="When I find myself in times of trouble Mother Mary comes to me"
-    :content="content2"
-
-  />
-  <n-step
-    title="Come Together"
-    description="Here come old flat top He come grooving up slowly"
-    :content="content3"
-  />
-  <n-step
-    title="Something"
-    description="Something in the way she moves Attracts me like no other lover"
-    :content="content4"
-
-  />
+  <n-step title="I Me Mine">
+    <div class="n-step-description">
+      <p>Al through the day, I me mine I me mine, I me mine</p>
+      <n-button :type="current === 1 ? currentStatus : null" size="small" @click="handleButton1Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Let It Be">
+    <div class="n-step-description">
+      <p>When I find myself in times of trouble Mother Mary comes to me</p>
+      <n-button :type="current === 2 ? currentStatus : null" size="small" @click="handleButton2Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Come Together">
+    <div class="n-step-description">
+      <p>Here come old flat top He come grooving up slowly</p>
+      <n-button :type="current === 3 ? currentStatus : null" size="small" @click="handleButton3Click">click me</n-button>
+    </div>
+  </n-step>
+  <n-step title="Something">
+    <div class="n-step-description">
+      <p>Something in the way she moves Attracts me like no other lover</p>
+      <n-button :type="current === 4 ? currentStatus : null" size="small" @click="handleButton4Click">click me</n-button>
+    </div>
+  </n-step>
 </n-steps>
 
 <n-radio-group v-model="currentStatus" size="medium" name="basic">
@@ -83,78 +85,6 @@ export default {
         console.log('click 4, do something')
         this.current = 1
       }
-    },
-    content1 (h) {
-      return h(
-        'n-button',
-        {
-          'class': {
-            'n-step-content-disable': false
-          },
-          props: {
-            type: this.current === 1 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton1Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content2 (h) {
-      return h(
-        'n-button',
-        {
-          'class': {
-            'n-step-content-disable': false
-          },
-          props: {
-            type: this.current === 2 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton2Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content3 (h) {
-      return h(
-        'n-button',
-        {
-          'class': {
-            'n-step-content-disable': false
-          },
-          props: {
-            type: this.current === 3 ? this.currentStatus : null,
-            size:"small"
-          },
-          on: {
-            click: this.handleButton3Click
-          }
-        },
-        ['click me']
-      )
-    },
-    content4 (h) {
-      return h(
-        'n-button',
-        {
-          'class': {
-            'n-step-content-disable': false
-          },
-          props: {
-            type: this.current === 4 ? this.currentStatus : null,
-            size: "small"
-          },
-          on: {
-            click: this.handleButton4Click
-          }
-        },
-        ['click me']
-      )
     }
   }
 }
diff --git a/demo/loaders/convertMd2Doc.js b/demo/loaders/convertMd2Doc.js
index 79266fede..4b2a1b8bc 100644
--- a/demo/loaders/convertMd2Doc.js
+++ b/demo/loaders/convertMd2Doc.js
@@ -18,7 +18,6 @@ function template (demos, demosLiteral, isSingleColumn = false) {
 }
 
 function parseDemos (demosLiteral, env) {
-  // console.log('parseDemos', demosLiteral, env)
   const demoNames = demosLiteral
     .split('\n')
     .map(demoName => demoName.trim())
diff --git a/demo/loaders/mdRenderer.js b/demo/loaders/mdRenderer.js
index dc608d3e2..2514cbd01 100644
--- a/demo/loaders/mdRenderer.js
+++ b/demo/loaders/mdRenderer.js
@@ -5,7 +5,6 @@ function createRenderer (wrapCodeWithCard = true) {
   const renderer = new marked.Renderer()
   const overrides = {
     table (header, body) {
-      // console.log('renderer', header, body)
       if (body) body = '<tbody class="n-table__tbody">' + body + '</tbody>'
       return '<n-table single-column>\n' +
         '<thead class="n-table__thead">\n' +
@@ -16,12 +15,10 @@ function createRenderer (wrapCodeWithCard = true) {
     },
 
     tablerow (content) {
-      // console.log('tablerow', content)
       return '<tr class="n-table__tr">\n' + content + '</tr>\n'
     },
 
     tablecell (content, flags) {
-      // console.log('tablecell', content, flags)
       const type = flags.header ? 'th' : 'td'
       const tag = flags.align
         ? '<' + type + ` class="n-table__${type}"` + ' align="' + flags.align + '">'
@@ -30,7 +27,6 @@ function createRenderer (wrapCodeWithCard = true) {
     },
 
     code: (code, language) => {
-      // console.log('code', code, language)
       const isLanguageValid = !!(language && hljs.getLanguage(language))
       if (!isLanguageValid) {
         throw new Error(`MdRendererError: ${language} is not valid for code`)
diff --git a/src/Steps/src/Step.vue b/src/Steps/src/Step.vue
index 34e62ce32..c5f697b6f 100644
--- a/src/Steps/src/Step.vue
+++ b/src/Steps/src/Step.vue
@@ -44,11 +44,10 @@
         <div v-if="!vertical" class="n-step-splitor" />
       </div>
       <div
-        v-if="description !== null || content !== null"
+        v-if="description !== null || $scopedSlots.default"
         class="n-step-content__description"
       >
-        <render :render="syntheticContent" />
-        <!-- {{description}} -->
+        <slot>{{ description }}</slot>
       </div>
     </div>
   </div>
@@ -61,7 +60,6 @@ import mdCheckmark from '../../_icons/md-checkmark'
 import themeable from '../../_mixins/themeable'
 
 import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
-import render from '../../_utils/vue/render'
 export default {
   name: 'NStep',
   inject: {
@@ -73,8 +71,7 @@ export default {
     NIcon,
     mdCheckmark,
     mdClose,
-    NIconSwitchTransition,
-    render
+    NIconSwitchTransition
   },
   mixins: [ themeable ],
   props: {
@@ -93,10 +90,6 @@ export default {
       type: String,
       default: null
     },
-    content: {
-      type: Function,
-      default: null
-    },
     index: {
       type: [Number, String],
       default: null
@@ -126,14 +119,6 @@ export default {
         return 'wait'
       }
       return null
-    },
-    syntheticContent () {
-      if (this.content === null) {
-        return this.description
-      } else {
-        // debugger
-        return this.content
-      }
     }
   }
 }
diff --git a/test.html b/test.html
deleted file mode 100644
index 12f06cba1..000000000
--- a/test.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <meta content="ie=edge" http-equiv="X-UA-Compatible">
-    <title>Document</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
-    <style type="text/css">
-    .box {
-      width: 200px;
-      border: solid 1px red;
-      /* height: auto */
-    }
-    .box:after{
-      content: '';
-      clear: both;
-      line-height: 0;
-      display: block;
-    }
-
-    .container1 {
-      width: 150px;
-      height: 100px;
-      border: 1px solid gold;
-      float: left;
-    }
-
-    .container2 {
-      width: 100px;
-      height: 100px;
-      border: 1px solid green;
-      float: left;
-    }
-    .container2:after{
-      content: '';
-      clear: both;
-      line-height: 0;
-      display: block;
-    }
-  </style>
-  </head>
-
-  <body>
-    <div id="box">
-
-      <div class="box">
-        <div class="container1"></div>
-        <div class="container2"></div>
-      </div>
-      <input id="test" type="text" name="address1" v-model="message">
-      <div>{{message}}</div>
-      <input type="text" name="address1" value="value1from">
-
-    </div>
-  </body>
-  <script>
-   let vue = new Vue({
-    el: '#box',
-    data: {
-      message: '{}'
-    },
-    filters:{
-      parse: function(arg){
-        return JSON.parse(arg)
-      }
-    }
-    })
-  </script>
-</html>