diff --git a/assets/image/gest-user.svg b/assets/image/gest-user.svg
deleted file mode 100644
index 503dc09..0000000
--- a/assets/image/gest-user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/></svg>
\ No newline at end of file
diff --git a/assets/image/C3logo.png b/assets/images/C3logo.png
similarity index 100%
rename from assets/image/C3logo.png
rename to assets/images/C3logo.png
diff --git a/assets/image/ToyBoxlogo.png b/assets/images/ToyBoxLogo.png
similarity index 100%
rename from assets/image/ToyBoxlogo.png
rename to assets/images/ToyBoxLogo.png
diff --git a/assets/image/bg-gray.png b/assets/images/bg-gray.png
similarity index 100%
rename from assets/image/bg-gray.png
rename to assets/images/bg-gray.png
diff --git a/assets/images/guest-user.svg b/assets/images/guest-user.svg
new file mode 100644
index 0000000..c15f909
--- /dev/null
+++ b/assets/images/guest-user.svg
@@ -0,0 +1,5 @@
+<svg style="fill: #e5e7eb;" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960"
+  width="48">
+  <path
+    d="M480 575q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160 896v-94q0-38 19-65t49-41q67-30 128.5-45T480 636q62 0 123 15.5T731 696q31 14 50 41t19 65v94H160Z" />
+</svg>
\ No newline at end of file
diff --git a/components/Footer.vue b/components/Footer.vue
index 8b2c702..82968c5 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-center">
       <a class="mx-8" href="https://compositecomputer.club" target="_blank">
         <img
-          src="../assets/image/C3logo.png"
+          src="../assets/images/C3logo.png"
           class="hover:opacity-50 transition h-10"
           alt="C3 logo"
         />
diff --git a/components/Header.vue b/components/Header.vue
index 0baa536..e63c787 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -22,7 +22,7 @@
       />
       <nuxt-link to="/" class="hover:opacity-50 h-full">
         <img
-          src="@/assets/image/ToyBoxlogo.png"
+          src="@/assets/images/ToyBoxlogo.png"
           class="h-full"
           alt="ToyBox logo"
         />
@@ -84,9 +84,12 @@
           />
         </div>
         <!-- logged in -->
-        <button class="hover:opacity-60 transition" @click="activeNav = true">
-          <img
-            v-if="nowLogin"
+        <button
+          v-if="nowLogin"
+          class="hover:opacity-60 transition"
+          @click="activeNav = true"
+        >
+          <!-- <img
             :src="getIcon"
             class="
               rounded-full
@@ -98,7 +101,8 @@
               bg-white
             "
             alt="user icon"
-          />
+          /> -->
+          <user-rounded-icon :image-src="getIcon" size="large" />
         </button>
       </div>
       <!-- navigation -->
@@ -120,10 +124,15 @@
         "
       >
         <!-- icon -->
-        <img
+        <!-- <img
           :src="getIcon"
           class="rounded-full w-16 h-16 mx-auto my-1 pointer-events-none"
           alt="user icon"
+        /> -->
+        <user-rounded-icon
+          :image-src="getIcon"
+          size="xx-large"
+          class="mx-auto my-3"
         />
         <!-- name -->
         <div class="text-gray-200 mb-6">
@@ -262,11 +271,14 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import BaseTextButton from '@/components/commons/BaseTextButton.vue'
+import UserRoundedIcon from '@/components/commons/UserRoundedIcon.vue'
+
 import { authStore, workFilterStore } from '@/store'
 
 @Component({
   components: {
-    BaseTextButton
+    BaseTextButton,
+    UserRoundedIcon
   }
 })
 export default class Header extends Vue {
@@ -278,7 +290,11 @@ export default class Header extends Vue {
   }
 
   get getIcon() {
-    return authStore.getUser.avatar_url
+    if (authStore.getUser.avatar_url) {
+      return authStore.getUser.avatar_url
+    } else {
+      return ''
+    }
   }
 
   get getDisplayName() {
diff --git a/components/comments/CommentUser.vue b/components/comments/CommentUser.vue
index 685123b..a91bbd3 100644
--- a/components/comments/CommentUser.vue
+++ b/components/comments/CommentUser.vue
@@ -7,7 +7,7 @@
       :to="`/users/${user.id}`"
       :class="{ 'pointer-events-auto': user.id !== '0' }"
     >
-      <user-rounded-icon :imageSrc="user.avatar_url" />
+      <user-rounded-icon :image-src="user.avatar_url" />
     </nuxt-link>
     <nuxt-link
       :to="`/users/${user.id}`"
diff --git a/components/comments/CommentsField.vue b/components/comments/CommentsField.vue
index 1eb9097..a485ecc 100644
--- a/components/comments/CommentsField.vue
+++ b/components/comments/CommentsField.vue
@@ -68,7 +68,7 @@ export default class CommentsField extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }
diff --git a/components/comments/CommentsListItem.vue b/components/comments/CommentsListItem.vue
index 5c0030d..bfe7ea0 100644
--- a/components/comments/CommentsListItem.vue
+++ b/components/comments/CommentsListItem.vue
@@ -147,7 +147,7 @@ export default class CommentsListItem extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }
diff --git a/components/comments/ReplyCommentsListItem.vue b/components/comments/ReplyCommentsListItem.vue
index 9b4abec..cb36536 100644
--- a/components/comments/ReplyCommentsListItem.vue
+++ b/components/comments/ReplyCommentsListItem.vue
@@ -41,7 +41,7 @@ export default class ReplyCommentsListItem extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }
diff --git a/components/commons/MarkdownView.vue b/components/commons/MarkdownView.vue
index 9509184..35e322a 100644
--- a/components/commons/MarkdownView.vue
+++ b/components/commons/MarkdownView.vue
@@ -2,17 +2,7 @@
   <!-- eslint-disable-next-line vue/no-v-html -->
   <div class="relative">
     <div
-      class="
-        markdown-view
-        w-full
-        mt-5
-        pt-5
-        pb-10
-        px-4
-        bg-gray-50
-        rounded-xl
-        text-gray-600
-      "
+      class="markdown-view"
       :class="[
         {
           'hidden-blur overflow-hidden max-h-96':
@@ -82,7 +72,15 @@ export default class MarkdownView extends Vue {
 }
 
 .markdown-view {
-  @apply text-xl;
+  @apply w-full;
+  @apply mt-5;
+  @apply pt-5;
+  @apply pb-10;
+  @apply px-4;
+  @apply bg-gray-50;
+  @apply rounded-xl;
+  @apply text-gray-600;
+  @apply text-base;
   @apply break-words;
 
   ol {
@@ -96,15 +94,27 @@ export default class MarkdownView extends Vue {
   }
 
   h1 {
-    @apply text-6xl;
+    @apply text-4xl;
   }
 
   h2 {
-    @apply text-5xl;
+    @apply text-3xl;
+    @apply px-2;
   }
 
   h3 {
-    @apply text-4xl;
+    @apply text-2xl;
+    @apply px-4;
+  }
+
+  h4 {
+    @apply text-xl;
+    @apply px-6;
+  }
+
+  h5 {
+    @apply text-lg;
+    @apply px-8;
   }
 
   h1,
@@ -115,7 +125,22 @@ export default class MarkdownView extends Vue {
     @apply border-b-[3px];
     @apply border-b-bg-color;
     @apply border-dotted;
-    @apply mb-6;
+    @apply mt-8;
+    @apply mb-5;
+    @apply pb-[5px];
+    @apply pt-[10px];
+  }
+
+  h4,
+  h5 {
+    --bg-color: rgb(96, 170, 255);
+    @apply font-semibold;
+    @apply border-b-[2px];
+    @apply border-b-bg-color;
+    @apply border-dotted;
+    @apply font-semibold;
+    @apply mt-4;
+    @apply mb-2;
     @apply pb-[5px];
     @apply pt-[10px];
   }
@@ -123,6 +148,7 @@ export default class MarkdownView extends Vue {
   p {
     @apply mb-5;
     @apply mt-[5px];
+    @apply leading-8;
 
     code {
       @apply bg-[#f0f0f0];
@@ -187,19 +213,50 @@ th {
 
 @media screen and (max-width: 600px) {
   .markdown-view {
+    @apply px-2.5;
+    @apply text-sm;
+
+    h1 {
+      @apply text-2xl;
+    }
+
+    h2 {
+      @apply text-xl;
+      @apply px-2;
+    }
+
+    h3 {
+      @apply text-lg;
+      @apply px-4;
+    }
+
+    h4 {
+      @apply text-base;
+      @apply px-6;
+    }
+
+    h5 {
+      @apply text-sm;
+      @apply px-8;
+    }
+
     h1,
     h2,
     h3 {
+      @apply mt-6;
+      @apply mb-2;
       @apply py-0;
-      @apply px-[5px];
     }
 
     p {
-      @apply my-0;
       @apply mx-auto;
+      @apply mt-3;
+      @apply mb-4;
     }
 
     blockquote {
+      @apply my-4;
+
       p {
         @apply w-full;
         @apply my-4;
@@ -210,9 +267,16 @@ th {
     p,
     blockquote {
       @apply w-[95%];
-      @apply my-8;
       @apply mx-auto;
     }
+
+    pre {
+      @apply rounded-xl;
+
+      code {
+        @apply text-sm;
+      }
+    }
   }
 
   .markdown-view img {
diff --git a/components/commons/UserRoundedIcon.vue b/components/commons/UserRoundedIcon.vue
index 7b77155..11dfb37 100644
--- a/components/commons/UserRoundedIcon.vue
+++ b/components/commons/UserRoundedIcon.vue
@@ -4,14 +4,37 @@
     :class="[
       { 'w-6 h-6': size === 'small' },
       { 'w-8 h-8': size === 'base' },
-      { 'w-32 h-32': size === 'large' }
+      { 'w-11 h-11': size === 'large' },
+      { 'w-14 h-14': size === 'x-large' },
+      { 'w-16 h-16': size === 'xx-large' },
+      { ' bg-slate-500': !imageSrc }
     ]"
   >
     <img
+      v-if="imageSrc"
       :src="imageSrc"
       alt="user icon"
       class="absolute h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
     />
+    <svg
+      v-else
+      class="
+        absolute
+        h-full
+        top-1/2
+        left-1/2
+        -translate-x-1/2 -translate-y-1/2
+        fill-slate-100
+      "
+      xmlns="http://www.w3.org/2000/svg"
+      height="48"
+      viewBox="0 96 960 960"
+      width="48"
+    >
+      <path
+        d="M480 575q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160 896v-94q0-38 19-65t49-41q67-30 128.5-45T480 636q62 0 123 15.5T731 696q31 14 50 41t19 65v94H160Z"
+      />
+    </svg>
   </div>
 </template>
 
@@ -24,6 +47,6 @@ export default class UserRoundedIcon extends Vue {
   imageSrc!: string
 
   @Prop({ type: String, required: false, default: 'base' })
-  size!: 'small' | 'base' | 'large'
+  size!: 'small' | 'base' | 'large' | 'x-large' | 'xx-large'
 }
 </script>
diff --git a/components/commons/UserTag.vue b/components/commons/UserTag.vue
index d3af95e..bd55b9e 100644
--- a/components/commons/UserTag.vue
+++ b/components/commons/UserTag.vue
@@ -11,7 +11,7 @@
     ]"
   >
     <user-rounded-icon
-      :imageSrc="user.avatar_url"
+      :image-src="user.avatar_url ? user.avatar_url : ''"
       :size="invisibleName || size === 'small' ? 'small' : 'base'"
     />
     <div
diff --git a/components/users/UsersProfile.vue b/components/users/UsersProfile.vue
index 0d7b22d..1bbc392 100644
--- a/components/users/UsersProfile.vue
+++ b/components/users/UsersProfile.vue
@@ -31,7 +31,7 @@
     />
     <div class="bg-gray-300 w-full h-64 z-0 relative overflow-hidden mb-10">
       <img
-        src="@/assets/image/bg-gray.png"
+        src="@/assets/images/bg-gray.png"
         alt="user banner image"
         class="
           absolute
@@ -43,7 +43,7 @@
       />
     </div>
     <div class="z-10 absolute left-1/2 -translate-x-1/2 top-36">
-      <user-rounded-icon :imageSrc="user.avatar_url" :size="'large'" />
+      <user-rounded-icon :image-src="user.avatar_url" :size="'large'" />
     </div>
     <div class="text-3xl m-3 font-bold">
       {{ user.display_name }}
diff --git a/nuxt.config.js b/nuxt.config.js
index 9c988a9..91b9864 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -174,7 +174,9 @@ export default {
       ]).then(([users, works]) => {
         const urls = []
         users.data.map((user) => urls.push({ route: `/users/${user.id}` }))
-        works.data.map((work) => urls.push({ route: `/works/${work.id}` }))
+        works.data.works.map((work) =>
+          urls.push({ route: `/works/${work.id}` })
+        )
         return urls
       })
     }
diff --git a/pages/works/_id/index.vue b/pages/works/_id/index.vue
index f9e4ed8..1b619ab 100644
--- a/pages/works/_id/index.vue
+++ b/pages/works/_id/index.vue
@@ -278,24 +278,12 @@
       </div>
     </div>
 
-    <div
-      class="
-        w-full
-        rounded-2xl
-        my-10
-        bg-white
-        shadow-md
-        px-5
-        pb-5
-        pt-4
-        relative
-      "
-    >
+    <div class="work-info">
       <visibility-state-tag
         :visibility="work.visibility"
         class="text-black w-fit"
       />
-      <div class="mr-4 text-4xl text-black my-3">{{ work.title }}</div>
+      <div class="work-info__title">{{ work.title }}</div>
       <div class="text-sm">
         <div>
           投稿日時：
@@ -829,7 +817,36 @@ export default class Works extends Vue {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.work-info {
+  @apply w-full;
+  @apply rounded-2xl;
+  @apply my-10;
+  @apply bg-white;
+  @apply shadow-md;
+  @apply px-5;
+  @apply pb-5;
+  @apply pt-4;
+  @apply relative;
+
+  &__title {
+    @apply text-4xl;
+    @apply text-black;
+    @apply my-3;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .work-info {
+    @apply px-3;
+    @apply py-3;
+
+    &__title {
+      @apply text-2xl;
+    }
+  }
+}
+
 .material-symbols-liked {
   font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
 }
diff --git a/utils/query.ts b/utils/query.ts
index 87171a3..5d4b57d 100644
--- a/utils/query.ts
+++ b/utils/query.ts
@@ -23,9 +23,9 @@ export class Query {
     biggest_tag_id?: string,
     w?: string
   ) {
-    if (tags) {
+    if (tags && tags.length > 0) {
       this.addQuestionOrAnd()
-      this.query += 'tags='
+      this.query += 'tag_ids='
       tags.map((tag) => {
         this.query += `${tag.id},`
       })