diff --git a/package.json b/package.json
index 151981d6..f69a9071 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bobanetwork/gateway",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "private": true,
   "scripts": {
     "build:prod": "GENERATE_SOURCEMAP=false REACT_APP_ENV=prod react-app-rewired build",
diff --git a/src/components/cardList/index.tsx b/src/components/cardList/index.tsx
new file mode 100644
index 00000000..5975c574
--- /dev/null
+++ b/src/components/cardList/index.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { selectTheme } from 'selectors'
+import { getEcoImage } from 'util/gitdata'
+import {
+  PlaceholderImage,
+  ExternalIcon,
+  Card,
+  Title,
+  Description,
+  CardList,
+  OutlineButton,
+} from './styles'
+import Tooltip from 'components/tooltip/Tooltip'
+import externalSvg from 'assets/external.svg'
+
+export const CardItem = ({ name, description, icon, link }) => {
+  const theme = useSelector(selectTheme)
+  const iconImage = getEcoImage(theme === 'light' ? icon.dark : icon.light)
+  return (
+    <Card>
+      <PlaceholderImage>
+        <img src={iconImage} alt={name} width="100%" />
+      </PlaceholderImage>
+      <Title href={link} target="_blank" rel="noopener noreferrer">
+        {name} <ExternalIcon src={externalSvg} />
+      </Title>
+      <Tooltip title={description}>
+        <Description>{description}</Description>
+      </Tooltip>
+    </Card>
+  )
+}
+
+export const TradeCardList = ({ items }: any) => {
+  return (
+    <CardList>
+      {items.map(
+        (item: any, index) =>
+          item.visible && (
+            <CardItem
+              key={`${item.name}-${item.pairName}` || index}
+              {...item}
+              description={item.pairName}
+            />
+          )
+      )}
+    </CardList>
+  )
+}
+
+export const EcosystemCardList = ({ items, types }) => {
+  const [selectedType, setType] = useState('all')
+
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '10px' }}>
+        <OutlineButton
+          className={`${'all' !== selectedType ? '' : 'active'}`}
+          onClick={() => setType('all')}
+        >
+          All
+        </OutlineButton>
+        {types.filter(Boolean).map((type) => (
+          <OutlineButton
+            className={`${type.toLowerCase() !== selectedType ? '' : 'active'}`}
+            onClick={() => setType(type.toLowerCase())}
+            key={type}
+          >
+            {type}
+          </OutlineButton>
+        ))}
+      </div>
+
+      <CardList>
+        {items
+          .filter((c: any) =>
+            selectedType === 'all'
+              ? true
+              : c.type.toLowerCase() === selectedType
+          )
+          .map(
+            (item: any, index) =>
+              item.visible && <CardItem key={item.name || index} {...item} />
+          )}
+      </CardList>
+    </>
+  )
+}
diff --git a/src/containers/Trade/styles.ts b/src/components/cardList/styles.ts
similarity index 88%
rename from src/containers/Trade/styles.ts
rename to src/components/cardList/styles.ts
index 314d6b6d..c82320b0 100644
--- a/src/containers/Trade/styles.ts
+++ b/src/components/cardList/styles.ts
@@ -1,32 +1,15 @@
 import styled, { css } from 'styled-components'
 import { mobile, sdesktop, tablet } from 'themes/screens'
 
-export const PageContainer = styled.div`
-  margin: 0px auto 20px auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 0px 50px 50px 50px;
-  width: 100%;
-  max-width: 1164px;
-  ${sdesktop(css`
-    padding: 0px 0px 50px 0px;
-  `)}
-  ${tablet(css`
-    padding: 0px 50px;
-  `)}
-  ${mobile(css`
-    padding: 0px 25px;
-    margin: auto;
-  `)}
-`
-
 export const CardList = styled.div`
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(4, 1fr);
-  max-height: calc(100vh - 320px);
+  height: calc(100vh - 320px);
+  min-height: 650px;
+  max-height: 850px;
   overflow-y: scroll;
+  padding-bottom: 5px;
 
   ${sdesktop`
     grid-template-columns: repeat(4, 1fr);
@@ -39,7 +22,12 @@ export const CardList = styled.div`
 
   ${mobile`
     grid-template-columns: repeat(1, 1fr);
+    max-height: 100%;
   `}
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `
 
 export const Card = styled.div`
@@ -72,8 +60,9 @@ export const Card = styled.div`
   ${mobile`
     padding: 16px;
     gap: 8px;
-    max-width: 350px;
-  min-width: 350px;
+    max-width: 280px;
+    min-width: 280px;
+    margin:auto;
   `}
 `
 
@@ -101,6 +90,10 @@ export const Title = styled.a`
     text-decoration: underline;
   }
 
+  ${tablet`
+   font-size: 14px;
+  `}
+
   ${(props) => css`
     color: ${props.theme.name === 'light'
       ? props.theme.colors.gray[800]
diff --git a/src/components/layout/Footer/FooterLinks/style.ts b/src/components/layout/Footer/FooterLinks/style.ts
index d2a17d52..3db0e19d 100644
--- a/src/components/layout/Footer/FooterLinks/style.ts
+++ b/src/components/layout/Footer/FooterLinks/style.ts
@@ -1,11 +1,18 @@
 import { NavLink } from 'react-router-dom'
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const StyledLinks = styled.div`
   display: flex;
   align-items: center;
   gap: 24px;
+
+  ${mobile(css`
+    margin: 10px auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 80%;
+  `)}
 `
 export const ScanContainer = styled.div`
   margin: 10px 0px;
@@ -19,6 +26,12 @@ export const LinkContainer = styled.div`
   margin: 0;
   gap: 32px;
 
+  ${tablet(css`
+    flex-direction: row;
+    align-items: center;
+    margin: 10px auto;
+  `)}
+
   ${mobile(css`
     width: 100%;
     flex-direction: column;
diff --git a/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap b/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap
index 7fbdb241..7f998f8c 100644
--- a/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap
+++ b/src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Footer GasWatcher should match snapshot when gas has value 1`] = `
 <DocumentFragment>
   <div
-    class="sc-eDPEul kzverb"
+    class="sc-eDPEul lanfuC"
     id="gasDetails"
   >
     <div
diff --git a/src/components/layout/Footer/GasWatcher/style.ts b/src/components/layout/Footer/GasWatcher/style.ts
index c0d1e373..4eeb0dba 100644
--- a/src/components/layout/Footer/GasWatcher/style.ts
+++ b/src/components/layout/Footer/GasWatcher/style.ts
@@ -1,14 +1,19 @@
 import { Typography } from 'components/global'
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const GasListContainer = styled.div`
   self-align: flex-end;
   display: flex;
   gap: 24px;
   justify-content: flex-end;
+  ${tablet(css`
+    margin: 10px auto;
+  `)}
   ${mobile(css`
-    display: none;
+    margin: 10px auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
   `)}
 `
 
diff --git a/src/components/layout/Footer/style.ts b/src/components/layout/Footer/style.ts
index d427e719..89c2547e 100644
--- a/src/components/layout/Footer/style.ts
+++ b/src/components/layout/Footer/style.ts
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const StyledFooter = styled.div`
   display: flex;
@@ -21,4 +21,10 @@ export const Row = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  ${tablet(css`
+    flex-direction: column-reverse;
+  `)}
+  ${mobile(css`
+    flex-direction: column-reverse;
+  `)}
 `
diff --git a/src/containers/Ecosystem/index.tsx b/src/containers/Ecosystem/index.tsx
index 94ae09ec..24734fe2 100644
--- a/src/containers/Ecosystem/index.tsx
+++ b/src/containers/Ecosystem/index.tsx
@@ -1,86 +1,24 @@
-import Tooltip from 'components/tooltip/Tooltip'
+import { EcosystemCardList } from 'components/cardList'
+import { PageLayoutStyle } from 'containers/styles'
 import { useFetchItems } from 'hooks/UseFetchItems'
-import React, { useState } from 'react'
-import { useSelector } from 'react-redux'
-import { selectTheme } from 'selectors'
+import React from 'react'
 import { ECOSYSTEM_LIST } from 'util/constant'
-import { getEcoImage } from 'util/gitdata'
-import {
-  Card,
-  CardList,
-  Description,
-  ExternalIcon,
-  OutlineButton,
-  PageContainer,
-  PlaceholderImage,
-  Title,
-} from './styles'
-import externalSvg from 'assets/external.svg'
-
-const EcosystemCard = ({ name, description, icon, link }) => {
-  const theme = useSelector(selectTheme)
-  const iconImage = getEcoImage(theme === 'light' ? icon.dark : icon.light)
-  return (
-    <Card>
-      <PlaceholderImage>
-        <img src={iconImage} alt={name} width="100%" />
-      </PlaceholderImage>
-      <Title href={link} target="_blank" rel="noopener noreferrer">
-        {name} <ExternalIcon src={externalSvg} />
-      </Title>
-      <Tooltip title={description}>
-        <Description>{description}</Description>
-      </Tooltip>
-    </Card>
-  )
-}
 
 const Ecosystem = () => {
   const { items, types, loading } = useFetchItems(ECOSYSTEM_LIST)
-  const [selectedType, setType] = useState('all')
 
   if (loading) {
     return (
-      <PageContainer>
+      <PageLayoutStyle>
         <div>Please wait a moment...</div>
-      </PageContainer>
+      </PageLayoutStyle>
     )
   }
 
   return (
-    <PageContainer>
-      <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '10px' }}>
-        <OutlineButton
-          className={`${'all' !== selectedType ? '' : 'active'}`}
-          onClick={() => setType('all')}
-        >
-          All
-        </OutlineButton>
-        {types.filter(Boolean).map((type) => (
-          <OutlineButton
-            className={`${type.toLowerCase() !== selectedType ? '' : 'active'}`}
-            onClick={() => setType(type.toLowerCase())}
-            key={type}
-          >
-            {type}
-          </OutlineButton>
-        ))}
-      </div>
-      <CardList>
-        {items
-          .filter((c: any) =>
-            selectedType === 'all'
-              ? true
-              : c.type.toLowerCase() === selectedType
-          )
-          .map(
-            (item: any, index) =>
-              item.visible && (
-                <EcosystemCard key={item.name || index} {...item} />
-              )
-          )}
-      </CardList>
-    </PageContainer>
+    <PageLayoutStyle>
+      <EcosystemCardList items={items} types={types} />
+    </PageLayoutStyle>
   )
 }
 
diff --git a/src/containers/Ecosystem/styles.ts b/src/containers/Ecosystem/styles.ts
deleted file mode 100644
index a8429f88..00000000
--- a/src/containers/Ecosystem/styles.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import styled, { css } from 'styled-components'
-import { mobile, sdesktop, tablet } from 'themes/screens'
-
-export const PageContainer = styled.div`
-  margin: 0px auto 20px auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 0px 50px 50px 50px;
-  width: 100%;
-  max-width: 1164px;
-  ${sdesktop(css`
-    padding: 0px 0px 50px 0px;
-  `)}
-  ${tablet(css`
-    padding: 0px 50px;
-  `)}
-  ${mobile(css`
-    padding: 0px 25px;
-    margin: auto;
-  `)}
-`
-
-export const CardList = styled.div`
-  display: grid;
-  gap: 15px;
-  grid-template-columns: repeat(4, 1fr);
-  max-height: calc(100vh - 320px);
-  overflow-y: scroll;
-
-  ${sdesktop`
-    grid-template-columns: repeat(4, 1fr);
-  `}
-
-  ${tablet`
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-  `}
-
-  ${mobile`
-    grid-template-columns: repeat(1, 1fr);
-  `}
-`
-
-export const Card = styled.div`
-  background: white;
-  border-radius: 12px;
-  border: 1px solid #dee0d8;
-  background: rgba(253, 255, 248, 0.9);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(7.5px);
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  display: flex;
-  padding: 24px;
-  gap: 10px;
-  width: 100%;
-  max-width: 250px;
-  min-width: 250px;
-  border: 1px solid
-    ${({ theme: { colors, name } }) =>
-      name === 'light' ? colors.gray[400] : colors.gray[300]};
-  background: ${({ theme }) => theme.colors.box.background};
-  ${tablet`
-    padding: 20px;
-    gap: 8px;
-    max-width: 200px;
-    min-width: 200px;
-  `}
-
-  ${mobile`
-    padding: 16px;
-    gap: 8px;
-    max-width: 320px;
-    min-width: 320px;
-  `}
-`
-
-export const ExternalIcon = styled.img`
-  width: 16px;
-`
-
-export const Title = styled.a`
-  margin: 0;
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-  font-family: Montserrat;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 19.5px;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  white-space: nowrap;
-  &:hover {
-    text-decoration: underline;
-  }
-
-  ${(props) => css`
-    color: ${props.theme.name === 'light'
-      ? props.theme.colors.gray[800]
-      : '#fff'};
-  `}
-  & img {
-    ${(props) => css`
-      display: ${props.theme.name === 'light' ? 'block' : 'none'};
-    `}
-  }
-`
-
-export const IconList = styled.div`
-  display: flex;
-  gap: 10px;
-`
-
-export const Description = styled.p`
-  margin: 0;
-  font-family: Inter;
-  font-size: 12px;
-  font-weight: 400;
-  text-align: left;
-  max-height: 6em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  white-space: normal;
-  ${(props) =>
-    props.theme.name === 'light' &&
-    css`
-      color: ${props.theme.colors.gray[800]};
-    `}
-  ${(props) =>
-    props.theme.name === 'dark' &&
-    css`
-      color: #fff;
-    `}
-`
-
-export const PlaceholderImage = styled.div`
-  width: 50px;
-  height: 50px;
-  max-width: 50px;
-  max-height: 50px;
-  border-radius: 50%;
-`
-
-export const FilterContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 10px;
-  ${mobile`
-    flex-wrap: no-wrap; 
-    max-width: 100%;
-    overflow-x: scroll;
-  `}
-`
-
-export const OutlineButton = styled.button`
-  background: transparent;
-  border: 1px solid #007bff;
-  color: #007bff;
-  border-radius: 20px;
-  padding: 5px 10px;
-  margin: 5px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-
-  &:focus {
-    outline: none;
-  }
-  ${mobile`
-    white-space: nowrap;
-  `}
-
-  border: 2px solid transparent;
-  color: ${(props) => props.theme.colors.gray[100]};
-  ${(props) =>
-    props.theme.name === 'light' &&
-    css`
-      color: ${props.theme.colors.gray[600]};
-      &:hover {
-        color: ${props.theme.colors.gray[800]};
-        background: ${props.theme.colors.gray[50]};
-        border-color: ${props.theme.colors.gray[50]};
-      }
-      &.active {
-        background: ${props.theme.colors.gray[50]};
-        border-color: ${props.theme.colors.gray[50]};
-        color: ${props.theme.colors.gray[800]};
-      }
-    `}
-  ${(props) =>
-    props.theme.name === 'dark' &&
-    css`
-      border: 2px solid ${props.theme.colors.gray[200]};
-      &:hover {
-        color: ${props.theme.colors.green[300]};
-        border-color: ${props.theme.colors.green[300]};
-      }
-      &.active {
-        border-color: ${props.theme.colors.green[300]};
-        color: ${props.theme.colors.green[300]};
-      }
-    `}
-`
diff --git a/src/containers/Trade/index.tsx b/src/containers/Trade/index.tsx
index 4cc2bc24..c7a20c07 100644
--- a/src/containers/Trade/index.tsx
+++ b/src/containers/Trade/index.tsx
@@ -1,64 +1,23 @@
-import Tooltip from 'components/tooltip/Tooltip'
+import { TradeCardList } from 'components/cardList'
+import { PageLayoutStyle } from 'containers/styles'
 import { useFetchItems } from 'hooks/UseFetchItems'
 import React from 'react'
-import { useSelector } from 'react-redux'
-import { selectTheme } from 'selectors'
 import { TRADE_LIST } from 'util/constant'
-import { getEcoImage } from 'util/gitdata'
-import {
-  Card,
-  CardList,
-  Description,
-  ExternalIcon,
-  PageContainer,
-  PlaceholderImage,
-  Title,
-} from './styles'
-import externalSvg from 'assets/external.svg'
-
-const TradeCard = ({ name, description, icon, link }) => {
-  const theme = useSelector(selectTheme)
-  const iconImage = getEcoImage(theme === 'light' ? icon.dark : icon.light)
-  return (
-    <Card>
-      <PlaceholderImage>
-        <img src={iconImage} alt={name} width="100%" />
-      </PlaceholderImage>
-      <Title href={link} target="_blank" rel="noopener noreferrer">
-        {name} <ExternalIcon src={externalSvg} />
-      </Title>
-      <Tooltip title={description}>
-        <Description>{description}</Description>
-      </Tooltip>
-    </Card>
-  )
-}
 
 const Trade = () => {
   const { items, loading } = useFetchItems(TRADE_LIST)
   if (loading) {
     return (
-      <PageContainer>
+      <PageLayoutStyle>
         <div>Please wait a moment...</div>
-      </PageContainer>
+      </PageLayoutStyle>
     )
   }
 
   return (
-    <PageContainer>
-      <CardList>
-        {items.map(
-          (item: any, index) =>
-            item.visible && (
-              <TradeCard
-                key={`${item.name}-${item.pairName}` || index}
-                {...item}
-                description={item.pairName}
-              />
-            )
-        )}
-      </CardList>
-    </PageContainer>
+    <PageLayoutStyle>
+      <TradeCardList items={items} />
+    </PageLayoutStyle>
   )
 }
 
diff --git a/src/containers/home/__snapshots__/index.test.tsx.snap b/src/containers/home/__snapshots__/index.test.tsx.snap
index 2e9cd2a2..04174afe 100644
--- a/src/containers/home/__snapshots__/index.test.tsx.snap
+++ b/src/containers/home/__snapshots__/index.test.tsx.snap
@@ -176,13 +176,13 @@ exports[`Home  should match snapshot 1`] = `
       class="sc-dSCufp byogsF"
     >
       <div
-        class="sc-hIUJlX cdBCa-D"
+        class="sc-hIUJlX ibLInL"
       >
         <div
-          class="sc-hwdzOV juzHLi"
+          class="sc-hwdzOV fgEWfj"
         >
           <div
-            class="sc-iMTnTL kDMfer"
+            class="sc-iMTnTL jluwSE"
             id="footerLinks"
           >
             <a
diff --git a/src/containers/styles.ts b/src/containers/styles.ts
new file mode 100644
index 00000000..51b4b3c4
--- /dev/null
+++ b/src/containers/styles.ts
@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components'
+import { mobile, sdesktop, tablet } from 'themes/screens'
+
+export const PageLayoutStyle = styled.div`
+  margin: 0px auto 20px auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 0px 50px 50px 50px;
+  width: 100%;
+  max-width: 1164px;
+  ${sdesktop(css`
+    padding: 0px 0px 50px 0px;
+  `)}
+  ${tablet(css`
+    padding: 0px 50px;
+  `)}
+  ${mobile(css`
+    padding: 0px 25px;
+    margin: auto;
+  `)}
+`