diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8883926e..a57fa9f1 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -84,6 +84,7 @@ module.exports = {
     ],
     'react-i18n/no-dynamic-translation-keys': 'error',
     'react-i18n/no-missing-interpolation-keys': 'error',
+    'react/jsx-curly-brace-presence': ['warn', 'never'],
     // disable unnecessary rules from recommendations
     'react/display-name': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
diff --git a/src/App.tsx b/src/App.tsx
index 82164089..9c232c43 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -49,7 +49,7 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
             <AppRoutes />
           ) : (
             <Stack alignItems='center' justifyContent='center' flex={1}>
-              <CircularProgress color={'secondary'} />
+              <CircularProgress color='secondary' />
             </Stack>
           )}
         </div>
diff --git a/src/common/AppNavbar.tsx b/src/common/AppNavbar.tsx
index bc6872fc..be454c2b 100644
--- a/src/common/AppNavbar.tsx
+++ b/src/common/AppNavbar.tsx
@@ -24,8 +24,8 @@ const NavbarLink = ({ children, to }: NavbarLinkProps) => {
   return (
     <NavLink to={to}>
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         sx={{
           width: spacing(10),
           height: spacing(10),
@@ -54,7 +54,7 @@ const AppNavbar = () => {
       { route: RoutePaths.Dashboard, iconComponent: <UiIcon name={Icons.House} size={5} /> },
       {
         route: RoutePaths.Credentials,
-        iconComponent: <UiIcon componentName={'layers'} size={6} />,
+        iconComponent: <UiIcon componentName='layers' size={6} />,
       },
       { route: RoutePaths.Rewards, iconComponent: <UiIcon name={Icons.Gift} size={5} /> },
     ],
@@ -67,15 +67,15 @@ const AppNavbar = () => {
 
   return (
     <Stack
-      justifyContent={'space-between'}
-      alignItems={'center'}
+      justifyContent='space-between'
+      alignItems='center'
       py={6}
       px={4}
       borderRight={1}
       borderColor={palette.divider}
     >
       <Stack spacing={4}>
-        <Stack component={NavLink} to={RoutePaths.Dashboard} alignItems={'center'}>
+        <Stack component={NavLink} to={RoutePaths.Dashboard} alignItems='center'>
           <UiIcon name={Icons.Rarime} size={10} sx={{ color: palette.text.primary }} />
         </Stack>
         <Divider />
diff --git a/src/common/BackLink.tsx b/src/common/BackLink.tsx
index f1f62eac..337c829d 100644
--- a/src/common/BackLink.tsx
+++ b/src/common/BackLink.tsx
@@ -17,7 +17,7 @@ export default function BackLink({ to, ...rest }: Props) {
       variant='text'
       color='secondary'
       size='small'
-      startIcon={<UiIcon componentName={'chevronLeft'} size={5} />}
+      startIcon={<UiIcon componentName='chevronLeft' size={5} />}
       {...rest}
       sx={{ width: 'fit-content', ...rest.sx }}
     >
diff --git a/src/common/CredentialCard.tsx b/src/common/CredentialCard.tsx
index 7bec41b1..ad217240 100644
--- a/src/common/CredentialCard.tsx
+++ b/src/common/CredentialCard.tsx
@@ -15,7 +15,7 @@ function DotsDecoration({ ...rest }: StackProps) {
 
   // TODO: alpha(palette.common.white, ...) should be configured together with bg
   return (
-    <Stack {...rest} alignItems={'flex-end'} spacing={betweenDotsSpacing}>
+    <Stack {...rest} alignItems='flex-end' spacing={betweenDotsSpacing}>
       {Array.from({ length: rowsCount }, (v, i) => i).map(rowIdx => (
         <Stack key={rowIdx} direction='row' spacing={betweenDotsSpacing}>
           {Array.from({ length: maxDots - rowIdx }, (v, i) => i).map(boxIdx => (
@@ -23,7 +23,7 @@ function DotsDecoration({ ...rest }: StackProps) {
               key={boxIdx}
               width={8}
               height={8}
-              borderRadius={'50%'}
+              borderRadius='50%'
               bgcolor={alpha(palette.common.white, 0.16)}
             />
           ))}
@@ -66,7 +66,7 @@ export default function CredentialCard({ vc, issuerDetails, ...rest }: Props) {
         height={40}
         color={palette.common.white}
         bgcolor={alpha(palette.common.white, 0.1)}
-        borderRadius={'50%'}
+        borderRadius='50%'
         p={2}
       >
         {/*TODO: define map for credential types*/}
diff --git a/src/common/ErrorView.tsx b/src/common/ErrorView.tsx
index 6f632be5..f7313c92 100644
--- a/src/common/ErrorView.tsx
+++ b/src/common/ErrorView.tsx
@@ -22,9 +22,9 @@ export default function ErrorView({
   return (
     <Stack
       spacing={4}
-      alignItems={'center'}
-      width={'100%'}
-      justifyContent={'center'}
+      alignItems='center'
+      width='100%'
+      justifyContent='center'
       p={8}
       border={1}
       borderColor={palette.error.light}
@@ -33,8 +33,8 @@ export default function ErrorView({
       {...rest}
     >
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         bgcolor={palette.error.lighter}
         color={palette.error.main}
         borderRadius={250}
@@ -43,7 +43,7 @@ export default function ErrorView({
       >
         {icon}
       </Stack>
-      <Stack spacing={1} textAlign={'center'}>
+      <Stack spacing={1} textAlign='center'>
         <Typography variant='body3'>{title}</Typography>
         {description && (
           <Typography variant='body3' color={palette.text.secondary}>
diff --git a/src/common/InfiniteList.tsx b/src/common/InfiniteList.tsx
index 07bf3cab..8a8f5551 100644
--- a/src/common/InfiniteList.tsx
+++ b/src/common/InfiniteList.tsx
@@ -33,7 +33,7 @@ export default function InfiniteList<D>({
       {children}
       {loadingState === LoadingStates.NextLoading ? (
         <Stack alignItems='center'>
-          <CircularProgress color={'secondary'} size={spacing(6)} />
+          <CircularProgress color='secondary' size={spacing(6)} />
         </Stack>
       ) : loadingState === LoadingStates.Error ? (
         <Stack alignItems='center'>
@@ -47,7 +47,7 @@ export default function InfiniteList<D>({
     </Stack>
   ) : loadingState === LoadingStates.Loading ? (
     <Stack alignItems='center' p={20}>
-      <CircularProgress color={'secondary'} />
+      <CircularProgress color='secondary' />
     </Stack>
   ) : loadingState === LoadingStates.Error ? (
     <ErrorView
diff --git a/src/common/NoDataView.tsx b/src/common/NoDataView.tsx
index 9f8c313c..c2d854f9 100644
--- a/src/common/NoDataView.tsx
+++ b/src/common/NoDataView.tsx
@@ -22,9 +22,9 @@ export default function NoDataView({
   return (
     <Stack
       spacing={4}
-      alignItems={'center'}
-      width={'100%'}
-      justifyContent={'center'}
+      alignItems='center'
+      width='100%'
+      justifyContent='center'
       p={8}
       border={1}
       borderColor={palette.action.hover}
@@ -33,8 +33,8 @@ export default function NoDataView({
       {...rest}
     >
       <Stack
-        alignItems={'center'}
-        justifyContent={'center'}
+        alignItems='center'
+        justifyContent='center'
         bgcolor={palette.action.active}
         color={palette.text.secondary}
         borderRadius={250}
@@ -43,7 +43,7 @@ export default function NoDataView({
       >
         {icon}
       </Stack>
-      <Stack spacing={1} textAlign={'center'}>
+      <Stack spacing={1} textAlign='center'>
         <Typography variant='body3'>{title}</Typography>
         {description && (
           <Typography variant='body3' color={palette.text.secondary}>
diff --git a/src/common/PageListFilters.tsx b/src/common/PageListFilters.tsx
index 39e947c1..517d95ab 100644
--- a/src/common/PageListFilters.tsx
+++ b/src/common/PageListFilters.tsx
@@ -20,18 +20,12 @@ export default function PageListFilters({ tabs, onSearchInput, actionBar, ...res
   const handleSearchInput = debounce((value: string) => onSearchInput?.(value), 500)
 
   return (
-    <Stack
-      {...rest}
-      direction='row'
-      alignItems='center'
-      justifyContent={'space-between'}
-      spacing={5}
-    >
+    <Stack {...rest} direction='row' alignItems='center' justifyContent='space-between' spacing={5}>
       {tabs && <UiNavTabs tabs={tabs} />}
 
-      <Stack direction={'row'} alignItems={'center'} spacing={6}>
+      <Stack direction='row' alignItems='center' spacing={6}>
         <UiSearchField
-          size={'small'}
+          size='small'
           placeholder={t('page-list-filters.search-input-placeholder')}
           onChange={e => handleSearchInput(e.target.value)}
         />
diff --git a/src/common/ProfileMenu.tsx b/src/common/ProfileMenu.tsx
index de674b13..d384ccbe 100644
--- a/src/common/ProfileMenu.tsx
+++ b/src/common/ProfileMenu.tsx
@@ -82,13 +82,13 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
           },
         }}
       >
-        <Stack direction={'column'} p={4} alignItems={'center'}>
+        <Stack direction='column' p={4} alignItems='center'>
           <UserAvatar userDid={userDid} size={12} />
-          <Stack direction={'row'} mt={3} spacing={2}>
+          <Stack direction='row' mt={3} spacing={2}>
             <Typography
-              variant={'subtitle4'}
-              overflow={'hidden'}
-              textOverflow={'ellipsis'}
+              variant='subtitle4'
+              overflow='hidden'
+              textOverflow='ellipsis'
               maxWidth={spacing(40)}
             >
               {formatDid(userDid)}
@@ -102,9 +102,9 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
         {/*TODO: Add handler*/}
         <MenuItem onClick={exportIdentity} sx={menuItemSx} disabled={isExporting}>
           <ListItemIcon>
-            <UiIcon componentName={'key'} size={5} sx={{ color: palette.text.secondary }} />
+            <UiIcon componentName='key' size={5} sx={{ color: palette.text.secondary }} />
           </ListItemIcon>
-          <Typography variant={'caption1'}>
+          <Typography variant='caption1'>
             {isExporting ? 'Exporting...' : 'Export Identity'}
           </Typography>
         </MenuItem>
@@ -116,15 +116,15 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
           sx={menuItemSx}
         >
           <ListItemIcon>
-            <UiIcon componentName={'openInNew'} size={5} sx={{ color: palette.text.secondary }} />
+            <UiIcon componentName='openInNew' size={5} sx={{ color: palette.text.secondary }} />
           </ListItemIcon>
-          <Typography variant={'caption1'}>Help Center</Typography>
+          <Typography variant='caption1'>Help Center</Typography>
         </MenuItem>
         <MenuItem onClick={logout} sx={menuItemSx}>
           <ListItemIcon>
-            <UiIcon componentName={'logOut'} size={5} sx={{ color: palette.error.main }} />
+            <UiIcon componentName='logOut' size={5} sx={{ color: palette.error.main }} />
           </ListItemIcon>
-          <Typography variant={'caption1'} color={palette.error.main}>
+          <Typography variant='caption1' color={palette.error.main}>
             Disconnect
           </Typography>
         </MenuItem>
diff --git a/src/contexts/toasts-manager/toasts/DefaultToast.tsx b/src/contexts/toasts-manager/toasts/DefaultToast.tsx
index 785821f4..e3ba3afd 100644
--- a/src/contexts/toasts-manager/toasts/DefaultToast.tsx
+++ b/src/contexts/toasts-manager/toasts/DefaultToast.tsx
@@ -46,7 +46,7 @@ const DefaultToast = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
         onClose={() => closeSnackbar(id)}
       >
         <AlertTitle>{title}</AlertTitle>
-        <Typography variant={'body4'}>{message}</Typography>
+        <Typography variant='body4'>{message}</Typography>
       </Alert>
     </SnackbarContent>
   )
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
index 2e4e3bc2..bd6757ba 100644
--- a/src/layouts/AuthLayout.tsx
+++ b/src/layouts/AuthLayout.tsx
@@ -8,28 +8,28 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
   const { palette, spacing } = useTheme()
 
   return (
-    <Stack direction={'row'} height={vh(100)}>
+    <Stack direction='row' height={vh(100)}>
       <Stack pl={14} pr={8} py={8} flex={1}>
-        <Box flex={1} position={'relative'}>
-          <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
-            <Box component={'img'} src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
+        <Box flex={1} position='relative'>
+          <Stack direction='row' justifyContent='space-between' alignItems='center'>
+            <Box component='img' src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
             <Button
-              component={'a'}
-              href={'https://rarime.com'}
-              target={'_blank'}
+              component='a'
+              href='https://rarime.com'
+              target='_blank'
               variant='text'
-              color={'secondary'}
-              size={'medium'}
+              color='secondary'
+              size='medium'
             >
               Visit Landing page
             </Button>
           </Stack>
 
           <Stack
-            position={'absolute'}
-            top={'50%'}
-            left={'50%'}
-            width={'100%'}
+            position='absolute'
+            top='50%'
+            left='50%'
+            width='100%'
             maxWidth={spacing(100)}
             sx={{ transform: 'translate(-50%, -50%)' }}
           >
@@ -38,16 +38,11 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
         </Box>
       </Stack>
 
-      <Stack
-        justifyContent={'center'}
-        alignItems={'end'}
-        pl={8}
-        bgcolor={palette.additional.pureBlack}
-      >
+      <Stack justifyContent='center' alignItems='end' pl={8} bgcolor={palette.additional.pureBlack}>
         <Box
-          component={'img'}
+          component='img'
           src='/imgs/dashboard.png'
-          alt={'Dashboard image'}
+          alt='Dashboard image'
           height={vh(90)}
           sx={{ objectFit: 'contain' }}
         />
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index c84a9186..48cc1eda 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -8,10 +8,10 @@ const MainLayout = ({ children }: PropsWithChildren) => {
   const { spacing } = useTheme()
 
   return (
-    <Stack direction='row' spacing={4} height={vh(100)} width={'100%'}>
+    <Stack direction='row' spacing={4} height={vh(100)} width='100%'>
       <AppNavbar />
-      <Stack py={8} flex={1} overflow={'hidden auto'}>
-        <Stack mx={'auto'} maxWidth={spacing(220)} width={'100%'}>
+      <Stack py={8} flex={1} overflow='hidden auto'>
+        <Stack mx='auto' maxWidth={spacing(220)} width='100%'>
           {children}
         </Stack>
       </Stack>
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 4856f241..d85ee50d 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -16,28 +16,28 @@ const PublicLayout = ({ children }: PropsWithChildren) => {
       bgcolor={palette.background.default}
     >
       <Stack
-        direction={'row'}
-        justifyContent={'space-between'}
-        alignItems={'center'}
-        width={'100%'}
+        direction='row'
+        justifyContent='space-between'
+        alignItems='center'
+        width='100%'
         px={8}
         py={3}
         bgcolor={palette.background.paper}
       >
-        <Box component={'img'} src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
+        <Box component='img' src='/branding/logo-sign-in.svg' alt={config.APP_NAME} />
         <Button
-          component={'a'}
-          href={'https://rarime.com'}
-          target={'_blank'}
-          color={'secondary'}
-          size={'medium'}
+          component='a'
+          href='https://rarime.com'
+          target='_blank'
+          color='secondary'
+          size='medium'
         >
           Visit Landing page
         </Button>
       </Stack>
 
-      <Stack py={6} flex={1} overflow={'hidden auto'} width={'100%'}>
-        <Stack mx={'auto'} maxWidth={spacing(220)} width={'100%'} height={'100%'}>
+      <Stack py={6} flex={1} overflow='hidden auto' width='100%'>
+        <Stack mx='auto' maxWidth={spacing(220)} width='100%' height='100%'>
           {children}
         </Stack>
       </Stack>
diff --git a/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx b/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx
index fc53fed8..db895366 100644
--- a/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx
+++ b/src/pages/Credentials/pages/CredentialsId/components/ActionButton.tsx
@@ -36,7 +36,7 @@ export default function ActionButton({
           justifyContent='center'
           alignItems='center'
           bgcolor={palette.background.paper}
-          borderRadius={'50%'}
+          borderRadius='50%'
           sx={{
             transition: Transitions.Default,
           }}
diff --git a/src/pages/Credentials/pages/CredentialsId/index.tsx b/src/pages/Credentials/pages/CredentialsId/index.tsx
index 06d08fdb..745a8100 100644
--- a/src/pages/Credentials/pages/CredentialsId/index.tsx
+++ b/src/pages/Credentials/pages/CredentialsId/index.tsx
@@ -162,7 +162,7 @@ export default function CredentialsId() {
           </Stack>
         ) : (
           <NoDataView
-            title={'Credential not found'}
+            title='Credential not found'
             action={
               <Button component={NavLink} to={RoutePaths.CredentialsList} size='medium'>
                 View all credentials
diff --git a/src/pages/Credentials/pages/CredentialsList/index.tsx b/src/pages/Credentials/pages/CredentialsList/index.tsx
index fef4f2c0..4e7017e7 100644
--- a/src/pages/Credentials/pages/CredentialsList/index.tsx
+++ b/src/pages/Credentials/pages/CredentialsList/index.tsx
@@ -44,7 +44,7 @@ export default function CredentialsList({ ...rest }: Props) {
           <Alert severity='error'>{`There's an error occurred, please, reload page`}</Alert>
         ) : !vcs.length || isEmpty(issuersDetails) ? (
           <NoDataView
-            title={'No Credentials'}
+            title='No Credentials'
             action={<UiButton onClick={reload}>Load Credentials</UiButton>}
           />
         ) : (
diff --git a/src/pages/Credentials/pages/CredentialsRequests/components/ClaimVCsModal.tsx b/src/pages/Credentials/pages/CredentialsRequests/components/ClaimVCsModal.tsx
index 3e3d8042..276f7ceb 100644
--- a/src/pages/Credentials/pages/CredentialsRequests/components/ClaimVCsModal.tsx
+++ b/src/pages/Credentials/pages/CredentialsRequests/components/ClaimVCsModal.tsx
@@ -70,9 +70,11 @@ export default function ClaimVCsModal({ orgGroupRequest, onClose, ...rest }: Pro
       }}
     >
       {vcFields.map((field, idx) => (
-        <Typography key={idx} variant={'body1'}>
+        <Typography key={idx} variant='body1'>
           {/*TODO: add loader for each processing schema*/}
-          {field.key}: <UiIcon componentName='check' />
+          {field.key}
+          {': '}
+          <UiIcon componentName='check' />
         </Typography>
       ))}
 
diff --git a/src/pages/Credentials/pages/CredentialsRequests/index.tsx b/src/pages/Credentials/pages/CredentialsRequests/index.tsx
index 3f3df15f..d7677e34 100644
--- a/src/pages/Credentials/pages/CredentialsRequests/index.tsx
+++ b/src/pages/Credentials/pages/CredentialsRequests/index.tsx
@@ -34,9 +34,9 @@ export default function CredentialsRequests({ ...rest }: Props) {
     <Stack {...rest}>
       <Stack direction='row' alignItems='center' spacing={4}>
         <NavLink to={RoutePaths.CredentialsList}>
-          <Stack direction={'row'} alignItems={'center'} spacing={2} color={'secondary'}>
-            <UiIcon componentName={'chevronLeft'} size={5} />
-            <Typography variant={'buttonSmall'} color={'inherit'}>
+          <Stack direction='row' alignItems='center' spacing={2} color='secondary'>
+            <UiIcon componentName='chevronLeft' size={5} />
+            <Typography variant='buttonSmall' color='inherit'>
               Back
             </Typography>
           </Stack>
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 96142f2a..534ebabd 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -56,11 +56,11 @@ export default function Dashboard() {
 
   return (
     <Stack spacing={8}>
-      <PageTitles title={'Dashboard'} />
+      <PageTitles title='Dashboard' />
 
       <Paper component={Stack} spacing={6}>
         <Stack direction='row' justifyContent='space-between' alignItems='center'>
-          <Typography variant='subtitle3'>{'Latest Credentials'}</Typography>
+          <Typography variant='subtitle3'>Latest Credentials</Typography>
 
           <Button
             variant='text'
@@ -70,7 +70,7 @@ export default function Dashboard() {
             to={RoutePaths.Credentials}
             state={{ from: location.pathname }}
           >
-            {`View All`}
+            View All
           </Button>
         </Stack>
 
@@ -80,7 +80,7 @@ export default function Dashboard() {
               <Skeleton
                 key={el}
                 component={Box}
-                flex={'0 0 auto'}
+                flex='0 0 auto'
                 minWidth={spacing(80)}
                 width={spacing(80)}
                 height={spacing(45)}
@@ -93,7 +93,7 @@ export default function Dashboard() {
           <Typography>{`There's an error occurred, please, reload page`}</Typography>
         ) : !lastVCsDesc.length || isEmpty(issuersDetails) ? (
           <NoDataView
-            title={'No Credentials'}
+            title='No Credentials'
             action={<UiButton onClick={reload}>Load Credentials</UiButton>}
           />
         ) : (
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/CredentialsMetadataBuilder.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/CredentialsMetadataBuilder.tsx
index 4cb9d6ad..deaa9584 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/CredentialsMetadataBuilder.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/CredentialsMetadataBuilder.tsx
@@ -174,7 +174,7 @@ export default function CredentialsMetadataBuilder({
             control={control}
             render={({ field }) => (
               <UiSelect
-                label={'Role'}
+                label='Role'
                 {...field}
                 options={Object.entries(OrgUserRoles).map(([key, value]) => ({
                   value: value,
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/List.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/List.tsx
index ba9060fd..136f862d 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/List.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/components/List.tsx
@@ -108,7 +108,7 @@ export default function List({ filter, ...rest }: Props) {
                   <Stack direction='row' alignItems='center' justifyContent='space-between' p={5}>
                     <Typography>Member Details</Typography>
 
-                    <UiButton variant={`text`} onClick={() => setIsDrawerShown(false)}>
+                    <UiButton variant='text' onClick={() => setIsDrawerShown(false)}>
                       <UiIcon componentName='close' />
                     </UiButton>
                   </Stack>
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/index.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/index.tsx
index 750dad0c..82704544 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/index.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgGroups/pages/OrgGroupsId/index.tsx
@@ -136,7 +136,7 @@ export default function OrgGroupsId() {
   return (
     <Stack flex={1}>
       <PageTitles
-        title={`Employer in the area`}
+        title='Employer in the area'
         subtitle='a person, company, or organization that pays people to work for them: The Air Force is the largest employer in this area.'
       />
 
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/EditLinksDrawer.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/EditLinksDrawer.tsx
index c370f573..e57a878a 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/EditLinksDrawer.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/EditLinksDrawer.tsx
@@ -116,16 +116,16 @@ export default function EditLinksDrawer({ links, onLinksUpdate, ...rest }: Props
 
       {form.isFormDisabled && (
         <Stack
-          justifyContent={'center'}
-          alignItems={'center'}
-          position={'absolute'}
+          justifyContent='center'
+          alignItems='center'
+          position='absolute'
           top={0}
           left={0}
           bottom={0}
           right={0}
           bgcolor={theme => theme.palette.background.light}
         >
-          <CircularProgress color={'inherit'} />
+          <CircularProgress color='inherit' />
         </Stack>
       )}
     </UiDrawer>
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkForm.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkForm.tsx
index 394d2b38..be326dea 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkForm.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkForm.tsx
@@ -55,10 +55,13 @@ export default function LinkForm({ field, index, form, onRemove }: Props) {
         zIndex: isDragging ? 1000 : 0,
       }}
     >
-      <Stack direction='row' justifyContent={'space-between'}>
-        <Typography variant='subtitle4'>Link {index + 1}</Typography>
+      <Stack direction='row' justifyContent='space-between'>
+        <Typography variant='subtitle4'>
+          {'Link '}
+          {index + 1}
+        </Typography>
         {hasManyLinks && (
-          <Stack direction={'row'} spacing={4}>
+          <Stack direction='row' spacing={4}>
             <UiIconButton color='secondary' sx={{ cursor: 'grab' }} {...attributes} {...listeners}>
               <UiIcon componentName='dragIndicator' size={5} />
             </UiIconButton>
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkItem.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkItem.tsx
index 860894be..92f10ff2 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkItem.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinkItem.tsx
@@ -34,17 +34,17 @@ export default function LinkItem({ link }: Props) {
 
   return (
     <Stack
-      component={'a'}
+      component='a'
       href={link.url}
-      target={'_blank'}
-      rel={'noreferrer noopener'}
-      direction={'row'}
-      alignItems={'center'}
+      target='_blank'
+      rel='noreferrer noopener'
+      direction='row'
+      alignItems='center'
       spacing={2}
       p={2}
       borderRadius={3}
       bgcolor={palette.action.active}
-      overflow={'hidden'}
+      overflow='hidden'
       sx={{
         transition: Transitions.Default,
         '&:hover': {
@@ -54,7 +54,7 @@ export default function LinkItem({ link }: Props) {
     >
       <UiIcon {...iconProps} size={6} sx={{ color: palette.text.primary }} />
       <Typography
-        variant={'body3'}
+        variant='body3'
         color={palette.text.primary}
         sx={{
           overflow: 'hidden',
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinksBlock.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinksBlock.tsx
index 1ad6f037..3933b69c 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinksBlock.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/LinksBlock.tsx
@@ -23,13 +23,13 @@ export default function LinksBlock() {
       borderColor={palette.divider}
       borderRadius={4}
     >
-      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
-        <Typography variant={'subtitle3'}>Links</Typography>
+      <Stack direction='row' justifyContent='space-between' alignItems='center'>
+        <Typography variant='subtitle3'>Links</Typography>
         {!!links.length && isOrgOwner && (
           <UiButton
-            variant={'text'}
-            size={'medium'}
-            color={'secondary'}
+            variant='text'
+            size='medium'
+            color='secondary'
             startIcon={<UiIcon componentName='driveFileRenameOutlineOutlined' size={5} />}
             onClick={() => setIsLinkDrawerShown(true)}
           >
@@ -37,12 +37,12 @@ export default function LinksBlock() {
           </UiButton>
         )}
       </Stack>
-      <Stack direction={'row'} spacing={4} flexWrap={'wrap'}>
+      <Stack direction='row' spacing={4} flexWrap='wrap'>
         {links.length ? (
           links.map((link, index) => <LinkItem key={index} link={link} />)
         ) : (
           <NoDataView
-            title={'No Links'}
+            title='No Links'
             action={
               isOrgOwner && (
                 <UiButton size='medium' onClick={() => setIsLinkDrawerShown(true)}>
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/OrgOverview.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/OrgOverview.tsx
index aa2058fd..b492fc4a 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/OrgOverview.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/OrgOverview.tsx
@@ -10,8 +10,8 @@ export default function OrgOverview() {
 
   return (
     <Stack
-      direction={'row'}
-      alignItems={'center'}
+      direction='row'
+      alignItems='center'
       spacing={4}
       bgcolor={palette.background.light}
       p={6}
@@ -31,30 +31,30 @@ export default function OrgOverview() {
       />
 
       <Stack spacing={2}>
-        <Stack direction={'row'} spacing={1} alignItems={'center'} mt={4}>
-          <Typography variant={'h6'} color={palette.text.primary}>
+        <Stack direction='row' spacing={1} alignItems='center' mt={4}>
+          <Typography variant='h6' color={palette.text.primary}>
             {org.metadata.name}
           </Typography>
 
           {org.status.value === OrgsStatuses.Verified && (
-            <UiIcon componentName={'verified'} size={4} sx={{ color: palette.success.main }} />
+            <UiIcon componentName='verified' size={4} sx={{ color: palette.success.main }} />
           )}
         </Stack>
 
-        <Typography variant={'body3'} color={palette.text.secondary}>
+        <Typography variant='body3' color={palette.text.secondary}>
           {org.metadata.description}
         </Typography>
 
-        <Stack direction={'row'} spacing={6} color={palette.text.secondary}>
-          <Stack direction={'row'} spacing={1} alignItems={'center'}>
-            <Typography variant={'body4'}>Associated people</Typography>
-            <Typography variant={'subtitle5'} color={palette.text.primary}>
+        <Stack direction='row' spacing={6} color={palette.text.secondary}>
+          <Stack direction='row' spacing={1} alignItems='center'>
+            <Typography variant='body4'>Associated people</Typography>
+            <Typography variant='subtitle5' color={palette.text.primary}>
               {org.members_count}
             </Typography>
           </Stack>
-          <Stack direction={'row'} spacing={1} alignItems={'center'}>
-            <Typography variant={'body4'}>Credentials</Typography>
-            <Typography variant={'subtitle5'} color={palette.text.primary}>
+          <Stack direction='row' spacing={1} alignItems='center'>
+            <Typography variant='body4'>Credentials</Typography>
+            <Typography variant='subtitle5' color={palette.text.primary}>
               {org.issued_claims_count}
             </Typography>
           </Stack>
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidationResult.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidationResult.tsx
index ddf84782..e2c4640c 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidationResult.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidationResult.tsx
@@ -64,15 +64,15 @@ export default function ProofValidationResult({ proof, isValid }: Props) {
       {validationDetails.map((detail, index) => (
         <Stack
           key={index}
-          direction={'row'}
-          justifyContent={'space-between'}
-          alignItems={'center'}
+          direction='row'
+          justifyContent='space-between'
+          alignItems='center'
           spacing={2}
         >
-          <Typography variant={'body4'} color={palette.text.secondary}>
+          <Typography variant='body4' color={palette.text.secondary}>
             {detail.text}
           </Typography>
-          <Divider orientation={'horizontal'} sx={{ flex: 1, borderStyle: 'dashed' }} />
+          <Divider orientation='horizontal' sx={{ flex: 1, borderStyle: 'dashed' }} />
           {detail.value}
         </Stack>
       ))}
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidityBadge.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidityBadge.tsx
index 7bcab6e6..24b86fe0 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidityBadge.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofValidityBadge.tsx
@@ -9,7 +9,7 @@ export default function ProofValidityBadge({ valid }: Props) {
 
   return (
     <Typography
-      variant={'subtitle5'}
+      variant='subtitle5'
       px={3}
       py={1}
       bgcolor={valid ? palette.success.light : palette.error.light}
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofsLinkForm.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofsLinkForm.tsx
index 1bebd97a..694aa23d 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofsLinkForm.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/ProofsLinkForm.tsx
@@ -47,7 +47,7 @@ export default function ProofsLinkForm({ isLoading, onLinkIdChange }: Props) {
       <UiSearchField
         value={linkOrLinkId}
         size='medium'
-        placeholder={'Enter the Proof Link ID or URL'}
+        placeholder='Enter the Proof Link ID or URL'
         sx={{ mt: 2 }}
         InputProps={{
           endAdornment: (
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/VerifyProofsBlock.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/VerifyProofsBlock.tsx
index 628a604a..af9eaee3 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/VerifyProofsBlock.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/components/VerifyProofsBlock.tsx
@@ -22,22 +22,18 @@ export default function VerifyProofsBlock() {
       borderRadius={4}
     >
       <Stack spacing={4}>
-        <Stack direction={'row'} alignItems={'center'} spacing={2}>
-          <Typography variant={'subtitle3'}>Verify proofs</Typography>
+        <Stack direction='row' alignItems='center' spacing={2}>
+          <Typography variant='subtitle3'>Verify proofs</Typography>
           <UiTooltip
             title={
               // TODO: update text
               'Please use Verify to check whether the source officially represents Rarimo. Email address, phone number, Discord ID, Twitter account or Telegram ID.'
             }
           >
-            <UiIcon
-              componentName={'infoOutlined'}
-              size={4}
-              sx={{ color: palette.text.secondary }}
-            />
+            <UiIcon componentName='infoOutlined' size={4} sx={{ color: palette.text.secondary }} />
           </UiTooltip>
         </Stack>
-        <Typography variant={'body3'} color={palette.text.secondary}>
+        <Typography variant='body3' color={palette.text.secondary}>
           {/* TODO: update text */}
           Please use Verify to check whether the source officially represents Rarimo. Email address,
           phone number, Discord ID, Twitter account or Telegram ID.
diff --git a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/index.tsx b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/index.tsx
index 730c5ca9..2fa721d7 100644
--- a/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/index.tsx
+++ b/src/pages/Orgs/pages/OrgsId/pages/OrgRoot/index.tsx
@@ -12,18 +12,18 @@ export default function OrgRoot() {
   const { palette } = useTheme()
 
   return (
-    <Stack flex={1} spacing={6} position={'relative'}>
-      <Box display={'grid'} gridTemplateColumns={'1fr auto 1fr'} alignItems={'center'}>
+    <Stack flex={1} spacing={6} position='relative'>
+      <Box display='grid' gridTemplateColumns='1fr auto 1fr' alignItems='center'>
         <Stack
           component={NavLink}
           to={RoutePaths.Orgs}
-          direction={'row'}
-          alignItems={'center'}
+          direction='row'
+          alignItems='center'
           spacing={2}
           color={palette.text.secondary}
         >
-          <UiIcon componentName={'chevronLeft'} size={5} />
-          <Typography variant={'buttonSmall'} color={'inherit'}>
+          <UiIcon componentName='chevronLeft' size={5} />
+          <Typography variant='buttonSmall' color='inherit'>
             View all organizations
           </Typography>
         </Stack>
diff --git a/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx b/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx
index b3489e2d..939cf802 100644
--- a/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx
+++ b/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx
@@ -32,36 +32,32 @@ export default function ListCard({ org, ...rest }: Props) {
         variant='outlined'
       >
         <Avatar src={org.metadata.logoUrl} sx={{ width: spacing(12), height: spacing(12) }} />
-        <Stack direction={'row'} alignItems={'center'} mt={5}>
-          <Typography color={palette.text.primary} variant={'h6'}>
+        <Stack direction='row' alignItems='center' mt={5}>
+          <Typography color={palette.text.primary} variant='h6'>
             {org.metadata.name}
           </Typography>
           {org.status.value === OrgsStatuses.Verified && (
-            <UiIcon
-              componentName={'verified'}
-              sx={{ ml: 1, color: palette.success.main }}
-              size={4}
-            />
+            <UiIcon componentName='verified' sx={{ ml: 1, color: palette.success.main }} size={4} />
           )}
         </Stack>
-        <Typography color={palette.text.secondary} variant={'body3'} my={3}>
+        <Typography color={palette.text.secondary} variant='body3' my={3}>
           {org.metadata.description}
         </Typography>
 
         <Grid container mt={5} pt={5} borderTop={1} borderColor={palette.divider}>
           <Grid item xs={7}>
-            <Typography variant={'body4'} component={'p'} color={palette.text.secondary}>
-              {'Associated people'}
+            <Typography variant='body4' component='p' color={palette.text.secondary}>
+              Associated people
             </Typography>
-            <Typography mt={2} color={palette.text.primary} variant={'subtitle4'}>
+            <Typography mt={2} color={palette.text.primary} variant='subtitle4'>
               {org.members_count}
             </Typography>
           </Grid>
           <Grid item xs={5}>
-            <Typography variant={'body4'} component={'p'} color={palette.text.secondary}>
-              {'Credentials'}
+            <Typography variant='body4' component='p' color={palette.text.secondary}>
+              Credentials
             </Typography>
-            <Typography mt={2} color={palette.text.primary} variant={'subtitle4'}>
+            <Typography mt={2} color={palette.text.primary} variant='subtitle4'>
               {org.issued_claims_count}
             </Typography>
           </Grid>
diff --git a/src/pages/Orgs/pages/OrgsNew/components/MetadataForm.tsx b/src/pages/Orgs/pages/OrgsNew/components/MetadataForm.tsx
index 316e894c..d535e870 100644
--- a/src/pages/Orgs/pages/OrgsNew/components/MetadataForm.tsx
+++ b/src/pages/Orgs/pages/OrgsNew/components/MetadataForm.tsx
@@ -125,7 +125,7 @@ export default function MetadataForm({ formProps, onOrgCreated, ...rest }: Props
               <FormControl>
                 <UiTextField
                   {...field}
-                  label={'Description'}
+                  label='Description'
                   multiline
                   rows={5}
                   placeholder='Write a small description'
@@ -140,9 +140,9 @@ export default function MetadataForm({ formProps, onOrgCreated, ...rest }: Props
         <UiButton
           type='submit'
           size='large'
-          endIcon={<UiIcon componentName={'arrowForward'} size={4} />}
+          endIcon={<UiIcon componentName='arrowForward' size={4} />}
         >
-          {'Create'}
+          Create
         </UiButton>
       </form>
     </Stack>
diff --git a/src/pages/Orgs/pages/OrgsNew/components/RegisterIntro.tsx b/src/pages/Orgs/pages/OrgsNew/components/RegisterIntro.tsx
index 4847b17c..addf51ac 100644
--- a/src/pages/Orgs/pages/OrgsNew/components/RegisterIntro.tsx
+++ b/src/pages/Orgs/pages/OrgsNew/components/RegisterIntro.tsx
@@ -11,8 +11,8 @@ export default function RegisterIntro({ nextStepCb, ...rest }: Props) {
   const { palette, typography, spacing } = useTheme()
   return (
     <Stack
-      direction={'row'}
-      justifyContent={'center'}
+      direction='row'
+      justifyContent='center'
       spacing={16}
       py={18}
       px={6}
@@ -22,20 +22,20 @@ export default function RegisterIntro({ nextStepCb, ...rest }: Props) {
       {...rest}
     >
       <Stack>
-        <Typography variant={'h4'}>Register</Typography>
-        <Typography variant={'body3'} color={palette.text.secondary} mt={3}>
+        <Typography variant='h4'>Register</Typography>
+        <Typography variant='body3' color={palette.text.secondary} mt={3}>
           Create your company profile
         </Typography>
         <Stack my={6} spacing={3}>
           <Stack
-            component={'ol'}
+            component='ol'
             paddingInlineStart={5}
             sx={{ '& li::marker': typography.subtitle4 }}
             spacing={3}
           >
-            <Typography component={'li'}>Enter your company details</Typography>
-            <Typography component={'li'}>Verify domain</Typography>
-            <Typography component={'li'}>Create & Manage Credentials</Typography>
+            <Typography component='li'>Enter your company details</Typography>
+            <Typography component='li'>Verify domain</Typography>
+            <Typography component='li'>Create & Manage Credentials</Typography>
           </Stack>
         </Stack>
         <UiButton onClick={nextStepCb} sx={{ width: spacing(93) }}>
diff --git a/src/pages/Rewards/pages/EarnHistory/components/EventItem.tsx b/src/pages/Rewards/pages/EarnHistory/components/EventItem.tsx
index 32722392..007243ba 100644
--- a/src/pages/Rewards/pages/EarnHistory/components/EventItem.tsx
+++ b/src/pages/Rewards/pages/EarnHistory/components/EventItem.tsx
@@ -14,8 +14,8 @@ export default function EventItem({ event }: Props) {
   const { palette } = useTheme()
 
   return (
-    <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
-      <Stack direction={'row'} spacing={4} alignItems='center'>
+    <Stack direction='row' alignItems='center' justifyContent='space-between'>
+      <Stack direction='row' spacing={4} alignItems='center'>
         <Stack
           p={2.5}
           bgcolor={palette.action.active}
diff --git a/src/pages/Rewards/pages/EventId/components/EventView.tsx b/src/pages/Rewards/pages/EventId/components/EventView.tsx
index 1e118f74..a3d6e6ed 100644
--- a/src/pages/Rewards/pages/EventId/components/EventView.tsx
+++ b/src/pages/Rewards/pages/EventId/components/EventView.tsx
@@ -14,14 +14,15 @@ export default function EventView({ event }: Props) {
 
   return (
     <Stack spacing={6}>
-      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+      <Stack direction='row' justifyContent='space-between' alignItems='center'>
         <Stack spacing={4}>
           <Typography variant='subtitle2'>{event.meta.static.title}</Typography>
-          <Stack direction={'row'} alignItems={'center'} spacing={4}>
+          <Stack direction='row' alignItems='center' spacing={4}>
             <RewardChip reward={event.meta.static.reward} />
             {event.meta.static.expires_at && (
               <Typography variant='caption2' color={palette.text.secondary}>
-                Exp: {formatDateTime(event.meta.static.expires_at)}
+                {'Exp: '}
+                {formatDateTime(event.meta.static.expires_at)}
               </Typography>
             )}
           </Stack>
@@ -42,13 +43,13 @@ export default function EventView({ event }: Props) {
       <MarkdownViewer>{event?.meta.static.description ?? ''}</MarkdownViewer>
       {event.meta.static.action_url && (
         <Button
-          component={'a'}
+          component='a'
           href={event.meta.static.action_url}
           target='_blank'
           rel='noreferrer noopener'
           sx={{ width: spacing(40) }}
         >
-          {"Let's Start"}
+          {`Let's Start`}
         </Button>
       )}
     </Stack>
diff --git a/src/pages/Rewards/pages/EventId/index.tsx b/src/pages/Rewards/pages/EventId/index.tsx
index 750c4791..e7a3f1c6 100644
--- a/src/pages/Rewards/pages/EventId/index.tsx
+++ b/src/pages/Rewards/pages/EventId/index.tsx
@@ -33,14 +33,14 @@ export default function EventId() {
 
   return (
     <Stack spacing={6}>
-      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+      <Stack direction='row' justifyContent='space-between' alignItems='center'>
         <BackLink to={RoutePaths.Rewards} />
         {event && (
           <Button
             variant='text'
             color='secondary'
             size='small'
-            startIcon={<UiIcon componentName={'shareOutlined'} size={5} />}
+            startIcon={<UiIcon componentName='shareOutlined' size={5} />}
             sx={{ width: 'fit-content' }}
             onClick={() => copy(window.location.href)}
           >
@@ -52,7 +52,7 @@ export default function EventId() {
       <Paper>
         {isLoading ? (
           <Stack alignItems='center' p={20}>
-            <CircularProgress color={'secondary'} />
+            <CircularProgress color='secondary' />
           </Stack>
         ) : isLoadingError ? (
           <ErrorView
diff --git a/src/pages/Rewards/pages/Leaderboard/components/LeaderboardItem.tsx b/src/pages/Rewards/pages/Leaderboard/components/LeaderboardItem.tsx
index f7a556ad..192ec827 100644
--- a/src/pages/Rewards/pages/Leaderboard/components/LeaderboardItem.tsx
+++ b/src/pages/Rewards/pages/Leaderboard/components/LeaderboardItem.tsx
@@ -56,11 +56,11 @@ export default function LeaderboardItem({ balance, rank }: Props) {
 
   return (
     <Box py={4} {...wrapperProps}>
-      <Grid container spacing={16} alignItems={'center'}>
+      <Grid container spacing={16} alignItems='center'>
         <Grid item xs={2}>
           <Stack
-            justifyContent={'center'}
-            alignItems={'center'}
+            justifyContent='center'
+            alignItems='center'
             width={spacing(8)}
             height={spacing(8)}
             borderRadius={250}
@@ -71,8 +71,8 @@ export default function LeaderboardItem({ balance, rank }: Props) {
           </Stack>
         </Grid>
         <Grid item xs={6}>
-          <Stack direction={'row'} alignItems={'center'} spacing={4}>
-            <Stack direction={'row'} alignItems={'center'} spacing={2}>
+          <Stack direction='row' alignItems='center' spacing={4}>
+            <Stack direction='row' alignItems='center' spacing={2}>
               <UserAvatar userDid={balance.id} size={5} />
               <Typography variant='subtitle4'>
                 {`${formatDidShort(balance.id)} ${leaderIcon}`}
@@ -92,7 +92,7 @@ export default function LeaderboardItem({ balance, rank }: Props) {
             )}
           </Stack>
         </Grid>
-        <Grid item xs={4} textAlign={'right'}>
+        <Grid item xs={4} textAlign='right'>
           <Typography
             variant='subtitle4'
             px={4}
diff --git a/src/pages/Rewards/pages/Leaderboard/components/LeaderboardList.tsx b/src/pages/Rewards/pages/Leaderboard/components/LeaderboardList.tsx
index dc776326..353b9a61 100644
--- a/src/pages/Rewards/pages/Leaderboard/components/LeaderboardList.tsx
+++ b/src/pages/Rewards/pages/Leaderboard/components/LeaderboardList.tsx
@@ -31,7 +31,7 @@ export default function LeaderboardList({ leaderboard }: Props) {
             User
           </Typography>
         </Grid>
-        <Grid item xs={4} justifySelf={'end'} textAlign={'right'}>
+        <Grid item xs={4} justifySelf='end' textAlign='right'>
           <Typography variant='overline3' color={palette.text.secondary}>
             Reserved
           </Typography>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/BalanceBlock.tsx b/src/pages/Rewards/pages/RewardsRoot/components/BalanceBlock.tsx
index cf773891..bcba784b 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/BalanceBlock.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/BalanceBlock.tsx
@@ -16,7 +16,7 @@ export default function BalanceBlock() {
 
   return (
     <Paper component={Stack} spacing={6}>
-      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} spacing={4}>
+      <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={4}>
         <Stack spacing={2}>
           <Typography variant='body3' color={palette.text.secondary}>
             Reserved RMO
@@ -31,8 +31,8 @@ export default function BalanceBlock() {
           size='medium'
           sx={{ height: spacing(9), px: 3 }}
         >
-          <Stack direction={'row'} alignItems={'center'} spacing={2}>
-            <Stack direction={'row'} alignItems={'center'} spacing={1}>
+          <Stack direction='row' alignItems='center' spacing={2}>
+            <Stack direction='row' alignItems='center' spacing={1}>
               <UiIcon name={Icons.Trophy} size={5} />
               <Typography variant='subtitle4'>{balance?.rank ?? ''}</Typography>
             </Stack>
@@ -42,7 +42,7 @@ export default function BalanceBlock() {
         </Button>
       </Stack>
       <Divider />
-      <Stack direction={'row'} spacing={4} justifyContent={'space-between'} alignItems={'center'}>
+      <Stack direction='row' spacing={4} justifyContent='space-between' alignItems='center'>
         <Button
           size='medium'
           disabled={!balance}
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/ClaimBalances.tsx b/src/pages/Rewards/pages/RewardsRoot/components/ClaimBalances.tsx
index ffb9da76..040a3461 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/ClaimBalances.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/ClaimBalances.tsx
@@ -17,15 +17,18 @@ export default function ClaimBalances() {
     <Stack spacing={4} p={4} bgcolor={palette.action.active} borderRadius={2}>
       {balances.map((balance, index) => (
         <Stack key={index} spacing={4}>
-          <Stack direction={'row'} justifyContent={'space-between'}>
-            <Stack direction={'row'} spacing={4} alignItems={'center'}>
+          <Stack direction='row' justifyContent='space-between'>
+            <Stack direction='row' spacing={4} alignItems='center'>
               <Typography variant='buttonMedium' color={palette.text.secondary} width={spacing(10)}>
                 {balance.label}
               </Typography>
               <Divider orientation='vertical' flexItem />
               <Typography variant='body3'>{balance.title}</Typography>
             </Stack>
-            <Typography variant='subtitle5'>{balance.value} RMO</Typography>
+            <Typography variant='subtitle5'>
+              {balance.value}
+              {' RMO'}
+            </Typography>
           </Stack>
           {index !== balances.length - 1 && <Divider sx={{ width: spacing(63), mx: 'auto' }} />}
         </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/ClaimModal.tsx b/src/pages/Rewards/pages/RewardsRoot/components/ClaimModal.tsx
index 0267f333..fe979835 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/ClaimModal.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/ClaimModal.tsx
@@ -104,7 +104,7 @@ export default function ClaimModal({ onClaim, ...rest }: Props) {
                   disabled={isFormDisabled}
                   InputProps={{
                     endAdornment: (
-                      <Stack direction={'row'} spacing={4} alignItems={'center'}>
+                      <Stack direction='row' spacing={4} alignItems='center'>
                         <Divider orientation='vertical' flexItem />
                         <Button
                           variant='text'
@@ -124,12 +124,12 @@ export default function ClaimModal({ onClaim, ...rest }: Props) {
         </Stack>
       </UiDrawerContent>
       <UiDrawerActions>
-        <Stack spacing={2} alignItems={'center'} textAlign='center'>
+        <Stack spacing={2} alignItems='center' textAlign='center'>
           <Button type='submit' fullWidth disabled={!isLevelReached}>
             Claim
           </Button>
           <Typography variant='body4' maxWidth={spacing(80)} color={palette.text.secondary}>
-            After claiming you will be{' '}
+            {'After claiming you will be'}{' '}
             <Typography variant='subtitle5'>downgraded in Leaderboard</Typography>
           </Typography>
         </Stack>
@@ -137,16 +137,16 @@ export default function ClaimModal({ onClaim, ...rest }: Props) {
 
       {isFormDisabled && (
         <Stack
-          justifyContent={'center'}
-          alignItems={'center'}
-          position={'absolute'}
+          justifyContent='center'
+          alignItems='center'
+          position='absolute'
           top={0}
           left={0}
           bottom={0}
           right={0}
           bgcolor={theme => theme.palette.background.light}
         >
-          <CircularProgress color={'inherit'} />
+          <CircularProgress color='inherit' />
         </Stack>
       )}
     </Dialog>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/ClaimWarning.tsx b/src/pages/Rewards/pages/RewardsRoot/components/ClaimWarning.tsx
index f86506f4..2690ef5e 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/ClaimWarning.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/ClaimWarning.tsx
@@ -12,16 +12,16 @@ export default function ClaimWarning({ onAction, ...rest }: Props) {
 
   return (
     <Stack
-      direction={'row'}
+      direction='row'
       spacing={4}
-      justifyContent={'space-between'}
+      justifyContent='space-between'
       p={2}
       borderRadius={2}
       bgcolor={palette.warning.lighter}
       color={palette.warning.darker}
       {...rest}
     >
-      <Stack direction={'row'} spacing={2} alignItems={'center'}>
+      <Stack direction='row' spacing={2} alignItems='center'>
         <UiIcon componentName='infoOutlined' size={5} />
         <Typography variant='body4'>You have to reach Level 2 to claim</Typography>
       </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/EnterProgram.tsx b/src/pages/Rewards/pages/RewardsRoot/components/EnterProgram.tsx
index 36bed61c..e3b4c8d4 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/EnterProgram.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/EnterProgram.tsx
@@ -21,7 +21,7 @@ export default function EnterProgram() {
 
   return (
     <Paper>
-      <Stack spacing={5} alignItems='center' maxWidth={spacing(120)} mx={'auto'} textAlign='center'>
+      <Stack spacing={5} alignItems='center' maxWidth={spacing(120)} mx='auto' textAlign='center'>
         <Stack p={3} borderRadius={250} bgcolor={palette.action.active}>
           <UiIcon name={Icons.Rarimo} size={10} />
         </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/EventItem.tsx b/src/pages/Rewards/pages/RewardsRoot/components/EventItem.tsx
index e5eb173a..8d23564e 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/EventItem.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/EventItem.tsx
@@ -18,8 +18,8 @@ export default function EventItem({ event, onClaim }: Props) {
   const { palette } = useTheme()
 
   return (
-    <Stack direction={'row'} spacing={4} justifyContent={'space-between'} alignItems={'center'}>
-      <Stack direction={'row'} spacing={4} alignItems='center'>
+    <Stack direction='row' spacing={4} justifyContent='space-between' alignItems='center'>
+      <Stack direction='row' spacing={4} alignItems='center'>
         <Stack
           p={2.5}
           bgcolor={palette.additional.pureBlack}
@@ -42,7 +42,7 @@ export default function EventItem({ event, onClaim }: Props) {
           </Typography>
         </Stack>
       </Stack>
-      <Stack direction={'row'} alignItems={'center'} spacing={4}>
+      <Stack direction='row' alignItems='center' spacing={4}>
         <RewardChip reward={event.meta.static.reward} />
         <EventActions event={event} onClaim={onClaim} />
       </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/LevelProgress.tsx b/src/pages/Rewards/pages/RewardsRoot/components/LevelProgress.tsx
index 4a9b9312..774f6c9c 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/LevelProgress.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/LevelProgress.tsx
@@ -36,13 +36,19 @@ export default function LevelProgress({ balance, ...props }: Props) {
       <LinearProgress value={level.progress} />
       <Stack
         direction='row'
-        justifyContent={'space-between'}
+        justifyContent='space-between'
         spacing={4}
         color={palette.text.secondary}
       >
-        <Typography variant='caption2'>Level {level.rank}</Typography>
         <Typography variant='caption2'>
-          Level {level.rank + 1} ({levels[level.rank]})
+          {'Level '}
+          {level.rank}
+        </Typography>
+        <Typography variant='caption2'>
+          {'Level '}
+          {level.rank + 1}
+          {' ('}
+          {levels[level.rank]})
         </Typography>
       </Stack>
     </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/LimitedEventItem.tsx b/src/pages/Rewards/pages/RewardsRoot/components/LimitedEventItem.tsx
index eb08e41a..efb20029 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/LimitedEventItem.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/LimitedEventItem.tsx
@@ -19,8 +19,8 @@ export default function LimitedEventItem({ event, onClaim }: Props) {
   const { palette, spacing } = useTheme()
 
   return (
-    <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} spacing={4}>
-      <Stack direction={'row'} spacing={4} alignItems='center'>
+    <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={4}>
+      <Stack direction='row' spacing={4} alignItems='center'>
         <Box component={NavLink} to={generatePath(RoutePaths.RewardsEventId, { id: event.id })}>
           {event.meta.static.image_url ? (
             <Box
@@ -41,8 +41,8 @@ export default function LimitedEventItem({ event, onClaim }: Props) {
               borderRadius={2}
               width={spacing(21)}
               height={spacing(21)}
-              justifyContent={'center'}
-              alignItems={'center'}
+              justifyContent='center'
+              alignItems='center'
             >
               <UiIcon name={Icons.Gift} size={10} />
             </Stack>
@@ -60,10 +60,11 @@ export default function LimitedEventItem({ event, onClaim }: Props) {
           <Typography variant='body4' color={palette.text.secondary} sx={lineClamp(2)}>
             {event.meta.static.short_description}
           </Typography>
-          <Stack direction={'row'} alignItems={'center'} spacing={4}>
+          <Stack direction='row' alignItems='center' spacing={4}>
             <RewardChip reward={event.meta.static.reward} />
             <Typography variant='caption2' color={palette.text.secondary}>
-              Exp: {formatDateTime(event.meta.static.expires_at!)}
+              {'Exp: '}
+              {formatDateTime(event.meta.static.expires_at!)}
             </Typography>
           </Stack>
         </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/components/ProgramDetails.tsx b/src/pages/Rewards/pages/RewardsRoot/components/ProgramDetails.tsx
index 9687fd54..1e18a990 100644
--- a/src/pages/Rewards/pages/RewardsRoot/components/ProgramDetails.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/components/ProgramDetails.tsx
@@ -8,7 +8,7 @@ export default function ProgramDetails() {
 
   return (
     <Paper>
-      <Stack spacing={5} alignItems='center' maxWidth={spacing(120)} mx={'auto'} textAlign='center'>
+      <Stack spacing={5} alignItems='center' maxWidth={spacing(120)} mx='auto' textAlign='center'>
         <Stack p={3} borderRadius={250} bgcolor={palette.action.active}>
           <UiIcon name={Icons.Rarimo} size={10} />
         </Stack>
diff --git a/src/pages/Rewards/pages/RewardsRoot/index.tsx b/src/pages/Rewards/pages/RewardsRoot/index.tsx
index cffde4bc..35bfaa5c 100644
--- a/src/pages/Rewards/pages/RewardsRoot/index.tsx
+++ b/src/pages/Rewards/pages/RewardsRoot/index.tsx
@@ -27,7 +27,7 @@ export default function RewardsRoot() {
 
   return (
     <Stack spacing={8}>
-      <Stack direction={'row'} justifyContent={'space-between'}>
+      <Stack direction='row' justifyContent='space-between'>
         <PageTitles title='Rewards' />
         {isBalanceActive && (
           <Button
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index 23773844..92fad2c9 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -39,7 +39,7 @@ export default function SignIn() {
     if (!isMetamaskInstalled) {
       return (
         <Button
-          component={'a'}
+          component='a'
           href={metamaskLink()}
           target='_blank'
           rel='noreferrer noopener'
@@ -62,9 +62,9 @@ export default function SignIn() {
     if (isImporting) {
       return (
         <Stack
-          component={'form'}
+          component='form'
           spacing={6}
-          textAlign={'left'}
+          textAlign='left'
           onSubmit={e => {
             e.preventDefault()
             createIdentity(privateKey)
@@ -111,7 +111,7 @@ export default function SignIn() {
   ])
 
   return (
-    <Stack spacing={4} alignItems={'center'} textAlign={'center'}>
+    <Stack spacing={4} alignItems='center' textAlign='center'>
       <UiIcon name={Icons.Rarime} size={12} />
       <Typography variant='h3'>Welcome</Typography>
       <Typography variant='body2' color={palette.text.secondary}>
diff --git a/src/pages/UiKit/UiKitButtons.tsx b/src/pages/UiKit/UiKitButtons.tsx
index a0b99c9c..9a1f97fc 100644
--- a/src/pages/UiKit/UiKitButtons.tsx
+++ b/src/pages/UiKit/UiKitButtons.tsx
@@ -4,130 +4,193 @@ import { UiButton, UiIcon, UiIconButton } from '@/ui'
 
 export default function UiKitButtons() {
   return (
-    <Stack gap={theme => theme.spacing(4)} justifyContent={`flex-start`}>
-      <Typography variant={`h6`}>{`Text`}</Typography>
+    <Stack gap={theme => theme.spacing(4)} justifyContent='flex-start'>
+      <Typography variant='h6'>Text</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
-        <UiButton variant={`text`}>{`Text`}</UiButton>
-        <UiButton variant={`text`} disabled={true}>{`Disabled`}</UiButton>
-        <UiButton variant={`text`} href={'#'}>{`Link`}</UiButton>
+        <UiButton variant='text'>Text</UiButton>
+        <UiButton variant='text' disabled={true}>
+          Disabled
+        </UiButton>
+        <UiButton variant='text' href='#'>
+          Link
+        </UiButton>
 
-        <UiButton variant={`text`} size={`small`}>{`Small`}</UiButton>
-        <UiButton variant={`text`} size={`medium`}>{`Medium`}</UiButton>
-        <UiButton variant={`text`} size={`large`}>{`Large`}</UiButton>
+        <UiButton variant='text' size='small'>
+          Small
+        </UiButton>
+        <UiButton variant='text' size='medium'>
+          Medium
+        </UiButton>
+        <UiButton variant='text' size='large'>
+          Large
+        </UiButton>
 
-        <UiButton variant={`text`} color={`secondary`}>{`Secondary`}</UiButton>
-        <UiButton variant={`text`} color={`success`}>{`Success`}</UiButton>
-        <UiButton variant={`text`} color={`error`}>{`Error`}</UiButton>
-        <UiButton variant={`text`} color={`info`}>{`Info`}</UiButton>
-        <UiButton variant={`text`} color={`warning`}>{`Warning`}</UiButton>
+        <UiButton variant='text' color='secondary'>
+          Secondary
+        </UiButton>
+        <UiButton variant='text' color='success'>
+          Success
+        </UiButton>
+        <UiButton variant='text' color='error'>
+          Error
+        </UiButton>
+        <UiButton variant='text' color='info'>
+          Info
+        </UiButton>
+        <UiButton variant='text' color='warning'>
+          Warning
+        </UiButton>
 
         {/*ICONS*/}
+        <UiButton variant='text' startIcon={<UiIcon componentName='accountCircle' />}>
+          Text
+        </UiButton>
+        <UiButton variant='text' endIcon={<UiIcon componentName='delete' />}>
+          Text
+        </UiButton>
         <UiButton
-          variant={`text`}
-          startIcon={<UiIcon componentName='accountCircle' />}
-        >{`Text`}</UiButton>
-        <UiButton variant={`text`} endIcon={<UiIcon componentName='delete' />}>{`Text`}</UiButton>
-        <UiButton
-          variant={`text`}
+          variant='text'
           startIcon={<UiIcon componentName='delete' />}
           endIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton variant={`text`}>
+        >
+          Text
+        </UiButton>
+        <UiButton variant='text'>
           <UiIcon componentName='delete' />
         </UiButton>
       </Stack>
 
-      <Typography variant={`h6`}>{`Contained`}</Typography>
+      <Typography variant='h6'>Contained</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
-        <UiButton variant={`contained`}>{`Contained`}</UiButton>
-        <UiButton variant={`contained`} disabled={true}>{`Disabled`}</UiButton>
-        <UiButton variant={`contained`} href={'#'}>{`Link`}</UiButton>
+        <UiButton variant='contained'>Contained</UiButton>
+        <UiButton variant='contained' disabled={true}>
+          Disabled
+        </UiButton>
+        <UiButton variant='contained' href='#'>
+          Link
+        </UiButton>
 
-        <UiButton variant={`contained`} size={`small`}>{`Small`}</UiButton>
-        <UiButton variant={`contained`} size={`medium`}>{`Medium`}</UiButton>
-        <UiButton variant={`contained`} size={`large`}>{`Large`}</UiButton>
+        <UiButton variant='contained' size='small'>
+          Small
+        </UiButton>
+        <UiButton variant='contained' size='medium'>
+          Medium
+        </UiButton>
+        <UiButton variant='contained' size='large'>
+          Large
+        </UiButton>
 
-        <UiButton variant={`contained`} color={`secondary`}>{`Secondary`}</UiButton>
-        <UiButton variant={`contained`} color={`success`}>{`Success`}</UiButton>
-        <UiButton variant={`contained`} color={`error`}>{`Error`}</UiButton>
-        <UiButton variant={`contained`} color={`info`}>{`Info`}</UiButton>
-        <UiButton variant={`contained`} color={`warning`}>{`Warning`}</UiButton>
+        <UiButton variant='contained' color='secondary'>
+          Secondary
+        </UiButton>
+        <UiButton variant='contained' color='success'>
+          Success
+        </UiButton>
+        <UiButton variant='contained' color='error'>
+          Error
+        </UiButton>
+        <UiButton variant='contained' color='info'>
+          Info
+        </UiButton>
+        <UiButton variant='contained' color='warning'>
+          Warning
+        </UiButton>
 
         {/*ICONS*/}
+        <UiButton variant='contained' startIcon={<UiIcon componentName='delete' />}>
+          Text
+        </UiButton>
+        <UiButton variant='contained' endIcon={<UiIcon componentName='delete' />}>
+          Text
+        </UiButton>
         <UiButton
-          variant={`contained`}
-          startIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton
-          variant={`contained`}
-          endIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton
-          variant={`contained`}
+          variant='contained'
           startIcon={<UiIcon componentName='delete' />}
           endIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton variant={`contained`}>
+        >
+          Text
+        </UiButton>
+        <UiButton variant='contained'>
           <UiIcon componentName='delete' />
         </UiButton>
       </Stack>
 
-      <Typography variant={`h6`}>{`Outlined`}</Typography>
+      <Typography variant='h6'>Outlined</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
-        <UiButton variant={`outlined`}>{`Outlined`}</UiButton>
-        <UiButton variant={`outlined`} disabled={true}>{`Disabled`}</UiButton>
-        <UiButton variant={`outlined`} href={'#'}>{`Link`}</UiButton>
+        <UiButton variant='outlined'>Outlined</UiButton>
+        <UiButton variant='outlined' disabled={true}>
+          Disabled
+        </UiButton>
+        <UiButton variant='outlined' href='#'>
+          Link
+        </UiButton>
 
-        <UiButton variant={`outlined`} size={`small`}>{`Small`}</UiButton>
-        <UiButton variant={`outlined`} size={`medium`}>{`Medium`}</UiButton>
-        <UiButton variant={`outlined`} size={`large`}>{`Large`}</UiButton>
+        <UiButton variant='outlined' size='small'>
+          Small
+        </UiButton>
+        <UiButton variant='outlined' size='medium'>
+          Medium
+        </UiButton>
+        <UiButton variant='outlined' size='large'>
+          Large
+        </UiButton>
 
-        <UiButton variant={`outlined`} color={`secondary`}>{`Secondary`}</UiButton>
-        <UiButton variant={`outlined`} color={`success`}>{`Success`}</UiButton>
-        <UiButton variant={`outlined`} color={`error`}>{`Error`}</UiButton>
-        <UiButton variant={`outlined`} color={`info`}>{`Info`}</UiButton>
-        <UiButton variant={`outlined`} color={`warning`}>{`Warning`}</UiButton>
+        <UiButton variant='outlined' color='secondary'>
+          Secondary
+        </UiButton>
+        <UiButton variant='outlined' color='success'>
+          Success
+        </UiButton>
+        <UiButton variant='outlined' color='error'>
+          Error
+        </UiButton>
+        <UiButton variant='outlined' color='info'>
+          Info
+        </UiButton>
+        <UiButton variant='outlined' color='warning'>
+          Warning
+        </UiButton>
 
         {/*ICONS*/}
+        <UiButton variant='outlined' startIcon={<UiIcon componentName='delete' />}>
+          Text
+        </UiButton>
+        <UiButton variant='outlined' endIcon={<UiIcon componentName='delete' />}>
+          Text
+        </UiButton>
         <UiButton
-          variant={`outlined`}
-          startIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton
-          variant={`outlined`}
-          endIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton
-          variant={`outlined`}
+          variant='outlined'
           startIcon={<UiIcon componentName='delete' />}
           endIcon={<UiIcon componentName='delete' />}
-        >{`Text`}</UiButton>
-        <UiButton variant={`outlined`}>
+        >
+          Text
+        </UiButton>
+        <UiButton variant='outlined'>
           <UiIcon componentName='delete' />
         </UiButton>
       </Stack>
 
-      <Typography variant={`h6`}>{`Icon Button`}</Typography>
+      <Typography variant='h6'>Icon Button</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
         <UiIconButton>
           <UiIcon componentName='delete' />
@@ -138,17 +201,17 @@ export default function UiKitButtons() {
       </Stack>
 
       {/*SIZES*/}
-      <Typography variant={`h6`}>{`Sizes`}</Typography>
+      <Typography variant='h6'>Sizes</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
-        <UiButton size='small'>{`Small button`}</UiButton>
-        <UiButton size='medium'>{`Medium button`}</UiButton>
-        <UiButton size='large'>{`Large button`}</UiButton>
-        <UiButton>{`Default button`}</UiButton>
+        <UiButton size='small'>Small button</UiButton>
+        <UiButton size='medium'>Medium button</UiButton>
+        <UiButton size='large'>Large button</UiButton>
+        <UiButton>Default button</UiButton>
       </Stack>
     </Stack>
   )
diff --git a/src/pages/UiKit/UiKitFields.tsx b/src/pages/UiKit/UiKitFields.tsx
index 4d4ce25e..78c3ce80 100644
--- a/src/pages/UiKit/UiKitFields.tsx
+++ b/src/pages/UiKit/UiKitFields.tsx
@@ -48,25 +48,25 @@ export default function UiKitFields() {
   return (
     <Stack
       gap={theme => theme.spacing(2)}
-      justifyContent={`flex-start`}
+      justifyContent='flex-start'
       paddingBottom={theme => theme.spacing(10)}
     >
-      <Typography variant={`h6`}>{`Input`}</Typography>
+      <Typography variant='h6'>Input</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
         <UiTextField />
-        <UiTextField label={'label'} />
-        <UiTextField placeholder={'placeholder'} />
-        <UiTextField label={'label'} placeholder={'placeholder'} />
-        <UiTextField label={'disabled'} disabled={true} />
-        <UiTextField label={'error'} error errorMessage={`there is error`} />
+        <UiTextField label='label' />
+        <UiTextField placeholder='placeholder' />
+        <UiTextField label='label' placeholder='placeholder' />
+        <UiTextField label='disabled' disabled={true} />
+        <UiTextField label='error' error errorMessage='there is error' />
 
         <UiTextField
-          label={'label'}
+          label='label'
           InputProps={{
             startAdornment: (
               <InputAdornment position='start'>
@@ -77,7 +77,7 @@ export default function UiKitFields() {
         />
 
         <UiTextField
-          label={'label'}
+          label='label'
           InputProps={{
             endAdornment: (
               <InputAdornment position='end'>
@@ -88,7 +88,7 @@ export default function UiKitFields() {
         />
 
         <UiTextField
-          label={'label'}
+          label='label'
           InputProps={{
             startAdornment: (
               <InputAdornment position='start'>
@@ -103,37 +103,37 @@ export default function UiKitFields() {
           }}
         />
 
-        <UiTextField label={'success'} placeholder={'placeholder'} color='success' />
-        <UiTextField label={'error'} placeholder={'placeholder'} color='error' />
-        <UiTextField label={'warning'} placeholder={'placeholder'} color='warning' />
-        <UiTextField label={'info'} placeholder={'placeholder'} color='info' />
+        <UiTextField label='success' placeholder='placeholder' color='success' />
+        <UiTextField label='error' placeholder='placeholder' color='error' />
+        <UiTextField label='warning' placeholder='placeholder' color='warning' />
+        <UiTextField label='info' placeholder='placeholder' color='info' />
       </Stack>
 
-      <Typography variant={`h6`}>{`Select`}</Typography>
+      <Typography variant='h6'>Select</Typography>
       <Typography>{`Selected value: ${selectedValue}`}</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
         <UiSelect options={SELECT_OPTIONS} value={selectedValue} updateValue={setSelectedValue} />
         <UiSelect
-          label={'label'}
+          label='label'
           options={SELECT_OPTIONS}
           value={selectedValue}
           updateValue={setSelectedValue}
         />
         <UiSelect
-          label={'label'}
+          label='label'
           options={SELECT_OPTIONS}
           value={selectedValue}
           updateValue={setSelectedValue}
-          errorMessage={'there is error'}
+          errorMessage='there is error'
         />
 
         <UiSelect
-          label={'label'}
+          label='label'
           options={SELECT_OPTIONS.map(el => ({
             ...el,
             adornmentLeft: <UiIcon componentName='accountCircle' />,
@@ -143,7 +143,7 @@ export default function UiKitFields() {
         />
 
         <UiSelect
-          label={'label'}
+          label='label'
           options={SELECT_OPTIONS.map(el => ({
             ...el,
             adornmentRight: <UiIcon componentName='accountCircle' />,
@@ -153,7 +153,7 @@ export default function UiKitFields() {
         />
 
         <UiSelect
-          label={'label'}
+          label='label'
           options={SELECT_OPTIONS.map(el => ({
             ...el,
             adornmentLeft: <UiIcon componentName='accountCircle' />,
@@ -164,30 +164,30 @@ export default function UiKitFields() {
         />
       </Stack>
 
-      <Typography variant={`h6`}>{`Checkbox`}</Typography>
+      <Typography variant='h6'>Checkbox</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
         <UiCheckbox />
         <UiCheckbox disabled />
-        <UiCheckbox label={'label'} />
-        <UiCheckbox label={'label'} disabled />
-        <UiCheckbox label={'label'} required />
+        <UiCheckbox label='label' />
+        <UiCheckbox label='label' disabled />
+        <UiCheckbox label='label' required />
       </Stack>
 
-      <Typography variant={`h6`}>{`Radio group`}</Typography>
+      <Typography variant='h6'>Radio group</Typography>
       <Typography>{`Radio group value: ${radioGroupValue}`}</Typography>
       <UiRadioGroup groupOptions={RADIO_GROUP_OPTIONS} updateValue={setRadioGroupValue} />
 
-      <Typography variant={`h6`}>{`Switch Field`}</Typography>
+      <Typography variant='h6'>Switch Field</Typography>
       <Stack
-        direction={'row'}
-        flexWrap={`wrap`}
+        direction='row'
+        flexWrap='wrap'
         gap={theme => theme.spacing(2)}
-        justifyContent={`flex-start`}
+        justifyContent='flex-start'
       >
         <UiSwitch />
         <UiSwitch disabled />
diff --git a/src/pages/UiKit/UiKitOther.tsx b/src/pages/UiKit/UiKitOther.tsx
index 059197bb..a3d011fa 100644
--- a/src/pages/UiKit/UiKitOther.tsx
+++ b/src/pages/UiKit/UiKitOther.tsx
@@ -20,176 +20,170 @@ export default function UiKitOther() {
   return (
     <Stack spacing={8}>
       <Stack spacing={2}>
-        <Typography variant={`h6`}>{`Icons`}</Typography>
+        <Typography variant='h6'>Icons</Typography>
         <Stack
-          direction={'row'}
-          flexWrap={`wrap`}
+          direction='row'
+          flexWrap='wrap'
           gap={theme => theme.spacing(2)}
-          justifyContent={`flex-start`}
+          justifyContent='flex-start'
         >
           <UiIcon name={Icons.Metamask} />
-          {<UiIcon componentName='delete' />}
-          {<UiIcon componentName='accountCircle' />}
+          <UiIcon componentName='delete' />
+          <UiIcon componentName='accountCircle' />
         </Stack>
       </Stack>
 
       <Stack spacing={2}>
-        <Typography variant={'h6'}>{`Popup`}</Typography>
+        <Typography variant='h6'>Popup</Typography>
 
         <UiPopup
-          trigger={<UiButton>{`Popup`}</UiButton>}
+          trigger={<UiButton>Popup</UiButton>}
           menuItems={[
-            <UiButton
-              key={0}
-              variant='text'
-              startIcon={<UiIcon componentName='add' />}
-            >{`Item 1`}</UiButton>,
-            <UiButton
-              key={1}
-              variant='text'
-              startIcon={<UiIcon componentName='add' />}
-            >{`Item 2`}</UiButton>,
-            <UiButton
-              key={2}
-              variant='text'
-              startIcon={<UiIcon componentName='add' />}
-            >{`Item 3`}</UiButton>,
+            <UiButton key={0} variant='text' startIcon={<UiIcon componentName='add' />}>
+              Item 1
+            </UiButton>,
+            <UiButton key={1} variant='text' startIcon={<UiIcon componentName='add' />}>
+              Item 2
+            </UiButton>,
+            <UiButton key={2} variant='text' startIcon={<UiIcon componentName='add' />}>
+              Item 3
+            </UiButton>,
           ]}
         />
       </Stack>
 
       <Stack spacing={2}>
-        <Typography variant={`h6`}>{`Drawer`}</Typography>
+        <Typography variant='h6'>Drawer</Typography>
         <Stack
-          direction={'row'}
-          flexWrap={`wrap`}
+          direction='row'
+          flexWrap='wrap'
           gap={theme => theme.spacing(2)}
-          justifyContent={`flex-start`}
+          justifyContent='flex-start'
         >
-          <UiButton onClick={() => setIsDrawerShown(prev => !prev)}>{`Toggle Drawer`}</UiButton>
+          <UiButton onClick={() => setIsDrawerShown(prev => !prev)}>Toggle Drawer</UiButton>
           <UiDrawer open={isDrawerShown} onClose={() => setIsDrawerShown(false)}>
             <Stack
-              direction={'row'}
-              flexWrap={`wrap`}
+              direction='row'
+              flexWrap='wrap'
               gap={theme => theme.spacing(2)}
-              justifyContent={`flex-start`}
+              justifyContent='flex-start'
             >
-              <Typography variant={`h6`}>{`This is a drawer`}</Typography>
+              <Typography variant='h6'>This is a drawer</Typography>
             </Stack>
           </UiDrawer>
         </Stack>
       </Stack>
 
       <Stack spacing={2}>
-        <Typography variant={`h6`}>{`Modal`}</Typography>
+        <Typography variant='h6'>Modal</Typography>
         <Stack
-          direction={'row'}
-          flexWrap={`wrap`}
+          direction='row'
+          flexWrap='wrap'
           gap={theme => theme.spacing(2)}
-          justifyContent={`flex-start`}
+          justifyContent='flex-start'
         >
-          <UiButton onClick={() => setIsModalShown(prev => !prev)}>{`Toggle Modal`}</UiButton>
+          <UiButton onClick={() => setIsModalShown(prev => !prev)}>Toggle Modal</UiButton>
           <UiModal open={isModalShown} onClose={() => setIsModalShown(false)}>
             <Stack
-              direction={'row'}
-              flexWrap={`wrap`}
+              direction='row'
+              flexWrap='wrap'
               gap={theme => theme.spacing(2)}
-              justifyContent={`flex-start`}
+              justifyContent='flex-start'
             >
-              <Typography>{`This is a Modal`}</Typography>
+              <Typography>This is a Modal</Typography>
             </Stack>
           </UiModal>
 
-          <UiButton
-            onClick={() => setIsBasicModalShown(prev => !prev)}
-          >{`Toggle BasicModal`}</UiButton>
+          <UiButton onClick={() => setIsBasicModalShown(prev => !prev)}>Toggle BasicModal</UiButton>
 
           <UiBasicModal open={isBasicModalShown} onClose={() => setIsBasicModalShown(false)}>
             <Typography>
-              {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque ex expedita fuga fugit, harum, ipsum iusto magni modi natus, nostrum placeat quaerat quo. Nostrum quasi recusandae sint sunt tempore.`}
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque ex expedita fuga
+              fugit, harum, ipsum iusto magni modi natus, nostrum placeat quaerat quo. Nostrum quasi
+              recusandae sint sunt tempore.
             </Typography>
           </UiBasicModal>
         </Stack>
       </Stack>
 
       <Stack spacing={2}>
-        <Typography variant={`h6`}>{`Toasts manager`}</Typography>
+        <Typography variant='h6'>Toasts manager</Typography>
         <Stack
-          direction={'row'}
-          flexWrap={`wrap`}
+          direction='row'
+          flexWrap='wrap'
           gap={theme => theme.spacing(2)}
-          justifyContent={`flex-start`}
+          justifyContent='flex-start'
         >
           <UiButton
             onClick={() => {
               showToast(BusEvents.success)
             }}
-            color={`success`}
+            color='success'
           >
-            {`Success message`}
+            Success message
           </UiButton>
 
           <UiButton
             onClick={() => {
               showToast(BusEvents.error)
             }}
-            color={`error`}
+            color='error'
           >
-            {`Error message`}
+            Error message
           </UiButton>
 
           <UiButton
             onClick={() => {
               showToast(BusEvents.warning)
             }}
-            color={`warning`}
+            color='warning'
           >
-            {`Warning message`}
+            Warning message
           </UiButton>
 
           <UiButton
             onClick={() => {
               showToast(BusEvents.info)
             }}
-            color={`info`}
+            color='info'
           >
-            {`Info message`}
+            Info message
           </UiButton>
         </Stack>
       </Stack>
 
       <Stack spacing={2}>
-        <Typography variant={`h6`}>{`Typography`}</Typography>
-        <Stack spacing={4} justifyContent={`flex-start`}>
-          <Typography variant={`h1`}>{`Heading 1`}</Typography>
-          <Typography variant={`h2`}>{`Heading 2`}</Typography>
-          <Typography variant={`h3`}>{`Heading 3`}</Typography>
-          <Typography variant={`h4`}>{`Heading 4`}</Typography>
-          <Typography variant={`h5`}>{`Heading 5`}</Typography>
-          <Typography variant={`h6`}>{`Heading 6`}</Typography>
-
-          <Typography variant={`subtitle1`}>{`Subtitle 1`}</Typography>
-          <Typography variant={`subtitle2`}>{`Subtitle 2`}</Typography>
-          <Typography variant={`subtitle3`}>{`Subtitle 3`}</Typography>
-          <Typography variant={`subtitle4`}>{`Subtitle 4`}</Typography>
-          <Typography variant={`subtitle5`}>{`Subtitle 5`}</Typography>
-
-          <Typography variant={`body1`}>{`Body 1`}</Typography>
-          <Typography variant={`body2`}>{`Body 2`}</Typography>
-          <Typography variant={`body3`}>{`Body 3`}</Typography>
-          <Typography variant={`body4`}>{`Body 4`}</Typography>
-
-          <Typography variant={`buttonLarge`}>{`Button large`}</Typography>
-          <Typography variant={`buttonMedium`}>{`Button medium`}</Typography>
-          <Typography variant={`buttonSmall`}>{`Button small`}</Typography>
-
-          <Typography variant={`caption1`}>{`Caption 1`}</Typography>
-          <Typography variant={`caption2`}>{`Caption 2`}</Typography>
-          <Typography variant={`caption3`}>{`Caption 3`}</Typography>
-
-          <Typography variant={`overline1`}>{`Overline 1`}</Typography>
-          <Typography variant={`overline2`}>{`Overline 2`}</Typography>
-          <Typography variant={`overline3`}>{`Overline 3`}</Typography>
+        <Typography variant='h6'>Typography</Typography>
+        <Stack spacing={4} justifyContent='flex-start'>
+          <Typography variant='h1'>Heading 1</Typography>
+          <Typography variant='h2'>Heading 2</Typography>
+          <Typography variant='h3'>Heading 3</Typography>
+          <Typography variant='h4'>Heading 4</Typography>
+          <Typography variant='h5'>Heading 5</Typography>
+          <Typography variant='h6'>Heading 6</Typography>
+
+          <Typography variant='subtitle1'>Subtitle 1</Typography>
+          <Typography variant='subtitle2'>Subtitle 2</Typography>
+          <Typography variant='subtitle3'>Subtitle 3</Typography>
+          <Typography variant='subtitle4'>Subtitle 4</Typography>
+          <Typography variant='subtitle5'>Subtitle 5</Typography>
+
+          <Typography variant='body1'>Body 1</Typography>
+          <Typography variant='body2'>Body 2</Typography>
+          <Typography variant='body3'>Body 3</Typography>
+          <Typography variant='body4'>Body 4</Typography>
+
+          <Typography variant='buttonLarge'>Button large</Typography>
+          <Typography variant='buttonMedium'>Button medium</Typography>
+          <Typography variant='buttonSmall'>Button small</Typography>
+
+          <Typography variant='caption1'>Caption 1</Typography>
+          <Typography variant='caption2'>Caption 2</Typography>
+          <Typography variant='caption3'>Caption 3</Typography>
+
+          <Typography variant='overline1'>Overline 1</Typography>
+          <Typography variant='overline2'>Overline 2</Typography>
+          <Typography variant='overline3'>Overline 3</Typography>
         </Stack>
       </Stack>
     </Stack>
diff --git a/src/pages/VerifyProofAlias/index.tsx b/src/pages/VerifyProofAlias/index.tsx
index 896b5d24..195eb94c 100644
--- a/src/pages/VerifyProofAlias/index.tsx
+++ b/src/pages/VerifyProofAlias/index.tsx
@@ -24,7 +24,7 @@ export default function VerifyProofAlias() {
   if (isLoading) {
     return (
       <Stack alignItems='center' justifyContent='center' flex={1}>
-        <CircularProgress color={'secondary'} />
+        <CircularProgress color='secondary' />
       </Stack>
     )
   }
diff --git a/src/ui/UiDrawer.tsx b/src/ui/UiDrawer.tsx
index 26572f64..4ebc658a 100644
--- a/src/ui/UiDrawer.tsx
+++ b/src/ui/UiDrawer.tsx
@@ -25,14 +25,14 @@ export function UiDrawerTitle({ children, onClose, ...rest }: UiDrawerTitleProps
     <DialogTitle
       {...rest}
       component={Stack}
-      direction={'row'}
-      justifyContent={'space-between'}
-      width={'100%'}
+      direction='row'
+      justifyContent='space-between'
+      width='100%'
       borderBottom={1}
       borderColor={palette.divider}
       sx={{ ...rest.sx, p: 5 }}
     >
-      <Typography component={'p'} variant='h6'>
+      <Typography component='p' variant='h6'>
         {children}
       </Typography>
       <UiIconButton
@@ -47,7 +47,7 @@ export function UiDrawerTitle({ children, onClose, ...rest }: UiDrawerTitleProps
 }
 
 export function UiDrawerContent(props: BoxProps) {
-  return <Box p={5} flex={1} overflow={'hidden auto'} width={'100%'} {...props} />
+  return <Box p={5} flex={1} overflow='hidden auto' width='100%' {...props} />
 }
 
 export function UiDrawerActions(props: BoxProps) {
diff --git a/src/ui/UiImageUploader.tsx b/src/ui/UiImageUploader.tsx
index c876d313..8a773c46 100644
--- a/src/ui/UiImageUploader.tsx
+++ b/src/ui/UiImageUploader.tsx
@@ -66,7 +66,7 @@ const UiImageUploader = forwardRef<HTMLInputElement, Props>(
             justifyContent='center'
             alignItems='center'
             bgcolor={palette.background.default}
-            borderRadius={'50%'}
+            borderRadius='50%'
           >
             <UiIcon componentName='addPhotoAlternativeOutlined' size={6} />
           </Stack>
diff --git a/src/ui/UiNavTabs.tsx b/src/ui/UiNavTabs.tsx
index 9ce1c6b4..005115a0 100644
--- a/src/ui/UiNavTabs.tsx
+++ b/src/ui/UiNavTabs.tsx
@@ -28,7 +28,7 @@ function NavTab({
   return (
     <NavLink {...rest} to={to}>
       <Stack
-        alignItems={'center'}
+        alignItems='center'
         sx={{
           background: isRouteActive ? palette.background.paper : 'none',
           px: 4,
@@ -39,7 +39,7 @@ function NavTab({
         }}
       >
         <Typography
-          variant={'buttonSmall'}
+          variant='buttonSmall'
           color={isRouteActive ? palette.text.primary : palette.text.secondary}
         >
           {label}