diff --git a/docs/index.html b/docs/index.html
index 7d1d2da..d22f869 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -38,12 +38,12 @@
   </head>
 
   <body>
-    <div class="wrapper">
+    <div id="nescss" class="wrapper">
       <header>
         <h1><i class="snes-jp-logo brand"></i>NES.css</h1>
         <p>NES-style CSS Framework.</p>
       </header>
-      <main id="nescss">
+      <main>
         <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
           <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
           <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
@@ -79,12 +79,13 @@
               <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
             </section>
             <section class="samplecode" v-show="sample.showCode">
-              <button type="button" class="nes-btn copycode" @click="copy(sample.title)">copy</button>
+              <button type="button" class="nes-btn copycode" @click="copy($event, sample.title)">copy</button>
               <pre><code class="html">{{ sample.code }}</code></pre>
             </section>
           </section>
         </section>
 
+        <!-- Members -->
         <section class="topic">
           <h2 id="members"><a href="#members">#</a>Members</h2>
           <section class="coreteam">
@@ -142,6 +143,7 @@
           </section>
         </section>
 
+        <!-- Articles -->
         <section class="articles">
             <h2 id="articles"><a href="#articles">#</a>Articles</h2>
             <article v-for="article in articles">
@@ -158,6 +160,11 @@
           <a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
         </p>
       </footer>
+
+      <!-- Copied balloon -->
+      <div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
+        <p>copied!!</p>
+      </div>
     </div>
   </body>
   <script src="./script.js"></script>
diff --git a/docs/script.js b/docs/script.js
index 1e3834f..1ba6442 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -208,6 +208,11 @@ new Vue({
       contributors,
       articles,
       animateOctocat: false,
+      copiedBalloon: {
+        display: 'none',
+        top: 0,
+        left: 0,
+      },
     };
   },
   filters: {
@@ -221,7 +226,9 @@ new Vue({
     hljs.initHighlightingOnLoad();
   },
   methods: {
-    copy(id) {
+    copy(event, id) {
+      this.showCopiedBalloon(event.pageY, event.pageX);
+
       const fake = document.createElement('textarea');
       fake.value = this.collection.find(a => a.title === id).code;
       fake.setAttribute('readonly', '');
@@ -240,5 +247,15 @@ new Vue({
     stopAnimate() {
       this.animateOctocat = false;
     },
+    showCopiedBalloon(top, left) {
+      this.copiedBalloon = {
+        display: 'block',
+        top: `${top - 100}px`,
+        left: `${left - 180}px`,
+      };
+      setTimeout(() => {
+        this.copiedBalloon.display = 'none';
+      }, 1000);
+    },
   },
 });
diff --git a/docs/style.css b/docs/style.css
index 28b6185..2d2265b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -80,7 +80,7 @@ section.showcase > section.samplecode {
 section.showcase > section.samplecode > pre code {
   font-size: 13px;
   line-height: 1.5;
-  padding: 1rem;
+  padding: 1.5rem;
 }
 
 .item {
@@ -96,6 +96,15 @@ section.showcase > section.samplecode > pre code {
   max-width: 400px;
 }
 
+/* Copied balloon */
+.nes-balloon.copied-balloon {
+  position: absolute;
+  display: none;
+  padding: 1rem;
+  box-shadow: 0 5px 20px 5px rgba(0,0,0,.6);
+  z-index: 1;
+}
+
 /* Topic */
 h3.topic-title {
   display: flex;
