diff --git a/_src/components/NowBrowsingMirror.vue b/_src/components/NowBrowsingMirror.vue
new file mode 100644
index 0000000..7193840
--- /dev/null
+++ b/_src/components/NowBrowsingMirror.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { useMirrorList } from "../lib/mirrorList";
+import { computed } from "vue";
+
+const rawMirrorList = useMirrorList();
+
+const nowBrowsingMirror = computed(() => {
+  let mirrorName = location.pathname.split("/")[1]?.toLowerCase();
+  if (!mirrorName) {
+    return null;
+  }
+  const result = rawMirrorList.value.filter((m) => {
+    return m.name.toLowerCase() === mirrorName;
+  })[0];
+  if (!result) {
+    return null;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <template v-if="nowBrowsingMirror">
+    <strong>Last Update:&nbsp;</strong>
+    <UpdateField :mir="nowBrowsingMirror"></UpdateField>
+  </template>
+</template>
diff --git a/_src/components/StatusMirrorList.vue b/_src/components/StatusMirrorList.vue
index f637b97..80321ff 100644
--- a/_src/components/StatusMirrorList.vue
+++ b/_src/components/StatusMirrorList.vue
@@ -54,7 +54,10 @@ onMounted(() => {
         <td class="col-8 col-lg-2">
           {{ mir.name }}{{ mir.is_master ? "" : " [slave]" }}
         </td>
-        <td class="col-12 col-lg-4 d-lg-none d-lg-redoce-table-ceil" colspan="2">
+        <td
+          class="col-12 col-lg-4 d-lg-none d-lg-redoce-table-ceil"
+          colspan="2"
+        >
           <div class="row">
             <th class="col-4 text-end">Last Success</th>
             <td class="col-8">
@@ -232,5 +235,4 @@ table {
     }
   }
 }
-
 </style>
diff --git a/_src/entrypoints/fancyIndex.js b/_src/entrypoints/fancyIndex.js
new file mode 100644
index 0000000..c54419a
--- /dev/null
+++ b/_src/entrypoints/fancyIndex.js
@@ -0,0 +1,29 @@
+import "./default";
+import "../styles/fancyIndex.scss";
+
+import NowBrowsingMirror from "../components/NowBrowsingMirror.vue";
+import { createApp } from "vue";
+
+document.getElementById("list").setAttribute("class", "table");
+document.addEventListener("DOMContentLoaded", function () {
+  Array.from(
+    document.querySelectorAll("#list tbody tr td:nth-child(3)"),
+  ).forEach((el) => {
+    const d = new Date(el.innerText);
+    if (!isNaN(d.getTime())) {
+      const date_str =
+        ("000" + d.getFullYear()).substr(-4) +
+        "-" +
+        ("0" + (d.getMonth() + 1)).substr(-2) +
+        "-" +
+        ("0" + d.getDate()).substr(-2) +
+        (" " +
+          ("0" + d.getHours()).substr(-2) +
+          ":" +
+          ("0" + d.getMinutes()).substr(-2));
+      el.innerText = date_str;
+    }
+  });
+});
+
+createApp(NowBrowsingMirror).mount("#now-browsing-mirror");
diff --git a/_src/styles/fancyIndex.scss b/_src/styles/fancyIndex.scss
new file mode 100644
index 0000000..312bf84
--- /dev/null
+++ b/_src/styles/fancyIndex.scss
@@ -0,0 +1,3 @@
+#list tbody td, #path{
+    font-family: var(--bs-font-monospace);
+}
diff --git a/fancy-index/after-legacy.html b/fancy-index/after-legacy.html
deleted file mode 100644
index 7fb2bd6..0000000
--- a/fancy-index/after-legacy.html
+++ /dev/null
@@ -1,2 +0,0 @@
-	</body>
-</html>
diff --git a/fancy-index/after.html b/fancy-index/after.html
index 37c0ea3..d7b8723 100644
--- a/fancy-index/after.html
+++ b/fancy-index/after.html
@@ -15,34 +15,6 @@ ref fa-cube icon from before.html
 		{% include footer.html %}
 
 	</body>
-	{% raw %}
-	{% endraw %}
-	<script src="/static/js/index.js?{{ site.data['hash'] }}"></script>
-	{% raw %}
-	<script>
-		document.getElementById("list").setAttribute("class", "table");
-		document.addEventListener("DOMContentLoaded", function(){
-			var els = Array.from(document.querySelectorAll("#list tbody tr td:nth-child(3)"))
-			for(var i = 0; i < els.length; i++){
-				var el = els[i];
-				var d = new Date(el.innerText);
-				if(!isNaN(d.getTime())){
-					var date_str = ('000' + d.getFullYear()).substr(-4) + "-"
-					             + ('0' + (d.getMonth() + 1)).substr(-2) + "-"
-					             + ('0' + d.getDate()).substr(-2)
-					             + (" " + ('0' + d.getHours()).substr(-2) + ":"
-					             + ('0' + d.getMinutes()).substr(-2));
-					el.innerText = date_str;
-				}
-			}
-		});
-	</script>
-	<style>
-		#list tbody td, #path{
-			font-family: 'Fira Code Retina', 'Fira Code', 'Fira Mono', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Menlo', 'Monaco', monospace;
-		}
-	</style>
-	{% endraw %}
 </html>
 <!--
 	vim: ts=2 sts=2 sw=2 noexpandtab
diff --git a/fancy-index/before-legacy.html b/fancy-index/before-legacy.html
deleted file mode 100644
index 887c2d7..0000000
--- a/fancy-index/before-legacy.html
+++ /dev/null
@@ -1,14 +0,0 @@
----
-permalink: /fancy-index/before-legacy.html
-title: Index of {{url}}
-legacy: true
----
-<!DOCTYPE html>
-<html>
-{% capture metaDesc %}Index of {% raw %}{{url}}{% endraw %}{% endcapture %}
-	{% include head.html metaDesc=metaDesc nostyle="true" notArticle=true %}
-	<body>
-	<h1>Index of
-<!--
-	vim: ts=2 sts=2 sw=2 noexpandtab
--->
diff --git a/fancy-index/before.html b/fancy-index/before.html
index f2691ef..32ab6ae 100644
--- a/fancy-index/before.html
+++ b/fancy-index/before.html
@@ -1,6 +1,7 @@
 ---
 permalink: /fancy-index/before.html
 title: Index of {{url}}
+jsEntry: fancyIndex
 ---
 <!DOCTYPE html>
 <html>
@@ -15,12 +16,11 @@ title: Index of {{url}}
 			<div class="container">
 				<div class="row">
 					{% raw %}
-					<div class="col-12 table-responsive" id="mirror-list">
+					<div class="col-12 table-responsive">
 						<div class="row">
 							<div class="col-lg-8 col-12"><h3>{% endraw %}{% fa_svg fas.fa-cube %}{% raw %} Index of <span id="path">{{url}}</span></h3></div><!--
-							--><div class="col-lg-4 col-12 d-flex align-items-end justify-content-start justify-content-lg-end" v-if="nowBrowsingMirror">
-								<strong>Last Update:</strong> {{open}}nowBrowsingMirror.last_update{{close}}
-								<span v-if="nowBrowsingMirror.show_status" :class="['label', 'label-status', nowBrowsingMirror.label, 'hidden-xs']">{{open}}nowBrowsingMirror.status{{close}}</span>
+							--><div class="col-lg-4 col-12 d-flex align-items-end justify-content-start justify-content-lg-end">
+								<div id="now-browsing-mirror"></div>
 							</div>
 						</div>
 					{% endraw %}
diff --git a/static/njs/fancy_index.njs b/static/njs/fancy_index.njs
index 3b06615..1966301 100644
--- a/static/njs/fancy_index.njs
+++ b/static/njs/fancy_index.njs
@@ -12,8 +12,6 @@ function fancyIndexRender(r, templateUrl){
     var tmpl = rTmpl.responseText;
     var result = Mark.up(tmpl, {
       url: r.variables.request_uri.replace(/\/+/g, '/').replace(/\?.*$/, ''),
-      open: '{{',
-      close: '}}',
     });
     r.status = 200;
     r.headersOut['Content-Type'] = 'text/html';
@@ -24,19 +22,11 @@ function fancyIndexRender(r, templateUrl){
 }
 
 function fancyIndexBeforeRender(r){
-  if(r.variables.isbrowser && r.variables.isbrowser != '0'){
-    return fancyIndexRender(r, '/fancy-index/before.html');
-  }else{
-    return fancyIndexRender(r, '/fancy-index/before-legacy.html');
-  }
+  return fancyIndexRender(r, '/fancy-index/before.html');
 }
 
 function fancyIndexAfterRender(r){
-  if(r.variables.isbrowser && r.variables.isbrowser != '0'){
-    return fancyIndexRender(r, '/fancy-index/after.html');
-  }else{
-    return fancyIndexRender(r, '/fancy-index/after-legacy.html');
-  }
+  return fancyIndexRender(r, '/fancy-index/after.html');
 }
 
 export default {fancyIndexBeforeRender, fancyIndexAfterRender};