diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index cc379206a8..ffc7d966fe 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -138,7 +138,6 @@ section.code-box-meta p {
   line-height: 18px;
   opacity: 0.5;
   text-align: center;
-  transform: rotate(90deg);
   transition: all 0.3s;
   color: #999;
   background: #fff;
@@ -147,7 +146,8 @@ section.code-box-meta p {
 }
 
 .code-box.expand .collapse {
-  transform: rotate(-90deg);
+  color: shade(#2db7f5, 20%);
+  transform: rotate(-180deg);
 }
 
 .code-box .collapse:hover {
@@ -155,15 +155,12 @@ section.code-box-meta p {
 }
 
 .code-box .highlight-wrapper {
-  max-height: 0;
-  opacity: 0;
+  display: none;
   overflow: auto;
-  transition: all 0.4s ease;
   border-radius: 0 0 6px 6px;
 }
 .code-box .highlight-wrapper-expand {
-  max-height: 500px;
-  opacity: 1;
+  display: block;
 }
 
 .code-box .highlight {
diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
index c3f47a735e..7bab10801d 100644
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import { Icon } from 'antd';
 import EditButton from './EditButton';
 
 export default class Demo extends React.Component {
@@ -76,10 +77,7 @@ export default class Demo extends React.Component {
             <EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={meta.filename} />
           </div>
           {introChildren}
-          <span className="collapse anticon anticon-circle-o-right"
-            onClick={this.handleCodeExapnd}
-            unselectable="none"
-          />
+          <Icon type="down-circle-o" title="Show Code" className="collapse" onClick={this.handleCodeExapnd} />
         </section>
         <section className={highlightClass}
           key="code"