diff --git a/test_data/fragment.html b/test_data/fragment.html
index 9c56687..0c3ce99 100644
--- a/test_data/fragment.html
+++ b/test_data/fragment.html
@@ -13,6 +13,9 @@
   </head>
   <body>
 <div>
+
+
+
   <div id="menu">
     <div id="logo_wrapper" class="svg_wrapper">
       <a href="/index.html">
@@ -43,18 +46,18 @@
 
   <div id="wrapper_author">
     <div id="fragment_wrapper">
-
     </div>
     <div id="introduction">
     </div>
+  </div>
 
-    <div id="archive">
-      <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt="">
-      </button>
-      <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+      <a href="#">조각#1234</a>
     </div>
   </div>
 
@@ -68,6 +71,11 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+
+
+  </script>
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/test_data/src/scripts/mobileArchiveEvent.js b/test_data/src/scripts/mobileArchiveEvent.js
new file mode 100644
index 0000000..0a4db1f
--- /dev/null
+++ b/test_data/src/scripts/mobileArchiveEvent.js
@@ -0,0 +1,40 @@
+let showingList = false;
+
+function switchList() {
+  if (showingList === true){
+    document.querySelector('#archive_exit').style.display = "none";
+    document.querySelector('#archive_list').style.display = "none";
+    showingList = false;
+  }else {
+    document.querySelector('#archive_exit').style.display = "block";
+    document.querySelector('#archive_list').style.display = "block";
+    showingList = true;
+  }
+}
+
+document.querySelector('#archive_exit').onclick = () => {
+  if (window.innerWidth < 780){
+    document.querySelector('#archive_exit').style.display = "none";
+    document.querySelector('#archive_list').style.display = "none";
+    showingList = false;
+  }
+}
+
+document.querySelector('#archive_button').onclick = () => {
+  if (window.innerWidth < 780){
+    switchList();
+  }
+}
+
+$('#archive').hover = () => {
+  if (window.innerWidth < 780){
+    switchList();
+  }
+}
+
+document.querySelector("body").onresize = ()=>{
+  if (window.innerWidth > 780) {
+    document.querySelector('#archive_exit').style.display = "none";
+    document.querySelector('#archive_list').style.display = "";
+  }
+};
diff --git a/test_data/src/style/common.css b/test_data/src/style/common.css
index 411eed0..d24203c 100644
--- a/test_data/src/style/common.css
+++ b/test_data/src/style/common.css
@@ -19,8 +19,9 @@
       div.frag                        {background-color:beige;}
       div.image                       {background-color:magenta}
       div.pdf object                  {background-color:mediumaquamarine}
-      div.x-empty                     {background-color:mediumseagreen}
+      div.x-empty                     {background-color:mediumseagreen} 
       */
+     
 
 
       
@@ -54,7 +55,7 @@
       }
 
       .focus {
-        animation: rainbowLinkText 0.5s;
+        animation: rainbowLinkText 3s;
       }
 
       a:hover text, a:focus text, a:active text { animation-duration: 1s; animation-name: rainbowLink; animation-iteration-count: infinite; } 
@@ -156,19 +157,34 @@
       }
 
       /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
-      div#archive {
-        margin:10px;
+
+      div#archive_exit {
+        top:0px;
+        background-color: rgba(123, 60, 99, 0.9);
+        z-index: 99;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+      }      
+
+      div#archive {
+        margin:0px;
+        position: fixed;
+        bottom: 0px;
+        width:100%;
+        z-index: 100;
       }      
-      div#archive:hover #archive_list{display: block;}
 
       div#archive_list {
         display: none;
         position: absolute;
         max-height:335px;
-        width:200px;
+        width:100%;
         overflow-y: scroll;
         border: 1px solid;
-        z-index: 10;
+        bottom: 40px;
+        /* z-index: 10; */
+        background:#fff;
       }
       
       div#archive_list a {
@@ -180,10 +196,10 @@
       div#archive_list a:nth-child(1) {border-top: none;}
       
       button#archive_button{
-        width:100px;
+        width:100%;
         background:#fff;
         border:1px solid;
-        height: 30px;
+        height: 40px;
       }
 
       img#icon_archive_more {width: 16px;}
@@ -290,11 +306,43 @@
           margin:10px;
         }
 
+        div#fragments_wrapper > img {
+          width: fit-content;
+        }
+
         div#introduction {
           margin:10px;
         }
 
-        /*archive_list was here*/
+        /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
+        div#archive {
+          width:140px;
+          top: 100px;
+          right: 100px;
+        }      
+
+        div#archive:hover #archive_list{
+          display: block;
+        }
+
+        div#archive_list {
+          bottom:auto;
+          top:30px;
+          width:300px;
+          right:0px;
+          /* z-index: 10; */
+        }
+        button#archive_button{
+          width:100%;
+          background:#fff;
+          border:1px solid;
+          height: 30px;
+        }
+
+        /* img#icon_archive_more {width: 16px;} */
+
+
+
         /* FRAGMENT ==> CONTENTS */
         div#frags{
           position: absolute;
