diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 235fb76..c571b3a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,10 +12,12 @@
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@gradio/client": "^1.8.0",
+        "@speechly/speech-recognition-polyfill": "^1.3.0",
         "buffer": "^6.0.3",
         "dotenv": "^16.4.5",
         "ethers": "^6.13.2",
-        "framer-motion": "^11.11.9",
+        "framer-motion": "^11.15.0",
         "lucide-react": "^0.438.0",
         "pako": "^2.1.0",
         "pinata-web3": "^0.5.0",
@@ -24,6 +26,7 @@
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.1",
         "react-spinners": "^0.15.0",
+        "react-voice-visualizer": "^2.0.4",
         "three": "^0.168.0"
       },
       "devDependencies": {
@@ -62,6 +65,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@bundled-es-modules/cookie": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==",
+      "license": "ISC",
+      "dependencies": {
+        "cookie": "^0.7.2"
+      }
+    },
+    "node_modules/@bundled-es-modules/statuses": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz",
+      "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==",
+      "license": "ISC",
+      "dependencies": {
+        "statuses": "^2.0.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/tough-cookie": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
+      "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/tough-cookie": "^4.0.5",
+        "tough-cookie": "^4.1.4"
+      }
+    },
     "node_modules/@chainsafe/is-ip": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@chainsafe/is-ip/-/is-ip-2.0.2.tgz",
@@ -660,6 +691,26 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@gradio/client": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-1.8.0.tgz",
+      "integrity": "sha512-0Nxi+AuEL/ICdnZ6TSxRif1yS2A0HtJnggtWhN/8sqwFxx5UAGN29/vnJONcVfe3g9nctDJCvik3uDHkzQHFGw==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/eventsource": "^1.1.15",
+        "bufferutil": "^4.0.7",
+        "eventsource": "^2.0.2",
+        "fetch-event-stream": "^0.1.5",
+        "msw": "^2.2.1",
+        "semiver": "^1.1.0",
+        "textlinestream": "^1.1.1",
+        "typescript": "^5.0.0",
+        "ws": "^8.13.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -688,6 +739,97 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@inquirer/confirm": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.0.tgz",
+      "integrity": "sha512-osaBbIMEqVFjTX5exoqPXs6PilWQdjaLhGtMDXMXg/yxkHXNq43GlxGyTA35lK2HpzUgDN+Cjh/2AmqCN0QJpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.1.1",
+        "@inquirer/type": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/core": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.1.tgz",
+      "integrity": "sha512-rmZVXy9iZvO3ZStEe/ayuuwIJ23LSF13aPMlLMTQARX6lGUBDHGV8UB5i9MRrfy0+mZwt5/9bdy8llszSD3NQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/figures": "^1.0.8",
+        "@inquirer/type": "^3.0.1",
+        "ansi-escapes": "^4.3.2",
+        "cli-width": "^4.1.0",
+        "mute-stream": "^2.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^6.2.0",
+        "yoctocolors-cjs": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/@inquirer/core/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/figures": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz",
+      "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/type": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.1.tgz",
+      "integrity": "sha512-+ksJMIy92sOAiAccGpcKZUc3bYO07cADnscIxHBknEm3uNts3movSmBofc1908BNy5edKscxYeAdaX1NXkHS6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -794,6 +936,23 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@mswjs/interceptors": {
+      "version": "0.37.3",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.3.tgz",
+      "integrity": "sha512-USvgCL/uOGFtVa6SVyRrC8kIAedzRohxIXN5LISlg5C5vLZCn7dgMFVSNhSF9cuBEFrm/O2spDWEZeMnw4ZXYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/logger": "^0.3.0",
+        "@open-draft/until": "^2.0.0",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "strict-event-emitter": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@multiformats/dns": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@multiformats/dns/-/dns-1.0.6.tgz",
@@ -894,6 +1053,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "license": "MIT"
+    },
+    "node_modules/@open-draft/logger": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz",
+      "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.0"
+      }
+    },
+    "node_modules/@open-draft/until": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz",
+      "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
+      "license": "MIT"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1138,6 +1319,25 @@
         "win32"
       ]
     },
+    "node_modules/@speechly/browser-client": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/@speechly/browser-client/-/browser-client-2.6.6.tgz",
+      "integrity": "sha512-yhqLMqaYefrS3ylZtDCB6pTrS8U6+TQzJ90sXBZLRWZSzRTRbBBZK9Rb0PwJmkN/Lo/NK2jB+5Jb5W6g6h+dMA==",
+      "license": "MIT",
+      "dependencies": {
+        "base-64": "^0.1.0",
+        "uuid": "^8.0.0"
+      }
+    },
+    "node_modules/@speechly/speech-recognition-polyfill": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@speechly/speech-recognition-polyfill/-/speech-recognition-polyfill-1.3.0.tgz",
+      "integrity": "sha512-klpZhJqAyy8pG8afkoZzXYKR1H0Y5tTEfSRB15pZNfDH1nB0IHmtsAZ32FpGztwRhTgl46po7Hvl/H1WtoXZuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@speechly/browser-client": "^2.4.1"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.7.26",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.26.tgz",
@@ -1364,6 +1564,12 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/dns-packet": {
       "version": "5.6.5",
       "resolved": "https://registry.npmjs.org/@types/dns-packet/-/dns-packet-5.6.5.tgz",
@@ -1380,6 +1586,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/eventsource": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.15.tgz",
+      "integrity": "sha512-XQmGcbnxUNa06HR3VBVkc9+A2Vpi9ZyLJcdS5dwaQQ/4ZMWFO+5c90FnMUpbtMZwB/FChoYHwuVg8TvkECacTA==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1421,6 +1633,18 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/statuses": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
+      "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react-swc": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.1.tgz",
@@ -1480,11 +1704,37 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -1494,7 +1744,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -1756,6 +2005,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base-64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+      "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -1870,6 +2124,19 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1935,7 +2202,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -1986,11 +2252,70 @@
         "node": ">= 6"
       }
     },
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "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==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2003,7 +2328,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -2035,6 +2359,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/countup.js": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
@@ -2490,7 +2823,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2756,6 +3088,15 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2840,6 +3181,12 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fetch-event-stream": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/fetch-event-stream/-/fetch-event-stream-0.1.5.tgz",
+      "integrity": "sha512-V1PWovkspxQfssq/NnxoEyQo1DV+MRK/laPuPblIZmSjMN8P5u46OhlFQznSr9p/t0Sp8Uc6SbM3yCMfr0KU8g==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2992,16 +3339,19 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.11.9",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
-      "integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "license": "MIT",
       "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
         "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@emotion/is-prop-valid": {
@@ -3069,6 +3419,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -3210,6 +3569,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graphql": {
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.10.0.tgz",
+      "integrity": "sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -3224,7 +3592,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3304,6 +3671,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/headers-polyfill": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
+      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
+      "license": "MIT"
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3540,7 +3913,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3618,6 +3990,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-node-process": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
+      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4070,6 +4448,18 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4077,12 +4467,65 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/msw": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.9.tgz",
+      "integrity": "sha512-b2z9MvsEOYG5G7jtJasXO3ucHDcqCjf046e9wELIixBbYCRZCEmB4gqcb+C7ASyXBafNBR0D2u31YtG01OdX3A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bundled-es-modules/cookie": "^2.0.1",
+        "@bundled-es-modules/statuses": "^1.0.1",
+        "@bundled-es-modules/tough-cookie": "^0.1.6",
+        "@inquirer/confirm": "^5.0.0",
+        "@mswjs/interceptors": "^0.37.0",
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/until": "^2.1.0",
+        "@types/cookie": "^0.6.0",
+        "@types/statuses": "^2.0.4",
+        "chalk": "^4.1.2",
+        "graphql": "^16.8.1",
+        "headers-polyfill": "^4.0.2",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "path-to-regexp": "^6.3.0",
+        "strict-event-emitter": "^0.5.1",
+        "type-fest": "^4.26.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "msw": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mswjs"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.8.x"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/multiformats": {
       "version": "13.3.0",
       "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-13.3.0.tgz",
       "integrity": "sha512-CBiqvsufgmpo01VT5ze94O+uc+Pbf6f/sThlvWss0sBZmAOu6GQn5usrYV2sf2mr17FWYc0rO8c/CNe2T90QAA==",
       "license": "Apache-2.0 OR MIT"
     },
+    "node_modules/mute-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
+      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -4158,6 +4601,17 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -4316,6 +4770,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
+      "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -4446,6 +4906,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -4738,16 +5204,33 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4854,6 +5337,16 @@
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-voice-visualizer": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-voice-visualizer/-/react-voice-visualizer-2.0.4.tgz",
+      "integrity": "sha512-YAdHVD/itgMsq7eLaoSX1dhl97PYHyRn1HnutuV4poygAhCXU/++BsEkmZMkxItpD7wadmayiVNX0BgMhuMgSg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4918,6 +5411,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -5063,6 +5571,15 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5153,7 +5670,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -5172,6 +5688,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/strict-event-emitter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
+      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -5336,7 +5867,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -5399,7 +5929,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -5484,6 +6013,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/textlinestream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/textlinestream/-/textlinestream-1.1.1.tgz",
+      "integrity": "sha512-iBHbi7BQxrFmwZUQJsT0SjNzlLLsXhvW/kg7EyOMVMBIrlnj/qYofwo1LVLZi+3GbUEo96Iu2eqToI2+lZoAEQ==",
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -5526,6 +6061,21 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -5552,6 +6102,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "4.30.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.1.tgz",
+      "integrity": "sha512-ojFL7eDMX2NF0xMbDwPZJ8sb7ckqtlAi1GsmgsFXvErT9kFTk1r0DuQKvrCh73M6D4nngeHJmvogF9OluXs7Hw==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
@@ -5629,6 +6191,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/uint8-varint": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/uint8-varint/-/uint8-varint-2.0.4.tgz",
@@ -5673,6 +6248,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -5714,6 +6298,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5721,6 +6315,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
@@ -6021,6 +6624,15 @@
         }
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
@@ -6034,6 +6646,53 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -6046,6 +6705,18 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yoctocolors-cjs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
+      "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 3b4d775..d1b964a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,10 +14,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@gradio/client": "^1.8.0",
+    "@speechly/speech-recognition-polyfill": "^1.3.0",
     "buffer": "^6.0.3",
     "dotenv": "^16.4.5",
     "ethers": "^6.13.2",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.438.0",
     "pako": "^2.1.0",
     "pinata-web3": "^0.5.0",
@@ -26,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
     "react-spinners": "^0.15.0",
+    "react-voice-visualizer": "^2.0.4",
     "three": "^0.168.0"
   },
   "devDependencies": {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9b9f027..38e93bb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import MyChatbot from './Chatbot';
 import CustomCursor from './components/CustomCursor';
 import GTranslateLoader from './components/GTranslateLoader'
 import ScrollToTop from './components/ScrollToTop';
+import ChatPage from './pages/ChatPage';
 
 function App() {
     const [wallet, setWallet] = useState(null);
@@ -49,6 +50,7 @@ function App() {
                         <Route path="/creators" element={<CreatorsPage />} />
                         <Route path="/faqs" element={<FAQPage />} />
                         <Route path="*" element={<NotFoundPage />} />
+                        <Route path ="/chat" element = { <ChatPage />} />
                     </Routes>
                 </main>
 
diff --git a/frontend/src/Chatbot.jsx b/frontend/src/Chatbot.jsx
index 737ecf4..9af742d 100644
--- a/frontend/src/Chatbot.jsx
+++ b/frontend/src/Chatbot.jsx
@@ -1,12 +1,17 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+
 
 const Chatbot = () => {
+
     const [messages, setMessages] = useState([
         { user: 'bot', text: 'Hello! How can I assist you with NFTs today?' },
     ])
     const [input, setInput] = useState('')
     const [isOpen, setIsOpen] = useState(false) // State to control chat window visibility
 
+    const navigate = useNavigate()
     const handleSendMessage = () => {
         if (input.trim()) {
             const userMessage = { user: 'me', text: input }
@@ -143,6 +148,7 @@ const Chatbot = () => {
     }
 
     return (
+
         <div className="relative">
             {/* Chat Button */}
             <button
@@ -152,9 +158,17 @@ const Chatbot = () => {
                 💬
             </button>
 
+             
+
             {/* Chat Window */}
             {isOpen && (
                 <div className="fixed bottom-16 right-4 w-80 bg-gray-800 text-white rounded-lg shadow-lg p-4 z-50">
+                    <button
+        className="fixed bottom-4 right-20 bg-green-500 text-white p-3 rounded-full shadow-lg transition-transform transform hover:scale-105 z-50"
+        onClick={() => navigate('/chat')}
+    >
+        Go to Chat Page
+    </button>
                     <div className="flex flex-col max-h-60 overflow-y-auto">
                         {messages.map((msg, index) => (
                             <div
@@ -186,6 +200,8 @@ const Chatbot = () => {
                     </div>
                 </div>
             )}
+        
+            
         </div>
     )
 }
diff --git a/frontend/src/components/ChatInput.jsx b/frontend/src/components/ChatInput.jsx
new file mode 100644
index 0000000..4215556
--- /dev/null
+++ b/frontend/src/components/ChatInput.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Mic, Send } from 'lucide-react';
+
+const ChatInput = ({ onSendMessage }) => {
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim()) {
+      onSendMessage(message);
+      setMessage('');
+    }
+  };
+
+//   const handleVoiceInput = () => {
+//     // Implement voice input functionality
+//     onVoiceInput();
+//   };
+
+  return (
+    <form 
+      onSubmit={handleSubmit} 
+      className="flex items-center bg-white/10 backdrop-blur-md rounded-xl p-2 space-x-2 shadow-lg border border-gray-200/20"
+    >
+      <input 
+        type="text"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Type your message..."
+        className="flex-grow bg-transparent outline-none text-white placeholder-gray-300 px-2"
+      />
+      {/* <button 
+        type="button" 
+        onClick={handleVoiceInput}
+        className="text-gray-300 hover:text-white transition-colors"
+      >
+        <Mic size={24} />
+      </button> */}
+      <button 
+        type="submit" 
+        className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700 transition-colors"
+      >
+        <Send size={20} />
+      </button>
+    </form>
+  );
+};
+
+export default ChatInput;
\ No newline at end of file
diff --git a/frontend/src/components/ChatMessage.jsx b/frontend/src/components/ChatMessage.jsx
new file mode 100644
index 0000000..fe14099
--- /dev/null
+++ b/frontend/src/components/ChatMessage.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { BotMessageSquare, User } from 'lucide-react';
+
+const ChatMessage = ({ message, type }) => {
+  const isBot = type === 'bot';
+  
+  return (
+    <div className={`flex items-start space-x-3 mb-4 ${isBot ? 'flex-row' : 'flex-row-reverse'}`}>
+      <div className={`
+        p-3 rounded-xl max-w-[70%]
+        ${isBot 
+          ? 'bg-gray-700 text-white' 
+          : 'bg-blue-600 text-white self-end'
+        }
+      `}>
+        <p>{message}</p>
+      </div>
+      <div className={`
+        rounded-full p-2 
+        ${isBot 
+          ? 'bg-gray-600 text-white' 
+          : 'bg-blue-500 text-white'
+        }
+      `}>
+        {isBot ? <BotMessageSquare size={20} /> : <User size={20} />}
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessage;
\ No newline at end of file
diff --git a/frontend/src/components/HeroSection.jsx b/frontend/src/components/HeroSection.jsx
index 058aa19..93af0e8 100644
--- a/frontend/src/components/HeroSection.jsx
+++ b/frontend/src/components/HeroSection.jsx
@@ -25,7 +25,7 @@ const HeroSection = () => {
         <div className="relative h-screen flex items-center justify-center overflow-hidden">
             <canvas ref={canvasRef} className="absolute inset-0 z-0" />
             <div className="relative z-10 text-center">
-                <h1 className="text-6xl font-bold mb-4 text-white">
+                <h1 className=" my-txt text-6xl font-bold mb-4 text-white">
                     Explore, Collect and Sell
                     <br />
                     Extraordinary NFTs
diff --git a/frontend/src/components/Navbar.css b/frontend/src/components/Navbar.css
index 9a54162..957a39c 100644
--- a/frontend/src/components/Navbar.css
+++ b/frontend/src/components/Navbar.css
@@ -227,4 +227,9 @@ body.dark-mode {
         width: 100%;
         margin-bottom: 0.5rem;
     }
+    .my-txt{
+        font-size: 2.75rem !important;
+    }
+
+
 }
diff --git a/frontend/src/components/VoiceInput.jsx b/frontend/src/components/VoiceInput.jsx
new file mode 100644
index 0000000..e560463
--- /dev/null
+++ b/frontend/src/components/VoiceInput.jsx
@@ -0,0 +1,234 @@
+// import React, { useState, useRef, useEffect } from 'react';
+// import { Mic, MicOff, Volume2, VolumeX } from 'lucide-react';
+// import { createSpeechlySpeechRecognition } from '@speechly/speech-recognition-polyfill';
+// import { useVoiceVisualizer, VoiceVisualizer } from 'react-voice-visualizer';
+
+// const VoiceInput = ({ onVoiceInputComplete }) => {
+//   // State management for voice input
+//   const [isListening, setIsListening] = useState(false);
+//   const [audioContext, setAudioContext] = useState(null);
+//   const [mediaRecorder, setMediaRecorder] = useState(null);
+//   const [audioStream, setAudioStream] = useState(null);
+
+//   // Refs for audio processing
+//   const recorderControlsRef = useRef(null);
+//   const visualizerRef = useRef(null);
+
+//   // Advanced voice recognition setup
+//   const setupSpeechRecognition = async () => {
+//     try {
+//       // Use modern Web Speech API with Speechly polyfill for enhanced cross-browser support
+//       const SpeechlySpeechRecognition = createSpeechlySpeechRecognition();
+//       const recognition = new SpeechlySpeechRecognition();
+
+//       // Configure recognition settings
+//       recognition.continuous = false;
+//       recognition.interimResults = false;
+//       recognition.lang = 'en-US';
+
+//       // Speech recognition event handlers
+//       recognition.onresult = (event) => {
+//         const transcript = event.results[0][0].transcript.trim();
+//         if (transcript) {
+//           // Callback with transcribed text
+//           onVoiceInputComplete(transcript);
+//         }
+//       };
+
+//       recognition.onerror = (event) => {
+//         console.error('Speech recognition error:', event.error);
+//         setIsListening(false);
+//       };
+
+//       return recognition;
+//     } catch (error) {
+//       console.error('Speech recognition setup failed:', error);
+//       return null;
+//     }
+//   };
+
+//   // Advanced audio visualization and processing
+//   const startVoiceInput = async () => {
+//     try {
+//       // Request microphone access
+//       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+//       setAudioStream(stream);
+
+//       // Setup audio context for advanced processing
+//       const context = new (window.AudioContext || window.webkitAudioContext)();
+//       setAudioContext(context);
+
+//       // Create media recorder for additional audio capabilities
+//       const recorder = new MediaRecorder(stream);
+//       setMediaRecorder(recorder);
+
+//       // Start listening and processing
+//       setIsListening(true);
+
+//       // Optional: Start speech recognition
+//       const recognition = await setupSpeechRecognition();
+//       if (recognition) {
+//         recognition.start();
+//       }
+
+//       // Advanced audio visualization
+//       const audioSource = context.createMediaStreamSource(stream);
+//       const analyser = context.createAnalyser();
+//       audioSource.connect(analyser);
+
+//     } catch (error) {
+//       console.error('Voice input initialization error:', error);
+//       setIsListening(false);
+//     }
+//   };
+
+//   // Stop voice input and cleanup
+//   const stopVoiceInput = () => {
+//     try {
+//       // Stop audio stream tracks
+//       if (audioStream) {
+//         audioStream.getTracks().forEach(track => track.stop());
+//       }
+
+//       // Close audio context
+//       if (audioContext) {
+//         audioContext.close();
+//       }
+
+//       // Reset states
+//       setIsListening(false);
+//       setAudioStream(null);
+//       setAudioContext(null);
+//     } catch (error) {
+//       console.error('Voice input stop error:', error);
+//     }
+//   };
+
+//   // Render voice input interface
+//   return (
+//     <div className="flex items-center space-x-2">
+//       {/* Voice Input Toggle Button */}
+//       <button 
+//         onClick={isListening ? stopVoiceInput : startVoiceInput}
+//         className={`
+//           p-2 rounded-full transition-all duration-300
+//           ${isListening 
+//             ? 'bg-red-500 text-white animate-pulse' 
+//             : 'bg-blue-500 text-white hover:bg-blue-600'
+//           }
+//         `}
+//       >
+//         {isListening ? <MicOff size={20} /> : <Mic size={20} />}
+//       </button>
+
+//       {/* Audio Visualizer */}
+//       {isListening && (
+//         <div className="flex-grow">
+//           <VoiceVisualizer 
+//             ref={visualizerRef}
+//             width={200}
+//             height={50}
+//             className="bg-gray-700 rounded"
+//           />
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default VoiceInput;
+
+
+import React, { useState, useRef, useCallback } from 'react';
+import { Mic, MicOff } from 'lucide-react';
+import { useVoiceVisualizer, VoiceVisualizer } from 'react-voice-visualizer';
+
+const VoiceInput = ({ onVoiceInputComplete }) => {
+  const [isListening, setIsListening] = useState(false);
+  
+  // Refs and state for voice recording
+  const recorderControlsRef = useRef(null);
+  const {
+    startRecording, 
+    stopRecording, 
+    recordingBlob, 
+    isRecording,
+    clearRecording
+  } = useVoiceVisualizer();
+
+  // Effect to handle recorded blob
+  React.useEffect(() => {
+    const processRecording = async () => {
+      if (recordingBlob) {
+        try {
+          // Convert blob to text using Web Speech API
+          const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+          recognition.lang = 'en-US';
+          
+          recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript.trim();
+            if (transcript) {
+              onVoiceInputComplete(transcript);
+            }
+          };
+
+          // Create a file reader to convert blob to audio file
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            // You could potentially send the audio file to a transcription service here
+            console.log('Audio recorded:', reader.result);
+          };
+          reader.readAsDataURL(recordingBlob);
+
+          // Clear the recording after processing
+          clearRecording();
+        } catch (error) {
+          console.error('Transcription error:', error);
+        }
+      }
+    };
+
+    processRecording();
+  }, [recordingBlob, onVoiceInputComplete, clearRecording]);
+
+  // Handler for starting/stopping recording
+  const toggleRecording = useCallback(() => {
+    if (isRecording) {
+      stopRecording();
+      setIsListening(false);
+    } else {
+      startRecording();
+      setIsListening(true);
+    }
+  }, [isRecording, startRecording, stopRecording]);
+
+  return (
+    <div className="flex items-center space-x-4">
+      {/* Recording Button */}
+      <button 
+        onClick={toggleRecording}
+        className={`
+          p-2 rounded-full transition-all duration-300
+          ${isListening 
+            ? 'bg-red-500 text-white animate-pulse' 
+            : 'bg-blue-500 text-white hover:bg-blue-600'
+          }
+        `}
+      >
+        {isListening ? <MicOff size={20} /> : <Mic size={20} />}
+      </button>
+
+      {/* Voice Visualizer */}
+      {isListening && (
+        <VoiceVisualizer 
+          ref={recorderControlsRef}
+          width={200}
+          height={50}
+          className="bg-gray-700 rounded"
+        />
+      )}
+    </div>
+  );
+};
+
+export default VoiceInput;
\ No newline at end of file
diff --git a/frontend/src/pages/ChatPage.jsx b/frontend/src/pages/ChatPage.jsx
new file mode 100644
index 0000000..008edff
--- /dev/null
+++ b/frontend/src/pages/ChatPage.jsx
@@ -0,0 +1,136 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Client } from "@gradio/client";
+import ChatInput from '../components/ChatInput';
+import ChatMessage from '../components/ChatMessage';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RiseLoader } from 'react-spinners';
+import VoiceInput from '../components/VoiceInput';
+
+const ChatPage = () => {
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const chatContainerRef = useRef(null);
+
+  // Load messages from local storage on initial render
+  useEffect(() => {
+    const savedMessages = JSON.parse(localStorage.getItem('chatMessages') || '[]');
+    setMessages(savedMessages);
+  }, []);
+
+  // Scroll to bottom whenever messages change
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+    }
+    // Save messages to local storage
+    localStorage.setItem('chatMessages', JSON.stringify(messages));
+  }, [messages]);
+
+  const handleSendMessage = async (userMessage) => {
+    // Create a new message for the user
+    const newUserMessage = { text: userMessage, type: 'user' };
+    setMessages(prev => [...prev, newUserMessage]);
+
+    try {
+      setIsLoading(true);
+      
+      // Connect to Gradio client
+      const client = await Client.connect("4darsh-Dev/orchard_eyes-chatbot");
+      const result = await client.predict("/chat", { message: userMessage });
+      
+      // Add bot response
+      const botResponse = { text: result.data[0], type: 'bot' };
+      setMessages(prev => [...prev, botResponse]);
+    } catch (error) {
+      console.error("Error fetching response:", error);
+      const errorMessage = { 
+        text: "Sorry, there was an error processing your request.", 
+        type: 'bot' 
+      };
+      setMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+//   const handleVoiceInput = () => {
+//     // Implement voice input functionality
+//     if ('webkitSpeechRecognition' in window) {
+//       const recognition = new window.webkitSpeechRecognition();
+//       recognition.continuous = false;
+//       recognition.interimResults = false;
+//       recognition.lang = 'en-US';
+
+//       recognition.onresult = (event) => {
+//         const transcript = event.results[0][0].transcript;
+//         handleSendMessage(transcript);
+//       };
+
+//       recognition.start();
+//     } else {
+//       alert('Speech recognition not supported');
+//     }
+//   };
+
+    const handleVoiceInputComplete = (transcribedText) => {
+        // Send transcribed text to Gradio or process as needed
+        handleSendMessage(transcribedText);
+    };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-2xl bg-gray-800/60 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden"
+      >
+        {/* Chat Messages Container */}
+        <div 
+          ref={chatContainerRef}
+          className="h-[70vh] overflow-y-auto p-6 space-y-4"
+        >
+          <AnimatePresence>
+            {messages.map((msg, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: msg.type === 'user' ? 50 : -50 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.3 }}
+              >
+                <ChatMessage 
+                  message={msg.text} 
+                  type={msg.type} 
+                />
+              </motion.div>
+            ))}
+            {isLoading && (
+              <div className="text-center text-gray-300">
+                Generating response...
+                
+                <RiseLoader color={"#fff"} size={16} loading={isLoading}  />
+            </div>
+              
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Chat Input */}
+        <div className="p-4 border-t border-gray-700/50">
+          <ChatInput 
+            onSendMessage={handleSendMessage}
+            // onVoiceInput={handleVoiceInput}
+          />
+        </div>
+
+        {/* Voice Input Modal */}
+        <VoiceInput onVoiceInputComplete={handleVoiceInputComplete} />
+
+      </motion.div>
+    </div>
+
+    
+  );
+};
+
+export default ChatPage;
\ No newline at end of file