diff --git a/blog/2024-03-26.md b/blog/2024-03-26.md
index 4846730f..8b94a68f 100644
--- a/blog/2024-03-26.md
+++ b/blog/2024-03-26.md
@@ -42,6 +42,6 @@ Token vaults are useful in the enterprise context when working with multiple tok
 
 We just looked at 3 ways that developers can get more out of working with the ERC20 token standard. These extensions allow more control and visibility of assets that enterprise use cases may require. To get started deploying your own ERC20 smart contract on SettleMint, check out this guide on [Connecting a frontend to a token transfer application](/documentation/docs/developer-guides/connect-frontend/).
 
-Have more questions about the ERC20 tokens and extensions, hop into our [Discord community](https://discord.gg/4WPatxDJ6A)!
+Have more questions about the ERC20 tokens and extensions, please contact us at support@settlemint.com!
 
 ---
diff --git a/docs/about-settlemint/1_supported-blockchains.mdx b/docs/about-settlemint/1_supported-blockchains.mdx
index 57bb336b..1e62ac4c 100644
--- a/docs/about-settlemint/1_supported-blockchains.mdx
+++ b/docs/about-settlemint/1_supported-blockchains.mdx
@@ -4,125 +4,169 @@ When launching a blockchain development project, the selection of a blockchain p
 
 SettleMint currently supports the following protocols:
 
-import ContentCard from '@site/src/components/ContentCard';
-import styles from '@site/src/components/ContentCard.module.css';
-import Ethereum from '@site/static/img/about-settlemint/blockchain-logos/eth-logo.png';
-import Besu from '@site/static/img/about-settlemint/blockchain-logos/besu-logo.png';
-import Fabric from '@site/static/img/about-settlemint/blockchain-logos/fabric-logo.png';
-import Quorum from '@site/static/img/about-settlemint/blockchain-logos/Quorum-logo.png';
-import Avalanche from '@site/static/img/about-settlemint/blockchain-logos/avalanche-logo.png';
-import Polygon from '@site/static/img/about-settlemint/blockchain-logos/polygon-logo.webp';
-import zkevm from '@site/static/img/about-settlemint/blockchain-logos/zkevm-logo.png';
-import Arbitrum from '@site/static/img/about-settlemint/blockchain-logos/arbitrum-logo.png';
-import Optimism from '@site/static/img/about-settlemint/blockchain-logos/optimism-logo.png';
-import Hedera from '@site/static/img/about-settlemint/blockchain-logos/hedera-logo.png';
+<style>
+{`
+  .blockchain-card {
+    padding: 24px;
+    border: 1px solid #2e2e2e;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    text-decoration: none;
+  }
+
+  .blockchain-card:hover {
+    border-color: #3578e5;
+    text-decoration: none;
+  }
+
+  .blockchain-logo-wrapper {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+
+  .blockchain-logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .blockchain-title {
+    color: #3578e5;
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+
+  .blockchain-description {
+    font-size: 0.9rem;
+    color: #999;
+    margin: 0;
+    line-height: 1.5;
+  }
+`}
+</style>
 
 ## Permissioned Blockchains
 
 <div className="row">
   <div className="col">
-    <ContentCard
-      image={Besu}
-      title="Hyperledger Besu"
-      description="Ethereum client designed to be enterprise-friendly"
-      page="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/"
-    />
+    <a href="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/besu-logo.png" className="blockchain-logo" alt="Hyperledger Besu" />
+      </div>
+      <div className="blockchain-title">Hyperledger Besu</div>
+      <div className="blockchain-description">Ethereum client designed to be enterprise-friendly</div>
+    </a>
   </div>
 
   <div className="col">
-    <ContentCard
-      image={Fabric}
-      title="Hyperledger Fabric"
-      description="An enterprise-grade permissioned distributed ledger"
-      page="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/"
-    />
+    <a href="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/fabric-logo.png" className="blockchain-logo" alt="Hyperledger Fabric" />
+      </div>
+      <div className="blockchain-title">Hyperledger Fabric</div>
+      <div className="blockchain-description">An enterprise-grade permissioned distributed ledger</div>
+    </a>
   </div>
 </div>
 
 <div className="row">
   <div className="col">
-    <ContentCard
-      image={Quorum}
-      title="Quorum"
-      description="An implementation of Ethereum supporting data privacy"
-      page=""
-    />
+    <a href="/documentation/docs/blockchain-guides/quorum/quorum-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/Quorum-logo.png" className="blockchain-logo" alt="Quorum" />
+      </div>
+      <div className="blockchain-title">Quorum</div>
+      <div className="blockchain-description">An implementation of Ethereum supporting data privacy</div>
+    </a>
   </div>
 </div>
 
 ## Public Blockchains
 
 <div className="row">
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/ethereum/ethereum-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/eth-logo.png" className="blockchain-logo" alt="Ethereum" />
+      </div>
+      <div className="blockchain-title">Ethereum</div>
+      <div className="blockchain-description">Goerli, Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes</div>
+    </a>
+  </div>
 
-<div className="col">
-  <ContentCard
-    image={Ethereum}
-    title="Etheruem"
-    description="Geth. Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes"
-    page="/documentation/docs/blockchain-guides/Ethereum/ethereum-the-basics/"
-  />
-</div>
-
-<div className="col">
-  <ContentCard
-    image={Avalanche}
-    title="Avalanche"
-    description="Mainnet & Fuji testnet. Full nodes"
-    page="/documentation/docs/blockchain-guides/Avalanche/avalanche-the-basics/"
-  />
-</div>
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/avalanche/avalanche-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/avalanche-logo.png" className="blockchain-logo" alt="Avalanche" />
+      </div>
+      <div className="blockchain-title">Avalanche</div>
+      <div className="blockchain-description">Mainnet & Fuji testnet. Full nodes</div>
+    </a>
+  </div>
 </div>
 
 <div className="row">
-
-<div className="col">
-  <ContentCard
-    image={Polygon}
-    title="Polygon"
-    description="Mainnet & Mumbai Testnet. Full node"
-    page="/documentation/docs/blockchain-guides/Polygon/polygon-the-basics/"
-  />
-</div>
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/polygon/polygon-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/polygon-logo.webp" className="blockchain-logo" alt="Polygon" />
+      </div>
+      <div className="blockchain-title">Polygon</div>
+      <div className="blockchain-description">Mainnet & Mumbai Testnet. Full node</div>
+    </a>
+  </div>
 </div>
 
 <div className="row">
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/polygon-zkevm/polygon-zkevm-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/zkevm-logo.png" className="blockchain-logo" alt="Polygon zkEVM" />
+      </div>
+      <div className="blockchain-title">Polygon zkEVM</div>
+      <div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
+    </a>
+  </div>
 
-<div className="col">
-  <ContentCard
-    image={zkevm}
-    title="Polygon zkEVM"
-    description="Mainnet & Testnet. Full nodes"
-    page="/documentation/docs/blockchain-guides/Polygon-zkEVM/polygon-zkevm-the-basics/"
-  />
-</div>
-
-<div className="col">
-  <ContentCard
-    image={Arbitrum}
-    title="Arbitrum"
-    description="Mainnet & Testnet. Full nodes"
-    page="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/"
-  />
-</div>
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/arbitrum-logo.png" className="blockchain-logo" alt="Arbitrum" />
+      </div>
+      <div className="blockchain-title">Arbitrum</div>
+      <div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
+    </a>
+  </div>
 </div>
 
 <div className="row">
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/optimism-logo.png" className="blockchain-logo" alt="Optimism" />
+      </div>
+      <div className="blockchain-title">Optimism</div>
+      <div className="blockchain-description">OP Mainnet & OP Goerli. Full nodes</div>
+    </a>
+  </div>
 
-<div className="col">
-  <ContentCard
-    image={Optimism}
-    title="Optimism"
-    description="OP Mainnet & OP Goerli. Full nodes"
-    page="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/"
-  />
-</div>
-
-<div className="col">
-  <ContentCard
-    image={Hedera}
-    title="Hedera"
-    description="Hedera Mainnet & Testnet. Full nodes"
-    page="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/"
-  />
-</div>
+  <div className="col">
+    <a href="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/" className="blockchain-card">
+      <div className="blockchain-logo-wrapper">
+        <img src="/documentation/img/about-settlemint/blockchain-logos/hedera-logo.png" className="blockchain-logo" alt="Hedera" />
+      </div>
+      <div className="blockchain-title">Hedera</div>
+      <div className="blockchain-description">Hedera Mainnet & Testnet. Full nodes</div>
+    </a>
+  </div>
 </div>
diff --git a/docs/about-settlemint/4_components.mdx b/docs/about-settlemint/4_components.mdx
index bf9b483b..7dfc8158 100644
--- a/docs/about-settlemint/4_components.mdx
+++ b/docs/about-settlemint/4_components.mdx
@@ -5,67 +5,48 @@ description: Overview of the SettleMint components and tools available to build
 sidebar_position: 1
 ---
 
-import blockchainApplication from '@site/static/img/about-settlemint/blockchain-application.png';
-import blockchainNetwork from '@site/static/img/about-settlemint/network-node.png';
-import smartContract from '@site/static/img/about-settlemint/smart-contract.png';
-import middleware from '@site/static/img/about-settlemint/middleware.png';
-import storage from '@site/static/img/about-settlemint/storage.png';
-import integration from '@site/static/img/about-settlemint/integration.png';
+# SettleMint Components
 
-This guide will explain each of the tools and services on SettleMint and how they connected to
-build a blockchain application.
+This guide will explain each of the tools and services on SettleMint and how they connect to build a blockchain application.
 
 ## The Blockchain Application
 
 <img
-  src={blockchainApplication}
+  src="/documentation/img/about-settlemint/blockchain-application.png"
   alt="Blockchain Application"
   width="70%"
   height="70%"
   style={{ display: 'block', margin: '0 auto' }}
 />
-The first step to building anything on SettleMint is to [create an
-application](../../using-platform/create-an-application). You can think of an
-application as the collection of resources that you need to build your
-blockchain application. This includes a blockchain network, smart contracts,
-middleware, storage, integrations, and insights.{' '}
+
+The first step to building anything on SettleMint is to [create an application](../../using-platform/create-an-application). You can think of an application as the collection of resources that you need to build your blockchain application. This includes a blockchain network, smart contracts, middleware, storage, integrations, and insights.
 
 ## Add a Blockchain Network and Node
 
 <img
-  src={blockchainNetwork}
+  src="/documentation/img/about-settlemint/network-node.png"
   alt="Blockchain Network and Node"
   width="70%"
   height="70%"
   style={{ display: 'block', margin: '0 auto' }}
 />
-After creating a blockchain application, you now need to [add a blockchain
-network](../../using-platform/add-a-network-to-an-application) and node to your
-application. SettleMint offeres a variety of different [blockchain
-networks](../supported-blockchains) to choose from whatever your usecase may be.
-Networks need nodes to support the blockchain to run, once a [network is
-created](../../using-platform/add-a-node-to-a-network/) then a node is also
-added automatically.{' '}
+
+After creating a blockchain application, you now need to [add a blockchain network](../../using-platform/add-a-network-to-an-application) and node to your application. SettleMint offers a variety of different [blockchain networks](../supported-blockchains) to choose from whatever your usecase may be.
 
 ## Create a Smart Contract
 
 <img
-  src={smartContract}
-  alt="Add a Smart Contract"
+  src="/documentation/img/about-settlemint/smart-contract.png"
+  alt="Smart Contract"
   width="70%"
   height="70%"
   style={{ display: 'block', margin: '0 auto' }}
 />
-Smart Contracts allow us to run code on the blockchain. Developing a smart
-contract by [adding a smart contract
-set](../../using-platform/dev-tools/code-studio/smart-contract-sets), is an
-important step to reaching the business and product goals of your blockchain
-application.
 
 ## Add a Middleware
 
 <img
-  src={middleware}
+  src="/documentation/img/about-settlemint/middleware.png"
   alt="Middleware"
   width="70%"
   height="70%"
@@ -75,12 +56,12 @@ Blockchain applications produce data that lives on the blockchain, but we need
 to be able to access that data in order to use it. Creating a
 [middleware](../../using-platform/middleware/) allows us to do so. SettleMint
 currently offers three middleware services: The Graph, Smart Contract Portal
-Middleware and Firefly Fabconnect.{' '}
+Middleware and Firefly Fabconnect.
 
 ## Add Storage
 
 <img
-  src={storage}
+  src="/documentation/img/about-settlemint/storage.png"
   alt="Storage"
   width="70%"
   height="70%"
@@ -95,7 +76,7 @@ options](../../using-platform/storage/): IPFS (decentralized) and MinIO
 ## Add an Integration
 
 <img
-  src={storage}
+  src="/documentation/img/about-settlemint/integration.png"
   alt="Integration"
   width="70%"
   height="70%"
diff --git a/docs/developer-guides/guide-library.mdx b/docs/developer-guides/guide-library.mdx
index 8cfbf05b..d9aaa0cd 100644
--- a/docs/developer-guides/guide-library.mdx
+++ b/docs/developer-guides/guide-library.mdx
@@ -5,15 +5,13 @@ sidebar_position: 1
 ---
 
 import { ArticleCard } from '@site/src/components/BlogArticleComponent';
-import frontendIcon from '@site/static/img/guides/connect-frontend.png';
-import assetTokenization from '@site/static/img/guides/asset-tokenization.png';
 
 ## Application Development
 
 These guides will help you in your blockchain application development process.
 
 <ArticleCard
-  icon={frontendIcon}
+  icon="/documentation/img/guides/connect-frontend.png"
   title="Connecting A Frontend - NextJS"
   description="This connects a frontend to your blockchain application using NextJS, wagmi and web3auth."
   githubLink="https://github.com/settlemint/settlemint-nextjs-wagmi"
@@ -25,7 +23,7 @@ These guides will help you in your blockchain application development process.
 These guides will show you how to build blockchain applications for popular use-cases.
 
 <ArticleCard
-  icon={assetTokenization}
+  icon="/documentation/img/guides/asset-tokenization.png"
   title="Asset Tokenization"
   description="This guide explains how to build an asset tokenization application using SettleMint"
   articleLink="../asset-tokenization/"
diff --git a/theme/index.tsx b/theme/index.tsx
index b796927c..e497fc2b 100644
--- a/theme/index.tsx
+++ b/theme/index.tsx
@@ -3,10 +3,6 @@ import '@fontsource/figtree/300.css';
 import '@fontsource/figtree/400.css';
 import '@fontsource/figtree/700.css';
 import '@fontsource/figtree/900.css';
-import aikidoIcon from '../static/img/about-settlemint/aikido-icon.png';
-import platformImage from '../static/img/about-settlemint/platformModelBlue.png';
-import platformScreenshot from '../static/img/about-settlemint/platformScreenshot.webp';
-import supportIcon from '../static/img/about-settlemint/support-icon.png';
 import styles from './styles.module.css';
 
 function Navigation() {
@@ -16,7 +12,8 @@ function Navigation() {
         <div className={styles.twoColumn}>
           <div className={styles.twoColumnImage}>
             <div>
-              <img src={platformImage} alt="SettleMint Platform" />
+              <img src="img/about-settlemint/platformModelBlue.png"
+                alt="SettleMint Platform" />
             </div>
           </div>
           <div className={styles.twoColumnText}>
@@ -54,7 +51,10 @@ function Navigation() {
       <div className={styles.container}>
         <div className={styles.twoColumn}>
           <div className={styles.twoColumnImage}>
-            <img src={platformScreenshot} alt="SettleMint Platform" />
+            <img
+              src="/documentation/img/about-settlemint/platformScreenshot.webp"
+              alt="SettleMint Platform"
+            />
           </div>
           <div className={styles.twoColumnText}>
             <div>
@@ -132,7 +132,7 @@ function Navigation() {
               <div style={{ textAlign: 'center' }}>
                 <img
                   className={styles.icons}
-                  src={supportIcon}
+                  src="img/about-settlemint/support-icon.png"
                   alt="SettleMint Platform"
                   style={{ width: '30%' }}
                 />
@@ -150,7 +150,7 @@ function Navigation() {
               <div style={{ textAlign: 'center' }}>
                 <img
                   className={styles.icons}
-                  src={aikidoIcon}
+                  src="img/about-settlemint/aikido-icon.png"
                   alt="SettleMint Platform"
                   style={{ width: '30%' }}
                 />