diff --git a/app.js b/app.js
new file mode 100644
index 0000000..901abf5
--- /dev/null
+++ b/app.js
@@ -0,0 +1,27 @@
+const BuchimgaePic = document.getElementById("Buchimgaepic");
+const Buchimgae = document.getElementById("Buchimgae");
+const BuchimgaeExpl = document.getElementById("expl");
+const BuchimgaeIllu = document.getElementById("illu");
+const BuchimgaePhoto = document.getElementById("photo");
+
+Buchimgae.addEventListener("click", function () {
+  Buchimgae.style.display = "none";
+  BuchimgaePic.style.display = "inline-block";
+  BuchimgaeExpl.style.display = "inline-block";
+});
+
+BuchimgaePic.addEventListener("click", function () {
+  BuchimgaePic.style.display = "none";
+  BuchimgaeExpl.style.display = "none";
+  Buchimgae.style.display = "inline-block";
+});
+
+BuchimgaeIllu.addEventListener("click", function () {
+  BuchimgaeIllu.style.display = "none";
+  BuchimgaePhoto.style.display = "inline-block";
+});
+
+BuchimgaePhoto.addEventListener("click", function () {
+  BuchimgaePhoto.style.display = "none";
+  BuchimgaeIllu.style.display = "inline-block";
+});
diff --git a/img/.DS_Store b/img/.DS_Store
index 04473de..bc94b50 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/Cms Illus-5.jpg b/img/Cms Illus-5.jpg
new file mode 100644
index 0000000..3606e2f
Binary files /dev/null and b/img/Cms Illus-5.jpg differ
diff --git a/img/Cms Illus-6.jpg b/img/Cms Illus-6.jpg
new file mode 100644
index 0000000..7f8e65c
Binary files /dev/null and b/img/Cms Illus-6.jpg differ
diff --git a/img/buchimgae_l.png b/img/buchimgae_l.png
new file mode 100644
index 0000000..876942c
Binary files /dev/null and b/img/buchimgae_l.png differ
diff --git a/img/buchimgae_m.png b/img/buchimgae_m.png
new file mode 100644
index 0000000..23d8191
Binary files /dev/null and b/img/buchimgae_m.png differ
diff --git a/img/buchimgae_s.png b/img/buchimgae_s.png
new file mode 100644
index 0000000..2336975
Binary files /dev/null and b/img/buchimgae_s.png differ
diff --git a/img/pancake2.jpg b/img/pancake2.jpg
new file mode 100644
index 0000000..ba5858c
Binary files /dev/null and b/img/pancake2.jpg differ
diff --git a/img/ppl_l.png b/img/ppl_l.png
new file mode 100644
index 0000000..1e0a973
Binary files /dev/null and b/img/ppl_l.png differ
diff --git a/img/sharing.jpg b/img/sharing.jpg
new file mode 100644
index 0000000..7d555bd
Binary files /dev/null and b/img/sharing.jpg differ
diff --git a/index.css b/index.css
index 3710837..00984e1 100644
--- a/index.css
+++ b/index.css
@@ -12,7 +12,7 @@ body {
 }
 
 .container {
-  width: 50%;
+  width: 60%;
   height: 100%;
   display: block;
   margin: 0 auto;
@@ -43,7 +43,7 @@ body {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 7.5%;
+  margin-bottom: 4.5%;
 }
 
 .ani {
@@ -52,7 +52,7 @@ body {
 }
 
 .ani img {
-  /* width: 80%; */
+  width: 70%;
   border: 1px solid black;
 }
 .text {
@@ -67,8 +67,7 @@ body {
   line-height: 135%;
 }
 
-.row3 .text,
-.row5 .text {
+.row3 .text {
   width: 50%;
   border-radius: 50%;
   border: 3px red solid;
@@ -76,11 +75,51 @@ body {
   margin: 0 auto;
 }
 
-.row3 .text p,
-.row5 .text p {
+.row3 .text p {
   text-align: center;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
-  font-size: 2rem;
+  font-size: 1.4rem;
   color: red;
-  line-height: 1;
+  line-height: 0;
+}
+
+#question {
+  font-size: 1.2rem;
+}
+
+.row5 .text span,
+.row5 .ani {
+  cursor: pointer;
+}
+
+#illu {
+}
+
+#photo {
+  display: none;
+}
+
+#Buchimgae {
+  text-decoration: dotted underline;
+  display: inline-block;
+}
+
+#Buchimgaepic {
+  display: none;
+  padding: 0;
+  margin: 0;
+  width: 20%;
+}
+
+#expl {
+  position: absolute;
+  display: none;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  background-color: white;
+  color: magenta;
+}
+
+#Buchimgaepic img {
+  width: 100%;
 }
diff --git a/index.html b/index.html
index bfc41f1..48367cd 100644
--- a/index.html
+++ b/index.html
@@ -6,11 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Testinggg</title>
     <link rel="stylesheet" href="index.css" media="only screen" />
-    <!-- <link
+    <link
       rel="stylesheet"
       media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)"
-      href="./laptop_big.css"
-    /> -->
+      href="./laptop_s.css"
+    />
   </head>
   <body>
     <div class="container">
@@ -52,8 +52,8 @@
           <div class="ani"><img src="./img/cliche2.png" /></div>
           <div class="text">
             <p>
-              If we think of the word publishing, we're prone to be stuck with
-              an idea that we work for some documents in Adobe applications,
+              If we think of the word <i>publishing</i>, we're prone to be stuck
+              with an idea of working on some documents in Adobe applications,
               then print, then glue.
             </p>
           </div>
@@ -61,8 +61,8 @@
         <div class="row row3">
           <!-- <div class="ani"></div> -->
           <div class="text">
-            <p>Could be more than this...</p>
-            <p>Various forms of actions...</p>
+            <p>BUT it could be more than this..</p>
+            <p>The forms of actions should be various...</p>
             <p>All-together!</p>
           </div>
         </div>
@@ -71,45 +71,63 @@
           <div class="text">
             <p>
               Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
-              publication is borned when every single different page gets glued
-              together. Oh wait, it's just like Buchimgae (Korean pancake)
-              making! All the different ingredients gets mingled and binded in
-              the batter!
+              publication is born when every single different page gets glued
+              together. <span id="question">Oh wait, glue?</span>
             </p>
           </div>
         </div>
         <div class="row row5">
-          <!-- <div class="ani"></div> -->
-          <div class="text"><p>Glued...?</p></div>
+          <div class="ani">
+            <img src="./img/pancake2.jpg" id="illu" />
+            <img src="./img/buchimgae_l.png" id="photo" />
+          </div>
+          <div class="text">
+            <p>
+              Can <span id="Buchimgae">Buchimgae</span
+              ><span id="Buchimgaepic">
+                <img src="./img/buchimgae_s.png" /></span
+              ><span id="expl">Buchimage is Korean pancake.</span> be a
+              publication, involving with the glue? When making the pancake, all
+              the different ingredients gets mingled and binded through the
+              batter!
+            </p>
+          </div>
         </div>
 
         <div class="row row6">
-          <div class="ani"><img src="./img/ppl.png" /></div>
+          <div class="ani"><img src="./img/sharing.jpg" /></div>
           <div class="text">
             <p>
-              True! Also in our culture, we share Buchimgae together! We don't
-              usually have one pancake individually. Cooking and tearing the
-              pancake together, we share so many things.
+              Also in Korea, we share Buchimgae together! We don't usually have
+              one pancake per person. We tear the hot pancake together,using
+              chopsticks..! That's the unique beauty of Buchimgae.
             </p>
           </div>
         </div>
-
         <div class="row row7">
           <div class="ani"><img src="./img/habitat_process.jpg" /></div>
           <div class="text">
             <p>
-              What if we create a moment of collective book binding? Then
-              cooking Buchingae together! Everyone makes a page and bind
-              together!
+              What if we create a moment of collective book binding?<br />We
+              could also host a small Buchimgae cooking session! In Korea we
+              actually say Buchimage one/two/three/.. page when counting the
+              number of it. Just like a book..! This could be another format of
+              the (book) binding.
             </p>
           </div>
         </div>
-        <div class="row row8">
-          <div class="ani"><img src="./img/relay.png" /></div>
-          <div class="text"><p>Bind in a relay format?!</p></div>
+      </div>
+      <div class="row row8">
+        <div class="ani"><img src="./img/relay.png" /></div>
+        <div class="text">
+          <p>
+            Aha, everyone makes their own pages.<br />
+            Then bind them in a relay format?!
+          </p>
         </div>
       </div>
-      <div class="row row9">
+
+      <div class="row row8">
         <div class="ani"><img src="./img/italian.png" /></div>
         <div class="text">
           <p>
@@ -123,5 +141,6 @@
         </div>
       </div>
     </div>
+    <script src="./app.js"></script>
   </body>
 </html>