diff --git a/package.json b/package.json
index 29a0618..3b84870 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "core-js": "^3.6.4",
     "hooper": "^0.3.4",
     "vue": "^2.6.11",
-    "vue-loading-template": "^1.3.2",
     "vue-meta": "^2.4.0",
     "vue-template-compiler": "^2.6.14"
   },
diff --git a/public/index.html b/public/index.html
index f8b9bb2..673f16f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
 	<head>
 		<title>yui | manga</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet">
+		<link rel="stylesheet" href="https://yui.syui.ai/bower_components/icomoon/css/icomoon.css" />
+		<link rel="stylesheet" href="https://yui.syui.ai/bower_components/font-awesome/css/all.min.css" />
 		<meta name="twitter:card" content="summary">
 		<meta property="og:url" content="https://manga.syui.ai">
 		<meta property="og:title" content="yui">
diff --git a/src/App.vue b/src/App.vue
index 45fffb1..bcc51f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,21 @@
 <template>
+
 	<div id="app">
 		{{ loc }}
-
 		<hooper :settings="hooperSettings">
 			<slide v-for="(n,index) of products" :key="n">
-				<img :src="url + 'manga/'+ (index) +'.webp'" />
+				<div v-if="loading" class="loading">
+					<i class="fa-solid fa-spinner fa-spin-pulse"></i>
+				</div>
+				<img :src="url + 'manga/'+ (index) +'.webp'" @load="load" />
 				<div class="page_n">{{ n }}</div>
 			</slide>
 			<hooper-navigation slot="hooper-addons"></hooper-navigation>
 			<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>
@@ -18,12 +23,71 @@
 			<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 class="page">
+			<div class="page_data">
+				<table>
+					<thead>
+						<tr>
+							<th scope="col"></th>
+							<th scope="col">n</th>
+							<th scope="col">body</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th scope="row">
+								<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
+							</th>
+							<td>0</td>
+							<td>アイがガララ星に移り住んでからのお話</td>
+						</tr>
+					</tbody>
+					<tbody>
+						<tr>
+							<th scope="row">
+								<a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a>
+							</th>
+							<td>1</td>
+							<td>テスト</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<div class="page_title">
+			<div class="page_data">
+				<table>
+					<thead>
+						<tr>
+							<th scope="col"><span class="icon-ai"></span></th>
+							<th scope="col">title</th>
+							<th scope="col">body</th>
+							<th scope="col">author</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th scope="row">
+								<a href="https://yui.syui.ai"><img src="https://syui.ai/ai.png" v-on:click="page_run(s_a)"></a>
+							</th>
+							<td>yui</td>
+							<td>不思議な力を持った女の子の物語</td>
+							<td>syui</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+
 	</div>
 </template>
 
 <script>
 import {
-  Hooper,
+	Hooper,
   Slide,
   Progress as HooperProgress,
   Pagination as HooperPagination,
@@ -31,6 +95,7 @@ import {
 } from 'hooper';
 
 import 'hooper/dist/hooper.css';
+
 var page = 107;
 var loc = window.location.pathname.split('/').slice(-1)[0];
 //let loc = window.location.pathname.split('/').slice(0)[3];
@@ -38,7 +103,7 @@ var loc = window.location.pathname.split('/').slice(-1)[0];
 export default {
   name: 'App',
   components: {
-    Hooper,
+			Hooper,
     Slide,
     HooperProgress,
     HooperPagination,
@@ -46,6 +111,7 @@ export default {
   },
   data() {
     return {
+					loading: true,
 					url: "/",
 					s_a: 0,
 					s_b: 17,
@@ -64,12 +130,19 @@ export default {
 			page_run(s) {
 				this.loc = s;
 				this.hooperSettings.initialSlide = s;
+			},
+			load() {
+				this.loading = false;
 			}
 		}
 };
 </script>
 
 <style>
+body {
+	margin: 0px;
+}
+
 .page_n{text-align:center;height:50px}
 .hooper-pagination{position:fixed}
 .hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
@@ -83,6 +156,14 @@ export default {
 	text-align:center;
 }
 
+.hooper-progress {
+	height: 12px;
+}
+
+.hooper-progress-inner {
+	background-color: #dcd500;
+}
+
 button {
 	padding: 10px;
 	margin: 5px;
@@ -95,15 +176,16 @@ ul.hooper-track {
 	padding: 0px;
 }
 
-img{
+.hooper-list img {
 	width:500px;
+	border: solid 3px #313131;
+	margin: 20px;
 }
 
 .page {
 	text-align:center;
-	margin:50px 20px 50px 20px;
 	background-color: rgba(184, 207, 224, .24);
-	padding: 20px;
+	padding: 50px 0 50px 0;
 }
 
 .page a img {
@@ -113,14 +195,61 @@ img{
 	display: block;
 }
 
-.page a button {
+.page_title {
+	text-align:center;
+	background-color: #313131;
+	padding: 100px 0 50px 0;
+}
+
+.page_title a img {
+	width:100px;
+	margin: auto;
+	display: block;
+}
+
+.page_title head, td, tr, th {
+	padding:10px;
+	background: #fff;
+	border: solid 1px #fff;
+}
+
+table {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+thead, td, tr, th {
+	padding:10px;
+	background: #fff;
+	border: solid 1px #fff;
 }
 
 footer {
 	text-align: center;
+	background: #313131;
+	color: #fff;
+	padding:50px 0 30px 0;
+}
+
+.loading {
+	text-align: center;
+	font-size: 30px;
+	margin-top:100px;
 }
 
 @media screen and (max-width:1000px) { 
-	img{width:100%;}
+	img{ width:100%; }
+	.page_title a img {
+		width:100%;
+	}
+	.page a img {
+		width:100%;
+	}
+	.hooper-list img {
+		border: solid 0px #fff;
+		margin:20px 0 0 0;
+		width:100%;
+	}
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 50dab2d..a20b0c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,4 +7,3 @@ new Vue({
   render: h => h(App)
 }).$mount('#app')
 
-
diff --git a/yarn.lock b/yarn.lock
index ab49a4c..10aae9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -37,6 +37,30 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
   integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
 
+"@fortawesome/fontawesome-common-types@6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
+  integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==
+
+"@fortawesome/fontawesome-svg-core@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz#9d56d46bddad78a7ebb2043a97957039fcebcf0a"
+  integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
+"@fortawesome/free-solid-svg-icons@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz#737b8d787debe88b400ab7528f47be333031274a"
+  integrity sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
+"@fortawesome/vue-fontawesome@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.6.tgz#c5e627475c10869a091280610c96411d18206f3a"
+  integrity sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -5436,11 +5460,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-reflect-metadata@^0.1.10:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
-  integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
-
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -6654,11 +6673,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-class-component@^6.0.0, vue-class-component@^6.1.0:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"
-  integrity sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A==
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -6684,15 +6698,6 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-loading-template@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/vue-loading-template/-/vue-loading-template-1.3.2.tgz#2f7bd7ae5735c47029e8f1ed774ed45970897775"
-  integrity sha512-p02Q0cIkGlYSd2B++9JkRnSi4vzbIy3Pd7HOPncFCT5sgXin0clJFCvO8+KqF3JYP+coR8BjMqFEjOJY20jKYA==
-  dependencies:
-    vue "^2.5.16"
-    vue-class-component "^6.0.0"
-    vue-property-decorator "^6.0.0"
-
 vue-meta@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
@@ -6700,14 +6705,6 @@ vue-meta@^2.4.0:
   dependencies:
     deepmerge "^4.2.2"
 
-vue-property-decorator@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-6.1.0.tgz#ef97bcc1bfe794ec060133ca04a5aca02e808828"
-  integrity sha512-NM4PYPOkOIO7SFtWiQqVrbp+ORzd7CJXcIz0X710PNW9pxGfbil0/x/ULFympzIUoHXBKN2dqoOQzh6oeMzpTQ==
-  dependencies:
-    reflect-metadata "^0.1.10"
-    vue-class-component "^6.1.0"
-
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -6729,7 +6726,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.5.16, vue@^2.6.11:
+vue@^2.6.11:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
   integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==

	n	body
+ +	0	アイがガララ星に移り住んでからのお話
+ +	1	テスト