diff --git a/docs/hackers/03-Build-With-Wallet-Tracker.mdx b/docs/hackers/03-Build-With-Wallet-Tracker.mdx
index d5168f2735..099f29a6d0 100644
--- a/docs/hackers/03-Build-With-Wallet-Tracker.mdx
+++ b/docs/hackers/03-Build-With-Wallet-Tracker.mdx
@@ -12,8 +12,13 @@ import {
   ModalSmall,
   ModalWrapper,
   ModalLarge,
+  FeaturesContainer,  // Importing new components
+  FeatureItem,
+  FeatureImage
 } from '@site/src/css/SharedStyling';
 
+
+
 # Build with Wallet Tracker
 
 ![Banner](/assets/docs/hackers/build-with-wallet-tracker/BwWT.png)
@@ -115,91 +120,130 @@ Wallet Tracker currently exists as two projects, each enhancing your experience
 
 The channel serves as your comprehensive portfolio tracker, offering a variety of features designed to keep you informed and up-to-date.
 
-<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '20px' }}>
-  <div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
-    <h4>1. Wallet Transactions Update</h4>
-    <p>Stay informed with real-time updates on your wallet transactions.</p>
-    <img src="/assets/docs/hackers/build-with-wallet-tracker/transactionUpdates.png" alt="Wallet Transactions Update" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
-  </div>
+<FeaturesContainer>
 
-{' '}
-<div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
+<FeatureItem>
+  <h4>1. Wallet Transactions Update</h4>
+  <p>Stay informed with real-time updates on your wallet transactions.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/transactionUpdates.png')
+.default
+} alt="Wallet Transactions Update"/>
+</FeatureItem>
+
+<FeatureItem>
   <h4>2. Biweekly Performance Update</h4>
-  <p>
-    Receive regular updates on your portfolio's performance every two weeks.
-  </p>
-  <img
-    src='/assets/docs/hackers/build-with-wallet-tracker/performance.png'
-    alt='Biweekly Performance Update'
-    style={{ width: '100%', height: 'auto', borderRadius: '8px' }}
-  />
-</div>
-
-{' '}
-<div style={{ flex: '1 0 45%', padding: '10px' }}>
+  <p>Receive regular updates on your portfolio's performance every two weeks.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/performance.png')
+.default
+} alt="Biweekly Performance Update"/>
+</FeatureItem>
+
+<FeatureItem>
   <h4>3. Crypto Calendar for Web3 Events</h4>
   <p>Keep track of important web3 events with our dedicated crypto calendar.</p>
-  <img
-    src='/assets/docs/hackers/build-with-wallet-tracker/calendar.png'
-    alt='Crypto Calendar'
-    style={{ width: '100%', height: 'auto', borderRadius: '8px' }}
-  />
-</div>
-
-  <div style={{ flex: '1 0 45%', padding: '10px' }}>
-    <h4>4. Push and Uniswap V2 LP Staking APR Rates</h4>
-    <p>Access the latest APR rates for Push and Uniswap V2 LP staking.</p>
-    <img src="/assets/docs/hackers/build-with-wallet-tracker/apr.png" alt="APR Rates" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
-  </div>
-</div>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/calendar.png')
+.default
+} alt="Crypto Calendar"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>4. Push and Uniswap V2 LP Staking APR Rates</h4>
+  <p>Access the latest APR rates for Push and Uniswap V2 LP staking.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/apr.png')
+.default
+} alt="APR Rates"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>5. Active Token Approvals</h4>
+  <p>Stay informed about your active token approvals to maintain control over your asset security.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/approvals.png')
+.default
+} alt="APR Rates"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>6. DAO Proposals</h4>
+  <p>Stay updated on proposals related to your held tokens to engage in governance effectively..</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/dao.png')
+.default
+} alt="DAO Proposals"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>7. Recent Crypto Hacks</h4>
+  <p>Stay informed about recent crypto hacks to protect your assets and take necessary precautions.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/hack-news.png')
+.default
+} alt="Hack News"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>8. Yield Opportunities</h4>
+  <p>Stay informed about yield opportunities for tokens you hold to maximize your earnings and optimize your investments.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/yield.png')
+.default
+} alt="Yield"/>
+</FeatureItem>
+
+</FeaturesContainer>
 
 ### Wallet Tracker Chat
 
 The chatbot integrates all the functionalities of the channel into an interactive experience. Key features include:
 
-<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '20px' }}>
-  <div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
-    <h4>1. Check User's Wallet Worth and Token Holdings</h4>
-    <p>Easily check the worth of your wallet and your token holdings. Use <code>/portfolio [wallet address] [chain]</code> to get your current token holding and asset valuation on the specified chain. Chain options include "eth", "pol", "bsc", "arb", "polzk". If not specified, you'll get the portfolio across all 5 chains.</p>
-    <img src="/assets/docs/hackers/build-with-wallet-tracker/wtc-portfolio.png" alt="Wallet Worth and Token Holdings" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
-  </div>
+<FeaturesContainer>
+
+<FeatureItem>
+  <h4>1. Check User's Wallet Worth and Token Holdings</h4>
+  <p>Easily check the worth of your wallet and your token holdings. Use `/portfolio [wallet address] [chain]` to get your current token holding and asset valuation on the specified chain.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-portfolio.png')
+.default
+} alt="Wallet Worth and Token Holdings"/>
+</FeatureItem>
 
-{' '}
-<div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
+<FeatureItem>
   <h4>2. Check Out Crypto Events</h4>
-  <p>
-    Stay updated with upcoming crypto events. Use{' '}
-    <code>/calendar [number of days]</code> to get crypto events organized by
-    your favorite tokens within the specified number of days.
-  </p>
-  <img
-    src='/assets/docs/hackers/build-with-wallet-tracker/wtc-calendar.png'
-    alt='Crypto Events'
-    style={{ width: '100%', height: 'auto', borderRadius: '8px' }}
-  />
-</div>
-
-{' '}
-<div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
+  <p>Stay updated with upcoming crypto events. Use `/calendar [number of days]` to get crypto events organized by your favorite tokens within the specified number of days.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-calendar.png')
+.default
+} alt="Crypto Events"/>
+</FeatureItem>
+
+<FeatureItem>
   <h4>3. Wallet Performance</h4>
-  <p>
-    Monitor the performance of your wallet. Use{' '}
-    <code>/performance [your wallet address] [no of days] [chain]</code> to get
-    your wallet performance across the given days.
-  </p>
-  <img
-    src='/assets/docs/hackers/build-with-wallet-tracker/wtc-performance.png'
-    alt='Wallet Performance'
-    style={{ width: '100%', height: 'auto', borderRadius: '8px' }}
-  />
-</div>
-
-  <div style={{ flex: '1 0 45%', marginBottom: '20px', padding: '10px' }}>
-    <h4>4. NFTs Portfolio</h4>
-    <p>View your NFTs portfolio. Use <code>/topnfts [your wallet address] [chain]</code> to get the top recent NFTs in your wallet.</p>
-    <img src="/assets/docs/hackers/build-with-wallet-tracker/wtc-nft.png" alt="NFTs Portfolio" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
-  </div>
-</div>
+  <p>Monitor the performance of your wallet. Use `/performance [your wallet address] [no of days] [chain]` to get your wallet performance across the given days.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-performance.png')
+.default
+} alt="Wallet Performance"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>4. NFTs Portfolio</h4>
+  <p>View your NFTs portfolio. Use `/topnfts [your wallet address] [chain]` to get the top recent NFTs in your wallet.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-nft.png')
+.default
+} alt="NFTs Portfolio"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>5. Token Approvals: View your NFTs portfolio. Use `/topnfts [your wallet address] [chain]` to get the top recent NFTs in your wallet.</h4>
+  <p>View your NFTs portfolio. /topnfts [your wallet address] [chain] : Get the top recent NFTs in your wallet.</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-approvals.png')
+.default
+} alt="Token Approvals"/>
+</FeatureItem>
+
+<FeatureItem>
+  <h4>6. Top Yields</h4>
+  <p>Yield Opportunities for tokens you Hold. Use `/topyields [your wallet address] [chain]` to get the Yield Opportunities for tokens you Hold</p>
+  <img src={ require('/assets/docs/hackers/build-with-wallet-tracker/wtc-yield.png')
+.default
+} alt="Top Yields"/>
+</FeatureItem>
+
+</FeaturesContainer>
+
 ### Additional features
 - **ENS and Unstoppable Domain Support:** Get support for Ethereum Name Service (ENS) and Unstoppable Domains.
 - **Multi-Chain Support for Wallet:** Enjoy support for multiple blockchain networks.
diff --git a/src/css/SharedStyling.js b/src/css/SharedStyling.js
index 163df7a518..920defb653 100644
--- a/src/css/SharedStyling.js
+++ b/src/css/SharedStyling.js
@@ -778,3 +778,32 @@ export const VideoContainer = styled.div`
     border: none;
   }
 `;
+
+// Features
+export const FeaturesContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+export const FeatureItem = styled.div`
+  flex: 1 0 45%; // Takes roughly half the width of the container
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 8px;
+
+  @media (max-width: 768px) {
+    flex-basis: 100%; // Full width on smaller screens
+  }
+`;
+
+export const FeatureImage = styled.img`
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+`;
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/approvals.png b/static/assets/docs/hackers/build-with-wallet-tracker/approvals.png
new file mode 100644
index 0000000000..add36fdbb7
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/approvals.png differ
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/dao.png b/static/assets/docs/hackers/build-with-wallet-tracker/dao.png
new file mode 100644
index 0000000000..f7eb2b33c6
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/dao.png differ
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/hack-news.png b/static/assets/docs/hackers/build-with-wallet-tracker/hack-news.png
new file mode 100644
index 0000000000..55f777816e
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/hack-news.png differ
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/wtc-approvals.png b/static/assets/docs/hackers/build-with-wallet-tracker/wtc-approvals.png
new file mode 100644
index 0000000000..7bc1728535
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/wtc-approvals.png differ
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/wtc-yield.png b/static/assets/docs/hackers/build-with-wallet-tracker/wtc-yield.png
new file mode 100644
index 0000000000..033ac53fa9
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/wtc-yield.png differ
diff --git a/static/assets/docs/hackers/build-with-wallet-tracker/yield.png b/static/assets/docs/hackers/build-with-wallet-tracker/yield.png
new file mode 100644
index 0000000000..1efa4a134b
Binary files /dev/null and b/static/assets/docs/hackers/build-with-wallet-tracker/yield.png differ