diff --git a/next.config.js b/next.config.js
index 66278ba77..561c877ad 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,5 +14,6 @@ module.exports = {
       '180.earth',
       'purecatamphetamine.github.io',
     ],
+    disableStaticImages: true,
   },
 };
diff --git a/src/components/PageWrapper.js b/src/components/PageWrapper.js
index 35432c1bd..2a137a3cb 100644
--- a/src/components/PageWrapper.js
+++ b/src/components/PageWrapper.js
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import { makeStyles } from 'models/makeStyles';
@@ -29,6 +29,8 @@ const useStyles = makeStyles()((theme) => ({
 export default function PageWrapper({ children, className, ...otherProps }) {
   const { classes } = useStyles();
   const router = useRouter();
+  const theme = useTheme();
+  const isMobileScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const onBackHandler = () => {
     router.back();
@@ -36,10 +38,13 @@ export default function PageWrapper({ children, className, ...otherProps }) {
 
   return (
     <Box className={classes.pageContainer}>
-      <Box className={classes.top}>
-        <BackButton onBackHandler={onBackHandler} />
-        <SearchButton />
-      </Box>
+      {isMobileScreen || (
+        <Box className={classes.top}>
+          <BackButton onBackHandler={onBackHandler} />
+          <SearchButton />
+        </Box>
+      )}
+
       <Box className={clsx(classes.main, className)} {...otherProps}>
         {children}
       </Box>
diff --git a/src/components/TreeSpeciesCard.js b/src/components/TreeSpeciesCard.js
index a8fc390ec..544c26953 100644
--- a/src/components/TreeSpeciesCard.js
+++ b/src/components/TreeSpeciesCard.js
@@ -19,7 +19,10 @@ const useStyles = makeStyles()((theme) => ({
   countBox: {
     background: theme.palette.textLight.main,
     color: theme.palette.common.white,
-    padding: theme.spacing(5),
+    padding: theme.spacing(6, 8),
+    [theme.breakpoints.down('md')]: {
+      padding: theme.spacing(5.75, 7.5),
+    },
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -33,14 +36,31 @@ function TreeSpeciesCard(props) {
 
   return (
     <Card className={classes.root} elevation={0}>
-      <Box ml={5}>
-        <Typography variant="h5" sx={{ color: 'textPrimary.main' }}>
+      <Box ml={6}>
+        <Typography
+          variant="h5"
+          sx={{
+            color: 'textPrimary.main',
+            fontFamily: 'Lato',
+            fontWeight: 600,
+          }}
+        >
           {name}
         </Typography>
       </Box>
       <Box className={classes.countBox}>
         <Typography variant="body1">Count:</Typography>
-        <Typography variant="h5" sx={{ fontSize: 28 }}>
+        <Typography
+          variant="h3"
+          sx={{
+            fontFamily: 'Lato',
+            fontWeight: 700,
+            fontSize: [24, 32],
+            letterSpacing: '0.04em',
+            lineHeight: ['29px', '38px'],
+            mt: [1, 2],
+          }}
+        >
           {count}
         </Typography>
       </Box>
diff --git a/src/components/common/CustomCard.js b/src/components/common/CustomCard.js
index 2e46e8524..29c8baeba 100644
--- a/src/components/common/CustomCard.js
+++ b/src/components/common/CustomCard.js
@@ -12,8 +12,6 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: theme.spacing(2),
-    marginTop: theme.spacing(6),
-    marginBottom: theme.spacing(6),
     cursor: 'pointer',
   },
   avatar: {
@@ -61,9 +59,7 @@ function CustomCard(props) {
           : theme.palette.background.greenGradient,
       }}
     >
-      <CardMedia
-        sx={{ padding: { xs: theme.spacing(2), md: theme.spacing(4) } }}
-      >
+      <CardMedia sx={{ padding: [theme.spacing(4, 3), theme.spacing(6)] }}>
         <Avatar
           className={classes.avatar}
           sx={{
@@ -77,14 +73,18 @@ function CustomCard(props) {
         </Avatar>
       </CardMedia>
       <CardContent className={classes.cardContent}>
-        <Typography
-          variant="body1"
-          color="textSecondary"
-          sx={{ fontSize: { xs: 12, md: 16 } }}
-        >
+        <Typography variant="body1" color="textSecondary">
           {title}
         </Typography>
-        <Typography variant="h2" sx={{ fontSize: { xs: 16, sm: 24, md: 36 } }}>
+        <Typography
+          variant="h2"
+          sx={{
+            fontSize: [16, 36],
+            fontFamily: 'Lato',
+            lineHeight: ['19.2px', '43.2px'],
+            letterSpacing: ['0.02em', 0],
+          }}
+        >
           {text}
         </Typography>
       </CardContent>
diff --git a/src/components/common/DataTag.js b/src/components/common/DataTag.js
index e14412351..e10999bbd 100644
--- a/src/components/common/DataTag.js
+++ b/src/components/common/DataTag.js
@@ -18,7 +18,10 @@ function DataTag({ data, location }) {
       ) : (
         <CalendarToday sx={{ fontSize: '1.25rem' }} />
       )}
-      <Typography variant="body1" sx={{ fontWeight: 700 }}>
+      <Typography
+        variant="body1"
+        sx={{ fontWeight: 700, lineHeight: ['16.8px', '22.5px'] }}
+      >
         {!location && `Planter since`} {data}
       </Typography>
     </Stack>
diff --git a/src/theme.js b/src/theme.js
index c397a8850..5543fc7cb 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -115,6 +115,17 @@ const theme = createTheme(colorTheme, {
         lineHeight: '14.4px',
       },
     },
+    body2: {
+      fontFamily: 'Lato',
+      fontSize: '20px',
+      lineHeight: '28px',
+      letterSpacing: '0.04em',
+      [colorTheme.breakpoints.down('md')]: {
+        fontSize: '16px',
+        lineHeight: '23.2px',
+        letterSpacing: '0.02em',
+      },
+    },
     caption: {
       fontFamily: 'Lato',
       fontSize: '12px',