diff --git a/web-app/src/components/Checkbox/index.tsx b/web-app/src/components/Checkbox/index.tsx
deleted file mode 100644
index 6f3b583d..00000000
--- a/web-app/src/components/Checkbox/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react'
-import { Checkbox as AlifdCheckbox } from '@alifd/next'
-
-interface Props {
-  status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE'
-}
-
-const Checkbox = (props: Props) => {
-  const onChange = () => {
-    /* read only */
-  }
-
-  const checked = props.status === 'COMPLETE'
-
-  return <AlifdCheckbox checked={checked} onChange={onChange} />
-}
-
-export default Checkbox
diff --git a/web-app/src/components/Markdown/style.css b/web-app/src/components/Markdown/style.css
index fc4b764c..dd0dd2a0 100644
--- a/web-app/src/components/Markdown/style.css
+++ b/web-app/src/components/Markdown/style.css
@@ -6,7 +6,7 @@
   background-color: rgba(27, 31, 35, 0.05);
   color: black;
   border-radius: 0.3rem;
-  padding: 0rem 0.15rem;
+  padding: 0.15rem 0.3rem;
   font-size: 80%;
   white-space: nowrap;
 }
diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx
index d8fbe9dd..1dd37cd4 100644
--- a/web-app/src/containers/Tutorial/components/Step.tsx
+++ b/web-app/src/containers/Tutorial/components/Step.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
-import Checkbox from '../../../components/Checkbox'
+import Icon from '../../../components/Icon'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
@@ -20,8 +20,8 @@ const styles = {
   content: {
     margin: 0,
   },
-  checkboxContainer: {
-    paddingTop: 2,
+  statusContainer: {
+    paddingTop: 0,
     width: '1rem',
   },
   options: {
@@ -41,8 +41,9 @@ const Step = (props: Props) => {
   return (
     <div>
       <div css={styles.card}>
-        <div css={styles.checkboxContainer}>
-          <Checkbox status={props.status} />
+        <div css={styles.statusContainer}>
+          {props.status === 'ACTIVE' && <Icon type="success-filling" size="small" style={{ color: 'lightgrey' }} />}
+          {props.status === 'COMPLETE' && <Icon type="success-filling" size="small" style={{ color: '#37B809' }} />}
         </div>
         <div>
           <Markdown>{props.content || ''}</Markdown>
diff --git a/web-app/stories/Checkbox.stories.tsx b/web-app/stories/Checkbox.stories.tsx
deleted file mode 100644
index ae1d1431..00000000
--- a/web-app/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { storiesOf } from '@storybook/react'
-import React from 'react'
-import Checkbox from '../src/components/Checkbox'
-import SideBarDecorator from './utils/SideBarDecorator'
-
-const styles = {
-  container: {
-    display: 'flex' as 'flex',
-    flexDirection: 'column' as 'column',
-  },
-}
-
-storiesOf('Components', module)
-  .addDecorator(SideBarDecorator)
-  .add('Checkboxes', () => (
-    <div css={styles.container}>
-      <span>
-        <Checkbox status="COMPLETE" /> Checked
-      </span>
-      <span>
-        <Checkbox status="INCOMPLETE" /> Unchecked
-      </span>
-    </div>
-  ))