diff --git a/package-lock.json b/package-lock.json
index 6151d80..ed31ee9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
                 "@tanstack/react-query": "^5.29.0",
                 "@tonconnect/ui-react": "^2.0.0",
                 "@twa-dev/sdk": "^7.0.0",
-                "@types/axios": "^0.14.0",
                 "@types/react-router-dom": "^5.3.3",
                 "@vitejs/plugin-basic-ssl": "^1.1.0",
                 "@walletconnect/client": "^1.8.0",
@@ -33,6 +32,7 @@
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "react-router-dom": "^6.22.3",
+                "react-spinners": "^0.13.8",
                 "viem": "^2.9.15",
                 "wagmi": "^2.5.19"
             },
@@ -42,9 +42,12 @@
                 "@typescript-eslint/eslint-plugin": "^7.2.0",
                 "@typescript-eslint/parser": "^7.2.0",
                 "@vitejs/plugin-react": "^4.2.1",
+                "autoprefixer": "^10.4.19",
                 "eslint": "^8.57.0",
                 "eslint-plugin-react-hooks": "^4.6.0",
                 "eslint-plugin-react-refresh": "^0.4.6",
+                "postcss": "^8.4.38",
+                "tailwindcss": "^3.4.3",
                 "typescript": "^5.2.2",
                 "vite": "^5.2.0"
             }
@@ -63,6 +66,18 @@
             "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz",
             "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw=="
         },
+        "node_modules/@alloc/quick-lru": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -12661,15 +12676,6 @@
             "resolved": "https://registry.npmjs.org/@twa-dev/types/-/types-7.0.0.tgz",
             "integrity": "sha512-LBnMklxORuXd/ypv9gFKcQVNJkCktkeuU+2V6B5Ww7dcxDCoYBAKkNnIwEQ3cShq+cxTi96jC/CqWhgDMQ7AXQ=="
         },
-        "node_modules/@types/axios": {
-            "version": "0.14.0",
-            "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
-            "integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==",
-            "deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!",
-            "dependencies": {
-                "axios": "*"
-            }
-        },
         "node_modules/@types/babel__core": {
             "version": "7.20.5",
             "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -15253,8 +15259,7 @@
         "node_modules/arg": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-            "peer": true
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
         "node_modules/argparse": {
             "version": "2.0.1",
@@ -15359,6 +15364,43 @@
                 "node": ">=8.0.0"
             }
         },
+        "node_modules/autoprefixer": {
+            "version": "10.4.19",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+            "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "browserslist": "^4.23.0",
+                "caniuse-lite": "^1.0.30001599",
+                "fraction.js": "^4.3.7",
+                "normalize-range": "^0.1.2",
+                "picocolors": "^1.0.0",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "bin": {
+                "autoprefixer": "bin/autoprefixer"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
         "node_modules/available-typed-arrays": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -16290,6 +16332,15 @@
                 "node": ">=6"
             }
         },
+        "node_modules/camelcase-css": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001600",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
@@ -17529,6 +17580,12 @@
             "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
             "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
         },
+        "node_modules/didyoumean": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+            "dev": true
+        },
         "node_modules/diffie-hellman": {
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -17560,6 +17617,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dlv": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+            "dev": true
+        },
         "node_modules/doctrine": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -18981,6 +19044,19 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/fraction.js": {
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "type": "patreon",
+                "url": "https://github.com/sponsors/rawify"
+            }
+        },
         "node_modules/freeport-async": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/freeport-async/-/freeport-async-2.0.0.tgz",
@@ -21579,6 +21655,15 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/lilconfig": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -23122,6 +23207,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/normalize-range": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+            "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/npm-package-arg": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-7.0.0.tgz",
@@ -23228,6 +23322,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/object-hash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+            "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/object-is": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
@@ -23932,6 +24035,127 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss-import": {
+            "version": "15.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+            "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+            "dev": true,
+            "dependencies": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/postcss-js": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+            "dev": true,
+            "dependencies": {
+                "camelcase-css": "^2.0.1"
+            },
+            "engines": {
+                "node": "^12 || ^14 || >= 16"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4.21"
+            }
+        },
+        "node_modules/postcss-load-config": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+            "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "lilconfig": "^3.0.0",
+                "yaml": "^2.3.4"
+            },
+            "engines": {
+                "node": ">= 14"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/postcss-load-config/node_modules/lilconfig": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+            "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antonk52"
+            }
+        },
+        "node_modules/postcss-nested": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+            "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+            "dev": true,
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.11"
+            },
+            "engines": {
+                "node": ">=12.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.14"
+            }
+        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.0.16",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+            "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-value-parser": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "dev": true
+        },
         "node_modules/preact": {
             "version": "10.20.1",
             "resolved": "https://registry.npmjs.org/preact/-/preact-10.20.1.tgz",
@@ -24851,6 +25075,15 @@
                 "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
             }
         },
+        "node_modules/react-spinners": {
+            "version": "0.13.8",
+            "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+            "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+            "peerDependencies": {
+                "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/react-style-singleton": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -24873,6 +25106,24 @@
                 }
             }
         },
+        "node_modules/read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "dev": true,
+            "dependencies": {
+                "pify": "^2.3.0"
+            }
+        },
+        "node_modules/read-cache/node_modules/pify": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -26467,6 +26718,43 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/tailwindcss": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+            "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+            "dev": true,
+            "dependencies": {
+                "@alloc/quick-lru": "^5.2.0",
+                "arg": "^5.0.2",
+                "chokidar": "^3.5.3",
+                "didyoumean": "^1.2.2",
+                "dlv": "^1.1.3",
+                "fast-glob": "^3.3.0",
+                "glob-parent": "^6.0.2",
+                "is-glob": "^4.0.3",
+                "jiti": "^1.21.0",
+                "lilconfig": "^2.1.0",
+                "micromatch": "^4.0.5",
+                "normalize-path": "^3.0.0",
+                "object-hash": "^3.0.0",
+                "picocolors": "^1.0.0",
+                "postcss": "^8.4.23",
+                "postcss-import": "^15.1.0",
+                "postcss-js": "^4.0.1",
+                "postcss-load-config": "^4.0.1",
+                "postcss-nested": "^6.0.1",
+                "postcss-selector-parser": "^6.0.11",
+                "resolve": "^1.22.2",
+                "sucrase": "^3.32.0"
+            },
+            "bin": {
+                "tailwind": "lib/cli.js",
+                "tailwindcss": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/tar": {
             "version": "6.2.1",
             "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -27931,7 +28219,6 @@
             "version": "2.4.1",
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
             "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
-            "peer": true,
             "bin": {
                 "yaml": "bin.mjs"
             },
diff --git a/package.json b/package.json
index 01a1e9e..2a0d3b9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3",
+        "react-spinners": "^0.13.8",
         "viem": "^2.9.15",
         "wagmi": "^2.5.19"
     },
@@ -43,9 +44,12 @@
         "@typescript-eslint/eslint-plugin": "^7.2.0",
         "@typescript-eslint/parser": "^7.2.0",
         "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
         "typescript": "^5.2.2",
         "vite": "^5.2.0"
     }
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
index bf55e43..4a58eb0 100644
--- a/src/components/connectOverlay/ConnectOverlay.tsx
+++ b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import WebApp from '@twa-dev/sdk';
+import { PulseLoader } from 'react-spinners';
 
 import NetworkBadge from './NetworkBadge';
 import WalletBadge from './WalletBadge';
@@ -40,7 +41,8 @@ const ConnectOverlay: React.FC<Props> = ({
         setWalletsExpanded(!walletsExpanded);
     };
 
-    const [connecting, setConnecting] = useState<boolean>(false);
+    // !!!!!!!!!
+    const [connecting, setConnecting] = useState<boolean>(true);
 
     // connect function
     const connectMetamask = async () => {
@@ -119,7 +121,7 @@ const ConnectOverlay: React.FC<Props> = ({
             {connecting ? (
                 <>
                     <div>
-                        <p style={{ color: 'black' }}>Connecting...</p>
+                        <PulseLoader size={12} margin={5} />
                     </div>
                     <div>
                         <p style={{ color: 'black' }}>Connecting Wallet</p>