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..d0f9f6ef8 100644
--- a/src/components/admin/expenses/grid/Grid.tsx
+++ b/src/components/admin/expenses/grid/Grid.tsx
@@ -14,6 +14,8 @@ import DetailsModal from './DetailsModal'
 import DeleteModal from './DeleteModal'
 import { moneyPublic } from 'common/util/money'
 
+import theme from 'common/theme'
+
 const PREFIX = 'Grid'
 
 const classes = {
@@ -33,11 +35,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',
     },
   },
diff --git a/src/components/client/campaign-news/secured/NewsAdminPage.tsx b/src/components/client/campaign-news/secured/NewsAdminPage.tsx
index 26cd475c0..8b8970413 100644
--- a/src/components/client/campaign-news/secured/NewsAdminPage.tsx
+++ b/src/components/client/campaign-news/secured/NewsAdminPage.tsx
@@ -14,6 +14,8 @@ import { routes } from 'common/routes'
 import AddIcon from '@mui/icons-material/Add'
 import Link from 'next/link'
 
+import theme from 'common/theme'
+
 const PREFIX = 'NewsAdminPage'
 
 const classes = {
@@ -25,7 +27,7 @@ const classes = {
 const Root = styled(Layout)({
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '15px',
+      fontSize: theme.typography.pxToRem(15),
       fontWeight: '700',
     },
   },
diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
index c78e0a6db..c26baf3e3 100644
--- a/src/components/client/campaigns/CampaignDetails.tsx
+++ b/src/components/client/campaigns/CampaignDetails.tsx
@@ -68,7 +68,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 
   ['& .ql-editor']: {
-    fontSize: theme.spacing(2),
+    fontSize: theme.typography.pxToRem(16),
     fontWeight: 500,
     lineHeight: theme.spacing(4),
     paddingLeft: '0',
@@ -109,10 +109,10 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     },
   },
   [`& .${classes.financeSummary}`]: {
-    fontSize: `1.2rem`,
+    fontSize: theme.typography.pxToRem(19),
     [theme.breakpoints.up('sm')]: {
       marginLeft: theme.spacing(2),
-      fontSize: `1.3rem`,
+      fontSize: theme.typography.pxToRem(21),
     },
   },
 }))
diff --git a/src/components/client/campaigns/CampaignsPage.tsx b/src/components/client/campaigns/CampaignsPage.tsx
index a99a79a30..3b3d66a63 100644
--- a/src/components/client/campaigns/CampaignsPage.tsx
+++ b/src/components/client/campaigns/CampaignsPage.tsx
@@ -30,7 +30,7 @@ const Root = styled(Layout)(({ theme }) => ({
     fontWeight: '500',
     color: '#2196F3',
     fontStyle: 'normal',
-    fontSize: '45px',
+    fontSize: theme.typography.pxToRem(45),
     lineHeight: '45px',
     alignItems: 'center',
     textAlign: 'center',
@@ -42,7 +42,7 @@ const Root = styled(Layout)(({ theme }) => ({
     marginTop: theme.spacing(3),
     fontStyle: 'normal',
     fontWeight: '400',
-    fontSize: '16px',
+    fontSize: theme.typography.pxToRem(16),
     lineHeight: '175 %',
     textAlign: 'center',
     letterSpacing: '0.15px',
@@ -52,7 +52,7 @@ const Root = styled(Layout)(({ theme }) => ({
     marginBottom: theme.spacing(3),
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '120%',
     textAlign: 'center',
     color: '#2196F3',
@@ -66,7 +66,7 @@ const Root = styled(Layout)(({ theme }) => ({
   },
 
   [`& .${classes.arrowIcon}`]: {
-    fontSize: theme.spacing(8),
+    fontSize: theme.typography.pxToRem(48),
   },
 }))
 
diff --git a/src/components/client/campaigns/DonationWishes.tsx b/src/components/client/campaigns/DonationWishes.tsx
index 58bcbe137..8607a6124 100644
--- a/src/components/client/campaigns/DonationWishes.tsx
+++ b/src/components/client/campaigns/DonationWishes.tsx
@@ -99,7 +99,7 @@ export default function DonationWishes({ campaignId, pageSize = 5 }: Props) {
           component="h4"
           sx={{
             color: theme.palette.common.black,
-            fontSize: '2rem',
+            fontSize: theme.typography.pxToRem(32),
             paddingBottom: '1rem',
           }}>
           {t('campaign.messages')}
diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx
index c41e32b6a..4397b22f5 100644
--- a/src/components/client/campaigns/InlineDonation.tsx
+++ b/src/components/client/campaigns/InlineDonation.tsx
@@ -118,7 +118,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'center',
     width: '50%',
-    fontSize: '13px',
+    fontSize: theme.typography.pxToRem(13),
     backgroundColor: 'transparant',
     paddingBottom: theme.spacing(0.2),
     borderRadius: '60px',
diff --git a/src/components/client/irregularity/helpers/Remark.tsx b/src/components/client/irregularity/helpers/Remark.tsx
index 184b79935..e059bc6a0 100644
--- a/src/components/client/irregularity/helpers/Remark.tsx
+++ b/src/components/client/irregularity/helpers/Remark.tsx
@@ -1,11 +1,13 @@
 import { Grid, Typography } from '@mui/material'
 
+import theme from 'common/theme'
+
 type RemarkProps = {
   text: string
 }
 
 const textStyles = {
-  fontSize: '13px',
+  fontSize: theme.typography.pxToRem(13),
   marginTop: '100px',
 }
 
diff --git a/src/components/client/irregularity/steps/Info.tsx b/src/components/client/irregularity/steps/Info.tsx
index 283894b64..873dc92c7 100644
--- a/src/components/client/irregularity/steps/Info.tsx
+++ b/src/components/client/irregularity/steps/Info.tsx
@@ -13,6 +13,8 @@ import FileList from '../helpers/FileList'
 import { NotifierTypes } from '../helpers/irregularity.types'
 import IrregularityReasonSelect from '../helpers/IrregularityReasonSelect'
 
+import theme from 'common/theme'
+
 const CssTextField = styled(FormTextField)({
   '& label': {
     marginLeft: '8px',
@@ -42,7 +44,9 @@ export default function Info({ files, setFiles }: Props) {
       <Subtitle label={t('steps.info.subtitle')} />
       <Grid container item>
         <Grid item xs={12}>
-          <Typography sx={{ fontSize: '18px' }}>{t('steps.info.is-donor')}</Typography>
+          <Typography sx={{ fontSize: theme.typography.pxToRem(18) }}>
+            {t('steps.info.is-donor')}
+          </Typography>
         </Grid>
         <Grid container item xs={12}>
           <FormControl sx={{ width: '40%', marginTop: '20px' }}>
@@ -75,7 +79,7 @@ export default function Info({ files, setFiles }: Props) {
       </Grid>
       <Grid container item>
         <Grid item xs={12}>
-          <Typography sx={{ fontSize: '18px', marginBottom: '20px' }}>
+          <Typography sx={{ fontSize: theme.typography.pxToRem(18), marginBottom: '20px' }}>
             {t('reason.title')}
           </Typography>
         </Grid>
@@ -85,7 +89,9 @@ export default function Info({ files, setFiles }: Props) {
       </Grid>
       <Grid container item>
         <Grid item xs={12}>
-          <Typography sx={{ fontSize: '18px' }}>{t('steps.info.content')}</Typography>
+          <Typography sx={{ fontSize: theme.typography.pxToRem(18) }}>
+            {t('steps.info.content')}
+          </Typography>
         </Grid>
         <Grid item xs={12}>
           <CssTextField label="" type="text" multiline rows={6} name="info.description" />
@@ -93,7 +99,9 @@ export default function Info({ files, setFiles }: Props) {
       </Grid>
       <Grid container item>
         <Grid item xs={12}>
-          <Typography sx={{ fontSize: '18px' }}>{t('steps.info.files')}</Typography>
+          <Typography sx={{ fontSize: theme.typography.pxToRem(18) }}>
+            {t('steps.info.files')}
+          </Typography>
         </Grid>
         <Grid container justifyContent="center" mt={2}>
           <FileUpload
@@ -113,22 +121,22 @@ export default function Info({ files, setFiles }: Props) {
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <Typography sx={{ fontSize: '15px', textAlign: 'justify' }}>
+        <Typography sx={{ fontSize: theme.typography.pxToRem(15), textAlign: 'justify' }}>
           {t('steps.info.priority-message')}
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Typography sx={{ fontSize: '15px', textAlign: 'justify' }}>
+        <Typography sx={{ fontSize: theme.typography.pxToRem(15), textAlign: 'justify' }}>
           {t('steps.info.share-message')}
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Typography sx={{ fontSize: '15px', textAlign: 'justify' }}>
+        <Typography sx={{ fontSize: theme.typography.pxToRem(15), textAlign: 'justify' }}>
           {t('steps.info.thanks-message')}
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Typography sx={{ fontSize: '15px', textAlign: 'justify' }}>
+        <Typography sx={{ fontSize: theme.typography.pxToRem(15), textAlign: 'justify' }}>
           {t('steps.info.sign')}
         </Typography>
       </Grid>
diff --git a/src/components/client/layout/nav/AdminMenu.tsx b/src/components/client/layout/nav/AdminMenu.tsx
index 794e26f4b..835585027 100644
--- a/src/components/client/layout/nav/AdminMenu.tsx
+++ b/src/components/client/layout/nav/AdminMenu.tsx
@@ -83,7 +83,7 @@ export default function AdminMenu() {
               bgcolor: theme.palette.success.light,
               height: theme.spacing(4.5),
               width: theme.spacing(4.5),
-              fontSize: '1rem',
+              fontSize: theme.typography.pxToRem(16),
             }}>
             {lettersAvatar}
           </Avatar>
diff --git a/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx b/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx
index 796e19847..28ed994d5 100644
--- a/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx
+++ b/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx
@@ -1,9 +1,10 @@
 import { Box } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-import theme from 'common/theme'
 import LinkButton from 'components/common/LinkButton'
 
+import theme from 'common/theme'
+
 export const AuthLinksWrapper = styled(Box)(() => ({
   display: 'flex',
   alignItems: 'center',
diff --git a/src/components/client/layout/nav/PrivateMenu.tsx b/src/components/client/layout/nav/PrivateMenu.tsx
index 9bbd4cbf2..8e9a11d68 100644
--- a/src/components/client/layout/nav/PrivateMenu.tsx
+++ b/src/components/client/layout/nav/PrivateMenu.tsx
@@ -76,7 +76,7 @@ export default function PrivateMenu() {
               bgcolor: theme.palette.success.light,
               height: theme.spacing(4.5),
               width: theme.spacing(4.5),
-              fontSize: '1rem',
+              fontSize: theme.typography.pxToRem(16),
             }}>
             {lettersAvatar}
           </Avatar>
diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx
index fd919cf44..97d08efef 100644
--- a/src/components/client/notifications/CampaignSubscribeModal.tsx
+++ b/src/components/client/notifications/CampaignSubscribeModal.tsx
@@ -22,6 +22,8 @@ import { email } from 'common/form/validation'
 import { AcceptNewsLetterFieldCampaign } from 'components/common/form/AcceptNewsletterField'
 import { routes } from 'common/routes'
 
+import theme from 'common/theme'
+
 const PREFIX = 'CampaignSubscribeModal'
 
 const classes = {
@@ -218,7 +220,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
           <CloseModalButton onClose={handleClose} />
           {!isSuccess ? (
             <React.Fragment>
-              <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+              <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
               <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
                 {t('common:notifications.subscribe-campaign-title')}
               </DialogTitle>
@@ -231,7 +233,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
               style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
-                <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+                <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"
diff --git a/src/components/client/notifications/GeneralSubscribeModal.tsx b/src/components/client/notifications/GeneralSubscribeModal.tsx
index b29df2db5..0b7a78a5d 100644
--- a/src/components/client/notifications/GeneralSubscribeModal.tsx
+++ b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -163,7 +163,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
           }}>
           <CloseModalButton onClose={handleClose} />
           <React.Fragment>
-            <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+            <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
             <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
               {t('common:notifications.subscribe-title')}
             </DialogTitle>
@@ -237,7 +237,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
           <CloseModalButton onClose={handleClose} />
           {!isSuccess ? (
             <React.Fragment>
-              <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+              <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
               <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
                 {t('common:notifications.subscribe-title')}
               </DialogTitle>
@@ -250,7 +250,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
               style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
-                <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+                <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"
diff --git a/src/components/client/notifications/SubscriptionPage.tsx b/src/components/client/notifications/SubscriptionPage.tsx
index c3faa3c75..74665b9b3 100644
--- a/src/components/client/notifications/SubscriptionPage.tsx
+++ b/src/components/client/notifications/SubscriptionPage.tsx
@@ -15,6 +15,8 @@ import { SubscribePublicEmailInput, SubscribePublicEmailResponse } from 'gql/not
 import { ApiError } from 'next/dist/server/api-utils'
 import { useSubscribePublicEmail } from 'service/notification'
 
+import theme from 'common/theme'
+
 type Props = {
   hash: string | null
   email: string | null
@@ -152,7 +154,7 @@ export default function SubscriptionPage(data: Props) {
         {isSuccess ? (
           <React.Fragment>
             <Grid item mt={5} display="flex" direction="column" alignItems="center">
-              <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+              <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
               <DialogTitle>
                 <Typography
                   variant="h5"
@@ -178,7 +180,9 @@ export default function SubscriptionPage(data: Props) {
           <React.Fragment>
             <React.Fragment>
               <Grid item mt={5} display="flex" direction="column" alignItems="center">
-                <AnnouncementIcon sx={{ fontSize: '64px', color: '#FF007F' }} />
+                <AnnouncementIcon
+                  sx={{ fontSize: theme.typography.pxToRem(64), color: '#FF007F' }}
+                />
                 <DialogTitle>
                   <Typography
                     variant="h5"
diff --git a/src/components/common/FormFieldButton.tsx b/src/components/common/FormFieldButton.tsx
index fcb4e97d3..463f07f74 100644
--- a/src/components/common/FormFieldButton.tsx
+++ b/src/components/common/FormFieldButton.tsx
@@ -41,7 +41,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.errorText}`]: {
     color: theme.palette.error.main,
     fontWeight: 400,
-    fontSize: '0.75rem',
+    fontSize: theme.typography.pxToRem(12),
     lineHeight: 1.66,
     letterSpacing: '0.03333em',
     textAlign: 'left',
@@ -52,7 +52,7 @@ const Root = styled('div')(({ theme }) => ({
   },
   [`& .${classes.placeholderText}`]: {
     color: 'rgba(0, 0, 0, 0.6)',
-    fontSize: '1rem',
+    fontSize: theme.typography.pxToRem(16),
     lineHeight: '1.4375em',
     letterSpacing: '0.01071em',
     fontWeight: 400,
diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx
index c571dd48d..5fd76b003 100644
--- a/src/components/common/QuillStyleWrapper.tsx
+++ b/src/components/common/QuillStyleWrapper.tsx
@@ -56,25 +56,25 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
   },
 
   ['.ql-editor, .ql-size-small']: {
-    fontSize: '.75em',
+    fontSize: theme.typography.pxToRem(12),
   },
 
   ['.ql-editor, .ql-size-large']: {
-    fontSize: '1.5em',
+    fontSize: theme.typography.pxToRem(24),
   },
 
   ['.ql-editor, .ql-size-huge']: {
-    fontSize: '2.5em',
+    fontSize: theme.typography.pxToRem(40),
   },
 
   ['.ql-bubble, ql-editor h1']: {
     position: 'relative',
     width: '100%',
-    fontSize: '1em',
+    fontSize: theme.typography.pxToRem(16),
   },
 
   ['.ql-bubble, ql-editor h2']: {
-    fontSize: '1.5em',
+    fontSize: theme.typography.pxToRem(24),
   },
 
   ['.ql-bubble .ql-editor a ']: {
diff --git a/src/components/common/navigation/AppBarMenu.tsx b/src/components/common/navigation/AppBarMenu.tsx
index ca19cf976..351d68dd9 100644
--- a/src/components/common/navigation/AppBarMenu.tsx
+++ b/src/components/common/navigation/AppBarMenu.tsx
@@ -1,6 +1,9 @@
 import { Typography, Box, Toolbar } from '@mui/material'
 import HomeIcon from '@mui/icons-material/Home'
 import { IconButton } from '@mui/material'
+
+import theme from 'common/theme'
+
 type Props = {
   title: string
 }
@@ -24,7 +27,7 @@ export default function AppBarMenu({ title }: Props) {
         <IconButton>
           <HomeIcon color="action" />
         </IconButton>
-        <Typography fontSize={'18px'} sx={{ px: 0.5, height: '20px' }}>
+        <Typography fontSize={theme.typography.pxToRem(18)} sx={{ px: 0.5, height: '20px' }}>
           /
         </Typography>
         <IconButton sx={{ borderRadius: '25px' }}>
diff --git a/src/gql/campaigns.ts b/src/gql/campaigns.ts
index ee6e16d8a..ee22eb531 100644
--- a/src/gql/campaigns.ts
+++ b/src/gql/campaigns.ts
@@ -2,7 +2,6 @@ import { UUID } from './types'
 import type { CampaignFileRole } from 'components/common/campaign-file/roles'
 import type { CampaignTypeCategory } from 'components/common/campaign-types/categories'
 import { Currency } from './currency'
-import { PaymentProvider } from './donations.enums'
 import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums'
 import { BeneficiaryType } from '../components/admin/beneficiary/BeneficiaryTypes'
 import { VaultResponse } from './vault'