diff --git a/app/assets/img/codesandbox.svg b/app/assets/img/codesandbox.svg
new file mode 100644
index 0000000..1264e39
--- /dev/null
+++ b/app/assets/img/codesandbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="0.87em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z" fill="#000"/><rect x="0" y="0" width="256" height="296" fill="rgba(0, 0, 0, 0)" /></svg>
\ No newline at end of file
diff --git a/app/constant/template.js b/app/constant/template.js
index 32c6ed6..5f2aebf 100644
--- a/app/constant/template.js
+++ b/app/constant/template.js
@@ -9,7 +9,7 @@ const defaultWidget = `<smart-widget title="Widget Title">
 </smart-widget>
 `
 
-const advanedWidget = `// 1. With additional fullscreen button
+const advanedWidget = `<!-- // 1. With additional fullscreen button -->
 <smart-widget title="With additional fullscreen button" fullscreen>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -18,7 +18,7 @@ const advanedWidget = `// 1. With additional fullscreen button
   </p>
 </smart-widget>
 
-// 2. Widget with Editbox & Footer
+<!-- 2. Widget with Editbox & Footer -->
 <smart-widget title="Widget with Editbox & Footer">
   <template slot="editbox">
     <div class="widget-alert">
@@ -37,7 +37,7 @@ const advanedWidget = `// 1. With additional fullscreen button
   </template>
 </smart-widget>
 
-// 3. Widget with custom toolbar
+<!-- 3. Widget with custom toolbar -->
 <smart-widget title="Widget with custom toolbar">
   <template slot="toolbar">
     <div style="margin: 0 12px;">
diff --git a/app/views/index.vue b/app/views/index.vue
index e8f348d..9b435b2 100644
--- a/app/views/index.vue
+++ b/app/views/index.vue
@@ -24,8 +24,8 @@
       </div>
       <div class="example-code">
         <div class="example-link">
-          <a href="https://jsfiddle.net/xiaoluoboding/u8yy1s5w/" target="_blank">
-            <img :src="require('@/assets/img/jsfiddle.svg')" alt="View On Jsfiddle" v-tooltip="tooltipOptions">
+          <a :href="defaultUrl" target="_blank">
+            <img :src="codesandboxIcon" alt="View On CodeSandbox" v-tooltip="tooltipOptions">
           </a>
         </div>
         <code-block lang="html" :sourcecode="defaultWidget" />
@@ -78,8 +78,8 @@
       </div>
       <div class="example-code">
         <div class="example-link">
-          <a href="https://jsfiddle.net/xiaoluoboding/g87pkf3s/" target="_blank">
-            <img :src="require('@/assets/img/jsfiddle.svg')" alt="View On Jsfiddle" v-tooltip="tooltipOptions">
+          <a :href="advanedUrl" target="_blank">
+            <img :src="codesandboxIcon" alt="View On Jsfiddle" v-tooltip="tooltipOptions">
           </a>
         </div>
         <code-block lang="html" :sourcecode="advanedWidget" />
@@ -113,8 +113,8 @@
       </div>
       <div class="example-code">
         <div class="example-link">
-          <a href="https://jsfiddle.net/xiaoluoboding/kuxq1fb8/" target="_blank">
-            <img :src="require('@/assets/img/jsfiddle.svg')" alt="View On Jsfiddle" v-tooltip="tooltipOptions">
+          <a :href="gridUrl" target="_blank">
+            <img :src="codesandboxIcon" alt="View On Jsfiddle" v-tooltip="tooltipOptions">
           </a>
         </div>
         <el-row>
@@ -136,6 +136,7 @@
 
 <script>
 import CodeBlock from '@/components/CodeBlock'
+import codesandboxIcon from '@/assets/img/codesandbox.svg'
 
 import {
   placeholder,
@@ -157,7 +158,7 @@ export default {
         { x: 8, y: 0, w: 4, h: 4, i: '2' }
       ],
       tooltipOptions: {
-        content: 'View On Jsfiddle',
+        content: 'View On CodeSandbox',
         placement: 'left-start',
         classes: ['stand'],
         offset: 6,
@@ -165,7 +166,11 @@ export default {
           show: 300,
           hide: 300
         }
-      }
+      },
+      codesandboxIcon,
+      defaultUrl: 'https://codesandbox.io/s/vuesmartwidget-default-2ghmi?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview',
+      advanedUrl: 'https://codesandbox.io/s/vuesmartwidget-advanced-8i7x0?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview',
+      gridUrl: 'https://codesandbox.io/s/vuesmartwidget-grid-dgf9d?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview'
     }
   },
   created () {
@@ -221,7 +226,7 @@ export default {
         top: 0;
         right: 0;
         font-size: 14px;
-        padding: 4px 8px;
+        padding: 8px;
         z-index: 2;
         a {
           text-decoration: none;