diff --git a/public/index.html b/public/index.html
index 673f16f..f8b9bb2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,8 +2,6 @@
 <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 35273a4..14febc0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
 	<div id="app">
+		<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" />
 		<hooper :settings="hooperSettings">
 			<slide v-for="(n,index) of products" :key="n">
 				<div v-if="loading" class="loading">
@@ -28,8 +30,9 @@
 				<table>
 					<thead>
 						<tr>
-							<th scope="col">yui</th>
-							<th scope="col">巻</th>
+							<th scope="col">manga</th>
+							<th scope="col">ver</th>
+							<th scope="col">day</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -38,6 +41,7 @@
 								<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.0</td>
+							<td>2021-07-11</td>
 						</tr>
 					</tbody>
 					<tbody>
@@ -46,43 +50,52 @@
 								<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>0.1</td>
+							<td>2021-07-11</td>
 						</tr>
 					</tbody>
 				</table>
 			</div>
 		</div>
 
-		<div class="bsky_comment">
+		<div class="comment">
+			<div class="bsky_comment" v-if="comment_open == false">
+				<span class="comment">
+					<p class="comment-body" v-if="comment_first">
+						<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/>  <span class="comment-time" v-if="comment_first.updated_at"><a :href="comment_first.bsky_url" v-if="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')" v-if="comment_first.bsky_url">@{{ comment_first.handle }}</a></span>
+					<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
+				</p>
+			</span>
+			<div class="comment_open">
+				<p>
+					<a :href="comment_first.bsky_url" target="_blank">post</a>
+				</p>
+				<p>
+					<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
+				</p>
+			</div>
+		</div>
+		<div class="bsky_comment" v-else>
 			<span v-for="i in api_json.data" class="comment">
-				<p class="comment-body" v-if="i.text">
-					<!--
-					<img :src="i.avatar" v-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
-				-->
-				<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
-				<span class="comment-text">{{ i.text }}</span>
+				<p class="comment-body" v-if="i">
+					{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
+					<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url" v-if="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')" v-if="i.bsky_url">@{{ i.handle }}</a></span>
+				<span class="comment-text" v-if="i.text">{{ i.text }}</span>
 			</p>
 		</span>
+		<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-up"></i></button></div>
+	</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">
+							<th class="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>
+							<td>不思議な力を持つアイの話</td>
 						</tr>
 					</tbody>
 				</table>
@@ -104,6 +117,7 @@ import {
 import 'hooper/dist/hooper.css';
 import axios from 'axios'
 import moment from "moment";
+import fs from 'fs';
 
 var page = 21;
 var loc = window.location.pathname.split('/').slice(-1)[0];
@@ -125,9 +139,14 @@ export default {
 					bsky_cursor: null,
 					bsky_cid: "",
 					bsky_json: null,
+					bsky_url: null,
 					api_url: null,
 					api_json: null,
+					comment_open: false,
+					comment_first: null,
 					loading: true,
+					f: null,
+					url_check: true,
 					url: "/",
 					s_a: 0,
 					s_b: 2,
@@ -152,6 +171,12 @@ export default {
 			},
 			load() {
 				this.loading = false;
+			},
+			axios_check(url) {
+				axios.get(url)
+					.catch(error => {
+						this.url_check = false;
+					});
 			}
 		},
 		mounted() {
@@ -175,7 +200,11 @@ export default {
 			let url = this.api_url + "/users/2/ma?itemsPerPage=4000";
 			axios
 				.get(url,{ crossdomain: true })
-				.then(response => (this.api_json = response));
+				.then(
+					response => {this.api_json = response
+						this.comment_first = this.api_json.data[0]
+					}
+				);
 		}
 };
 </script>
@@ -190,7 +219,7 @@ a {
 }
 
 a span.icon-ai {
-	color: #fff700;
+	color: #ddd700;
 }
 
 .page_n{text-align:center;height:50px}
@@ -211,7 +240,7 @@ a span.icon-ai {
 }
 
 .hooper-progress-inner {
-	background-color: #dcd500;
+	background-color: #ddd700;
 }
 
 button {
@@ -227,14 +256,14 @@ ul.hooper-track {
 }
 
 .hooper-list img {
-	width:500px;
+	width:400px;
 	border: solid 3px #313131;
 	margin: 20px;
 }
 
 .page {
 	text-align:center;
-	background-color: rgba(184, 207, 224, .24);
+	background-color: #f1f1f1;
 	padding: 50px 0 50px 0;
 }
 
@@ -267,12 +296,19 @@ table {
 	text-align: center;
 	margin-left: auto;
 	margin-right: auto;
+	word-break: break-all;
 }
 
 thead, td, tr, th {
 	padding:10px;
 	background: #fff;
 	border: solid 1px #fff;
+	padding: 15px 25px 15px 25px;
+}
+
+th.row {
+	background: #313131;
+	border:none;
 }
 
 footer {
@@ -294,13 +330,21 @@ span.comment-time {
 	color: #999;
 }
 
+span.comment-time a {
+	color: #999;
+}
+
+span.comment-time a:hover {
+	color: rgb(16, 131, 254);
+}
+
 span.comment-handle {
 	padding: 0 5px 0 5px;
 	position: absolute;
 }
 
 span.comment-handle a {
-	color: rgb(16, 131, 254);
+	color: #313131;
 }
 
 img.comment {
@@ -308,7 +352,7 @@ img.comment {
 }
 
 p.comment-body {
-	padding: 5px 70px 5px 70px;
+	padding: 5px 40px 15px 40px;
 	border-bottom: solid 1px #eee;
 }
 
@@ -316,14 +360,43 @@ span.comment-text {
 	padding:10px;
 }
 
-span.comment {
+button.comment_open {
+	padding:20px 40px 20px 40px;
+	background-color: rgba(184,207,224,.24);
+	border: none;
+	margin:0;
+}
+button.comment_open:hover {
+	color: rgb(16, 131, 254);
+}
+
+.comment_open {
+	text-align: center;
+	width: 100%;
+}
+
+.comment_open p a {
+	color: rgb(16, 131, 254);
 }
 
 .bsky_comment {
+	background-color: #fff;
+	width: 600px;
+	margin: 0px auto;
+	border: solid 1px #eee;
+}
+
+.comment {
+	background-color: #fff;
 }
 
 @media screen and (max-width:1000px) { 
-	img{ width:100%; }
+	img{
+		width:100%;
+	}
+	.bsky_comment {
+		width:100%;
+	}
 	.page_title a img {
 		width:100%;
 	}
@@ -339,4 +412,8 @@ span.comment {
 		padding: 5px;
 	}
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
+
+	/* color: #aba700 #fff700 #313131 rgba(184, 207, 224, .24) rgb(16, 131, 254) #ddd700 */
 </style>
