diff --git a/package.json b/package.json
index c85e29c..29a0618 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
diff --git a/public/index.html b/public/index.html
index 871553f..f8b9bb2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,5 +11,10 @@
 		<link rel="shortcut icon" href="/favicon.ico">
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 	</head>
-	<body><div id="app"></div><script src="chunk-vendors.js"></script><script src="app.js"></script></body>
+	<body>
+		<div id="app"></div>
+		<script src="chunk-vendors.js"></script>
+		<script src="app.js"></script>
+	</body>
+	<footer>© syui</footer>
 </html>
diff --git a/public/manga/0.png b/public/manga/0.png
new file mode 100644
index 0000000..632900b
Binary files /dev/null and b/public/manga/0.png differ
diff --git a/public/manga/0.webp b/public/manga/0.webp
index a38551d..35e4b25 100644
Binary files a/public/manga/0.webp and b/public/manga/0.webp differ
diff --git a/src/App.vue b/src/App.vue
index 54611e5..45fffb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,7 @@
 <template>
 	<div id="app">
 		{{ loc }}
-		<a :href="this.url + this.s_a"><button v-on:click="page_run(s_a)">1</button></a>
-		<a :href="this.url + this.s_b"><button v-on:click="page_run(s_b)">2</button></a>
-		<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
-		<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
-		<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
+
 		<hooper :settings="hooperSettings">
 			<slide v-for="(n,index) of products" :key="n">
 				<img :src="url + 'manga/'+ (index) +'.webp'" />
@@ -15,6 +11,13 @@
 			<hooper-pagination slot="hooper-addons"></hooper-pagination>
 			<hooper-progress slot="hooper-addons"></hooper-progress>
 		</hooper>
+		<div class="page">
+			<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
+			<a :href="this.url + this.s_b"><button v-on:click="page_run(s_b)">2</button></a>
+			<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
+			<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
+			<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
+		</div>
 	</div>
 </template>
 
@@ -43,7 +46,7 @@ export default {
   },
   data() {
     return {
-					url: "https://manga.syui.ai/",
+					url: "/",
 					s_a: 0,
 					s_b: 17,
 					s_c: 41,
@@ -67,12 +70,57 @@ export default {
 </script>
 
 <style>
-.hooper{height:100%}button.hooper-indicator{background-color:#000}img{width:100%}.page_n{text-align:center;height:50px}.hooper-pagination{position:fixed}.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
-button {
-    padding: 10px;
-    margin: 5px;
+.page_n{text-align:center;height:50px}
+.hooper-pagination{position:fixed}
+.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
+.hooper-indicator{
+	background-color:#000;
+	display:none;
 }
+
+.hooper{
+	height:100%;
+	text-align:center;
+}
+
+button {
+	padding: 10px;
+	margin: 5px;
+	background-color: #fff700;
+	color: #313131;
+	border: solid 2px;
+}
+
 ul.hooper-track {
 	padding: 0px;
 }
+
+img{
+	width:500px;
+}
+
+.page {
+	text-align:center;
+	margin:50px 20px 50px 20px;
+	background-color: rgba(184, 207, 224, .24);
+	padding: 20px;
+}
+
+.page a img {
+	border: solid 2px #313131;
+	width:100px;
+	margin: auto;
+	display: block;
+}
+
+.page a button {
+}
+
+footer {
+	text-align: center;
+}
+
+@media screen and (max-width:1000px) { 
+	img{width:100%;}
+}
 </style>
