diff --git a/components/Header/index.js b/components/Header/index.js
index 651ded2..37006bb 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -117,7 +117,7 @@ export default function Header({ isHome }) {
   }
 
   return (
-    <StyledAppBar isHome={isHome && !isMobileSM}>
+    <StyledAppBar $isHome={isHome && !isMobileSM}>
       <StyledContainer>
         <Toolbar disableGutters>
           <StyledToolbarBox>
diff --git a/components/Header/styles.js b/components/Header/styles.js
index d7b3c18..cc436ba 100644
--- a/components/Header/styles.js
+++ b/components/Header/styles.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
   AppBar as MuiAppBar,
   Container as MuiContainer,
@@ -22,12 +22,12 @@ export const StyledAppBar = styled(MuiAppBar).attrs({
   position: "static",
   elevation: 0,
 })`
-  ${({ isHome }) =>
-    isHome
-      ? "background-color: transparent !important;"
-      : `
-  background-color: #4e33ff !important;
-  background: linear-gradient(268.88deg, rgba(255, 255, 255, 0.1) -7.38%, #9E1FFF 104.79%), #4e33ff;
+  ${({ $isHome }) =>
+    $isHome
+      ? css`background-color: transparent !important;`
+      : css`
+    background-color: #4e33ff !important;
+    background: linear-gradient(268.88deg, rgba(255, 255, 255, 0.1) -7.38%, #9E1FFF 104.79%), #4e33ff;
   `}
 `;