diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 03d2b6a7..5dd9d327 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -10,6 +10,7 @@ import {
 import SecondNavbar from '../SecondNavbar';
 import FeedbackButton from '../FeedbackButton';
 import { appendProtocolIfMissing } from '../../utils/fetchUtil';
+import styles from './Header.module.scss';
 
 const getEditProfileUrl = (email) => {
   const slug = email.replace(/[*+~.()'"!:@]/g, '-');
@@ -28,13 +29,13 @@ const Header = ({
   const [session, loading] = useSession();
   const router = useRouter();
   return (
-    <header className="as-header" sticky="top" style={{ zIndex: 2 }}>
+    <header className={`as-header ${styles.header}`} sticky="top">
       <Navbar bg="dark" variant="dark" className="px-0">
         <Container fluid className="px-5">
           <Navbar.Brand href="/">
             {process.env.NEXT_PUBLIC_LOGO_SVG && (
               <img
-                className="header-logo-svg"
+                className={styles.headerlogo}
                 src={`/${process.env.NEXT_PUBLIC_LOGO_SVG}`}
                 alt="logo"
               />
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 00000000..46ae9e92
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,10 @@
+.header {
+  z-index: 2;
+}
+
+.headerlogo {
+  width: 26px;
+  height: 26px;
+  margin-right: 0.5rem;
+  margin-bottom: 0.3rem;
+}
diff --git a/src/style/custom.scss b/src/style/custom.scss
index 00ef6cb5..b64f0876 100644
--- a/src/style/custom.scss
+++ b/src/style/custom.scss
@@ -9,13 +9,6 @@ $theme-colors: (
   "info": theme.$info,
 );
 
-.header-logo-svg {
-  width: 26px;
-  height: 26px;
-  margin-right: 0.5rem;
-  margin-bottom: 0.3rem;
-}
-
 #slate-container {
   width: 750px;
 }