diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a2440e7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "[svelte]": {
+        "editor.defaultFormatter": "svelte.svelte-vscode"
+    }
+}
\ No newline at end of file
diff --git a/src/node_modules/components/FloatingYuriko.svelte b/src/node_modules/components/FloatingYuriko.svelte
index 517bb77..de96eac 100644
--- a/src/node_modules/components/FloatingYuriko.svelte
+++ b/src/node_modules/components/FloatingYuriko.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Howl, Howler } from "howler";
+    import { Howl } from "howler";
     function yurikoSound() {
         var sound = new Howl({
             src: "/yuriko.ogg",
diff --git a/src/node_modules/components/Header.svelte b/src/node_modules/components/Header.svelte
index 59c8be2..e137876 100644
--- a/src/node_modules/components/Header.svelte
+++ b/src/node_modules/components/Header.svelte
@@ -16,7 +16,7 @@
 
 <div>
     <div class:site-header={true} class:enabled={menu_shown} class:detached>
-        <div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:site-header__background--yuriko={isYurikoBirthday()} />
+        <div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} />
         <div class="site-header__inner">
             <header class="header">
                 <div class="header__top">
diff --git a/src/node_modules/components/PageHeader.svelte b/src/node_modules/components/PageHeader.svelte
index 18cf50c..8a12369 100644
--- a/src/node_modules/components/PageHeader.svelte
+++ b/src/node_modules/components/PageHeader.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="page-header">
-    <div class:page-header__background={true} class:page-header__background--yuriko={isYurikoBirthday()} >
+    <div class:page-header__background={true} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} >
         <div class="page-header__overlay" />
     </div>
     <div class="page-header__contents">
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 044aa2e..75392fd 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -6,6 +6,7 @@
 
 <style lang="scss" global>
 	@import "~@damillora/shian/dist/app.css";
+	@import "../sass/background";
 </style>
 
 <Header></Header>
diff --git a/src/sass/_responsive.scss b/src/sass/_responsive.scss
new file mode 100644
index 0000000..f1c3b23
--- /dev/null
+++ b/src/sass/_responsive.scss
@@ -0,0 +1,14 @@
+@mixin screen($point) {
+    @if $point == xl {
+        @media screen and (min-width: 1280px) { @content ; }
+    }
+    @else if $point == lg {
+        @media (min-width: 1024px) { @content ; }
+    }
+    @else if $point == md {
+        @media (min-width: 768px) { @content ; }
+    }
+    @else if $point == sm {
+        @media (min-width: 640px)  { @content ; }
+    }
+}
\ No newline at end of file
diff --git a/src/sass/background.scss b/src/sass/background.scss
new file mode 100644
index 0000000..f743cf0
--- /dev/null
+++ b/src/sass/background.scss
@@ -0,0 +1,11 @@
+@import "responsive";
+@import "backgrounds/283-yuika";
+@import "backgrounds/765-yuriko";
+
+.background-nanaomoe {
+    @include bg-283-yuika;
+
+    &--yuriko {
+        @include bg-765-yuriko;
+    }
+}
\ No newline at end of file
diff --git a/src/sass/backgrounds/_283-yuika.scss b/src/sass/backgrounds/_283-yuika.scss
new file mode 100644
index 0000000..a2d35b9
--- /dev/null
+++ b/src/sass/backgrounds/_283-yuika.scss
@@ -0,0 +1,17 @@
+@mixin bg-283-yuika() {
+    background-image: url('/images/bg/283-yuika/bg-sm.jpg');
+    background-size: cover;
+    background-position: right 25% top 20%;
+    @include screen(sm) {
+        background-image: url('/images/bg/283-yuika/bg-md.jpg');
+    }
+    @include screen(md) {
+        background-image: url('/images/bg/283-yuika/bg-lg.jpg');
+    }
+    @include screen(lg) {
+        background-image: url('/images/bg/283-yuika/bg-xl.jpg');
+    }
+    @include screen(xl) {
+        background-image: url('/images/bg/283-yuika/bg-xxl.jpg')
+    }
+}
\ No newline at end of file
diff --git a/src/sass/backgrounds/_765-yuriko.scss b/src/sass/backgrounds/_765-yuriko.scss
new file mode 100644
index 0000000..b2b1765
--- /dev/null
+++ b/src/sass/backgrounds/_765-yuriko.scss
@@ -0,0 +1,17 @@
+@mixin bg-765-yuriko() {
+    background-image: url('/images/bg/765-yuriko/bg-sm.jpg');
+    background-size: cover;
+    background-position: right 25% top 20%;
+    @include screen(sm) {
+        background-image: url('/images/bg/765-yuriko/bg-md.jpg');
+    }
+    @include screen(md) {
+        background-image: url('/images/bg/765-yuriko/bg-lg.jpg');
+    }
+    @include screen(lg) {
+        background-image: url('/images/bg/765-yuriko/bg-xl.jpg');
+    }
+    @include screen(xl) {
+        background-image: url('/images/bg/765-yuriko/bg-xxl.jpg')
+    }
+}
\ No newline at end of file