diff --git a/src/components/header.module.scss b/src/components/header.module.scss
new file mode 100644
index 00000000..202dbb37
--- /dev/null
+++ b/src/components/header.module.scss
@@ -0,0 +1,45 @@
+@import '../layouts/variables.scss';
+
+header.root {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--light);
+}
+
+.root h1 {
+  display: block;
+  margin: 0 auto;
+  width: calc(var(--vRythm) * 8);
+  height: calc(var(--vRythm) * 8);
+}
+
+.root a {
+  display: block;
+  width: calc(var(--vRythm) * 8);
+  height: calc(var(--vRythm) * 8);
+  background-image: url('/images/chtijs.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.root span {
+  display: none;
+}
+
+@media screen and (max-width: $CSS_BREAKPOINT_END_S) {
+  header.root {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 2;
+  }
+}
+@media screen and (min-width: $CSS_BREAKPOINT_START_M) {
+  header.root {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    border-right: 1px solid var(--grey);
+  }
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index c6aaefdd..0ba74299 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,14 +1,10 @@
 import Link from 'next/link';
-import { publicRuntimeConfig } from '../utils/config';
-import {
-  CSS_BREAKPOINT_END_S,
-  CSS_BREAKPOINT_START_M,
-} from '../utils/constants';
+import styles from './header.module.scss';
 
 const Header = () => {
   return (
     <>
-      <header>
+      <header className={styles.root}>
         <h1>
           <Link href="/" legacyBehavior>
             <a>
@@ -17,47 +13,6 @@ const Header = () => {
           </Link>
         </h1>
       </header>
-      <style jsx>{`
-        header {
-          display: flex;
-          flex-direction: column;
-          background-color: var(--light);
-        }
-        h1 {
-          display: block;
-          margin: 0 auto;
-          width: calc(var(--vRythm) * 8);
-          height: calc(var(--vRythm) * 8);
-        }
-        a {
-          display: block;
-          width: calc(var(--vRythm) * 8);
-          height: calc(var(--vRythm) * 8);
-          background-image: url('${publicRuntimeConfig.basePath}/images/chtijs.svg');
-          background-size: contain;
-          background-repeat: no-repeat;
-        }
-        span {
-          display: none;
-        }
-        @media screen and (max-width: ${CSS_BREAKPOINT_END_S}) {
-          header {
-            grid-column-start: 1;
-            grid-column-end: 3;
-            grid-row-start: 1;
-            grid-row-end: 2;
-          }
-        }
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
-          header {
-            grid-column-start: 1;
-            grid-column-end: 2;
-            grid-row-start: 1;
-            grid-row-end: 2;
-            border-right: 1px solid var(--grey);
-          }
-        }
-      `}</style>
     </>
   );
 };