diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
index ac6914f067..c708967e3c 100644
--- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
+++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
@@ -7,8 +7,14 @@ import { MENU_LIST } from './menu.config'
 import * as S from './MenuItems.styles'
 import { PAGES_BY_NETWORK } from 'util/constant'
 import { selectActiveNetwork } from 'selectors/networkSelector'
+import { useTheme, useMediaQuery } from '@mui/material'
 
-const MenuItems = () => {
+const MenuItems = ({
+  setOpen
+}) => {
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const menuList = MENU_LIST;
 
@@ -46,6 +52,7 @@ const MenuItems = () => {
             key={item.key}
             to={item.url}
             activeclassname="active"
+            onClick={() => isMobile ? setOpen(false): null}
           >
             {item.title}
           </S.MenuListItem>
diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
index 410e410dd4..eaea9041ba 100644
--- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
@@ -12,7 +12,7 @@ export const Nav = styled('nav')(({ theme }) => ({
   flexWrap: 'wrap',
   [ theme.breakpoints.down('md') ]: {
     width: '100%',
-    gap: '20px',
+    gap: '10px',
     height: '250px',
     marginTop: '20px',
     flexWrap: 'nowrap',
@@ -31,7 +31,7 @@ export const MenuListItem = styled(NavLink)(({ theme }) => ({
   [ theme.breakpoints.down('md') ]: {
     fontSize: '20px',
     fontWeight: '400',
-    marginLeft: '20px'
+    padding: '0 24px',
   },
   color: 'inherit',
   '&:hover': {
diff --git a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
index fe29660700..1233b32947 100644
--- a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
@@ -7,7 +7,7 @@ export const ThemeSwitcherTag = styled(Box)(({ theme }) => ({
   [ theme.breakpoints.down('md') ]: {
     width: '100%',
     marginTop: '20px',
-    marginLeft: '10px'
+    padding: '0px 20px'
   }
 }));
 
diff --git a/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js
new file mode 100644
index 0000000000..baf67aea08
--- /dev/null
+++ b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { Typography } from '@mui/material';
+
+const ShowMoreShowLess = ({
+  children,
+  limit = 50,
+  sx
+}) => {
+  const text = children;
+
+  const [ showMore, setshowMore ] = useState(false);
+
+  return (
+    <Typography variant='body3' sx={sx}>
+      {showMore ? text : text.substr(0, limit)}
+      {text.length > limit ?
+        <Typography
+          variant='body3'
+          sx={{
+            display: 'inline',
+            cursor: 'pointer',
+          }}
+          color="primary"
+          component="span"
+          onClick={() => setshowMore(!showMore)}
+        >
+          {showMore ? 'show less' : '... show more'}
+        </Typography>
+        : null}
+    </Typography>
+  )
+
+}
+
+export default ShowMoreShowLess
diff --git a/packages/boba/gateway/src/components/transaction/Transaction.js b/packages/boba/gateway/src/components/transaction/Transaction.js
index f2ea3de07d..005bfa2b36 100644
--- a/packages/boba/gateway/src/components/transaction/Transaction.js
+++ b/packages/boba/gateway/src/components/transaction/Transaction.js
@@ -124,25 +124,25 @@ function Transaction({
         md={6}
         >
           <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems:'flex-start', paddingLeft: '3px' }}>
-            <Typography variant="overline" style={{lineHeight: '1.1em'}}>{chain}</Typography>
-            <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>{time}</Typography>
+            <Typography variant="body2" style={{lineHeight: '1.1em'}}>{chain}</Typography>
+            <Typography variant="body2" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>{time}</Typography>
             {completion === '' &&
-              <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>&nbsp;</Typography>
+              <Typography variant="body2" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>&nbsp;</Typography>
             }
             {completion !== '' &&
-              <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>{completion}</Typography>
+              <Typography variant="body2" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>{completion}</Typography>
             }
-            {toChain && <Typography variant="overline" style={{ lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)' }}>
+            {toChain && <Typography variant="body2" style={{ lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)' }}>
               {toChain}
             </Typography>}
-            <Typography variant="body3" style={{lineHeight: '1.1em', fontSize: '0.7em', color: 'rgba(255, 255, 255, 0.3)'}}>
+            <Typography variant="body2" style={{lineHeight: '1.1em', fontSize: '0.7em', color: 'rgba(255, 255, 255, 0.3)'}}>
               {oriChain}&nbsp;Hash:&nbsp;
               <a
                 href={
                   oriChain === 'L0' ? tx_ref : chainLink({ hash: oriHash, chain: oriChain })}
                 target={'_blank'}
                 rel='noopener noreferrer'
-                style={{ color: theme.palette.mode === 'light' ? 'black' : 'white', fontFamily: 'MessinaSB', fontSize: '0.8em'}}
+                style={{ color: theme.palette.mode === 'light' ? 'black' : 'white', fontFamily: 'MessinaSB'}}
               >
                 {isMobile ? truncate(oriHash, 6, 6, '...') : oriHash}
               </a>
@@ -156,19 +156,19 @@ function Transaction({
         md={3}
       >
         <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems:'flex-start'}}>
-          <Typography variant="overline" style={{lineHeight: '1.1em'}}>
+          <Typography variant="body2" style={{lineHeight: '1.1em'}}>
             {blockNumber}
           </Typography>
-          <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
+          <Typography variant="body2" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
             {typeTX}
           </Typography>
-          {eventType ? <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
+          {eventType ? <Typography variant="body2" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
             {eventType}
           </Typography> : null}
           {amountTx ?
             <Typography
-              variant="overline"
-              style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}
+              variant="body2"
+              style={{lineHeight: '1.1em'}}
              >
                {amountTx}
              </Typography> : null
@@ -183,7 +183,7 @@ function Transaction({
       >
         {!!detail &&
           <Typography
-            variant="overline"
+            variant="body2"
             sx={{cursor: 'pointer',display: 'flex', alignItems: 'center',lineHeight: '1.1em'}}
             onClick={()=>{setDropDownBox(!dropDownBox)}}
           >
diff --git a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
index d07b2fe3e2..2a88b2fcf1 100644
--- a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
+++ b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
@@ -69,7 +69,11 @@ export const ProjectContent = styled(Box)(({ theme }) => ({
   gap: 1,
   marginTop: '50px',
   width: '100%',
-  height: '140px'
+  height: '140px',
+  [ theme.breakpoints.down('md') ]: {
+    minHeight: '140px',
+    height: 'auto'
+  },
 }))
 
 export const ImageContainer = styled(Box)(({ theme, ...props }) => ({
diff --git a/packages/boba/gateway/src/containers/ecosystem/Projects.js b/packages/boba/gateway/src/containers/ecosystem/Projects.js
index 8cd4944481..03b2b0a6dc 100644
--- a/packages/boba/gateway/src/containers/ecosystem/Projects.js
+++ b/packages/boba/gateway/src/containers/ecosystem/Projects.js
@@ -10,11 +10,13 @@ import Tooltip from 'components/tooltip/Tooltip'
 import { useParams } from 'react-router-dom'
 import * as S from './Ecosystem.styles'
 import { loadProjectByCategory, loadBobaProjectByCategory } from './project.list'
-import { SvgIcon } from '@mui/material'
+import { SvgIcon, useMediaQuery, useTheme } from '@mui/material'
+import ShowMoreShowLess from 'components/showMoreShowLess/ShowMoreShowLess'
 
 const Projects = ({projectType}) => {
   const [ projectByCategory, setprojectByCategory ] = useState({})
-
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
   const params = useParams();
 
   useEffect(() => {
@@ -48,9 +50,19 @@ const Projects = ({projectType}) => {
           <S.ProjectContent
           >
             <Typography alignSelf="center" variant="h4">{project.title}</Typography>
-            <Tooltip title={project.description}>
-              <S.ProjectDescription variant='body2'> {project.description}</S.ProjectDescription>
-            </Tooltip>
+            {isMobile ?
+              <ShowMoreShowLess
+                sx={{
+                  width: '100%',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  opacity: 0.85,
+                  fontWeight: 400,
+                }}
+              >{project.description}</ShowMoreShowLess>
+              : <Tooltip title={project.description}>
+                <S.ProjectDescription variant='body2'> {project.description}</S.ProjectDescription>
+              </Tooltip>}
           </S.ProjectContent>
           <S.DividerLine />
           <S.TileFooter
diff --git a/packages/boba/gateway/src/containers/farm/Farm.js b/packages/boba/gateway/src/containers/farm/Farm.js
index 56b43bae4a..de014dec75 100644
--- a/packages/boba/gateway/src/containers/farm/Farm.js
+++ b/packages/boba/gateway/src/containers/farm/Farm.js
@@ -211,7 +211,6 @@ class Farm extends React.Component {
 
 
   render() {
-    console.log(['props', this.props])
 
     const {
       poolInfo,
diff --git a/packages/boba/gateway/src/containers/history/TX_Transfers.js b/packages/boba/gateway/src/containers/history/TX_Transfers.js
index 620eb48fad..c24a35d35b 100644
--- a/packages/boba/gateway/src/containers/history/TX_Transfers.js
+++ b/packages/boba/gateway/src/containers/history/TX_Transfers.js
@@ -56,7 +56,7 @@ function TX_Transfers({ searchHistory, transactions, chainLink }) {
         oriChain={chain}
         oriHash={i.hash}
         amountTx={amountTx}
-        tx_ref={i.reference}
+        tx_ref={!!i.reference ? i.reference : null}
         eventType={i.event_type}
         toChain={i.destination_chain}
       />
diff --git a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js b/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js
index 3703cc26d1..cf6b1f8130 100644
--- a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js
+++ b/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js
@@ -332,8 +332,9 @@ class FarmDepositModal extends React.Component {
             <WrapperActionsModal>
               <Button
                 onClick={() => { this.handleClose() }}
-                color="neutral"
-                size="large"
+                variant='outlined'
+                color='primary'
+                size='large'
               >
                 Cancel
               </Button>
@@ -361,8 +362,9 @@ class FarmDepositModal extends React.Component {
             <WrapperActionsModal>
               <Button
                 onClick={() => { this.handleClose() }}
-                color="neutral"
-                size="large"
+                variant='outlined'
+                color='primary'
+                size='large'
               >
                 Cancel
               </Button>