diff --git a/public/default.css b/public/default.css
index 6185690..c5ef7f4 100644
--- a/public/default.css
+++ b/public/default.css
@@ -6,34 +6,39 @@
 }
 
 body {
-   color: white;
-   font-size: 15px;
-   line-height: 1.4;
-   font-family: 'Noto Sans KR', sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: white;
+    font-size: 15px;
+    line-height: 1.4;
+    font-family: 'Noto Sans KR', sans-serif;
 }
 
 .bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%);
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 100vh;
-  width: 100vw;
-  /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
-  z-index: -1; // this is optional
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%);
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100vh;
+    width: 100vw;
+    /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
+    z-index: -1; // this is optional
 }
 
 .popup {
-  display: none;
-  position: absolute;
-  max-width: 800px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(255, 255, 255, 0.3);
-  z-index: 100;
+    display: none;
+    position: absolute;
+    max-width: 800px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.3);
+    z-index: 100;
 }
 
 .content {
@@ -46,18 +51,18 @@ body {
     top: 20px;
     right: 15px;
     z-index: 2;
-    writing-mode: vertical-lr;	
+    writing-mode: vertical-lr;
 }
 
-.list {
+.first {
     position: fixed;
     top: 20px;
-    right: 37.5px;
+    right: 18px;
     z-index: 2;
     writing-mode: vertical-lr;
 }
 
-.prd {
+.second {
     position: fixed;
     top: 20px;
     right: 40px;
@@ -65,6 +70,18 @@ body {
     writing-mode: vertical-lr;
 }
 
+.third {
+    position: fixed;
+    top: 20px;
+    right: 60px;
+    z-index: 2;
+    writing-mode: vertical-lr;
+}
+
+audio {
+    cursor: pointer;
+}
+
 .sub {
     position: fixed;
     bottom: 15px;
@@ -98,7 +115,7 @@ body {
 a,
 a:visited,
 a:hover,
-a:focus
+a:focus,
 a:active {
     color: white;
     text-decoration: none;
@@ -170,7 +187,7 @@ ol, ul {
 }
 
 .submit li {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }
 
 .submit li li {
@@ -185,73 +202,89 @@ ol, ul {
     overflow: hidden;
 }
 
-.noscroll * { touch-action: none;
+.noscroll * {
+    touch-action: none;
 }
 
-button {
-    background-color: transparent;
-    border: 1px white solid;
-    color: white;
+small {
+    margin-top: 5px;
+    display: block;
+}
+
+canvas {
+    margin: 5px 0 5px 0;
 }
 
 .items {
-   border-top: 1.5px solid white;
-   padding: 10px 0 10px 0;
+    padding: 50px 0 50px 0;
 }
 
-.drawing {
-   position: relative;
-   display: inline-block;
-   width: 300px;
-   left: 50%;
-   transform: translate(-50%);
-   vertical-align: top;
-   text-align: center;
-}
-
-.name {
-   display: inline-block;
+.items li {
+    position: relative;
+    vertical-align: top;
+    padding: 2px 0 2px 0;
 }
 
 .sound {
-   display: inline-block;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%);
+    margin-top: 40px;
+}
+
+.delete {
+    margin-top: 15px;
+}
+
+.drawing {
+    position: relative;
+    display: inline-block;
+    width: 300px;
+    left: 50%;
+    transform: translate(-50%);
+    vertical-align: top;
+    text-align: center;
+}
+
+.name {
+    display: inline-block;
+}
+
+.sound {
+    display: inline-block;
 }
 
 .soundinfo {
-  position: fixed;
-  width: 500px;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.7);
-  transition: opacity 500ms;
-  visibility: hidden;
-  opacity: 0;
-  z-index: 900;
-  background-color: white;
-  opacity: 0.5;
-  color: white;
-  padding: 15px 15px 5px 15px;
-  word-break: break-all;
+    padding-top: 30px;
 }
 
-.soundinfo:target {
-  visibility: visible;
-  opacity: 1;
-  z-index: 99;
+.soundinfo li {
+    vertical-align: top;
+}
+
+.group,
+.title,
+.comment,
+.sound,
+.smallclose {
+    display: inline-block;
+    vertical-algin: top;
+}
+
+details summary::-webkit-details-marker {
+    display:none;
 }
 
 .roomsel {
-position: absolute;
-top: 50%;
-left: 50%;
-transform: translate(-50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%);
 }
 
 .intro {
-position: relative;
-    display: block;
+    display: none;
+    position: relative;
     left: 50%;
     transform: translate(-50%);
     font-size: 15px;
@@ -260,16 +293,31 @@ position: relative;
     text-align: center;
 }
 
+tr {
+    color: red;
+}
+
+tr,
+td {
+    display: inline-block;
+}
+
+summary {
+    list-style: none;
+    outline: none;
+    cursor: pointer;
+}
+
 @media screen and (max-width: 700px) {
 
-.notice {
-    position: absolute;
-    display: inline-block;
-    width: 90%;
-    top: 50px;
-    left: 50%;
-    transform: translate(-50%);
-    padding-bottom: 20px;
-}
+    .notice {
+        position: absolute;
+        display: inline-block;
+        width: 90%;
+        top: 50px;
+        left: 50%;
+        transform: translate(-50%);
+        padding-bottom: 20px;
+    }
 
 }
diff --git a/public/parade.css b/public/parade.css
index 1e59cba..ff12ded 100644
--- a/public/parade.css
+++ b/public/parade.css
@@ -1,4 +1,4 @@
 html,
 body {
-  overflow: hidden;
+    overflow: hidden;
 }
diff --git a/server.js b/server.js
index c31d406..a2def20 100644
--- a/server.js
+++ b/server.js
@@ -201,22 +201,22 @@ fastify.post("/entry", async function (request, reply) {
     console.log("convert to mp3...");
     converted = true;
     function converter() {
-     return new Promise((resolve, reject) => {
-       //
-       let outputFile = tmpdir + "/converted.mp3";
-       // --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg)
-       ffmpeg()
-       .addInput(audiofile.filepath)
-       .on("error", function(err) {
-         reject(err);
-       })
-       .on("end", function() {
-         resolve(outputFile);
-       })
-       .outputOptions('-b:a 192000')
-       .output(outputFile)
-       .run();
-     });
+      return new Promise((resolve, reject) => {
+        //
+        let outputFile = tmpdir + "/converted.mp3";
+        // --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg)
+        ffmpeg()
+          .addInput(audiofile.filepath)
+          .on("error", function(err) {
+            reject(err);
+          })
+          .on("end", function() {
+            resolve(outputFile);
+          })
+          .outputOptions('-b:a 192000')
+          .output(outputFile)
+          .run();
+      });
     }
     await converter();
     // console.log(await fs.readdir(tmpdir));
@@ -287,7 +287,7 @@ var looper;
         // io.to("room" + indexed).emit("post", score[pointed]);
         io.to("room" + indexed).emit("post", pointed);
 
-      // }, score[pointer].object.showtime * index, pointer, index);
+        // }, score[pointer].object.showtime * index, pointer, index);
       }, 30000 * index, pointer, index);
     }
 
diff --git a/src/pages/entry.en.html b/src/pages/entry.en.html
index 5ffe14d..681b94e 100644
--- a/src/pages/entry.en.html
+++ b/src/pages/entry.en.html
@@ -14,8 +14,8 @@
   <body>
     <div class="bg"></div>
     <div class="content">
-      <div class="lang"><a href="/entry">KR</a></div>
-      <div class="list"><a href="/en/list">list</a></div>
+      <div class="first"><a href="/entry">KR</a></div>
+      <div class="second"><a href="/">Home</a></div>
       <div class="notice">
         <section>
           <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
diff --git a/src/pages/entry.html b/src/pages/entry.html
index 961058d..768125f 100644
--- a/src/pages/entry.html
+++ b/src/pages/entry.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>흐름을 향하여 걷는 | 입장</title>
+    <title>흐름을 향하여 걷는 | 소개</title>
     <link rel="stylesheet" href="/default.css" />
     <link rel="stylesheet" href="/entry.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@@ -14,8 +14,8 @@
   <body>
     <div class="bg"></div>
     <div class="content">
-      <div class="lang"><a href="/en/entry">EN</a></div>
-      <div class="prd"><a href="/" target="_blank">퍼레이드</a></div>
+      <div class="first"><a href="/en/entry">EN</a></div>
+      <div class="second"><a href="/" target="_blank">홈</a></div>
       <div class="notice">
         <section>
           <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@@ -29,7 +29,7 @@
             «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
           </p>
           <p>
-            1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다. 
+            1월 27일(목) 밤, «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 ‘사유의 밤’ 행사에서 송출될 예정입니다. ‘사유의 밤’은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
             많은 참여 및 관심 부탁드립니다.
           </p>
           <div class="info">
@@ -75,21 +75,23 @@
           <h2>소리 제출</h2>
           <form id="form" method="POST" enctype="multipart/form-data">
             <ul class="submit">
-              <h3>1. 소리 유형</h3>
-              <ul>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
-                </li>
-              </ul>
+              <li>
+                <h3>1. 소리 유형</h3>
+                <ul>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
+                  </li>
+                </ul>
+              </li>
               <li>
                 <h3>2. 소리 파일</h3>
                 <input type="file" name="audiofile" autocomplete="off" required />
@@ -109,16 +111,19 @@
                 </div>
               </li>
               <li>
-                <h3>6. 비밀 번호</h3> 
- 		<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
-		<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</sma              </li>
+                <h3>6. 비밀 번호</h3>
+                <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
+                <small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</small>
+              </li>
               <li>
                 <input id="submit" type="submit" value="제출하기" />
               </li>
             </ul>
           </form>
         </section>
-
+        <section>
+          <h2><a href="/list">소리 목록</a></h2>
+        </section>
       </div><!-- div class="notice" -->
     </div><!-- div class="content" -->
     <script>
diff --git a/src/pages/list.en.html b/src/pages/list.en.html
index cd8c989..0f511c8 100644
--- a/src/pages/list.en.html
+++ b/src/pages/list.en.html
@@ -15,12 +15,12 @@
     <div class="bg"></div>
     <div class="popup"></div>
     <div class="content">
-      <div class="lang"><a href="/list">KR</a></div>
+      <div class="first"><a href="/list">KR</a></div>
       <div class="content" id="list">
-        <div class="list-sub"><a href="/en/entry">Entry<i class='fas fa-bell' style='font-size:24px'></i></a></div>
+        <div class="second"><a href="/">Home</a></div>
         <div class="content" id="list">
-          <div class="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div>      <div class="notice">
-            <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
+        <div class="notice">
+            <h1>Sound &nbsp;List</h1>
             {{#each list}}
             <div class="items" foldername="{{this.foldername}}">
               <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
diff --git a/src/pages/list.html b/src/pages/list.html
index ffe37b2..dfc4edb 100644
--- a/src/pages/list.html
+++ b/src/pages/list.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>흐름을 향하여 걷는 | 목록</title>
+    <title>흐름을 향하여 걷는 | 소리 목록</title>
     <link rel="stylesheet" href="/default.css" />
     <link rel="stylesheet" href="/list.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@@ -15,55 +15,57 @@
     <div class="bg"></div>
     <div class="popup"></div>
     <div class="content">
-      <div class="lang"><a href="/en/list">EN</a></div>
+      <div class="first"><a href="/en/list">EN</a></div>
+      <div class="second"><a href="/">홈</a></div>
       <div class="content" id="list">
-        <div class="list-sub"><a href="/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div>
-        <div class="content" id="list">
-          <div class="list-parade"><a href="/" target="_blank">퍼레이드<i class='fas fa-bell' style='font-size:24px'></i></a></div>
-          <div class="notice">
-            <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
-            {{#each list}}
-            <div class="items" foldername="{{this.foldername}}">
-              <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
-              <div class="group">{{this.group}}</div>
-              <div class="title">{{this.title}}</div>
-              <div class="comment">{{this.comment}}</div>
+        <div class="notice">
+          <h1>소리 &nbsp;목록</h1>
+          {{#each list}}
+          <div class="items" foldername="{{this.foldername}}">
+            <details>
+              <summary><img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /></summary>
               <audio class="sound" preload="none" controls>
                 <source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
               </audio>
-              <button class="delete" type="button" onclick="del(this)">삭제x</button>
-            </div>
-            {{/each}}
+              <ul class="soundinfo"><hr>
+                <li>유형 | <div class="group">{{this.group}}</div></li><hr>
+                <li>제목 | <div class="title">{{this.title}}</div></li><hr>
+                <li>묘사 | <div class="comment">{{this.comment}}</div></li><hr>
+              </ul>
+              <button class="delete" type="button" onclick="del(this)">삭제</button>
+            </details>
           </div>
+          {{/each}}
         </div>
-        <script>
-         function del(that) {
-           console.log();
-           let text;
-           let pass = prompt("Please enter password!", "숫자2개");
-           if (/^\d{2}$/.test(pass)) {
-             var target = that.parentElement.getAttribute('foldername');
-             const trydelete = async () => {
-               const response = await fetch('/delete/' + target + '/' + pass);
-               if (response.ok) {
-                 const json = await response.json();
-                 return Promise.resolve(json);
-               } else {
-                 return Promise.reject('no response.');
-               }
+      </div>
+      <script>
+       function del(that) {
+         console.log();
+         let text;
+         let pass = prompt("Please enter password!", "숫자2개");
+         if (/^\d{2}$/.test(pass)) {
+           var target = that.parentElement.getAttribute('foldername');
+           const trydelete = async () => {
+             const response = await fetch('/delete/' + target + '/' + pass);
+             if (response.ok) {
+               const json = await response.json();
+               return Promise.resolve(json);
+             } else {
+               return Promise.reject('no response.');
              }
-             trydelete().then((resp) => {
-               if (resp.result) {
-                 alert("지우기 성공!");
-                 location.reload();
-               } else {
-                 alert("지우기 실패-");
-               }
-             }).catch(console.log);
-           } else {
-             alert("암호는 숫자2개...");
            }
+           trydelete().then((resp) => {
+             if (resp.result) {
+               alert("지우기 성공!");
+               location.reload();
+             } else {
+               alert("지우기 실패-");
+             }
+           }).catch(console.log);
+         } else {
+           alert("암호는 숫자2개...");
          }
-        </script>
+       }
+      </script>
   </body>
 </html>
diff --git a/src/pages/parade.html b/src/pages/parade.html
index fc8f578..70b1a3a 100644
--- a/src/pages/parade.html
+++ b/src/pages/parade.html
@@ -17,9 +17,6 @@
   <body>
     <div class="bg"></div>
     <div class="content">
-      <div class="notice">
-	<h1> 흐름을 향하여 걷는</h1>
-      </div>
     </div>
   </body>
 </html>