diff --git a/src/assets/portals/brownie.png b/src/assets/portals/brownie.png
new file mode 100644
index 00000000..4a06dbe8
Binary files /dev/null and b/src/assets/portals/brownie.png differ
diff --git a/src/assets/portals/foundry.png b/src/assets/portals/foundry.png
new file mode 100644
index 00000000..b08236d4
Binary files /dev/null and b/src/assets/portals/foundry.png differ
diff --git a/src/assets/portals/scaffold-eth.png b/src/assets/portals/scaffold-eth.png
new file mode 100644
index 00000000..1652c759
Binary files /dev/null and b/src/assets/portals/scaffold-eth.png differ
diff --git a/src/assets/portals/walletconnect.png b/src/assets/portals/walletconnect.png
new file mode 100644
index 00000000..214bf828
Binary files /dev/null and b/src/assets/portals/walletconnect.png differ
diff --git a/src/components/PortalItem.tsx b/src/components/PortalItem.tsx
index ede6565f..da1ed568 100644
--- a/src/components/PortalItem.tsx
+++ b/src/components/PortalItem.tsx
@@ -52,7 +52,11 @@ export const PortalItem = ({
       {/* pc */}
       <div className="hidden lg:block" style={{ perspective: 800 }}>
         <div className="card-filp" style={{ ...(flipped === meta.name ? { transform: "rotateY(-180deg)" } : {}) }}>
-          <div className="back flex flex-col items-center justify-between bg-bg-component/70 p-5">
+          <div
+            className={`back flex flex-col items-center justify-between bg-bg-component/70 p-5 transition-opacity duration-700 ${
+              flipped === meta.name ? "opacity-100" : "opacity-0"
+            }`}
+          >
             <span className="text-bold text-xs text-white">{meta.description}</span>
             {meta.link.startsWith("//") ? (
               <a
@@ -74,7 +78,7 @@ export const PortalItem = ({
           </div>
           <div
             className="front flex flex-col items-center justify-center border border-transparent bg-bg-component p-3 transition hover:cursor-pointer hover:border-primary active:scale-95"
-            style={{ ...(flipped === meta.name ? { zIndex: -1, opacity: 0.2 } : {}) }}
+            style={{ ...(flipped === meta.name ? { zIndex: -1, opacity: 0.2 } : { opacity: 1 }) }}
             onClick={() => onClick(meta.name)}
           >
             <img alt="..." src={meta.logo} className="h-[5rem] w-[5rem]" />
diff --git a/src/config/portals.ts b/src/config/portals.ts
index 28423830..2f41f97e 100644
--- a/src/config/portals.ts
+++ b/src/config/portals.ts
@@ -48,6 +48,10 @@ import hardhat from "../assets/portals/hardhat.png";
 import web3Py from "../assets/portals/web3-py.png";
 import web3Js from "../assets/portals/web3-js.png";
 import ethersJs from "../assets/portals/ethers-js.png";
+import foundry from "../assets/portals/foundry.png";
+import brownie from "../assets/portals/brownie.png";
+import scaffoldEth from "../assets/portals/scaffold-eth.png";
+import walletconnect from "../assets/portals/walletconnect.png";
 
 export const portals = (t: TFunction): PortalMeta[] => [
   {
@@ -447,4 +451,38 @@ export const portals = (t: TFunction): PortalMeta[] => [
     ),
     tags: ["Infrastructure", "Tool"],
   },
+  {
+    logo: foundry,
+    name: t("Foundry"),
+    link: t("https://book.getfoundry.sh"),
+    description: t(
+      "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust."
+    ),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: brownie,
+    name: t("Brownie"),
+    link: t("https://eth-brownie.readthedocs.io/en/stable/"),
+    description: t(
+      "A Python-based development and testing framework for smart contracts targeting the Ethereum Virtual Machine."
+    ),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: scaffoldEth,
+    name: t("scaffold-eth"),
+    link: t("https://github.com/scaffold-eth/scaffold-eth#-scaffold-eth"),
+    description: t("Forkable Ethereum dev stack focused on fast product iterations."),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: walletconnect,
+    name: t("Walletconnect"),
+    link: t("https://walletconnect.com/"),
+    description: t(
+      "WalletConnect is the Web3 messaging layer and a standard to connect blockchain wallets to Dapps. Our mission continues to expand the interoperability of the Web3 space by providing the best tooling and infrastructure for Wallets to deliver an outstanding user experience."
+    ),
+    tags: ["Wallet"],
+  },
 ];