diff --git a/docs/openapi.yaml b/docs/openapi.yaml
index f98d66d..9cf9ea7 100644
--- a/docs/openapi.yaml
+++ b/docs/openapi.yaml
@@ -190,6 +190,40 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/wikiTag'
+    patch:
+      tags:
+        - wiki
+      summary: wikiのタグを更新
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/wikiTagPatch'
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/wikiTag'
+    delete:
+      tags:
+        - wiki
+      summary: wikiのタグを削除
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/wikiTag'
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/wikiTag'
   /sodan:
     get:
       tags:
@@ -546,6 +580,9 @@ components:
           items:
             type: string
             example: ComputerScience
+        favorites:
+          type: integer
+          example: 3
     folderList:
       type: array
       items:
@@ -635,6 +672,9 @@ components:
           type: array
           items:
             $ref: '#/components/schemas/message'
+        favorites:
+          type: integer
+          example: 3
     message:
       type: object
       properties:
@@ -706,6 +746,9 @@ components:
         updatedAt:
           type: string
           example: 2021-01-01 00:00:00
+        favorites:
+          type: integer
+          example: 3
     memoList:
       type: array
       items:
@@ -737,4 +780,16 @@ components:
           example: 123
         tag:
           type: string
-          example: ComputerScience
\ No newline at end of file
+          example: ComputerScience
+    wikiTagPatch:
+      type: object
+      properties:
+        wikiId:
+          type: string
+          example: 123
+        tag:
+          type: string
+          example: ComputerScience
+        newTag:
+          type: string
+          example: Python
\ No newline at end of file
diff --git a/index.html b/index.html
index 8388c4b..d5589a9 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index a415237..73ceab2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@ onMounted(async() =>{
 </script>
 
 <template>
-  <div :class="$style.page">
+  <div :class="$style.page" id="page">
     <Header :user-traq-id="userTraqId" />
     <router-view :class="$style.contents" />
   </div>
@@ -33,6 +33,7 @@ onMounted(async() =>{
 .page {
   height: 100%;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 .contents {
   height: fit-content;
diff --git a/src/components/MarkDownEditor.vue b/src/components/MarkDownEditor.vue
index 1f40a37..9a1a10f 100644
--- a/src/components/MarkDownEditor.vue
+++ b/src/components/MarkDownEditor.vue
@@ -11,27 +11,8 @@ import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import { useUserStore } from '../store/user'
 import { log } from 'console'
-
-type Memo = {
-    id: number,
-    title: string,
-    ownerTraqId: string,
-    content: string,
-    createdAt: string,
-    updatedAt: string,
-    tags: string[]
-}
-
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
+import Wiki from "../types/wiki";
+import Memo from "../types/memo";
 
 const props = defineProps({
     editorType: Number,
diff --git a/src/components/WikiCard.vue b/src/components/WikiCard.vue
index 74c45a4..a969bb4 100644
--- a/src/components/WikiCard.vue
+++ b/src/components/WikiCard.vue
@@ -3,21 +3,13 @@ import { onMounted, ref } from "vue";
 import router from "../router";
 import { useUserStore } from '../store/user.js';
 import { useToast } from "vue-toast-notification";
+import Wiki from "../types/wiki";
 
-type Wiki = {
-  id: number;
-  type: string;
-  title: string;
-  Abstract: string;
-  createdAt: string;
-  updatedAt: string;
-  ownerTraqId: string;
-  tags: string[];
-};
-const props = defineProps({
-  wiki: Object,
+
+const props = defineProps<{
+  wiki: Wiki,
   isMyPage: Boolean
-});
+}>();
 const wiki = ref(props.wiki);
 const isMyPage = ref(props.isMyPage)
 const canDelete = ref<boolean>(false)
@@ -25,6 +17,7 @@ const favorites = ref<Wiki[]>([])
 const hide = ref<boolean>(false)
 const userStore = useUserStore();
 const $toast = useToast();
+const iconUrl = ref<string>("")
 
 
 const SelectWiki = (wiki: Wiki) => {
@@ -52,6 +45,8 @@ onMounted(async() =>{
     }
   });
   canDelete.value = wiki.value.type == "memo" && isMyPage.value
+  iconUrl.value = "https://q.trap.jp/api/v3/public/icon/" + wiki.value.ownerTraqId
+  //iconUrl.value = "https://q.trap.jp/api/v3/public/icon/kavos"
 })
 const StartLiking = async (wiki: Wiki) => {
   if (isLiking.value) {
@@ -65,6 +60,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites -= 1;
   }else {
     isLiking.value = true;
     await fetch("/api/wiki/user/favorite", {
@@ -76,6 +72,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites += 1;
   }
 }
 const DeleteMemo = async(wiki: Wiki) =>{
@@ -104,52 +101,63 @@ const DeleteMemo = async(wiki: Wiki) =>{
 </script>
 
 <template>
-  <tr v-if="!hide" class="card" @click="SelectWiki(wiki)">
-    <li class="title">{{ wiki.title }}</li>
-    <li class="content">{{ wiki.Abstract }}</li>
-    <div class="button-container">
-    <div
-      v-for="tag in wiki.tags"
-      :key="tag"
-    >
-      <button
-        class="tag-content"
-        type="button"
-        @click.stop="TagClick(tag)"
-        v-if="tag != ''"
-      >
-        {{ tag }}
-      </button>
+  <div v-if="!hide" :class="$style.card" @click="SelectWiki(wiki)">
+    <img :src="iconUrl" :class="$style.icon" />
+    <header :class="$style.header">
+      <p :class="$style.owner_traq_id">@{{wiki.ownerTraqId}}</p>
+      <p :class="$style.created_at">{{wiki.createdAt}}</p>
+    </header>
+    <div :class="$style.content">
+      <div :class="$style.title">{{ wiki.title }}</div>
+      <div :class="$style.abstract">{{ wiki.Abstract }}</div>
+      <div :class="$style.button_container">
+        <div
+            v-for="tag in wiki.tags"
+            :key="tag"
+        >
+          <button
+              :class="$style.tag_content"
+              type="button"
+              @click.stop="TagClick(tag)"
+              v-if="tag != ''"
+          >
+            {{ tag }}
+          </button>
+        </div>
+      </div>
+      <div :class="$style.button_container">
+        <button v-if="isLiking" :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['fas', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-else :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['far', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-if="canDelete" :class="$style.iine" @click.stop="DeleteMemo(wiki)">
+          <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
+        </button>
       </div>
     </div>
-    <div class="button-container">
-      <button v-if="isLiking" class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['fas', 'heart']" /> いいね！
-      </button>
-      <button v-else class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['far', 'heart']" /> いいね！
-      </button>
-      <button v-if="canDelete" class="iine" @click.stop="DeleteMemo(wiki)">
-        <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
-      </button>
-    </div>
-  </tr>
+  </div>
 </template>
 
-<style scoped>
-.button-container {
+<style module>
+.button_container {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
-  margin-left: 80px;
+  align-items: center;
 }
 
-.tag-content {
+.tag_content {
   margin: 5px;
   background-color: rgb(244, 244, 244);
 }
 
-.tag-content:hover {
+.tag_content:hover {
   background-color: rgb(211, 211, 211);
 }
 
@@ -162,17 +170,18 @@ const DeleteMemo = async(wiki: Wiki) =>{
   font-size: 20px;
 }
 
-.content {
-  font-size: 15px;
+.abstract {
+  font-size: 25px;
   text-align: left;
-  margin-left: 80px;
   list-style: none;
 }
 
 .card {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  grid-template-rows: 20px 20px 1fr;
   flex-direction: column;
   padding: 16px;
   background-color: #fff;
@@ -186,12 +195,6 @@ const DeleteMemo = async(wiki: Wiki) =>{
 .title {
   font-size: 35px;
   text-align: left;
-  margin-left: 80px;
-  list-style: none;
-}
-
-.content {
-  font-size: 25px;
   list-style: none;
 }
 
@@ -200,8 +203,47 @@ const DeleteMemo = async(wiki: Wiki) =>{
 }
 
 .iine {
-  padding: 8px;
   font-size: 18px;
-  width: 120px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.header {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  padding-left: 10px;
+}
+
+.content {
+  grid-column: 2;
+  grid-row: 2 / 4;
+  padding-left: 10px;
+}
+
+.owner_traq_id {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.created_at {
+  font-size: 0.8em;
+  color: #777777;
+  margin-left: 8px;
+}
+
+.favorite_count {
 }
 </style>
diff --git a/src/components/WikiSideBar.vue b/src/components/WikiSideBar.vue
index c2fa75d..c5a8ac9 100644
--- a/src/components/WikiSideBar.vue
+++ b/src/components/WikiSideBar.vue
@@ -24,10 +24,10 @@ watch(() => props.isMyPage,
           <li class="sidebar_link_content">自分のWiki</li>
         </router-link>
         <a href="#memo" v-if="mypage">
-          <li class="headerLink">備忘録一覧</li>
+          <li class="headerLink sidebar_link_content">備忘録一覧</li>
         </a>
         <a href="#sodan" v-if="mypage">
-          <li class="headerLink">相談一覧</li>
+          <li class="headerLink sidebar_link_content">相談一覧</li>
         </a>
         <router-link to="/wiki/favoritewiki">
           <li class="sidebar_link_content">お気に入りのWiki</li>
diff --git a/src/pages/IndividualMemo.vue b/src/pages/IndividualMemo.vue
index e8d1d2a..a231eac 100644
--- a/src/pages/IndividualMemo.vue
+++ b/src/pages/IndividualMemo.vue
@@ -9,16 +9,8 @@ import customHeadingId from "marked-custom-heading-id";
 import { markedHighlight } from 'marked-highlight'
 import 'highlight.js/styles/github-dark.css'
 import { useUserStore } from '../store/user'
+import Memo from '../types/memo'
 
-type Memo = {
-    id: number,
-    title: string,
-    ownerTraqId: string,
-    content: string,
-    createdAt: string,
-    updatedAt: string,
-    tags: string[]
-}
 const myid = ref<string>("")
 const title = ref<string>("");
 const content = ref<string>("");
diff --git a/src/pages/Lectures.vue b/src/pages/Lectures.vue
index 6c92724..905669e 100644
--- a/src/pages/Lectures.vue
+++ b/src/pages/Lectures.vue
@@ -47,7 +47,7 @@ onBeforeRouteUpdate(async (to, from) => {
 <template>
   <div :class="$style.container">
     <lecture-side-bar />
-    <main>
+    <main :class="$style.mainWrapper">
       <div :class="$style.main">
         <div :class="$style.mainHeader">
           <p v-if="isUrl('sougou')">総合/融合</p>
@@ -60,14 +60,14 @@ onBeforeRouteUpdate(async (to, from) => {
           <p v-if="isUrl('graphics')">グラフィック</p>
           <p v-if="isUrl('others')">その他講習会</p>
         </div>
-        <table>
-          <tr v-for="lecture in lectures" :key="lecture.id" :class="$style.card">
+        <div>
+          <div v-for="lecture in lectures" :key="lecture.id" :class="$style.card">
             <ul>
               <li :class="$style.title">{{ lecture.title }}</li>
               <li :class="$style.content">講義資料URL : <a href="{{ lecture.content }}" :class="$style.link">{{ lecture.content }}</a></li>
             </ul>
-          </tr>
-        </table>
+          </div>
+        </div>
       </div>
     </main>
   </div>
@@ -85,6 +85,7 @@ onBeforeRouteUpdate(async (to, from) => {
   display: flex;
   gap: 10px;
   height: fit-content;
+  min-height: 100vh;
 }
 
 .main {
@@ -120,4 +121,8 @@ onBeforeRouteUpdate(async (to, from) => {
 .link:hover {
   text-decoration: underline;
 }
+
+.mainWrapper {
+  flex-grow: 1;
+}
 </style>
diff --git a/src/pages/LikeWiki.vue b/src/pages/LikeWiki.vue
index 678c68b..81424aa 100644
--- a/src/pages/LikeWiki.vue
+++ b/src/pages/LikeWiki.vue
@@ -3,20 +3,10 @@ import { onMounted, ref } from "vue";
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import WikiCard from '../components/WikiCard.vue';
+import Wiki from '../types/wiki';
 
 const $toast = useToast();
 
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
-
 const wikis = ref<Wiki[]>([]);
 
 onMounted(async () => {
@@ -33,8 +23,19 @@ onMounted(async () => {
 </script>
 
 <template>
-    <h1>LikeWiki</h1>
-    <table class="cardTable">
+  <div>
+    <h1 :class="$style.head_text">お気に入りのWiki</h1>
+    <div>
       <WikiCard :wiki="wiki" :isMyPage="false" v-for="wiki in wikis" :key="wiki.id" />
-    </table>
-</template>
\ No newline at end of file
+    </div>
+  </div>
+</template>
+
+<style module>
+.head_text {
+  font-size: 50px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/MyWiki.vue b/src/pages/MyWiki.vue
index b611382..bca7811 100644
--- a/src/pages/MyWiki.vue
+++ b/src/pages/MyWiki.vue
@@ -3,24 +3,52 @@ import { onMounted, ref } from "vue";
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import WikiCard from '../components/WikiCard.vue';
+import router from "../router";
+import Wiki from "../types/wiki";
 
 const $toast = useToast();
 
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
-
 const wikis = ref<Wiki[]>([]);
 const memos = ref<Wiki[]>([]);
 const sodans = ref<Wiki[]>([]);
 
+// search box
+const SearchWord = ref<string>("");
+const Words = ref<string[]>([]);
+const ErrorMessage = ref<string>("");
+const tags = ref<string[]>([]);
+const keywords = ref<string[]>([]);
+const Submit = () => {
+  if (SearchWord.value == "") {
+    return false;
+  }
+  tags.value = [];
+  keywords.value = [];
+  const SearchWords = SearchWord.value.split(/\s+/);
+  // SearchWords.forEach((SearchWord) =>{
+  //     Words.value = Words.value.concat(SearchWord.split("　"));
+  // })
+  SearchWords.forEach((word) => {
+    if (word.substring(0, 1) == "#" || word.substring(0, 1) == "＃") {
+      if (word.substring(1) != "") {
+        tags.value.push(word.substring(1));
+      }
+    } else {
+      if (word != "") {
+        keywords.value.push(word);
+      }
+    }
+  });
+  router.push(
+      "/wiki/search?tags=" +
+      tags.value.join(",") +
+      "&keywords=" +
+      keywords.value.join(",") +
+      "&page=0"
+  );
+};
+// search box end
+
 onMounted(async () => {
   const resMyWiki = await fetch("/api/wiki/user");
   if (resMyWiki.ok) {
@@ -41,21 +69,25 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div :class="$style.container">
+  <div>
     <main>
-      <h1>MyWiki</h1>
-      <h2 :class="$style.anker" id="memo">備忘録一覧</h2>
-      <table :class="$style.cardTable">
+      <h1 :class="$style.head_text">QuickWiki</h1>
+      <div>
+        <input v-model="SearchWord" type="search" @keypress.enter="Submit" :class="$style.text_box" size="50" placeholder="すべてのsodanとmemoを検索"/>
+        <button @click="Submit" :class="$style.search_button"><font-awesome-icon :icon="['fas', 'fa-search']" /></button>
+      </div>
+      <h2 :class="$style.anker" id="memo">自分の備忘録一覧</h2>
+      <div>
         <WikiCard :wiki="memo" :isMyPage="true" v-for="memo in memos" :key="memo.id" />
-      </table>
-      <h2 :class="$style.anker" id="sodan">相談一覧</h2>
-      <table :class="$style.cardTable">
+      </div>
+      <h2 :class="$style.anker" id="sodan">自分の相談一覧</h2>
+      <div>
         <WikiCard :wiki="sodan" :isMyPage="true" v-for="sodan in sodans" :key="sodan.id" />
-      </table>
+      </div>
       <h2>すべて 後で消す！！！！！！！！</h2>
-      <table :class="$style.cardTable">
+      <div>
         <WikiCard :wiki="wiki" :isMyPage="true" v-for="wiki in wikis" :key="wiki.id" />
-      </table>
+      </div>
     </main>
   </div>
 </template>
@@ -68,15 +100,29 @@ onMounted(async () => {
   padding-top: 140px;
   margin-top: -140px;
 }
-.container {
-  display: flex;
-}
 
 main {
-  flex: 1 1 auto;
   height: fit-content;
 }
-.cardTable {
-  width: 95%;
+
+.head_text {
+  font-family: "Alfa Slab One", serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 90px;
+  padding: 10px;
+}
+
+.text_box {
+  height: 30px;
+  border-radius: 20px;
+  border: 1px solid #000000;
+  padding: 25px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.search_button {
+  font-size: 20px;
 }
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index cc1ea8a..9ef93e9 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -5,17 +5,8 @@ import WikiCard from '../components/WikiCard.vue';
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import router from '../router';
+import Wiki from '../types/wiki';
 
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
 const $toast = useToast();
 const getTags = ref<string[]>([]);
 const getKeywords = ref<string[]>([]);
@@ -65,6 +56,7 @@ onMounted(() => {
     pageNum.value = Number(route.query.page);
   }
   Search(getKeywords.value, getTags.value, pageNum.value * 20);
+  document.getElementById("page").scrollTop = 0;
 });
 onBeforeRouteUpdate((to, from) => {
   console.log("search");
@@ -81,6 +73,7 @@ onBeforeRouteUpdate((to, from) => {
     pageNum.value = Number(to.query.page);
   }
   Search(getKeywords.value, getTags.value, pageNum.value * 20);
+  document.getElementById("page").scrollTop = 0;
 });
 
 const nextPage = () =>{
@@ -106,14 +99,41 @@ const backPage = () =>{
 </script>
 
 <template>
-  <table class="cardTable">
-    <WikiCard :wiki="wiki" :isMyPage="false" v-for="wiki in wikis" :key="wiki.id" />
-  </table>
-  <button type="button" @click="backPage" v-if="pageNum > 0">back</button>
-  <button type="button" @click="nextPage">next</button>
+  <div>
+    <h1 :class="$style.head_text">検索結果: {{ getKeywords.join(",") }}</h1>
+    <p :class="$style.pagenum_text">{{ pageNum + 1 }}ページ目 {{ pageNum * 20 + 1 }}～{{ pageNum * 20 + wikis.length }}件目を表示中</p>
+    <div>
+      <WikiCard :wiki="wiki" :isMyPage="false" v-for="wiki in wikis" :key="wiki.id" :class="$style.card" />
+    </div>
+    <button type="button" @click="backPage" v-if="pageNum > 0" :class="$style.button">back</button>
+    <button type="button" @click="nextPage" :class="$style.button">next</button>
+  </div>
 </template>
-<style scoped>
-.cardTable{
-  width: 95%;
+<style module>
+.head_text {
+  font-size: 50px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.pagenum_text {
+  font-size: 15px;
+  text-align: left;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.button {
+  background-color: #eeeeee;
+  border-radius: 10px;
+}
+
+.button:hover {
+  background-color: #dddddd;
+}
+
+.card {
+  width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/TagPage.vue b/src/pages/TagPage.vue
index 79a2228..e00fdde 100644
--- a/src/pages/TagPage.vue
+++ b/src/pages/TagPage.vue
@@ -4,21 +4,13 @@ import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 import WikiCard from '../components/WikiCard.vue';
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
+import Wiki from '../types/wiki';
 
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
 const $toast = useToast();
 const getTags = ref<string[]>([]);
 const route = useRoute();
 const wikis = ref<Wiki[]>([]);
+const tagsString = ref<string>("");
 
 async function Search(tags: string[]) {
     let apipath = '/api/wiki/tag';
@@ -30,7 +22,7 @@ async function Search(tags: string[]) {
         }
         apipath += tag;
     });
-    console.log(apipath)
+    // console.log(apipath)
     const responce = await fetch(apipath)
     if(responce && responce.ok){
         wikis.value = await responce.json();
@@ -46,29 +38,45 @@ onMounted(() => {
     route.params.name != null &&
     typeof route.params.name == "string"
   ){
+    tagsString.value = route.params.name.replaceAll("+", " ");;
     getTags.value = route.params.name.split(",");
   }
   Search(getTags.value);
+  document.getElementById("page").scrollTop = 0;
 });
 onBeforeRouteUpdate((to, from) => {
   if (
     to.params.name != null &&
     typeof to.params.name == "string"
   ) {
+    tagsString.value = to.params.name.replaceAll("+", " ");
     getTags.value = to.params.name.split(",");
   }
   Search(getTags.value);
+  document.getElementById("page").scrollTop = 0;
+});
+getTags.value.forEach(tag => {
+    tagsString.value += tag + " ";
 });
 </script>
 
 <template>
-    <h1>tag</h1>
-  <table class="cardTable">
-    <WikiCard :wiki="wiki" :isMyPage=false v-for="wiki in wikis" :key="wiki.id" />
-  </table>
+  <div>
+    <h1 :class="$style.head_text">タグ: {{ tagsString }} の一覧</h1>
+    <div>
+      <WikiCard :wiki="wiki" :isMyPage=false v-for="wiki in wikis" :key="wiki.id" :class="$style.card" />
+    </div>
+  </div>
 </template>
-<style scoped>
-.cardTable{
-  width: 95%;
+<style module>
+.head_text {
+  font-size: 50px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.card {
+  width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/Wiki.vue b/src/pages/Wiki.vue
index 2837d43..28692ff 100644
--- a/src/pages/Wiki.vue
+++ b/src/pages/Wiki.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="$style.container">
     <wiki-side-bar :isMyPage="isMyPage" />
-    <main>
-      <router-view />
+    <main :class="$style.main">
+      <router-view :class="$style.view" />
     </main>
   </div>
 </template>
@@ -12,9 +12,6 @@
   margin: 0;
   padding: 0;
 }
-.headerLink{
-  color: gray;
-}
 .container {
   display: flex;
   margin-top: -10px;
@@ -24,12 +21,13 @@
   min-height: 100vh;
 }
 
-main {
-  flex: 1 1 auto;
-  height: 100vh;
+.view {
+  width: 80%;
+  margin: 0 auto;
 }
-.view{
-  border-left: 5px double gray;
+
+.main {
+  flex-grow: 1;
 }
 </style>
 <script setup lang="ts">
diff --git a/src/router.ts b/src/router.ts
index 02379b2..0f228b0 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
 import NotFound from './pages/NotFound.vue'
 import CreateSodan from './pages/CreateSodan.vue'
 import IndividualSodan from './pages/IndividualSodan.vue'
@@ -77,8 +77,8 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes
+    history: createWebHistory(),
+    routes
 })
 
 export default router
\ No newline at end of file
diff --git a/src/types/memo.ts b/src/types/memo.ts
new file mode 100644
index 0000000..b3cefb0
--- /dev/null
+++ b/src/types/memo.ts
@@ -0,0 +1,11 @@
+type Memo = {
+    id: number,
+    title: string,
+    ownerTraqId: string,
+    content: string,
+    createdAt: string,
+    updatedAt: string,
+    tags: string[]
+}
+
+export default Memo;
\ No newline at end of file
diff --git a/src/types/wiki.ts b/src/types/wiki.ts
new file mode 100644
index 0000000..10afa5a
--- /dev/null
+++ b/src/types/wiki.ts
@@ -0,0 +1,13 @@
+type Wiki = {
+    id: number;
+    type: string;
+    title: string;
+    Abstract: string;
+    createdAt: string;
+    updatedAt: string;
+    ownerTraqId: string;
+    tags: string[];
+    favorites : number;
+};
+
+export default Wiki;
\ No newline at end of file
