diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index bed3162..d22cb84 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -8,53 +8,84 @@
 
 @import 'tailwindcss/utilities';
 
+
 html {
     @apply font-sans;
 }
-body {
-    background-image: url('~assets/images/bg-sm.jpg');
-    background-size: cover;
-    background-position: center;
-    @apply min-h-screen;
-}
-@screen sm {
-    body {
-        background-image: url('~assets/images/bg-md.jpg');
-    }
+.main {
+    @apply px-4 py-4;
 }
 @screen md {
-    body {
-        background-image: url('~assets/images/bg-lg.jpg');
-    }
+  .main {
+    @apply px-8;
+  }
 }
 @screen lg {
-    body {
-        background-image: url('~assets/images/bg-xl.jpg');
-    }
+  .main {
+    @apply px-16;
+  }
 }
 @screen xl {
-    body {
-        background-image: url('~assets/images/bg-xxl.jpg');
-    }
+  .main {
+    @apply px-32;
+  }
+}
+.page {
+  @apply w-full;
+}
+.main p {
+  @apply my-4;
+}
+.main h1 {
+  @apply my-4 text-4xl font-light;
+}
+.main h2 {
+  @apply my-4 text-3xl font-light;
+}
+.main h3 {
+  @apply my-4 text-2xl font-light;
+}
+.main h4 {
+  @apply my-4 text-xl font-light;
+}
+.main h5 {
+  @apply my-4 text-lg font-light;
+}
+.main h6 {
+  @apply my-4 text-base font-light;
+}
+.main a {
+  @apply text-yuika-blue-700;
+}
+.main a:hover {
+  @apply underline;
+}
+.main ul {
+  @apply list-disc;
+}
+.main ul li p {
+  @apply my-0;
+}
+.main ol {
+  @apply list-decimal;
+}
+.main code {
+  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
+}
+.main blockquote {
+  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
+}
+.main pre {
+  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
 }
 
-.content h1 {
-    @apply text-4xl;
-}
-.content h2 {
-    @apply text-3xl;
+blockquote {
+   @apply border-l-4 border-white pl-8 text-yuika-blue-500;
 }
 
-.content ul {
-    @apply list-disc;
-}
-.content ul li {
-    @apply ml-4;
-}
-.content a {
-    @apply text-yuika-blue-200;
-}
-
-.content blockquote {
-   @apply border-l-4 border-white pl-8 text-gray-200;
+.gallery {
+    @apply flex flex-row flex-wrap items-center;
 }
+.gallery .gallery-image {
+    @apply w-full px-4 py-4;
+}
\ No newline at end of file
diff --git a/assets/images/mei/bg-lg.jpg b/assets/images/mei/bg-lg.jpg
new file mode 100644
index 0000000..dce5872
Binary files /dev/null and b/assets/images/mei/bg-lg.jpg differ
diff --git a/assets/images/mei/bg-md.jpg b/assets/images/mei/bg-md.jpg
new file mode 100644
index 0000000..e9c39ba
Binary files /dev/null and b/assets/images/mei/bg-md.jpg differ
diff --git a/assets/images/mei/bg-sm.jpg b/assets/images/mei/bg-sm.jpg
new file mode 100644
index 0000000..4067135
Binary files /dev/null and b/assets/images/mei/bg-sm.jpg differ
diff --git a/assets/images/mei/bg-xl.jpg b/assets/images/mei/bg-xl.jpg
new file mode 100644
index 0000000..0d74f8a
Binary files /dev/null and b/assets/images/mei/bg-xl.jpg differ
diff --git a/assets/images/mei/bg-xxl.jpg b/assets/images/mei/bg-xxl.jpg
new file mode 100644
index 0000000..0e849ba
Binary files /dev/null and b/assets/images/mei/bg-xxl.jpg differ
diff --git a/assets/images/mei/bg.jpg b/assets/images/mei/bg.jpg
new file mode 100644
index 0000000..0e849ba
Binary files /dev/null and b/assets/images/mei/bg.jpg differ
diff --git a/assets/images/bg-lg.jpg b/assets/images/yuika/bg-lg.jpg
similarity index 100%
rename from assets/images/bg-lg.jpg
rename to assets/images/yuika/bg-lg.jpg
diff --git a/assets/images/bg-md.jpg b/assets/images/yuika/bg-md.jpg
similarity index 100%
rename from assets/images/bg-md.jpg
rename to assets/images/yuika/bg-md.jpg
diff --git a/assets/images/bg-sm.jpg b/assets/images/yuika/bg-sm.jpg
similarity index 100%
rename from assets/images/bg-sm.jpg
rename to assets/images/yuika/bg-sm.jpg
diff --git a/assets/images/bg-xl.jpg b/assets/images/yuika/bg-xl.jpg
similarity index 100%
rename from assets/images/bg-xl.jpg
rename to assets/images/yuika/bg-xl.jpg
diff --git a/assets/images/bg-xxl.jpg b/assets/images/yuika/bg-xxl.jpg
similarity index 100%
rename from assets/images/bg-xxl.jpg
rename to assets/images/yuika/bg-xxl.jpg
diff --git a/assets/images/bg.jpg b/assets/images/yuika/bg.jpg
similarity index 100%
rename from assets/images/bg.jpg
rename to assets/images/yuika/bg.jpg
diff --git a/components/Header.vue b/components/Header.vue
index 17b1b8f..88f3b8d 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -96,7 +96,7 @@ export default {
   width: 100vw;
   height: 100vh;
   position: absolute;
-  background-image: url('~assets/images/bg-sm.jpg');
+  background-image: url('~assets/images/yuika/bg-sm.jpg');
   background-size: cover;
   background-position: right 25% top 20%;
   @apply transition-all duration-300 ease-in-out;
@@ -115,22 +115,22 @@ export default {
 }
 @screen sm {
     .site-background {
-        background-image: url('~assets/images/bg-md.jpg');
+        background-image: url('~assets/images/yuika/bg-md.jpg');
     }
 }
 @screen md {
     .site-background {
-        background-image: url('~assets/images/bg-lg.jpg');
+        background-image: url('~assets/images/yuika/bg-lg.jpg');
     }
 }
 @screen lg {
     .site-background {
-        background-image: url('~assets/images/bg-xl.jpg');
+        background-image: url('~assets/images/yuika/bg-xl.jpg');
     }
 }
 @screen xl {
     .site-background {
-        background-image: url('~assets/images/bg-xxl.jpg');
+        background-image: url('~assets/images/yuika/bg-xxl.jpg');
     }
 }
 .site-header-inner {
diff --git a/components/PageHeader.vue b/components/PageHeader.vue
index 50cff32..6fda34b 100644
--- a/components/PageHeader.vue
+++ b/components/PageHeader.vue
@@ -1,5 +1,15 @@
 <template>
     <div class="relative group page-header">
+        <style>
+            :root {
+                --bg: url('{{ require('@/assets/images/'+normalImageType+'/bg.jpg') }}');
+                --bg-sm: url('{{ require('@/assets/images/'+normalImageType+'/bg-sm.jpg') }}');
+                --bg-md: url('{{ require('@/assets/images/'+normalImageType+'/bg-md.jpg') }}');
+                --bg-lg: url('{{ require('@/assets/images/'+normalImageType+'/bg-lg.jpg') }}');
+                --bg-xl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xl.jpg') }}');
+                --bg-xxl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xxl.jpg') }}');
+            }
+        </style>
         <div class="h-full w-full page-header-background">
             <div class="w-full h-full opacity-50 bg-black">
             </div>
@@ -16,6 +26,12 @@
 
 <script>
 export default {
+  props: [ 'imageType' ],
+  computed: {
+    normalImageType() {
+      return this.imageType ?? 'yuika';
+    }
+  },
 
 }
 </script>
@@ -38,28 +54,28 @@ export default {
 }
 
 .page-header-background {
-  background-image: url('~assets/images/bg-sm.jpg');
+  background-image: var(--bg-sm);
   background-size: cover;
   background-position: right 25% top 20%;
 }
 @screen sm {
     .page-header-background {
-        background-image: url('~assets/images/bg-md.jpg');
+        background-image: var(--bg-md);
     }
 }
 @screen md {
     .page-header-background {
-        background-image: url('~assets/images/bg-lg.jpg');
+        background-image: var(--bg-lg);
     }
 }
 @screen lg {
     .page-header-background {
-        background-image: url('~assets/images/bg-xl.jpg');
+        background-image: var(--bg-xl);
     }
 }
 @screen xl {
     .page-header-background {
-        background-image: url('~assets/images/bg-xxl.jpg');
+        background-image: var(--bg-xxl);
     }
 }
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index c5a7f69..c17498e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,103 +9,15 @@
 </template>
 
 <script>
-// import FloatingYuriko from '~/components/FloatingYuriko'
 import Header from '~/components/Header'
 export default {
   components: {
-//    FloatingYuriko
     Header,
   }
 }
 </script>
 
 <style>
-@import 'tailwindcss/base';
-
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
-html {
-    @apply font-sans;
-}
-.main {
-    @apply px-4 py-4;
-}
-@screen md {
-  .main {
-    @apply px-8;
-  }
-}
-@screen lg {
-  .main {
-    @apply px-16;
-  }
-}
-@screen xl {
-  .main {
-    @apply px-32;
-  }
-}
-.page {
-  @apply w-full;
-}
-.main p {
-  @apply my-4;
-}
-.main h1 {
-  @apply my-4 text-4xl font-light;
-}
-.main h2 {
-  @apply my-4 text-3xl font-light;
-}
-.main h3 {
-  @apply my-4 text-2xl font-light;
-}
-.main h4 {
-  @apply my-4 text-xl font-light;
-}
-.main h5 {
-  @apply my-4 text-lg font-light;
-}
-.main h6 {
-  @apply my-4 text-base font-light;
-}
-.main a {
-  @apply text-yuika-blue-700;
-}
-.main a:hover {
-  @apply underline;
-}
-.main ul {
-  @apply list-disc;
-}
-.main ul li p {
-  @apply my-0;
-}
-.main ol {
-  @apply list-decimal;
-}
-.main code {
-  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
-}
-.main blockquote {
-  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
-}
-.main pre {
-  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
-}
-
-blockquote {
-   @apply border-l-4 border-white pl-8 text-yuika-blue-500;
-}
-
-.gallery {
-    @apply flex flex-row flex-wrap items-center;
-}
-.gallery .gallery-image {
-    @apply w-full px-4 py-4;
-}
 
 </style>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index bc21072..9edac48 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -34,6 +34,7 @@ module.exports = {
   ** Global CSS
   */
   css: [
+      '@/assets/css/tailwind.css',
   ],
   env: {
     subheader: process.env.SUBHEADER || "" ,
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
index 26d4159..659fd3f 100644
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="mei">
       <h1>Project Portfolio</h1>
     </PageHeader>
     <main class="container mx-auto main">
diff --git a/pages/projects/miracle.vue b/pages/projects/miracle.vue
index 4b80b6b..c5a77b6 100644
--- a/pages/projects/miracle.vue
+++ b/pages/projects/miracle.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="mei">
       <h1>nanao.moe</h1>
       <p>
         <a href="https://nanao.moe">live</a>
diff --git a/pages/projects/yuika.vue b/pages/projects/yuika.vue
index 055e35f..390256b 100644
--- a/pages/projects/yuika.vue
+++ b/pages/projects/yuika.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="mei">
       <h1>nanao.moe Blog</h1>
       <p>
         <a href="https://blog.nanao.moe">live</a>
diff --git a/store/index.js b/store/index.js
index b655afb..1209b83 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,6 +1,6 @@
 
 export const state = () => ({
-  title: 'Damillora'
+  title: 'Damillora',
 })
 
 export const mutations = {