diff --git a/package-lock.json b/package-lock.json
index b70d104..2b6f3bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
                 "@walletconnect/universal-provider": "^2.12.2",
                 "@web3modal/ethers": "^4.1.1",
                 "axios": "^1.6.8",
+                "color-thief-react": "^2.1.0",
                 "colorthief": "^2.4.0",
                 "dotenv": "^16.4.5",
                 "ethers": "^6.11.1",
@@ -8735,6 +8736,75 @@
             "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
             "devOptional": true
         },
+        "node_modules/color-thief-react": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/color-thief-react/-/color-thief-react-2.1.0.tgz",
+            "integrity": "sha512-2Vr8XnxzoSEz2nUswROWIrxI6joMom4S9TZ5RC69/FR2K87BuXUZk5C4qn6g/rq5bYKx9m+HNjwlCOWIYMAv2A==",
+            "dependencies": {
+                "color-convert": "^2.0.1",
+                "colorthief": "2.3.2",
+                "prop-types": "15.7.2",
+                "tslib": "2.3.0",
+                "use-current-effect": "2.1.0"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8.0",
+                "react-dom": ">= 16.8.0"
+            }
+        },
+        "node_modules/color-thief-react/node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-thief-react/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "node_modules/color-thief-react/node_modules/colorthief": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/colorthief/-/colorthief-2.3.2.tgz",
+            "integrity": "sha512-1r4nPW553JviRcFRvN3fS2V9nUSQGjRIws8UfEeFLIxk8j1tvtaX+AAYTkH3A4B5Muiys8SA1WJxf+00xVTXyg==",
+            "dependencies": {
+                "get-pixels": "^3.3.2",
+                "quantize": "github:lokesh/quantize"
+            }
+        },
+        "node_modules/color-thief-react/node_modules/prop-types": {
+            "version": "15.7.2",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+            "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.8.1"
+            }
+        },
+        "node_modules/color-thief-react/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "node_modules/color-thief-react/node_modules/tslib": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+            "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        },
+        "node_modules/color-thief-react/node_modules/use-current-effect": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/use-current-effect/-/use-current-effect-2.1.0.tgz",
+            "integrity": "sha512-yxSWZsBfohTulb+HyLdSIcUoG5UnSbgNl5SAEtFhzq1yqTeJAa32dZhhO5ACYn7Lc2IGt03pUOkUZZQQX/ReXg==",
+            "peerDependencies": {
+                "react": "^16.8.0"
+            }
+        },
         "node_modules/colorette": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
@@ -13692,7 +13762,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "devOptional": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -14627,6 +14696,12 @@
                 "node": ">=0.6"
             }
         },
+        "node_modules/quantize": {
+            "name": "@lokesh.dhakar/quantize",
+            "version": "1.3.0",
+            "resolved": "git+ssh://git@github.com/lokesh/quantize.git#05ebca18518f8833c7de764c5b35c443834c3226",
+            "license": "MIT"
+        },
         "node_modules/query-string": {
             "version": "7.1.3",
             "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
diff --git a/package.json b/package.json
index 1739a4a..4cda37b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
         "@walletconnect/universal-provider": "^2.12.2",
         "@web3modal/ethers": "^4.1.1",
         "axios": "^1.6.8",
-        "colorthief": "^2.4.0",
+        "color-thief-react": "^2.1.0",
         "dotenv": "^16.4.5",
         "ethers": "^6.11.1",
         "react": "^18.2.0",
diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx
index 093147a..7287f4a 100644
--- a/src/components/connectOverlay/NetworkBadge.tsx
+++ b/src/components/connectOverlay/NetworkBadge.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-// import { getColorFromURL } from 'color-thief-node';
+import React, { useEffect } from 'react';
 
 type Props = {
     network: string;
@@ -15,18 +13,78 @@ const NetworkBadge: React.FC<Props> = ({
     selected,
     callback,
 }) => {
-    // const getNetworkColor = async () => {
-    //     const color = await getColorFromURL(icon);
-    //     console.log(color);
-    //     return color;
-    // };
+    const getDominantColor = async (imageUrl: string): Promise<string> => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.src = imageUrl;
+            img.crossOrigin = 'Anonymous';
+
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                if (!ctx) {
+                    reject('Unable to get canvas context');
+                    return;
+                }
+
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0, img.width, img.height);
+
+                const imageData = ctx.getImageData(
+                    0,
+                    0,
+                    canvas.width,
+                    canvas.height
+                );
+                const data = imageData.data;
+                const colorCount: Record<string, number> = {};
+
+                for (let i = 0; i < data.length; i += 4) {
+                    const color = `${data[i]},${data[i + 1]},${data[i + 2]}`;
+                    if (colorCount[color]) {
+                        colorCount[color]++;
+                    } else {
+                        colorCount[color] = 1;
+                    }
+                }
+
+                let dominantColor = '';
+                let maxCount = 0;
+
+                for (const [color, count] of Object.entries(colorCount)) {
+                    if (count > maxCount) {
+                        maxCount = count;
+                        dominantColor = color;
+                    }
+                }
+
+                // Convert the dominant color from RGB string to RGBA string with 50% opacity
+                const rgbaColor = `rgba(${dominantColor}, 0.5)`;
+
+                resolve(rgbaColor);
+            };
+
+            img.onerror = () => reject('Image load error');
+        });
+    };
+    let backgroundColorSelected = '';
+
+    useEffect(() => {
+        getDominantColor(icon).then((color) => {
+            if (color === 'rgba(0,0,0, 0.5)') return;
+            console.log('Dominant color:', color);
+            backgroundColorSelected = color;
+        });
+    }, [icon]);
 
     return (
         <div
             onClick={callback}
-            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 ${
-                selected ? `bg-customBlueSelected` : ''
-            }`}
+            className={`flex flex-col items-center justify-center text-customBlackText rounded-lg p-2 
+            ${selected ? 'bg-customBlueSelected' : ''}
+            `}
         >
             <img className="w-11 h-11" src={icon} alt="" />
             <p>{network}</p>