diff --git a/packages/boba/gateway/src/components/icons/BobaLogo.js b/packages/boba/gateway/src/components/icons/BobaLogo.js
index be9b73a830..77eab2cb6c 100644
--- a/packages/boba/gateway/src/components/icons/BobaLogo.js
+++ b/packages/boba/gateway/src/components/icons/BobaLogo.js
@@ -1,11 +1,9 @@
 import * as React from "react"
 import { useTheme } from '@mui/material';
+import { ReactComponent as LogoBoba2 } from 'images/boba2/logo-boba2.svg';
+import {ReactComponent as LogoBoba2dark} from 'images/boba2/logo-boba2-dark.svg';
 
-import {ReactComponent as LogoBoba2} from '../../images/boba2/logo-boba2.svg';
-import {ReactComponent as LogoBoba2dark} from '../../images/boba2/logo-boba2-dark.svg';
-
-
-function BobaLogo({ dark = false, selected = true }) {
+function BobaLogo() {
 
   const theme = useTheme();
 
diff --git a/packages/boba/gateway/src/components/select/Select.js b/packages/boba/gateway/src/components/select/Select.js
index b67ab16e43..0d2c5852bb 100644
--- a/packages/boba/gateway/src/components/select/Select.js
+++ b/packages/boba/gateway/src/components/select/Select.js
@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import React from 'react';
-import {Select as MuiSelect, MenuItem, useTheme, Typography, Box} from '@mui/material';
+import ReactSelect from 'react-select';
+import { Select as MuiSelect, MenuItem, useTheme, Typography, Box } from '@mui/material';
 import * as styles from './Select.module.scss';
 import * as S from './Select.style';
+import { ArrowDropDownOutlined } from '@mui/icons-material';
 import {
   Option,
   MultiValue,
@@ -24,17 +26,17 @@ import {
 } from './Custom.select';
 
 function Select({
-                  label,
-                  value,
-                  options,
-                  onSelect,
-                  loading,
-                  error = '',
-                  className,
-                  newSelect = false,
-                  isMulti,
-                  isLoading = false,
-                }) {
+  label,
+  value,
+  options,
+  onSelect,
+  loading,
+  error = '',
+  className,
+  newSelect = false,
+  isMulti,
+  isLoading = false,
+}) {
   const theme = useTheme();
   const selected = options.find(i => i.value === value);
 
@@ -61,16 +63,15 @@ function Select({
   }
 
   const renderLoading = (
-    <S.SelectedContainer className={[styles.selected, styles.loading].join(' ')}>
+    <S.SelectedContainer className={[ styles.selected, styles.loading ].join(' ')}>
       Loading...
     </S.SelectedContainer>
   );
 
-  console.log("VALUE", value);
-
   const renderSelect = (
     <>
       <MuiSelect
+        IconComponent={() => <ArrowDropDownOutlined />}
         className={styles.select}
         value={value}
         onChange={onSelect}
@@ -80,8 +81,7 @@ function Select({
             '&& .Mui-selected': {
               backgroundColor: 'transparent !important',
               color: theme.palette.secondary.main,
-            },
-          }
+            },}
         }}
       >
         {options.map((i, index) => (
@@ -94,7 +94,7 @@ function Select({
                 <Typography variant="body2">
                   {i.title}
                 </Typography>
-                <Typography variant="body3" sx={{opacity: 0.65, color: 'inherit'}}>
+                <Typography variant="body3" sx={{ opacity: 0.65, color: 'inherit' }}>
                   {i.description}
                 </Typography>
               </div>
@@ -108,10 +108,9 @@ function Select({
           <div className={styles.subTitle}>{selected ? selected.subTitle : ''}</div>
         </div>
         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8.71038 12.4393C9.29616 13.0251 10.2459 13.0251 10.8317 12.4393L13.9814 9.28962C14.9264 8.34468 14.2571 6.72896 12.9208 6.72896L6.62132 6.72896C5.28496 6.72896 4.61571 8.34467 5.56066 9.28962L8.71038 12.4393Z"
+          <path d="M8.71038 12.4393C9.29616 13.0251 10.2459 13.0251 10.8317 12.4393L13.9814 9.28962C14.9264 8.34468 14.2571 6.72896 12.9208 6.72896L6.62132 6.72896C5.28496 6.72896 4.61571 8.34467 5.56066 9.28962L8.71038 12.4393Z"
             fill={theme.palette.text.primary}
-            fillOpacity="0.45"/>
+            fillOpacity="0.45" />
         </svg>
       </S.SelectedContainer>
     </>
@@ -124,17 +123,53 @@ function Select({
       className
     ].join(' ')}>
       {label && <Box className={styles.label}>{label}</Box>}
-      <Select
-        onSelect={(e) => {
-          onSelect({
-            value: e.target.value,
-            label: e.target.value,
+      <ReactSelect
+        value={value}
+        onChange={onSelect}
+        isMulti={isMulti}
+        options={options}
+        isLoading={isLoading}
+        styles={{
+          control: (base) => ({
+            ...base,
+            background: theme.palette.background.default,
+            borderRadius: theme.palette.primary.borderRadius,
+            padding: '5px 10px',
+            width: '100%',
+            border: '1px solid rgba(255, 255, 255, 0.14)'
+          }),
+          indicatorSeparator: (base) => ({
+            ...base,
+            display: 'none',
+          }),
+          container: (base) => ({
+            ...base,
+            background: 'none'
+          }),
+          singleValue: (base) => ({
+            ...base,
+            background: 'transparent',
+            color: theme.palette.secondary.text,
+            padding: '5px'
+          }),
+          multiValue: (base) => ({
+            ...base,
+            background: theme.palette.background.secondary,
+            color: theme.palette.secondary.text,
+            marginRight: '5px',
+            paddingRight: '5px',
+          }),
+          valueContainer: (base) => ({
+            ...base,
+            background: 'none',
           })
         }}
-        value={value.value}
-        options={options.map(i => ({value: i.value, title: i.label}))}
-        isLoading={isLoading}
-        multiple={isMulti}
+        theme={theme}
+        components={{
+          Option,
+          MultiValue,
+          SingleValue
+        }}
       />
     </Box>
   }
diff --git a/packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js b/packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js
index 33b52ce663..d7c31114e0 100644
--- a/packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js
+++ b/packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js
@@ -142,7 +142,6 @@ function DAO() {
             }}
             sx={{ marginBottom: '20px' }}
             value={selectedState}
-            newSelect={true}
           ></Select>
         </S.DaoProposalHead>
         <DividerLine />
diff --git a/packages/boba/gateway/src/containers/bridge/Bridge.js b/packages/boba/gateway/src/containers/bridge/Bridge.js
index 9ce4207aa2..5040da59af 100644
--- a/packages/boba/gateway/src/containers/bridge/Bridge.js
+++ b/packages/boba/gateway/src/containers/bridge/Bridge.js
@@ -1,4 +1,4 @@
-import { Typography, useMediaQuery, useTheme } from '@mui/material'
+import { useMediaQuery, useTheme } from '@mui/material'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { selectActiveNetwork } from 'selectors/networkSelector'
@@ -21,23 +21,24 @@ function BridgeContainer() {
           isMobile && accountEnabled ?
             null
             : <S.TitleContainer>
-              <Typography variant="h1"
-              > Transfer
+              <S.BridgeTypography variant="h1">
+                <S.BobaGlassIcon />
+                Transfer
                 <br />
                 tokens between {activeNetwork} and
                 <br />
-                <Typography
+                <S.BridgeTypography
                   variant="h1"
                   component="span"
                   sx={{
                     background: '-webkit-linear-gradient(0deg, #CBFE00 15.05%, #1CD6D1 79.66%)',
                     'WebkitBackgroundClip': 'text',
-                    'WebkitTextFillColor': 'transparent'
+                    'WebkitTextFillColor': 'transparent',
                   }}
                 >
                   Boba network!
-                </Typography>
-              </Typography>
+                </S.BridgeTypography >
+              </S.BridgeTypography>
             </S.TitleContainer>
         }
         <S.Content>
diff --git a/packages/boba/gateway/src/containers/bridge/Bridge.styles.js b/packages/boba/gateway/src/containers/bridge/Bridge.styles.js
index 6d7a169398..ba14224a12 100644
--- a/packages/boba/gateway/src/containers/bridge/Bridge.styles.js
+++ b/packages/boba/gateway/src/containers/bridge/Bridge.styles.js
@@ -1,9 +1,10 @@
 import styled from '@emotion/styled'
-import { Box } from "@mui/material"
+import {Box, Typography} from "@mui/material"
 import bobaGlassIcon from 'images/boba2/boba_glass.svg'
 import bobaBridgeBg from 'images/boba2/bridge_bg.svg'
 export const PageContainer = styled(Box)(({ theme }) => ({
   margin: '20px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
@@ -24,14 +25,16 @@ export const PageContainer = styled(Box)(({ theme }) => ({
   '::after': {
     content: '" "',
     position: 'absolute',
-    left: '-5%',
-    bottom: '10%',
-    width: '130%',
+    width: '100%',
     height: '100%',
     background: `url(${bobaBridgeBg}) no-repeat`,
-    backgroundSize: '85%',
+    backgroundSize: '100%',
+    backgroundPosition: 'center',
+    left: '0',
+    bottom: '0',
     zIndex: '-1',
-  }
+  },
+
 }));
 
 
@@ -39,7 +42,7 @@ export const ContentWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   width: '100%',
-  alignItems: 'flex-start',
+  alignItems: 'flex-center',
   gap: '20px',
   [ theme.breakpoints.down('sm') ]: {
     flexDirection: 'column',
@@ -49,14 +52,14 @@ export const ContentWrapper = styled(Box)(({ theme }) => ({
 }))
 
 export const TitleContainer = styled(Box)(({ theme }) => ({
-  width: '40%',
+  width: '50%',
   textTransform: 'uppercase',
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   padding: '70px 50px',
   position: 'relative',
-  minHeight: '500px',
+  minHeight: 'auto',
   [ theme.breakpoints.down('sm') ]: {
     padding: '0',
     width: '100%',
@@ -68,18 +71,45 @@ export const TitleContainer = styled(Box)(({ theme }) => ({
       display: 'none'
     }
   },
-  '::before': {
-    content: '" "',
-    position: 'absolute',
-    top: '5%',
-    right: '25%',
-    width: '80px',
-    height: '80px',
-    background: `url(${bobaGlassIcon}) no-repeat`,
-    backgroundSize: '100% 90%',
+  // '::before': {
+  //   content: '" "',
+  //   position: 'absolute',
+  //   top: '20%',
+  //   right: '30%',
+  //   width: '80px',
+  //   height: '80px',
+  //   background: `url(${bobaGlassIcon}) no-repeat`,
+  //   backgroundSize: '100% 90%',
+  // },
+}))
+
+export const BobaGlassIcon = styled(Box)(({ theme }) => ({
+  content: '" "',
+  position: 'absolute',
+  top: '15%',
+  right: '35%',
+  width: '80px',
+  height: '80px',
+  background: `url(${bobaGlassIcon}) no-repeat`,
+  backgroundSize: '100% 90%',
+  [theme.breakpoints.down(1700)]: {
+    top: '20%',
+    right: '40%',
+    width: '70px',
+    height: '70px',
+  },
+  [theme.breakpoints.down(1400)]: {
+    top: '20%',
+    right: '20%',
+    width: '70px',
+    height: '70px',
+  },
+  [theme.breakpoints.down(900)]: {
+    display: 'none',
   },
 }))
 
+
 export const Content = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -94,3 +124,13 @@ export const Content = styled(Box)(({ theme }) => ({
     width: '100%'
   }
 }))
+
+export const BridgeTypography = styled(Typography)(({ theme }) => ({
+  fontSize: '57px !important',
+  [theme.breakpoints.down(1700)]: {
+    fontSize: '40px !important',
+  },
+  [theme.breakpoints.down(1000)]: {
+    fontSize: '30px !important',
+  },
+}))
diff --git a/packages/boba/gateway/src/containers/dao/OldDao.styles.js b/packages/boba/gateway/src/containers/dao/OldDao.styles.js
index d70538bca5..70c789d0bf 100644
--- a/packages/boba/gateway/src/containers/dao/OldDao.styles.js
+++ b/packages/boba/gateway/src/containers/dao/OldDao.styles.js
@@ -3,6 +3,7 @@ import { Box } from "@mui/material"
 
 export const DaoPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
diff --git a/packages/boba/gateway/src/containers/earn/Earn.styles.js b/packages/boba/gateway/src/containers/earn/Earn.styles.js
index 11e257d422..05feb56856 100644
--- a/packages/boba/gateway/src/containers/earn/Earn.styles.js
+++ b/packages/boba/gateway/src/containers/earn/Earn.styles.js
@@ -3,6 +3,7 @@ import { Box, Typography, Grid } from "@mui/material"
 
 export const EarnPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
diff --git a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
index 1f5c62300c..9be0d9caa2 100644
--- a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
+++ b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js
@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles'
 
 export const EcoSystemPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
@@ -68,10 +69,10 @@ export const ProjectContent = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   padding: '16px',
   paddingTop: '50px',
-  gap: 1,
+  gap: '16px',
   marginTop: '50px',
   width: '100%',
-  height: '140px',
+  height: '165px',
   [theme.breakpoints.down('md')]: {
     minHeight: '140px',
     height: 'auto',
@@ -113,11 +114,13 @@ export const ProjectDescription = styled(Typography)(({ theme }) => ({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   opacity: 0.85,
-  fontSize: '0.7em',
+  fontSize: '13px',
   fontWeight: 400,
   display: '-webkit-box',
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical',
+  lineHeight: '20px',
+  textAlign: 'center',
 }))
 
 export const TileFooter = 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 03b2b0a6dc..24136d5911 100644
--- a/packages/boba/gateway/src/containers/ecosystem/Projects.js
+++ b/packages/boba/gateway/src/containers/ecosystem/Projects.js
@@ -49,7 +49,7 @@ const Projects = ({projectType}) => {
           </S.ImageContainer>
           <S.ProjectContent
           >
-            <Typography alignSelf="center" variant="h4">{project.title}</Typography>
+            <Typography alignSelf="center" variant="h4" sx={{ fontWeight: 'bold', fontSize: '18px !important' }}>{project.title}</Typography>
             {isMobile ?
               <ShowMoreShowLess
                 sx={{
diff --git a/packages/boba/gateway/src/containers/history/History.styles.js b/packages/boba/gateway/src/containers/history/History.styles.js
index 5427c3e31f..730f2567cd 100644
--- a/packages/boba/gateway/src/containers/history/History.styles.js
+++ b/packages/boba/gateway/src/containers/history/History.styles.js
@@ -9,6 +9,7 @@ export const HistoryContainer = styled.div`
 
 export const HistoryPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
diff --git a/packages/boba/gateway/src/containers/home/Home.js b/packages/boba/gateway/src/containers/home/Home.js
index 5762738e3b..03b8035dfa 100644
--- a/packages/boba/gateway/src/containers/home/Home.js
+++ b/packages/boba/gateway/src/containers/home/Home.js
@@ -325,13 +325,12 @@ function Home() {
       }
 
       {! maintenance &&
-        <Box sx={{ display: 'flex',height: '100%', flexDirection: 'column', width: '100%' }}>
+        <Box sx={{ display: 'flex', alignContent: 'space-between', flexDirection: 'column', width: '100%' }}>
           <PageHeader />
           <Container maxWidth={false} sx={{
-            height: 'calc(100% - 150px)',
-            minHeight: '500px',
-            marginLeft: 'unset',
+            minHeight: 'calc(100vh - 64px)',
             width: '100vw',
+            marginLeft: 'unset',
             marginRight: 'unset'
           }}>
             <Outlet />
diff --git a/packages/boba/gateway/src/containers/save/Save.styles.js b/packages/boba/gateway/src/containers/save/Save.styles.js
index 0666bbd441..6dcef1ac85 100644
--- a/packages/boba/gateway/src/containers/save/Save.styles.js
+++ b/packages/boba/gateway/src/containers/save/Save.styles.js
@@ -4,6 +4,7 @@ import stakeBg from 'images/boba2/stake-balance-bg.png'
 
 export const StakePageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
diff --git a/packages/boba/gateway/src/containers/wallet/wallet.styles.js b/packages/boba/gateway/src/containers/wallet/wallet.styles.js
index 4ddda72f5d..cf12307f30 100644
--- a/packages/boba/gateway/src/containers/wallet/wallet.styles.js
+++ b/packages/boba/gateway/src/containers/wallet/wallet.styles.js
@@ -2,6 +2,7 @@ import styled from '@emotion/styled'
 import { Box } from '@mui/material'
 
 export const PageContainer = styled(Box)(({ theme }) => ({
+  marginBottom: theme.palette.spacing.toFooter,
   margin: '0px auto',
   display: 'flex',
   flexDirection: 'column',
diff --git a/packages/boba/gateway/src/images/boba2/icons/calender.svg b/packages/boba/gateway/src/images/boba2/icons/calender.svg
deleted file mode 100644
index 3bb5d80b50..0000000000
--- a/packages/boba/gateway/src/images/boba2/icons/calender.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.67472 0.685547C5.93832 0.685547 5.34139 1.28288 5.34139 2.01888C2.39592 2.01888 0.00805664 4.40688 0.00805664 7.35221V20.6855C0.00805664 23.6309 2.39592 26.0189 5.34139 26.0189H18.6747C21.6201 26.0189 24.0081 23.6309 24.0081 20.6855V7.35221C24.0081 4.40688 21.6201 2.01888 18.6747 2.01888C18.6747 1.28288 18.0774 0.685547 17.3414 0.685547C16.6054 0.685547 16.0081 1.28288 16.0081 2.01888H8.00806C8.00806 1.28288 7.41112 0.685547 6.67472 0.685547ZM5.34139 4.68555C5.34139 5.42155 5.93832 6.01888 6.67472 6.01888C7.41112 6.01888 8.00806 5.42155 8.00806 4.68555H16.0081C16.0081 5.42155 16.6054 6.01888 17.3414 6.01888C18.0774 6.01888 18.6747 5.42155 18.6747 4.68555C20.1481 4.68555 21.3414 5.87888 21.3414 7.35221V20.6855C21.3414 22.1589 20.1481 23.3522 18.6747 23.3522H5.34139C3.86859 23.3522 2.67472 22.1589 2.67472 20.6855V7.35221C2.67472 5.87888 3.86859 4.68555 5.34139 4.68555ZM13.3414 10.0189C12.6054 10.0189 12.0081 10.6162 12.0081 11.3522C12.0081 12.0882 12.6054 12.6855 13.3414 12.6855H17.3414C18.0774 12.6855 18.6747 12.0882 18.6747 11.3522C18.6747 10.6162 18.0774 10.0189 17.3414 10.0189H13.3414ZM6.67472 15.3522C5.93832 15.3522 5.34139 15.9495 5.34139 16.6855C5.34139 17.4215 5.93832 18.0189 6.67472 18.0189H10.6747C11.4107 18.0189 12.0081 17.4215 12.0081 16.6855C12.0081 15.9495 11.4107 15.3522 10.6747 15.3522H6.67472Z" fill="white" fill-opacity="0.45"/>
-</svg>
diff --git a/packages/boba/gateway/src/images/boba2/logo-boba2-dark.svg b/packages/boba/gateway/src/images/boba2/logo-boba2-dark.svg
new file mode 100644
index 0000000000..20cb84035e
--- /dev/null
+++ b/packages/boba/gateway/src/images/boba2/logo-boba2-dark.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1835 704" style="enable-background:new 0 0 1835 704;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M671.5,695.7c-113.5,0-205.9-92.4-205.9-205.9S558,284,671.5,284s205.9,92.4,205.9,205.9S785,695.7,671.5,695.7z
+			 M671.5,330.8c-87.7,0-159,71.3-159,159c0,87.7,71.3,159,159,159c87.7,0,159-71.3,159-159C830.5,402.2,759.2,330.8,671.5,330.8z"
+			/>
+		<g>
+			<g>
+				<g>
+					<g>
+						<path d="M98.9,482.1c-12.8,0-23.7-9.2-25.8-21.8L0,30.6c-1.2-6.9,0.4-13.9,4.5-19.6c4.1-5.7,10.1-9.5,17-10.7
+							C35.7-2,49.3,7.6,51.7,21.8l73.1,429.6c1.2,6.9-0.4,13.9-4.5,19.6c-4.1,5.7-10.1,9.5-17,10.7
+							C101.9,482,100.4,482.1,98.9,482.1z"/>
+					</g>
+				</g>
+			</g>
+			<path d="M221.4,284c-41.8,0-80.6,12.5-113.1,34l8.8,52c27.9-24.3,64.4-39.1,104.3-39.1c87.7,0,159,71.3,159,159
+				c0,87.7-71.3,159-159,159c-87.7,0-159-71.3-159-159c0-11.7,1.3-23.1,3.7-34L52,373c-23,33.2-36.5,73.5-36.5,116.8
+				c0,113.5,92.4,205.9,205.9,205.9s205.9-92.4,205.9-205.9S334.9,284,221.4,284z"/>
+			<g>
+				<g>
+					<circle cx="210.2" cy="581.9" r="28"/>
+				</g>
+				<g>
+					<circle cx="297.7" cy="549.3" r="28"/>
+				</g>
+				<g>
+					<circle cx="228.9" cy="489.2" r="28"/>
+				</g>
+				<g>
+					<circle cx="141.8" cy="517.8" r="28"/>
+				</g>
+				<g>
+					<circle cx="315.7" cy="460.5" r="28"/>
+				</g>
+				<g>
+					<circle cx="247.6" cy="396.4" r="28"/>
+				</g>
+				<g>
+					<circle cx="159.7" cy="429" r="28"/>
+				</g>
+			</g>
+		</g>
+		<g>
+			<g>
+				<g>
+					<g>
+						<path d="M999.5,482.1c-12.8,0-23.7-9.2-25.8-21.8L900.6,30.6c-1.2-6.9,0.4-13.9,4.5-19.6c4.1-5.7,10.1-9.5,17-10.7
+							c14.3-2.4,27.8,7.2,30.3,21.5l73.1,429.6c1.2,6.9-0.4,13.9-4.5,19.6c-4.1,5.7-10.1,9.5-17,10.7
+							C1002.5,482,1001,482.1,999.5,482.1z"/>
+					</g>
+				</g>
+			</g>
+			<path d="M1122,284c-41.8,0-80.6,12.5-113.1,34l8.8,52c27.9-24.3,64.4-39.1,104.3-39.1c87.7,0,159,71.3,159,159
+				c0,87.7-71.3,159-159,159c-87.7,0-159-71.3-159-159c0-11.7,1.3-23.1,3.7-34L952.6,373c-23,33.2-36.5,73.5-36.5,116.8
+				c0,113.5,92.4,205.9,205.9,205.9c113.5,0,205.9-92.4,205.9-205.9S1235.5,284,1122,284z"/>
+			<g>
+				<g>
+					<circle cx="1110.7" cy="581.9" r="28"/>
+				</g>
+				<g>
+					<circle cx="1198.3" cy="549.3" r="28"/>
+				</g>
+				<g>
+					<circle cx="1129.5" cy="489.2" r="28"/>
+				</g>
+				<g>
+					<circle cx="1042.4" cy="517.8" r="28"/>
+				</g>
+				<g>
+					<circle cx="1216.2" cy="460.5" r="28"/>
+				</g>
+				<g>
+					<circle cx="1148.2" cy="396.4" r="28"/>
+				</g>
+				<g>
+					<circle cx="1060.3" cy="429" r="28"/>
+				</g>
+			</g>
+		</g>
+		<g>
+			<g>
+				<g>
+					<g>
+						<path d="M1694.6,497.1c12.8,0,23.7,9.2,25.8,21.8l26.2,154.4c1.2,6.9-0.4,13.9-4.5,19.6c-4.1,5.7-10.1,9.5-17,10.7
+							c-14.3,2.4-27.8-7.2-30.3-21.5l-26.2-154.4c-1.2-6.9,0.4-13.9,4.5-19.6c4.1-5.7,10.1-9.5,17-10.7
+							C1691.6,497.2,1693.1,497.1,1694.6,497.1z"/>
+					</g>
+				</g>
+			</g>
+			<path d="M1572.1,695.3c41.8,0,80.6-12.5,113.1-34l-8.8-52c-27.9,24.3-64.4,39.1-104.3,39.1c-87.7,0-159-71.3-159-159
+				c0-87.7,71.3-159,159-159c87.7,0,159,71.3,159,159c0,11.7-1.3,23.1-3.7,34l14.1,82.8c23-33.2,36.5-73.5,36.5-116.8
+				c0-113.5-92.4-205.9-205.9-205.9c-113.5,0-205.9,92.4-205.9,205.9S1458.6,695.3,1572.1,695.3z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<path d="M1778.3,123.5c11.9-14.4,19.8-28.8,19.8-44c0-26.3-21.4-42.4-47.7-42.4c-24.7,0-44.9,15.6-48.6,42.4l-35.8-8.6
+		c6.6-43.6,42.8-70.8,84.4-70.8c46.9,0,84.4,32.1,84.4,79.4c0,26.3-11.5,49.8-29.2,69.5c-35,40.3-35.4,42-72.8,86H1835v37h-165.8
+		v-16.5L1778.3,123.5z"/>
+</g>
+</svg>
diff --git a/packages/boba/gateway/src/layout/index.js b/packages/boba/gateway/src/layout/index.js
index 48fdab39d4..0bcbe613de 100644
--- a/packages/boba/gateway/src/layout/index.js
+++ b/packages/boba/gateway/src/layout/index.js
@@ -92,6 +92,9 @@ function App() {
         main: '#fff',
         contrastText: buttonColor,
       },
+      spacing: {
+        toFooter: '80px',
+      },
     },
     typography: {
       fontFamily: ['MrEavesXL', 'Roboto'].join(','),