diff --git a/src/components/@molecules/SearchInput/SearchInput.tsx b/src/components/@molecules/SearchInput/SearchInput.tsx
index a624662a2..7617bd356 100644
--- a/src/components/@molecules/SearchInput/SearchInput.tsx
+++ b/src/components/@molecules/SearchInput/SearchInput.tsx
@@ -53,7 +53,7 @@ import { getBoxNameStatus, SearchResult } from './SearchResult'
 import { HistoryItem, SearchHandler, SearchItem } from './types'
 
 const Container = styled.div<{ $size: 'medium' | 'extraLarge' }>(
-  ({ $size }) => css`
+  ({ $size, theme }) => css`
     width: 100%;
     position: relative;
     ${$size === 'extraLarge' &&
diff --git a/src/layouts/Content.tsx b/src/layouts/Content.tsx
index d5c321599..77f81ce18 100644
--- a/src/layouts/Content.tsx
+++ b/src/layouts/Content.tsx
@@ -61,7 +61,7 @@ const ContentContainer = styled.div(
 )
 
 const ContentPlaceholder = styled.div(
-  () => css`
+  ({ theme }) => css`
     display: none;
     height: 0;
     width: 0;
@@ -72,7 +72,7 @@ const ContentPlaceholder = styled.div(
 )
 
 const WarningWrapper = styled.div(
-  () => css`
+  ({ theme }) => css`
     width: 100%;
     grid-column: span 1;
     height: min-content;
@@ -98,7 +98,7 @@ const TitleContainer = styled.div(
 )
 
 const TitleWrapper = styled.div(
-  () => css`
+  ({ theme }) => css`
     width: 100%;
     display: flex;
     align-items: center;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index e9d84f1ee..bf62aa6fa 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -25,11 +25,13 @@ const LogoAndLanguage = styled.div(
   `,
 )
 
-const StyledLeadingHeading = styled(LeadingHeading)`
-  @media (min-width: ${theme.breakpoints.sm}px) {
-    display: none;
-  }
-`
+const StyledLeadingHeading = styled(LeadingHeading)(
+  ({ theme }) => css`
+    @media (min-width: ${theme.breakpoints.sm}px) {
+      display: none;
+    }
+  `,
+)
 
 export default function Page() {
   const { t } = useTranslation()
diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx
index 867228bbb..91ce8e072 100644
--- a/src/pages/ens-v2.tsx
+++ b/src/pages/ens-v2.tsx
@@ -20,17 +20,19 @@ import {
 // import DAOSVG from '../assets/DAO.svg'
 // import SocialX from '../assets/social/SocialX.svg'
 
-const Title = styled.h1`
-  font-weight: 830;
-  text-align: center;
+const Title = styled.h1(
+  ({ theme }) => css`
+    font-weight: 830;
+    text-align: center;
 
-  font-size: 36px;
-  line-height: 104%;
+    font-size: 36px;
+    line-height: 104%;
 
-  @media (min-width: ${theme.breakpoints.sm}px) {
-    font-size: 52px;
-  }
-`
+    @media (min-width: ${theme.breakpoints.sm}px) {
+      font-size: 52px;
+    }
+  `,
+)
 
 const Header = styled.header(
   ({ theme }) => css`