diff --git a/src/components/pages/profile/[name]/registration/steps/Profile/CustomProfileRecordInput.tsx b/src/components/pages/profile/[name]/registration/steps/Profile/CustomProfileRecordInput.tsx
index 23af7ad3c..5075e49a5 100644
--- a/src/components/pages/profile/[name]/registration/steps/Profile/CustomProfileRecordInput.tsx
+++ b/src/components/pages/profile/[name]/registration/steps/Profile/CustomProfileRecordInput.tsx
@@ -27,7 +27,7 @@ const InnerResponsiveContainer = styled.div(
 )
 
 const LabelWrapper = styled.div(
-  () => css`
+  ({ theme }) => css`
     width: 100%;
     @media (min-width: ${theme.breakpoints.sm}px) {
       flex: 0 0 25%;
@@ -35,12 +35,14 @@ const LabelWrapper = styled.div(
   `,
 )
 
-const ValueWrapper = styled.div`
-  width: 100%;
-  @media (min-width: ${theme.breakpoints.sm}px) {
-    flex: 1;
-  }
-`
+const ValueWrapper = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    @media (min-width: ${theme.breakpoints.sm}px) {
+      flex: 1;
+    }
+  `,
+)
 
 const ButtonContainer = styled.div(
   ({ theme }) => css`
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d84aa0ca3..ab052d3ad 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -81,11 +81,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('common')