diff --git a/src/components/admin/affiliates/AffiliatesPage.tsx b/src/components/admin/affiliates/AffiliatesPage.tsx
index 8879b9e8f..07cbd83d7 100644
--- a/src/components/admin/affiliates/AffiliatesPage.tsx
+++ b/src/components/admin/affiliates/AffiliatesPage.tsx
@@ -20,7 +20,7 @@ import LoopIcon from '@mui/icons-material/Loop'
 const addIconStyles = {
   color: '#4ac3ff',
   background: 'transperent',
-  fontSize: '40px',
+  fontSize: theme.typography.pxToRem(40),
   cursor: 'pointer',
   padding: 0.7,
 }
diff --git a/src/components/admin/countries/grid/CountryGrid.tsx b/src/components/admin/countries/grid/CountryGrid.tsx
index cb28087cd..28f7f9311 100644
--- a/src/components/admin/countries/grid/CountryGrid.tsx
+++ b/src/components/admin/countries/grid/CountryGrid.tsx
@@ -23,7 +23,7 @@ const classes = {
 const Root = styled('div')({
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },
diff --git a/src/components/admin/expenses/grid/Grid.tsx b/src/components/admin/expenses/grid/Grid.tsx
index 5c528bd37..484bf8528 100644
--- a/src/components/admin/expenses/grid/Grid.tsx
+++ b/src/components/admin/expenses/grid/Grid.tsx
@@ -33,11 +33,11 @@ const Root = styled('div')({
       marginTop: '30px',
       marginRight: '40px',
     },
-    fontSize: '12px',
+    fontSize: theme.typography.pxToRem(12),
   },
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },
diff --git a/src/components/client/auth/profile/AffiliateProgramTab.tsx b/src/components/client/auth/profile/AffiliateProgramTab.tsx
index 5d8a387be..cd17e400a 100644
--- a/src/components/client/auth/profile/AffiliateProgramTab.tsx
+++ b/src/components/client/auth/profile/AffiliateProgramTab.tsx
@@ -41,21 +41,21 @@ const Root = styled(Box)(({ theme }) => ({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '30px',
+    fontSize: theme.typography.pxToRem(30),
     lineHeight: '65px',
     paddingLeft: 2,
   },
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.h2}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '23px',
+    fontSize: theme.typography.pxToRem(23),
     lineHeight: '116.7%',
     marginBottom: theme.spacing(3),
   },
diff --git a/src/components/client/auth/profile/CertificatesTab.tsx b/src/components/client/auth/profile/CertificatesTab.tsx
index 195aefb3f..902342001 100644
--- a/src/components/client/auth/profile/CertificatesTab.tsx
+++ b/src/components/client/auth/profile/CertificatesTab.tsx
@@ -19,14 +19,14 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -35,7 +35,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },
diff --git a/src/components/client/auth/profile/DonationAgreementTab.tsx b/src/components/client/auth/profile/DonationAgreementTab.tsx
index 5c0db5cc9..acb61ad4d 100644
--- a/src/components/client/auth/profile/DonationAgreementTab.tsx
+++ b/src/components/client/auth/profile/DonationAgreementTab.tsx
@@ -14,7 +14,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
diff --git a/src/components/client/auth/profile/DonationTab.tsx b/src/components/client/auth/profile/DonationTab.tsx
index 33d64229f..95749fbec 100644
--- a/src/components/client/auth/profile/DonationTab.tsx
+++ b/src/components/client/auth/profile/DonationTab.tsx
@@ -52,21 +52,21 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '30px',
+    fontSize: theme.typography.pxToRem(30),
     lineHeight: '65px',
     paddingLeft: 2,
   },
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.h2}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '23px',
+    fontSize: theme.typography.pxToRem(23),
     lineHeight: '116.7%',
     marginBottom: theme.spacing(3),
   },
diff --git a/src/components/client/auth/profile/MyCampaignsTab.tsx b/src/components/client/auth/profile/MyCampaignsTab.tsx
index 1de56ca9e..48b9a4fbf 100644
--- a/src/components/client/auth/profile/MyCampaignsTab.tsx
+++ b/src/components/client/auth/profile/MyCampaignsTab.tsx
@@ -21,14 +21,14 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -37,7 +37,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },
diff --git a/src/components/client/auth/profile/MyNotificationsTab.tsx b/src/components/client/auth/profile/MyNotificationsTab.tsx
index ff289d7bf..846fbf71f 100644
--- a/src/components/client/auth/profile/MyNotificationsTab.tsx
+++ b/src/components/client/auth/profile/MyNotificationsTab.tsx
@@ -27,23 +27,22 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
-    // color: theme.palette.common.black,
     margin: 0,
   },
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },
diff --git a/src/components/client/auth/profile/PersonalInfoTab.tsx b/src/components/client/auth/profile/PersonalInfoTab.tsx
index 5b3e7c11f..e2c553d97 100644
--- a/src/components/client/auth/profile/PersonalInfoTab.tsx
+++ b/src/components/client/auth/profile/PersonalInfoTab.tsx
@@ -44,7 +44,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.heading}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -57,7 +57,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.graySpan}`]: {
     fontStyle: 'normal',
     fontWeight: '400',
-    fontSize: '18px',
+    fontSize: theme.typography.pxToRem(18),
     lineHeight: '133.4%',
     color: '#909090',
   },
@@ -65,14 +65,14 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h5}`]: {
     fontStyle: 'normal',
     fontWeight: '600',
-    fontSize: '22px',
+    fontSize: theme.typography.pxToRem(22),
     lineHeight: '133.4%',
   },
 
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
diff --git a/src/components/client/auth/profile/ProfilePage.tsx b/src/components/client/auth/profile/ProfilePage.tsx
index e5fda5887..d3b3cc2ab 100644
--- a/src/components/client/auth/profile/ProfilePage.tsx
+++ b/src/components/client/auth/profile/ProfilePage.tsx
@@ -33,7 +33,7 @@ const StyledLayout = styled(Layout)({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: 500,
-    fontSize: '45px',
+    fontSize: theme.typography.pxToRem(45),
     lineHeight: '112px',
     letterSpacing: '-1.5px',
     color: theme.palette.common.black,
diff --git a/src/components/client/auth/register/RegisterPage.tsx b/src/components/client/auth/register/RegisterPage.tsx
index eacd700b6..562572800 100644
--- a/src/components/client/auth/register/RegisterPage.tsx
+++ b/src/components/client/auth/register/RegisterPage.tsx
@@ -33,6 +33,8 @@ import {
 } from 'gql/user-registration'
 import RegisterSuccess from './RegisterSuccess'
 
+import theme from 'common/theme'
+
 const providerIcons = {
   google: <Google style={{ width: 43.55, height: 43.55 }} />,
 }
@@ -146,7 +148,7 @@ export default function RegisterPage({ providers }: RegisterPageProps) {
             <Divider
               sx={{
                 py: 3,
-                fontSize: 16,
+                fontSize: theme.typography.pxToRem(16),
                 textTransform: 'uppercase',
                 color: '#444444',
                 ':before': {
diff --git a/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx b/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx
index 6a808cabe..3f1073c0d 100644
--- a/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx
+++ b/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx
@@ -14,6 +14,8 @@ import { useCampaignExpensesList } from 'common/hooks/expenses'
 import { moneyPublic } from 'common/util/money'
 import { ModalStoreImpl } from 'stores/dashboard/ModalStore'
 
+import theme from 'common/theme'
+
 const PREFIX = 'Grid'
 
 type Props = { slug: string }
@@ -37,11 +39,11 @@ const Root = styled('div')({
       marginTop: '30px',
       marginRight: '40px',
     },
-    fontSize: '12px',
+    fontSize: theme.typography.pxToRem(12),
   },
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },