diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
index 4d9665d08..e6f6fbea7 100644
--- a/apps/oeth/src/App.tsx
+++ b/apps/oeth/src/App.tsx
@@ -7,7 +7,7 @@ export const App = () => {
   return (
     <>
       <CssBaseline />
-      <Stack minWidth={420}>
+      <Stack minWidth={370}>
         <Topnav />
         <Container
           sx={{
diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
index cbe1fb191..3b5e28f5e 100644
--- a/libs/oeth/history/src/components/APYContainer.tsx
+++ b/libs/oeth/history/src/components/APYContainer.tsx
@@ -93,16 +93,7 @@ function ValueContainer({
       <Typography variant="body2" color="text.secondary">
         {label}
       </Typography>
-      <Typography
-        sx={{
-          fontFamily: 'Sailec',
-          fontSize: (theme) => theme.typography.pxToRem(20),
-          fontStyle: 'normal',
-          fontWeight: 700,
-          lineHeight: '2rem',
-          textAlign: 'center',
-        }}
-      >
+      <Typography variant="h4" textAlign="center">
         {isLoading ? <Skeleton width={60} /> : value}
       </Typography>
     </Stack>
diff --git a/libs/oeth/history/src/components/HistoryButton.tsx b/libs/oeth/history/src/components/HistoryButton.tsx
index 54fd33bfc..c92c8388c 100644
--- a/libs/oeth/history/src/components/HistoryButton.tsx
+++ b/libs/oeth/history/src/components/HistoryButton.tsx
@@ -29,10 +29,10 @@ export function HistoryFilterButton({
         borderRadius: 8,
         paddingInline: 2,
         paddingBlock: 0.5,
-        fontSize: (theme) => theme.typography.pxToRem(12),
+        fontSize: 12,
         fontWeight: 500,
         fontStyle: 'normal',
-        lineHeight: (theme) => theme.typography.pxToRem(20),
+        lineHeight: 1.6,
         ':hover': {
           background: (theme) => alpha(theme.palette.common.white, 0.04),
         },
diff --git a/libs/oeth/history/src/components/HistoryFilters.tsx b/libs/oeth/history/src/components/HistoryFilters.tsx
index ce1635b64..a0efc550a 100644
--- a/libs/oeth/history/src/components/HistoryFilters.tsx
+++ b/libs/oeth/history/src/components/HistoryFilters.tsx
@@ -17,9 +17,9 @@ import { defineMessage, useIntl } from 'react-intl';
 import { HistoryFilterButton } from './HistoryButton';
 
 const styles = {
-  fontSize: '0.75rem',
+  fontSize: 12,
   fontWeight: 500,
-  lineHeight: '1.25rem',
+  lineHeight: 1.6,
 };
 
 const filterOptions = [
diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
index 4a950f74b..cf0aae7f3 100644
--- a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
+++ b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -24,6 +24,8 @@ import { Mix } from './Mix';
 
 import type { StackProps } from '@mui/material';
 
+import type { RedeemEstimate } from '../types';
+
 export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
   const intl = useIntl();
   const theme = useTheme();
@@ -56,28 +58,42 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             <Mix />
           </Stack>
         )}
-        <Stack flex={1} direction="column">
+        <Stack flex={1} direction="column" gap={0.5}>
           <Stack
             direction="row"
             alignItems="baseline"
-            gap={1}
+            justifyContent="space-between"
             overflow="hidden"
             whiteSpace="nowrap"
           >
-            <Typography fontWeight={500}>
-              {isEstimateLoading ? (
-                <Skeleton width={100} />
-              ) : (
-                formatAmount(amountOut, MIX_TOKEN.decimals)
-              )}
-            </Typography>
-            <Typography variant="body2" noWrap color="text.secondary">
-              {isEstimateLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                `(${intl.formatNumber(convertedAmount, currencyFormat)})`
-              )}
-            </Typography>
+            <Stack direction="row" gap={1} alignItems="baseline">
+              <Typography fontWeight={500}>
+                {isEstimateLoading ? (
+                  <Skeleton width={100} />
+                ) : (
+                  formatAmount(amountOut, MIX_TOKEN.decimals)
+                )}
+              </Typography>
+              <Typography variant="body2" noWrap color="text.secondary">
+                {isEstimateLoading ? (
+                  <Skeleton width={60} />
+                ) : (
+                  `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+                )}
+              </Typography>
+            </Stack>
+            <Stack direction="row" gap={1}>
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Gas:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
+                {isEstimateLoading || gasPriceLoading ? (
+                  <Skeleton width={60} />
+                ) : (
+                  `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
+                )}
+              </Typography>
+            </Stack>
           </Stack>
           <Typography noWrap>
             {intl.formatMessage({
@@ -85,32 +101,6 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             })}
           </Typography>
         </Stack>
-        <Stack justifyContent="flex-start" alignItems="flex-end">
-          <Stack direction="row" gap={1}>
-            <Typography variant="body2" color="text.secondary">
-              {intl.formatMessage({ defaultMessage: 'Gas:' })}
-            </Typography>
-            <Typography variant="body2" fontWeight={500}>
-              {isEstimateLoading || gasPriceLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
-              )}
-            </Typography>
-          </Stack>
-          {/* <Stack direction="row" gap={1}>
-            <Typography variant="body2" color="text.secondary">
-              {intl.formatMessage({ defaultMessage: 'Wait time:' })}
-            </Typography>
-            <Typography variant="body2" fontWeight={500}>
-              {isEstimateLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                intl.formatMessage({ defaultMessage: '~1 min' })
-              )}
-            </Typography>
-          </Stack> */}
-        </Stack>
       </Stack>
       <Divider />
       <Stack
@@ -141,51 +131,80 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
       </Stack>
       <Divider />
       <Stack spacing={2} py={1.5} px={2}>
-        {split?.map((s) => {
-          const converted =
-            +formatUnits(s.amount, s.token.decimals) * prices?.[s.token.symbol];
-
-          return (
-            <Stack
-              key={s.token.symbol}
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              gap={2}
-            >
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Box component="img" src={s.token.icon} />
-                <Typography fontWeight={500}>{s.token.symbol}</Typography>
-              </Stack>
-              <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="flex-end"
-                spacing={2}
-              >
-                <Typography fontWeight={500}>
-                  {isEstimateLoading ? (
-                    <Skeleton width={80} />
-                  ) : (
-                    formatAmount(s.amount, s.token.decimals)
-                  )}
-                </Typography>
-                {isPricesLoading || isEstimateLoading ? (
-                  <Skeleton width={80} />
-                ) : (
-                  <Typography
-                    fontWeight={500}
-                    color="text.secondary"
-                    sx={{ minWidth: 100, textAlign: 'end' }}
-                  >
-                    {intl.formatNumber(converted, currencyFormat)}
-                  </Typography>
-                )}
-              </Stack>
-            </Stack>
-          );
-        })}
+        {split?.map((s) => (
+          <SplitRow
+            key={s.token.symbol}
+            estimate={s}
+            price={prices?.[s.token.symbol]}
+            isEstimateLoading={isEstimateLoading}
+            isPricesLoading={isPricesLoading}
+          />
+        ))}
       </Stack>
     </Stack>
   );
 };
+
+type SplitRowProps = {
+  estimate: RedeemEstimate;
+  price: number;
+  isEstimateLoading: boolean;
+  isPricesLoading: boolean;
+} & StackProps;
+
+function SplitRow({
+  estimate,
+  price,
+  isEstimateLoading,
+  isPricesLoading,
+  ...rest
+}: SplitRowProps) {
+  const intl = useIntl();
+
+  const converted =
+    +formatUnits(estimate.amount, estimate.token.decimals) * price;
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      gap={1}
+      {...rest}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <Box component="img" src={estimate.token.icon} />
+        <Typography fontWeight={500}>{estimate.token.symbol}</Typography>
+      </Stack>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        spacing={2}
+        overflow="hidden"
+        whiteSpace="nowrap"
+      >
+        <Typography fontWeight={500}>
+          {isEstimateLoading ? (
+            <Skeleton width={80} />
+          ) : (
+            formatAmount(estimate.amount, estimate.token.decimals)
+          )}
+        </Typography>
+        {isPricesLoading || isEstimateLoading ? (
+          <Skeleton width={80} />
+        ) : (
+          <Typography
+            noWrap
+            fontWeight={500}
+            color="text.secondary"
+            textAlign="end"
+            minWidth={80}
+          >
+            {intl.formatNumber(converted, currencyFormat)}
+          </Typography>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
index 0b4788c64..19e04a794 100644
--- a/libs/oeth/redeem/src/views/RedeemView.tsx
+++ b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -36,13 +36,13 @@ const tokenInputStyles = {
   boxSizing: 'border-box',
   '& .MuiInputBase-input': {
     padding: 0,
-    lineHeight: '1.875rem',
     boxSizing: 'border-box',
     fontStyle: 'normal',
-    fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
-    fontSize: '1.5rem',
+    fontFamily: 'Sailec, sans-serif',
+    fontSize: 24,
+    lineHeight: 1.25,
     fontWeight: 700,
-    height: '1.5rem',
+    height: 24,
     color: 'text.primary',
     '&::placeholder': {
       color: 'text.secondary',
@@ -115,7 +115,7 @@ function RedeemViewWrapped() {
           isConnected={isConnected}
           isAmountDisabled={isRedeemLoading}
           inputProps={{ sx: tokenInputStyles }}
-          tokenButtonProps={{ sx: { minWidth: 0, maxWidth: 120 } }}
+          tokenButtonProps={{ sx: { minWidth: 100, maxWidth: 100 } }}
           sx={{
             paddingBlock: 2.5,
             paddingBlockStart: 2.625,
diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
index 6e0c143b5..7a7cdab56 100644
--- a/libs/oeth/shared/src/components/GasPopover.tsx
+++ b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -133,7 +133,7 @@ export function GasPopover({
               sx={{
                 gridColumn: 'span 2',
                 mt: 1.25,
-                fontSize: (theme) => theme.typography.pxToRem(12),
+                fontSize: 12,
                 color: (theme) => theme.palette.warning.main,
                 fontWeight: 400,
                 fontStyle: 'normal',
diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
index ea104792d..04c01e999 100644
--- a/libs/oeth/swap/src/components/ApyHeader.tsx
+++ b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -40,17 +40,13 @@ export const ApyHeader = (props: StackProps) => {
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        p={(theme) => theme.spacing(2, 3)}
+        px={{ xs: 2, md: 3 }}
+        py={{ xs: 1.5, md: 2 }}
       >
         {apyLoading ? (
           <Skeleton width={100} height={40} />
         ) : (
-          <Typography
-            fontSize={32}
-            fontWeight={700}
-            fontFamily="Sailec"
-            lineHeight="40px"
-          >
+          <Typography variant="h1">
             {intl.formatNumber(
               trailing.value === 30 ? apy.apy30DayAvg : apy.apy7DayAvg,
               { minimumFractionDigits: 2, maximumFractionDigits: 2 },
@@ -61,17 +57,34 @@ export const ApyHeader = (props: StackProps) => {
 
         <Button
           color="secondary"
-          size="small"
+          variant="text"
           onClick={(e) => setAnchorEl(e.currentTarget)}
           sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
             borderRadius: 1,
             color: 'text.secondary',
-            backgroundColor: 'grey.700',
-            img: { marginLeft: 0.75 },
+            transform: 'translateX(5px)',
           }}
         >
           {intl.formatMessage(trailing.label)}
-          <Box component="img" src={`/images/downarrow.png`} />
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              backgroundColor: 'grey.600',
+              color: 'text.secondary',
+              p: 0.2,
+              transform: 'translateY(2px)',
+              width: 16,
+              height: 16,
+            }}
+          >
+            <Box component="img" src="/images/dropdown.svg" />
+          </Box>
         </Button>
         <Menu
           anchorEl={anchorEl}
diff --git a/libs/oeth/swap/src/components/BestRoutes.tsx b/libs/oeth/swap/src/components/BestRoutes.tsx
index 8de1bc56e..9ca8a76d3 100644
--- a/libs/oeth/swap/src/components/BestRoutes.tsx
+++ b/libs/oeth/swap/src/components/BestRoutes.tsx
@@ -17,7 +17,7 @@ export function BestRoutes(props: Grid2Props) {
   return (
     <Grid2 spacing={1} {...props} container>
       {swapRoutes.slice(0, 2).map((route, index) => (
-        <Grid2 key={route.action} xs={6}>
+        <Grid2 key={route.action} xs={12} sm={6}>
           <SwapRouteCard
             key={`bestRoute-${index}`}
             isSelected={routeEq(selectedSwapRoute, route)}
diff --git a/libs/oeth/swap/src/components/SwapRouteAccordion.tsx b/libs/oeth/swap/src/components/SwapRouteAccordion.tsx
index 07e070af8..557cc237f 100644
--- a/libs/oeth/swap/src/components/SwapRouteAccordion.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteAccordion.tsx
@@ -38,7 +38,7 @@ export function SwapRouteAccordion(props: Omit<AccordionProps, 'children'>) {
       <AccordionSummary
         sx={{
           minHeight: 0,
-          fontSize: (theme) => theme.typography.pxToRem(14),
+          fontSize: 14,
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
@@ -67,8 +67,8 @@ export function SwapRouteAccordion(props: Omit<AccordionProps, 'children'>) {
           component="img"
           src="/images/arrow-down.svg"
           sx={{
-            height: (theme) => theme.typography.pxToRem(12),
-            width: (theme) => theme.typography.pxToRem(12),
+            height: 12,
+            width: 12,
             alignSelf: 'center',
           }}
         ></Box>
diff --git a/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx
index 2314a0421..cf60fe9a3 100644
--- a/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx
@@ -84,10 +84,7 @@ export function SwapRouteAccordionItem({
           <Box
             component="img"
             src={routeActionLogos[route.action]}
-            sx={{
-              height: (theme) => theme.typography.pxToRem(24),
-              width: (theme) => theme.typography.pxToRem(24),
-            }}
+            sx={{ height: 24, width: 24 }}
           />
           <Box>
             <Typography variant="body2">
diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
index dfb2f834d..04310e9df 100644
--- a/libs/oeth/swap/src/components/SwapRouteCard.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -149,7 +149,7 @@ export function SwapRouteCard({
                   position: 'absolute',
                   borderBottomLeftRadius: (theme) => theme.shape.borderRadius,
                   background: (theme) => theme.palette.background.gradient1,
-                  fontSize: (theme) => theme.typography.pxToRem(12),
+                  fontSize: 12,
                   top: (theme) => theme.spacing(-3),
                   right: (theme) => theme.spacing(-1.25),
                   px: 1,
diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
index 1f58408be..8b284c7a9 100644
--- a/libs/oeth/swap/src/views/SwapView.tsx
+++ b/libs/oeth/swap/src/views/SwapView.tsx
@@ -51,13 +51,13 @@ const tokenInputStyles = {
   boxSizing: 'border-box',
   '& .MuiInputBase-input': {
     padding: 0,
-    lineHeight: '1.875rem',
     boxSizing: 'border-box',
     fontStyle: 'normal',
-    fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
-    fontSize: '1.5rem',
+    fontFamily: 'Sailec, sans-serif',
+    fontSize: 24,
+    lineHeight: 1.25,
     fontWeight: 700,
-    height: '1.5rem',
+    height: 24,
     '&::placeholder': {
       color: 'text.secondary',
       opacity: 1,
diff --git a/libs/shared/components/src/Cards/Card.tsx b/libs/shared/components/src/Cards/Card.tsx
index 5a272d5ea..09f684294 100644
--- a/libs/shared/components/src/Cards/Card.tsx
+++ b/libs/shared/components/src/Cards/Card.tsx
@@ -31,7 +31,7 @@ export function Card({
           color: 'primary.contrastText',
           fontWeight: 500,
           '& .MuiCardHeader-title': {
-            fontSize: (theme) => theme.typography.pxToRem(14),
+            fontSize: 14,
           },
           ...sxCardTitle,
         }}
diff --git a/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx b/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx
index ad7f7b27d..dfd76807e 100644
--- a/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx
@@ -12,8 +12,8 @@ export function ActionButton({ sx, children, ...rest }: Props) {
         background: (theme) => theme.palette.background.gradient1,
         color: 'primary.contrastText',
         paddingBlock: 2,
-        fontSize: (theme) => theme.typography.pxToRem(20),
-        lineHeight: '2rem',
+        fontSize: 20,
+        lineHeight: 1.5,
         borderRadius: 2,
         fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
         fontWeight: 500,
diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
index ebf29f2ea..42d1a3115 100644
--- a/libs/shared/components/src/Cards/SwapCard/Input.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -95,11 +95,11 @@ export function Input({
             boxSizing: 'border-box',
             '& .MuiInputBase-input': {
               padding: 0,
-              lineHeight: '1.875rem',
+              lineHeight: 1.5,
               boxSizing: 'border-box',
               fontStyle: 'normal',
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
-              fontSize: '1.5rem',
+              fontSize: 24,
               fontWeight: 700,
               height: '1.5rem',
               color: 'primary.contrastText',
@@ -135,7 +135,7 @@ export function Input({
               sx={{
                 fontWeight: 400,
                 fontStyle: 'normal',
-                lineHeight: '1.5rem',
+                lineHeight: 1.6,
               }}
             >
               {intl.formatNumber(baseTokenValue, currencyFormat)}
@@ -150,7 +150,7 @@ export function Input({
             fontWeight: 400,
             fontStyle: 'normal',
             visibility: baseTokenBalance === undefined ? 'hidden' : 'visible',
-            lineHeight: '1.5rem',
+            lineHeight: 1.6,
           }}
         >
           {intl.formatMessage(
diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx
index 45574302b..5a20f712e 100644
--- a/libs/shared/components/src/Cards/SwapCard/Output.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx
@@ -60,7 +60,6 @@ export function Output({
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
               flex: 1,
               alignSelf: 'end',
-              lineHeight: '1.875rem',
               color: (theme) =>
                 exchangeTokenQuantity === 0
                   ? theme.palette.text.secondary
@@ -87,7 +86,7 @@ export function Output({
           isLoading ? (
             <Loader width={28} />
           ) : (
-            <Typography variant="body1" color="grey.200" lineHeight="1.5rem">
+            <Typography variant="body1" color="grey.200">
               {intl.formatNumber(exchangeTokenValue, currencyFormat)}
             </Typography>
           )
@@ -102,7 +101,6 @@ export function Output({
               }}
               variant="body1"
               color="grey.200"
-              lineHeight="1.5rem"
             >
               {intl.formatMessage(
                 { defaultMessage: 'Balance: {number}' },
diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
index 596f82ab8..0a5f85d84 100644
--- a/libs/shared/components/src/Inputs/TokenInput.tsx
+++ b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -117,15 +117,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
           {isPriceLoading ? (
             <Skeleton width={50} />
           ) : !isNilOrEmpty(tokenPriceUsd) ? (
-            <Typography
-              color="text.secondary"
-              variant="body1"
-              sx={{
-                fontWeight: 400,
-                fontStyle: 'normal',
-                lineHeight: '1.5rem',
-              }}
-            >
+            <Typography color="text.secondary">
               {intl.formatNumber(amountUsd, currencyFormat)}
             </Typography>
           ) : null}
@@ -144,13 +136,9 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                   <Typography
                     noWrap
                     color="text.secondary"
-                    variant="body1"
                     sx={{
                       justifySelf: 'flex-end',
-                      fontWeight: 400,
-                      fontStyle: 'normal',
                       visibility: balance === undefined ? 'hidden' : 'visible',
-                      lineHeight: '1.5rem',
                       textOverflow: 'ellipsis',
                     }}
                   >
diff --git a/libs/shared/components/src/top-nav/ConnectedButton.tsx b/libs/shared/components/src/top-nav/ConnectedButton.tsx
index e22df088e..121e778be 100644
--- a/libs/shared/components/src/top-nav/ConnectedButton.tsx
+++ b/libs/shared/components/src/top-nav/ConnectedButton.tsx
@@ -102,8 +102,8 @@ export function ConnectedButton({
                 borderRadius: 7,
                 paddingInline: 2.375,
                 paddingBlock: 1.25,
-                fontSize: '0.75rem',
-                lineHeight: '0.75rem',
+                fontSize: 12,
+                lineHeight: 1.25,
                 '&:hover': {
                   background: (theme) =>
                     alpha(theme.palette.common.white, 0.05),
diff --git a/libs/shared/components/src/top-nav/TopNav.tsx b/libs/shared/components/src/top-nav/TopNav.tsx
index c02f8a12e..ad81f955e 100644
--- a/libs/shared/components/src/top-nav/TopNav.tsx
+++ b/libs/shared/components/src/top-nav/TopNav.tsx
@@ -130,16 +130,13 @@ export function TopNav({
             label={tab}
             to={`/${tab.toLowerCase()}`}
             sx={{
-              fontSize: {
-                xs: '0.875rem',
-                md: '1rem',
-              },
+              fontSize: 16,
               position: 'relative',
               textTransform: 'none',
               boxSizing: 'borderBox',
               paddingInline: 2,
               paddingBlock: { xs: 1, md: 3 },
-              lineHeight: '1.6875rem',
+              lineHeight: 1.6875,
               '&:hover:after': {
                 content: '""',
                 width: '100%',
@@ -166,12 +163,9 @@ export function TopNav({
           alignItems: 'stretch',
           gap: { xs: 1, md: 2 },
           '& > a, & > *': {
-            fontSize: {
-              xs: '0.75rem',
-              md: '1rem',
-            },
+            fontSize: 16,
             color: (theme) => theme.palette.primary.contrastText,
-            lineHeight: (theme) => theme.spacing(3),
+            lineHeight: 3,
           },
         }}
       >
diff --git a/libs/shared/components/src/top-nav/utils.ts b/libs/shared/components/src/top-nav/utils.ts
index ab7a6de0c..a6dee1939 100644
--- a/libs/shared/components/src/top-nav/utils.ts
+++ b/libs/shared/components/src/top-nav/utils.ts
@@ -9,7 +9,7 @@ export const styles: SxProps<Theme> = {
   paddingInline: { xs: 2, md: 3 },
   color: 'primary.contrastText',
   boxSizing: 'border-box',
-  lineHeight: '1rem',
+  lineHeight: 1.25,
 };
 
 export const messages = {
diff --git a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
index 6060f724a..b3ca518aa 100644
--- a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
+++ b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
@@ -12,6 +12,8 @@ import {
   FormControlLabel,
   Stack,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { useLocalStorageValue } from '@react-hookz/web';
 import { useIntl } from 'react-intl';
@@ -22,6 +24,8 @@ export type GeoFenceProviderProps = { children: ReactNode };
 
 export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => {
   const intl = useIntl();
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const [checked, setChecked] = useState(false);
   const { value: geoCheck, set: setGeoCheck } = useLocalStorageValue(
     '@originprotocol/oeth-geo-check',
@@ -33,7 +37,7 @@ export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => {
   return (
     <>
       {children}
-      <Dialog open={!geoCheck} maxWidth="sm">
+      <Dialog open={!geoCheck} maxWidth="sm" fullScreen={fullScreen}>
         <DialogTitle>
           {intl.formatMessage({ defaultMessage: 'Restricted Access' })}
         </DialogTitle>
diff --git a/libs/shared/theme/src/Palette.stories.tsx b/libs/shared/theme/src/Palette.stories.tsx
index 32ff82147..cc65d81dc 100644
--- a/libs/shared/theme/src/Palette.stories.tsx
+++ b/libs/shared/theme/src/Palette.stories.tsx
@@ -80,7 +80,7 @@ const PaletteElem = ({
           noWrap
           sx={{
             fontSize: 13,
-            lineHeight: '19px',
+            lineHeight: 1.5,
             color: 'primary.contrastText',
           }}
         >
@@ -100,7 +100,7 @@ const PaletteElem = ({
             sx={{
               color: value,
               fontSize: 48,
-              lineHeight: '69px',
+              lineHeight: 1.5,
               fontWeight: 500,
             }}
           >
@@ -155,7 +155,7 @@ const PaletteView = ({ palette, ...rest }: PaletteViewProps) => (
             noWrap
             sx={{
               fontSize: 20,
-              lineHeight: '29px',
+              lineHeight: 1.25,
               fontWeight: 500,
               color: 'primary.contrastText',
             }}
diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
index 92f349cb8..f29f15899 100644
--- a/libs/shared/theme/src/theme.tsx
+++ b/libs/shared/theme/src/theme.tsx
@@ -1,9 +1,10 @@
-import { alpha, Box } from '@mui/material';
+import { alpha, Box, createTheme } from '@mui/material';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 import shadows from '@mui/material/styles/shadows';
 
 import { CheckboxIcon } from './components/CheckboxIcon';
 import { EmptyCheckbox } from './components/EmptyCheckbox';
+const base = createTheme();
 
 export const theme = extendTheme({
   colorSchemes: {
@@ -71,22 +72,56 @@ export const theme = extendTheme({
     },
   },
   typography: {
-    fontFamily: 'Inter, Sailec, Helvetica, Arial, sans-serif',
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+
+    fontSize: 14,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+
+    h1: {
+      fontFamily: 'Sailec',
+      fontSize: 32,
+      fontStyle: 'normal',
+      fontWeight: 700,
+      lineHeight: 1.5,
+      [base.breakpoints.down('sm')]: {
+        fontSize: 20,
+      },
+    },
     h3: {
       fontFamily: 'Sailec',
-      fontSize: '1.5rem',
+      fontSize: 24,
       fontStyle: 'normal',
       fontWeight: 700,
-      lineHeight: '2rem',
+      lineHeight: 1.5,
+      [base.breakpoints.down('sm')]: {
+        fontSize: 20,
+      },
+    },
+    h4: {
+      fontFamily: 'Sailec',
+      fontSize: 20,
+      fontStyle: 'normal',
+      fontWeight: 700,
+      lineHeight: 1.6,
+      [base.breakpoints.down('sm')]: {
+        fontSize: 18,
+        lineHeight: 1.5,
+      },
     },
     body1: {
-      fontSize: '0.875rem',
-      lineHeight: '1.4375rem',
+      fontSize: 14,
+      lineHeight: 1.5,
+      [base.breakpoints.down('sm')]: {
+        fontSize: 13,
+        lineHeight: 1.25,
+      },
     },
     body2: {
-      fontSize: '0.75rem',
+      fontSize: 12,
       fontWeight: 400,
-      lineHeight: '1.25rem',
+      lineHeight: 1.6,
       fontStyle: 'normal',
     },
   },
@@ -175,6 +210,12 @@ export const theme = extendTheme({
             background: theme.palette.grey[900],
           },
         }),
+        text: ({ theme }) => ({
+          ':hover': {
+            color: theme.palette.common.white,
+            background: 'transparent',
+          },
+        }),
       },
       variants: [
         {
@@ -183,8 +224,8 @@ export const theme = extendTheme({
             background: theme.palette.background.gradient1,
             color: theme.palette.text.primary,
             padding: theme.spacing(2),
-            fontSize: theme.typography.pxToRem(20),
-            lineHeight: '2rem',
+            fontSize: 20,
+            lineHeight: 1.6,
             borderRadius: theme.shape.borderRadius * 2,
             fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
             fontWeight: 500,
@@ -226,10 +267,10 @@ export const theme = extendTheme({
             padding: theme.spacing(1.5, 2),
           },
         }),
-        title: {
-          fontSize: 14,
+        title: ({ theme }) => ({
+          fontSize: theme.typography.fontSize,
           fontWeight: 500,
-        },
+        }),
       },
     },
     MuiCardContent: {
@@ -256,6 +297,9 @@ export const theme = extendTheme({
       },
     },
     MuiCssBaseline: {
+      defaultProps: {
+        enableColorScheme: true,
+      },
       styleOverrides: `
           body {
             -webkit-font-smoothing: antialiased;
@@ -270,7 +314,7 @@ export const theme = extendTheme({
           input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
             -webkit-appearance: none;
             margin: 0;
-          }
+          }          
         `,
     },
     MuiDialog: {
@@ -290,7 +334,7 @@ export const theme = extendTheme({
           py: 3,
           fontSize: 16,
           fontWeight: 700,
-          lineHeight: '28px',
+          lineHeight: 1.75,
           color: theme.palette.text.primary,
         }),
       },
@@ -314,8 +358,8 @@ export const theme = extendTheme({
             position: 'static',
             transform: 'none',
             transformOrigin: 'initial',
-            fontSize: theme.typography.pxToRem(14),
-            marginBlockEnd: '0.5rem',
+            fontSize: theme.typography.fontSize,
+            marginBlockEnd: theme.spacing(1),
             color: `${theme.palette.text.primary}`,
           },
         }),
@@ -334,7 +378,7 @@ export const theme = extendTheme({
 
           '& .MuiInputBase-input': {
             color: theme.palette.text.primary,
-            fontSize: theme.typography.pxToRem(14),
+            fontSize: theme.typography.fontSize,
           },
         }),
         input: ({ theme }) => ({
@@ -422,7 +466,7 @@ export const theme = extendTheme({
       styleOverrides: {
         text: ({ theme }) => ({
           borderRadius: 15,
-          backgroundColor: theme.palette.grey[800],
+          // backgroundColor: theme.palette.grey[900],
         }),
       },
     },
@@ -431,9 +475,9 @@ export const theme = extendTheme({
         root: ({ theme }) => ({
           minHeight: 0,
           padding: theme.spacing(3, 2),
-          fontSize: '1rem',
+          fontSize: 16,
           textTransform: 'none',
-          lineHeight: '1.6875rem',
+          lineHeight: 1.6875,
           ':hover': {
             color: theme.palette.text.primary,
           },
@@ -442,7 +486,9 @@ export const theme = extendTheme({
           },
           [theme.breakpoints.down('md')]: {
             padding: theme.spacing(1, 2),
-            fontSize: '0.875rem',
+          },
+          [theme.breakpoints.down('sm')]: {
+            fontSize: 14,
           },
         }),
       },
@@ -452,10 +498,10 @@ export const theme = extendTheme({
         root: ({ theme }) => ({
           paddingInline: theme.spacing(3),
           paddingBlock: theme.spacing(2),
-          fontSize: theme.typography.pxToRem(14),
+          fontSize: theme.typography.fontSize,
           fontStyle: 'normal',
           fontWeight: 400,
-          lineHeight: theme.typography.pxToRem(23),
+          lineHeight: 1.6,
         }),
         head: ({ theme }) => ({
           color: theme.palette.text.secondary,