diff --git a/package.json b/package.json
index 9a6a055..70c9ff8 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@ethereum-attestation-service/eas-sdk": "^2.1.2",
     "@ethersproject/providers": "^5.7.2",
+    "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.32.0",
     "@types/node": "^14.6.1",
     "@wagmi/core": "^2.6.19",
@@ -56,6 +57,7 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "prettier": "^2.1.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8964d55..475f0c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2(utf-8-validate@5.0.10)
+  '@tailwindcss/forms':
+    specifier: ^0.5.7
+    version: 0.5.7(tailwindcss@3.4.3)
   '@tanstack/react-query':
     specifier: ^5.32.0
     version: 5.32.0(react@18.3.0)
@@ -91,6 +94,9 @@ devDependencies:
   prettier:
     specifier: ^2.1.1
     version: 2.8.8
+  tailwindcss:
+    specifier: ^3.4.3
+    version: 3.4.3
   typescript:
     specifier: ^5.4.5
     version: 5.4.5
@@ -113,7 +119,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: false
 
   /@ampproject/remapping@2.3.0:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@@ -2281,7 +2286,6 @@ packages:
       strip-ansi-cjs: /strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: false
 
   /@isaacs/ttlcache@1.4.1:
     resolution: {integrity: sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA==}
@@ -2602,17 +2606,14 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
-    dev: false
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: false
 
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: false
 
   /@jridgewell/source-map@0.3.6:
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
@@ -2623,14 +2624,12 @@ packages:
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
 
   /@leichtgewicht/ip-codec@2.0.5:
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
@@ -2992,12 +2991,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: false
 
   /@nodelib/fs.stat@2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: false
 
   /@nodelib/fs.walk@1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -3005,7 +3002,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
-    dev: false
 
   /@nomicfoundation/edr-darwin-arm64@0.3.5:
     resolution: {integrity: sha512-gIXUIiPMUy6roLHpNlxf15DumU7/YhffUf7XIB+WUjMecaySfTGyZsTGnCMJZqrDyiYqWPyPKwCV/2u/jqFAUg==}
@@ -3376,7 +3372,6 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: false
     optional: true
 
   /@pmmmwh/react-refresh-webpack-plugin@0.5.11(react-refresh@0.11.0)(webpack-dev-server@4.15.2)(webpack@5.91.0):
@@ -4299,6 +4294,15 @@ packages:
       - supports-color
     dev: false
 
+  /@tailwindcss/forms@0.5.7(tailwindcss@3.4.3):
+    resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.4.3
+    dev: false
+
   /@tanstack/query-core@5.32.0:
     resolution: {integrity: sha512-Z3flEgCat55DRXU5UMwYU1U+DgFZKA3iufyOKs+II7iRAo0uXkeU7PH5e6sOH1CGEag0IpKmZxlUFpCg6roSKw==}
     dev: false
@@ -5572,12 +5576,10 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: false
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: false
 
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
@@ -5591,7 +5593,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: false
 
   /ansi-styles@5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
@@ -5601,11 +5602,9 @@ packages:
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: false
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -5613,7 +5612,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: false
 
   /appdirsjs@1.2.7:
     resolution: {integrity: sha512-Quji6+8kLBC3NnBeo14nPDq0+2jUs5s3/xEye+udFHumHhRk4M7aAMXp/PBJqkKYGuuyR9M/6Dq7d2AViiGmhw==}
@@ -5621,7 +5619,6 @@ packages:
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
 
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -6042,7 +6039,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
 
   /base-x@3.0.9:
     resolution: {integrity: sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==}
@@ -6080,7 +6076,6 @@ packages:
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
-    dev: false
 
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
@@ -6166,14 +6161,12 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: false
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: false
 
   /brorand@1.1.0:
     resolution: {integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==}
@@ -6319,7 +6312,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: false
 
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -6412,7 +6404,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: false
 
   /chrome-launcher@0.15.2:
     resolution: {integrity: sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ==}
@@ -6569,7 +6560,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: false
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -6577,7 +6567,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
 
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
@@ -6613,7 +6602,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: false
 
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
@@ -6873,7 +6861,6 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: false
 
   /crossws@0.2.4:
     resolution: {integrity: sha512-DAxroI2uSOgUKLz00NX6A8U/8EE3SZHmIND+10jkVSaypvyt57J5JEOxAQOL6lQxyzi/wZbTIwssU1uy69h5Vg==}
@@ -7051,7 +7038,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: false
 
   /cssnano-preset-default@5.2.14(postcss@8.4.38):
     resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==}
@@ -7381,7 +7367,6 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
 
   /diff-sequences@27.5.1:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
@@ -7406,7 +7391,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
 
   /dns-packet@5.6.1:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
@@ -7519,7 +7503,6 @@ packages:
 
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: false
 
   /eciesjs@0.3.18:
     resolution: {integrity: sha512-RQhegEtLSyIiGJmFTZfvCTHER/fymipXFVx6OwSRYD6hOuy+6Kjpk0dGvIfP9kxn/smBpxQy71uxpGO406ITCw==}
@@ -7581,11 +7564,9 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: false
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
 
   /emojis-list@3.0.0:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
@@ -8480,7 +8461,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: false
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -8510,7 +8490,6 @@ packages:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
-    dev: false
 
   /faye-websocket@0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
@@ -8559,7 +8538,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: false
 
   /filter-obj@1.1.0:
     resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
@@ -8695,7 +8673,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
-    dev: false
 
   /fork-ts-checker-webpack-plugin@6.5.3(eslint@8.57.0)(typescript@5.4.5)(webpack@5.91.0):
     resolution: {integrity: sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==}
@@ -8840,12 +8817,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-    dev: false
 
   /function.prototype.name@1.1.6:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
@@ -8924,14 +8899,12 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: false
 
   /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: false
 
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
@@ -8947,7 +8920,6 @@ packages:
       minimatch: 9.0.4
       minipass: 7.0.4
       path-scurry: 1.10.2
-    dev: false
 
   /glob@7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
@@ -9196,7 +9168,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
-    dev: false
 
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
@@ -9629,7 +9600,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.3.0
-    dev: false
 
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -9648,7 +9618,6 @@ packages:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
       hasown: 2.0.2
-    dev: false
 
   /is-data-view@1.0.1:
     resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
@@ -9684,7 +9653,6 @@ packages:
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /is-finalizationregistry@1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
@@ -9700,7 +9668,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: false
 
   /is-generator-fn@2.1.0:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
@@ -9719,7 +9686,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: false
 
   /is-hex-prefixed@1.0.0:
     resolution: {integrity: sha512-WvtOiug1VFrE9v1Cydwm+FnXd3+w9GaeVUss5W4v/SLy3UW00vP+6iNF2SdnfiBoLy4bTqVdkftNGTUeOFVsbA==}
@@ -9763,7 +9729,6 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: false
 
   /is-obj@1.0.1:
     resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
@@ -9921,7 +9886,6 @@ packages:
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
 
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
@@ -10008,7 +9972,6 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: false
 
   /jake@10.8.7:
     resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
@@ -10645,7 +10608,6 @@ packages:
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
-    dev: false
 
   /joi@17.13.0:
     resolution: {integrity: sha512-9qcrTyoBmFZRNHeVP4edKqIUEgFzq7MHvTNSDuHSqkpOPtiBkgNgcmTSqmiw1kw9tdKaiddvIDv/eCJDxmqWCA==}
@@ -10963,16 +10925,13 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: false
 
   /lilconfig@3.1.1:
     resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
     engines: {node: '>=14'}
-    dev: false
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
 
   /listhen@1.7.2:
     resolution: {integrity: sha512-7/HamOm5YD9Wb7CFgAZkKgVPA96WwhcTQoqtm2VTZGVbVVn3IWKRBTgrU7cchA3Q8k9iCsG8Osoi9GX4JsGM9g==}
@@ -11136,7 +11095,6 @@ packages:
   /lru-cache@10.2.1:
     resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
     engines: {node: 14 || >=16.14}
-    dev: false
 
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -11241,7 +11199,6 @@ packages:
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: false
 
   /methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@@ -11469,7 +11426,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: false
 
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -11522,6 +11478,11 @@ packages:
       webpack: 5.91.0
     dev: false
 
+  /mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: false
+
   /minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
     dev: false
@@ -11555,7 +11516,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: false
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -11564,7 +11524,6 @@ packages:
   /minipass@7.0.4:
     resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: false
 
   /mipd@0.0.5(typescript@5.4.5)(utf-8-validate@5.0.10):
     resolution: {integrity: sha512-gbKA784D2WKb5H/GtqEv+Ofd1S9Zj+Z/PGDIl1u1QAbswkxD28BQ5bSXQxkeBzPBABg1iDSbiwGG1XqlOxRspA==}
@@ -11687,13 +11646,11 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: false
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -11790,7 +11747,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -11852,12 +11808,10 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: false
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -12212,7 +12166,6 @@ packages:
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: false
 
   /path-key@4.0.0:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
@@ -12221,7 +12174,6 @@ packages:
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
 
   /path-scurry@1.10.2:
     resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
@@ -12229,7 +12181,6 @@ packages:
     dependencies:
       lru-cache: 10.2.1
       minipass: 7.0.4
-    dev: false
 
   /path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@@ -12273,17 +12224,14 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: false
 
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
@@ -12331,7 +12279,6 @@ packages:
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: false
 
   /pkg-dir@3.0.0:
     resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
@@ -12650,7 +12597,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
-    dev: false
 
   /postcss-initial@4.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
@@ -12668,7 +12614,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.38
-    dev: false
 
   /postcss-lab-function@4.2.1(postcss@8.4.38):
     resolution: {integrity: sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==}
@@ -12696,7 +12641,6 @@ packages:
       lilconfig: 3.1.1
       postcss: 8.4.38
       yaml: 2.4.1
-    dev: false
 
   /postcss-loader@6.2.1(postcss@8.4.38)(webpack@5.91.0):
     resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
@@ -12847,7 +12791,6 @@ packages:
     dependencies:
       postcss: 8.4.38
       postcss-selector-parser: 6.0.16
-    dev: false
 
   /postcss-nesting@10.2.0(postcss@8.4.38):
     resolution: {integrity: sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==}
@@ -13126,7 +13069,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: false
 
   /postcss-svgo@5.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
@@ -13151,7 +13093,6 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
 
   /postcss@7.0.39:
     resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
@@ -13177,7 +13118,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.2.0
-    dev: false
 
   /preact@10.20.2:
     resolution: {integrity: sha512-S1d1ernz3KQ+Y2awUxKakpfOg2CEmJmwOP+6igPx6dgr6pgDvenqYviyokWso2rhHvGtTlWWnJDa7RaPbQerTg==}
@@ -13377,7 +13317,6 @@ packages:
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
 
   /queue@6.0.2:
     resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
@@ -13814,7 +13753,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: false
 
   /readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
@@ -13842,7 +13780,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: false
 
   /readline@1.3.0:
     resolution: {integrity: sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==}
@@ -14037,7 +13974,6 @@ packages:
       is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: false
 
   /resolve@2.0.0-next.5:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
@@ -14064,7 +14000,6 @@ packages:
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
 
   /rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
@@ -14143,7 +14078,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: false
 
   /safe-array-concat@1.1.2:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
@@ -14456,12 +14390,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
-    dev: false
 
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: false
 
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
@@ -14484,7 +14416,6 @@ packages:
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: false
 
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
@@ -14572,7 +14503,6 @@ packages:
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /source-map-loader@3.0.2(webpack@5.91.0):
     resolution: {integrity: sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==}
@@ -14739,7 +14669,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: false
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -14748,7 +14677,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: false
 
   /string.prototype.matchall@4.0.11:
     resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
@@ -14828,14 +14756,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: false
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: false
 
   /strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
@@ -14966,7 +14892,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: false
 
   /sudo-prompt@9.2.1:
     resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==}
@@ -15009,7 +14934,6 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: false
 
   /svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
@@ -15088,7 +15012,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: false
 
   /tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
@@ -15183,13 +15106,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: false
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: false
 
   /thread-stream@0.15.2:
     resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
@@ -15237,7 +15158,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: false
 
   /toggle-selection@1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
@@ -15281,7 +15201,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
 
   /tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
@@ -15665,7 +15584,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
 
   /util.promisify@1.0.1:
     resolution: {integrity: sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==}
@@ -16155,7 +16073,6 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
-    dev: false
 
   /widest-line@3.1.0:
     resolution: {integrity: sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==}
@@ -16354,7 +16271,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: false
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -16363,7 +16279,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: false
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -16535,7 +16450,6 @@ packages:
     resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==}
     engines: {node: '>= 14'}
     hasBin: true
-    dev: false
 
   /yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
diff --git a/src/components/allLists.js b/src/components/allLists.js
index 116a9ef..b9cece4 100644
--- a/src/components/allLists.js
+++ b/src/components/allLists.js
@@ -119,3 +119,5 @@ export default function AllLists() {
     </StyledAllLists>
   );
 }
+
+
diff --git a/src/index.js b/src/index.js
index 417cf6a..a494609 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
+import './output.css'
 import List from './pages/list'
 import Home from './pages/home'
 import Why from './pages/why'
@@ -8,6 +9,7 @@ import SubmitForm from './pages/form'
 import * as serviceWorker from './serviceWorker'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import { Web3Provider } from './utils/web3wallet'
+import PrettyForm from './pages/prettyform'
 
 ReactDOM.render(
     <Web3Provider>
@@ -15,7 +17,8 @@ ReactDOM.render(
       <Routes> 
         <Route exact path="/" element={<Home />} />
         <Route path="/schemas" element={<List />} />
-        <Route path="/attest" element={<SubmitForm />} />
+        <Route path="/submit" element={<SubmitForm />} />
+        <Route path="/attest" element={<PrettyForm/>} />
         <Route path="/why" element={<Why />} />
       </Routes>
     </Router>
diff --git a/src/pages/form.js b/src/pages/form.js
index 7e7be51..77797e5 100644
--- a/src/pages/form.js
+++ b/src/pages/form.js
@@ -1,15 +1,15 @@
-import React, { useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components';
 import { useForm, useFieldArray } from 'react-hook-form';
 import Header from '../components/header'
 import '../index.css';
-import { ConnectKitButton } from "connectkit"; 
+import { ConnectKitButton } from "connectkit";
 import { eas, provider, schemaEncoder } from '../utils/initeas';
 import { useEthersSigner, useSigner } from '../utils/wagmiutils';
 import { useAccount, useNetwork } from "wagmi";
 import { ethers } from "ethers";
 
-const Content = styled.section`
+export const Content = styled.section`
   display: flex; // Use flexbox instead of grid
   justify-content: center; // Horizontally center the content
   align-items: center; // Vertically center the content (if needed)
@@ -177,23 +177,20 @@ const ToggleButton = styled.button`
 
 function SubmitForm() {
 
-    const { address, isConnected, chain } = useAccount();
-    const signer = useEthersSigner();
-
-    
-
-    const { register, handleSubmit, formState: { errors }, control, watch } = useForm({
-        defaultValues: {
-          schemaUids: [{ value: "" }],
-          schemaDescriptions: [{ value: "" }],
-          networkIds: [{ value: "" }],
-          issuerName: "",
-          issuerDescription: "",
-          logo: "",
-          apiDocsUri: "",
-        }
-      });
-    
+  const { address, isConnected, chain } = useAccount();
+  const signer = useEthersSigner();
+  const { register, handleSubmit, formState: { errors }, control, watch } = useForm({
+    defaultValues: {
+      schemaUids: [{ value: "" }],
+      schemaDescriptions: [{ value: "" }],
+      networkIds: [{ value: "" }],
+      issuerName: "",
+      issuerDescription: "",
+      logo: "",
+      apiDocsUri: "",
+    }
+  });
+
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [])
@@ -219,8 +216,8 @@ function SubmitForm() {
 
   const onSubmit = async data => {
 
-    if (!isConnected || !chain ) {
-        alert('Please connect your wallet to make an attestation')
+    if (!isConnected || !chain) {
+      alert('Please connect your wallet to make an attestation')
 
     }
     eas.connect(signer);
@@ -237,25 +234,25 @@ function SubmitForm() {
 
     const schemaUID = "0x25eb07102ee3f4f86cd0b0c4393457965b742b8acc94aa3ddbf2bc3f62ed1381";
     const tx = await eas.attest({
-        schema: schemaUID,
-        data: {
-          recipient: data.recipient? data.recipient : address , // default is connected wallet address
-          expirationTime: data.expirationTime? data.expirationTime : 0,
-          revocable: isRevocable? isRevocable : true, // Be aware that if your schema is not revocable, this MUST be false
-          data: encodedData,
-        },
-      });
+      schema: schemaUID,
+      data: {
+        recipient: data.recipient ? data.recipient : address, // default is connected wallet address
+        expirationTime: data.expirationTime ? data.expirationTime : 0,
+        revocable: isRevocable ? isRevocable : true, // Be aware that if your schema is not revocable, this MUST be false
+        data: encodedData,
+      },
+    });
 
 
     console.log("Form Submitted")
     console.log(encodedData);
 
     const newAttestationUID = await tx.wait();
-    if (newAttestationUID !== ''){
-        alert("New attestation UID Created:", newAttestationUID);
-        console.log("New attestation UID:", newAttestationUID);
+    if (newAttestationUID !== '') {
+      alert("New attestation UID Created:", newAttestationUID);
+      console.log("New attestation UID:", newAttestationUID);
     }
-       
+
   };
 
 
@@ -263,130 +260,129 @@ function SubmitForm() {
 
   return (
     <div className="app">
-    <Header back={true}/>
-    <Content>
-    <Container>
-      <Title>Attest to DAO Schema Registry</Title>
-      <WalletContainer> <ConnectKitButton /> </WalletContainer>
-      
-      <Form onSubmit={handleSubmit(onSubmit)}>
-
-        
-        <Label>Recipient</Label>
-        <Input {...register("recipient")} placeholder="Recipient (optional)" />
-        
-        {/* Dynamic Schema UID Fields */}
-        <Label>Schema UID</Label>
-        {schemaUidFields.map((item, index) => (
-          <FieldGroup key={item.id}>
-            <Input 
-              {...register(`schemaUids.${index}.value`)} 
-              placeholder="Schema UID 0x..." 
-            />
-            {index > 0 && (
-              <RemoveButton 
-                type="button" 
-                onClick={() => removeSchemaUid(index)}
-              >
-                Remove
-              </RemoveButton>
+      <Header back={true} />
+      <Content>
+        <Container>
+          <Title>Attest to DAO Schema Registry</Title>
+
+          <Form onSubmit={handleSubmit(onSubmit)}>
+
+
+            <Label>Recipient</Label>
+            <Input {...register("recipient")} placeholder="Recipient (optional)" />
+
+            {/* Dynamic Schema UID Fields */}
+            <Label>Schema UID</Label>
+            {schemaUidFields.map((item, index) => (
+              <FieldGroup key={item.id}>
+                <Input
+                  {...register(`schemaUids.${index}.value`)}
+                  placeholder="Schema UID 0x..."
+                />
+                {index > 0 && (
+                  <RemoveButton
+                    type="button"
+                    onClick={() => removeSchemaUid(index)}
+                  >
+                    Remove
+                  </RemoveButton>
+                )}
+              </FieldGroup>
+            ))}
+            <AddButton
+              type="button"
+              onClick={() => appendSchemaUid({ value: "" })}
+            >
+              Add Schema UID
+            </AddButton>
+
+            {/* Dynamic Schema Description Fields */}
+            <Label>Schema Description</Label>
+            {schemaDescFields.map((item, index) => (
+              <FieldGroup key={item.id}>
+                <TextArea
+                  {...register(`schemaDescriptions.${index}.value`)}
+                  placeholder="Description"
+                />
+                {index > 0 && (
+                  <RemoveButton type="button" onClick={() => removeSchemaDesc(index)}>
+                    Remove
+                  </RemoveButton>
+                )}
+              </FieldGroup>
+            ))}
+            <AddButton type="button" onClick={() => appendSchemaDesc({ value: "" })}>
+              Add Schema Description
+            </AddButton>
+
+            {/* Dynamic Network ID Fields */}
+            <Label>Network ID</Label>
+            {networkIdFields.map((item, index) => (
+              <FieldGroup key={item.id}>
+                <Input
+                  {...register(`networkIds.${index}.value`)}
+                  placeholder="Network ID"
+                />
+                {index > 0 && (
+                  <RemoveButton type="button" onClick={() => removeNetworkId(index)}>
+                    Remove
+                  </RemoveButton>
+                )}
+              </FieldGroup>
+            ))}
+            <AddButton type="button" onClick={() => appendNetworkId({ value: "" })}>
+              Add Network ID
+            </AddButton>
+
+            <Label>Issuer Name</Label>
+            <Input {...register("issuerName", { required: true })} placeholder="Issuer Name" />
+            {errors.issuerName && <Error>Issuer name is required.</Error>}
+
+            <Label>Issuer Description</Label>
+            <TextArea {...register("issuerDescription", { required: true })} placeholder="Issuer Description" />
+
+            <Label>Logo URI</Label>
+            <Input {...register("logo")} placeholder="https://ipfs.io/ipfs/cwpdfdfffff..." />
+
+            <Label>API Docs URI</Label>
+            <Input {...register("apiDocsUri")} placeholder="https://docs.project.com" />
+
+            {/* Advanced Options Toggle */}
+            <Button type="button" onClick={() => setShowAdvanced(!showAdvanced)}>
+              {showAdvanced ? 'Hide Advanced Options' : 'Show Advanced Options'}
+            </Button>
+
+            {/* Advanced Options Section */}
+            {showAdvanced && (
+              <AdvancedOptionsContainer>
+                <Label>Expiration Time (Optional)</Label>
+                <Input {...register("expirationTime")} placeholder="Expiration time" />
+
+                <Label>Referenced Attestation (Optional)</Label>
+                <Input {...register("referencedAttestation")} placeholder="Referenced attestation UID" />
+
+                <Label>Is Revocable?</Label>
+                <div>
+                  <ToggleButton
+                    className={isRevocable ? 'active' : ''}
+                    onClick={() => setIsRevocable(true)}
+                  >
+                    Yes
+                  </ToggleButton>
+                  <ToggleButton
+                    className={!isRevocable ? 'active' : ''}
+                    onClick={() => setIsRevocable(false)}
+                  >
+                    No
+                  </ToggleButton>
+                </div>
+              </AdvancedOptionsContainer>
             )}
-          </FieldGroup>
-        ))}
-        <AddButton 
-          type="button" 
-          onClick={() => appendSchemaUid({ value: "" })}
-        >
-          Add Schema UID
-        </AddButton>
-
-        {/* Dynamic Schema Description Fields */}
-        <Label>Schema Description</Label>
-        {schemaDescFields.map((item, index) => (
-          <FieldGroup key={item.id}>
-            <TextArea 
-              {...register(`schemaDescriptions.${index}.value`)} 
-              placeholder="Description" 
-            />
-            {index > 0 && (
-              <RemoveButton type="button" onClick={() => removeSchemaDesc(index)}>
-                Remove
-              </RemoveButton>
-            )}
-          </FieldGroup>
-        ))}
-        <AddButton type="button" onClick={() => appendSchemaDesc({ value: "" })}>
-          Add Schema Description
-        </AddButton>
-
-        {/* Dynamic Network ID Fields */}
-        <Label>Network ID</Label>
-        {networkIdFields.map((item, index) => (
-          <FieldGroup key={item.id}>
-            <Input 
-              {...register(`networkIds.${index}.value`)} 
-              placeholder="Network ID" 
-            />
-            {index > 0 && (
-              <RemoveButton type="button" onClick={() => removeNetworkId(index)}>
-                Remove
-              </RemoveButton>
-            )}
-          </FieldGroup>
-        ))}
-        <AddButton type="button" onClick={() => appendNetworkId({ value: "" })}>
-          Add Network ID
-        </AddButton>
-
-        <Label>Issuer Name</Label>
-        <Input {...register("issuerName", { required: true })} placeholder="Issuer Name" />
-        {errors.issuerName && <Error>Issuer name is required.</Error>}
-        
-        <Label>Issuer Description</Label>
-        <TextArea {...register("issuerDescription")} placeholder="Issuer Description" />
-        
-        <Label>Logo URI</Label>
-        <Input {...register("logo")} placeholder="https://ipfs.io/ipfs/cwpdfdfffff..." />
-
-        <Label>API Docs URI</Label>
-        <Input {...register("apiDocsUri")} placeholder="https://docs.project.com" />
-
-        {/* Advanced Options Toggle */}
-        <Button type="button" onClick={() => setShowAdvanced(!showAdvanced)}>
-          {showAdvanced ? 'Hide Advanced Options' : 'Show Advanced Options'}
-        </Button>
-
-        {/* Advanced Options Section */}
-        {showAdvanced && (
-          <AdvancedOptionsContainer>
-            <Label>Expiration Time (Optional)</Label>
-            <Input {...register("expirationTime")} placeholder="Expiration time" />
-
-            <Label>Referenced Attestation (Optional)</Label>
-            <Input {...register("referencedAttestation")} placeholder="Referenced attestation UID" />
-
-            <Label>Is Revocable?</Label>
-            <div>
-              <ToggleButton 
-                className={isRevocable ? 'active' : ''} 
-                onClick={() => setIsRevocable(true)}
-              >
-                Yes
-              </ToggleButton>
-              <ToggleButton 
-                className={!isRevocable ? 'active' : ''} 
-                onClick={() => setIsRevocable(false)}
-              >
-                No
-              </ToggleButton>
-            </div>
-          </AdvancedOptionsContainer>
-        )}
-
-        <Button type="submit" style={{marginTop: "10px", backgroundColor: "#232b2b"}}>Submit</Button>
-      </Form>
-    </Container>
-    </Content>
+
+            <Button type="submit" style={{ marginTop: "10px", backgroundColor: "#232b2b" }}>Submit</Button>
+          </Form>
+        </Container>
+      </Content>
     </div>
   );
 }
diff --git a/src/pages/prettyform.js b/src/pages/prettyform.js
new file mode 100644
index 0000000..a1a8d08
--- /dev/null
+++ b/src/pages/prettyform.js
@@ -0,0 +1,450 @@
+import Header from '../components/header'
+import { ConnectKitButton } from "connectkit";
+import React, { useEffect, useState } from 'react'
+import { useForm, useFieldArray } from 'react-hook-form';
+import { eas, provider, schemaEncoder } from '../utils/initeas';
+import { useEthersSigner, useSigner } from '../utils/wagmiutils';
+import { useAccount, useNetwork } from "wagmi";
+import { ethers, isBytesLike } from "ethers";
+
+const ToggleButton = ({ isActive, onToggle }) => {
+    return (
+        <button
+            onClick={onToggle}
+            className={`transition-colors duration-300 ${isActive ? 'bg-blue-500' : 'bg-gray-300'} rounded-full p-2`}
+        >
+            {isActive ? 'ON' : 'OFF'}
+        </button>
+    );
+};
+
+
+
+export default function PrettyForm() {
+
+    const { address, isConnected, chain } = useAccount();
+    const signer = useEthersSigner();
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleToggle = () => {
+        setIsChecked(!isChecked);
+    };
+    const { register, handleSubmit, formState: { errors }, control, watch } = useForm({
+        defaultValues: {
+            schemaUids: [{ value: "" }],
+            schemaDescriptions: [{ value: "" }],
+            networkIds: [{ value: "" }],
+            issuerName: "",
+            issuerDescription: "",
+            logo: "",
+            apiDocsUri: "",
+        }
+    });
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [])
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const [isRevocable, setIsRevocable] = useState(false);
+
+    const { fields: schemaUidFields, append: appendSchemaUid, remove: removeSchemaUid } = useFieldArray({
+        control,
+        name: 'schemaUids'
+    });
+
+    const { fields: schemaDescFields, append: appendSchemaDesc, remove: removeSchemaDesc } = useFieldArray({
+        control,
+        name: 'schemaDescriptions'
+    });
+
+    const { fields: networkIdFields, append: appendNetworkId, remove: removeNetworkId } = useFieldArray({
+        control,
+        name: 'networkIds'
+    });
+
+    const onSubmit = async data => {
+        console.log(JSON.stringify(data, null, 2));
+        alert(JSON.stringify(data, null, 2)); // Pretty print the JSON data
+
+        if (!isConnected || !chain) {
+            alert('Please connect your wallet to make an attestation')
+
+        }
+        eas.connect(signer);
+
+        const encodedData = schemaEncoder.encodeData([
+            { name: "schemaUID", value: data.schemaUids.map(uid => uid.value), type: "bytes32[]" },
+            { name: "schemaDescription", value: data.schemaDescriptions.map(desc => desc.value), type: "string[]" },
+            { name: "networkID", value: data.networkIds.map(id => parseInt(id.value)), type: "uint256[]" },
+            { name: "issuerName", value: data.issuerName, type: "string" },
+            { name: "issuerDescription", value: data.issuerDescription, type: "string" },
+            { name: "logo", value: data.logoUri, type: "string" },
+            { name: "apiDocsURI", value: data.apiDocsUri, type: "string" },
+        ]);
+
+        const schemaUID = "0x25eb07102ee3f4f86cd0b0c4393457965b742b8acc94aa3ddbf2bc3f62ed1381";
+        const tx = await eas.attest({
+            schema: schemaUID,
+            data: {
+                recipient: data.recipient ? data.recipient : address, // default is connected wallet address
+                expirationTime: 0,
+                revocable: data.isRevoked ? data.isRevoked : true,
+                // refUID: (data.referencedAttestation && isBytesLike(data.referencedAttestation))
+                //     ? data.referencedAttestation : "0x0000000000000000000000000000000000000000000000000000000000000000",
+                data: encodedData,
+            },
+        });
+
+        console.log("Form Submitted")
+        console.log(encodedData);
+
+        const newAttestationUID = await tx.wait();
+        if (newAttestationUID !== '') {
+            alert("New attestation UID Created:", newAttestationUID);
+            console.log("New attestation UID:", newAttestationUID);
+        }
+
+    };
+
+    const addAllFields = () => {
+        appendSchemaUid({ value: '' });
+        appendSchemaDesc({ value: '' });
+        appendNetworkId({ value: '' });
+    };
+    const removeAllFieldsAtIndex = () => {
+        removeSchemaUid(-1);
+        removeSchemaDesc(-1);
+        removeNetworkId(-1);
+    };
+
+
+    return (
+        <div className="app">
+            <Header back={true} />
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <div className="space-y-12 mt-28 px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12">
+                    <div className="border-b border-gray-900/10 pb-12">
+                        <h2 className="text-base font-semibold leading-7 text-gray-900">Register your DAO Schema</h2>
+                        <p className="mt-1 text-sm leading-6 text-gray-600">
+                            Connect your wallet to get started.
+                            All your DAO Schema registrations will be displayed on the explorer under Issuer profile.
+                        </p>
+                        <div className="flex mt-10">
+                            <ConnectKitButton />
+                        </div>
+
+                    </div>
+
+                    <div className="border-b border-gray-900/10 pb-12">
+                        <h2 className="text-base font-semibold leading-7 text-gray-900">Add your DAO Schemas</h2>
+                        <p className="mt-1 text-sm leading-6 text-gray-600">Provide Schema UID, Description and the coresponding Network ID</p>
+
+                        <div className="mt-10 ">
+                            {networkIdFields.map((item, index) => (
+
+                                <div key={item.id} className="grid grid-cols-1 gap-y-8">
+                                    <h2 className="text-base font-semibold leading-7 text-gray-900 mt-10">Schema {index}</h2>
+
+                                    <div>
+                                        <label htmlFor={`networkIds.${index}.value`} className="text-sm font-medium text-gray-900">Network ID</label>
+                                        <div class="mt-2">
+                                            <select {...register(`networkIds.${index}.value`, { required: true })} className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-black-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                                                <option value="1">Ethereum</option>
+                                                <option value="10">Optimism</option>
+                                                <option value="137">Polygon</option>
+                                            </select>
+                                        </div>
+                                        {errors.networkIds?.[index]?.value && <p>{errors.networkIds[index].value.message}</p>}
+
+                                    </div>
+
+                                    <div>
+                                        <label htmlFor={`schemaUids.${index}.value`} className="text-sm font-medium text-gray-900">Schema UID</label>
+                                        <input {...register(`schemaUids.${index}.value`, {
+                                            required: "Schema UID is required",
+                                            pattern: {
+                                                value: /^0x[0-9A-Fa-f]{64}$/,
+                                                message: "Schema UID must be a 64-character hexadecimal value starting with 0x"
+                                            }
+                                        })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
+                                        {errors.schemaUids?.[index]?.value && <p>{errors.schemaUids[index].value.message}</p>}
+                                    </div>
+                                    <div>
+                                        <label htmlFor={`schemaDescriptions.${index}.value`} className="text-sm font-medium text-gray-900">Schema Description</label>
+                                        <textarea {...register(`schemaDescriptions.${index}.value`, {
+                                            required: true, minLength: {
+                                                value: 20,
+                                                message: "Schema description must be at least 20 characters"
+                                            }
+                                        })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" rows="3"></textarea>
+                                        {errors.schemaDescriptions?.[index]?.value && <p>{errors.schemaDescriptions[index].value.message}</p>}
+                                    </div>
+                                </div>
+                            ))}
+
+                            <div className="mt-6 flex items-center justify-end gap-x-6 mb-8">
+                                <button type="button" onClick={removeAllFieldsAtIndex}
+                                    className="text-sm font-semibold leading-6 text-gray-900">
+                                    Remove
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={addAllFields}
+                                    className="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black-600"
+                                >
+                                    Add
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="border-b border-gray-900/10 pb-12">
+                        <h2 className="text-base font-semibold leading-7 text-gray-900">Issuer Infromation</h2>
+                        <p className="mt-1 text-sm leading-6 text-gray-600">
+                            Issuer Infromation is used to create Issuer profile, please keep the Issuer info consistent if you are registering multiple times.
+                        </p>
+
+                        <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+
+                            <div className="sm:col-span-3">
+                                <label htmlFor="issuerName" className="block text-sm font-medium leading-6 text-gray-900">
+                                    Issuer Name
+                                </label>
+                                <div className="mt-2">
+                                    <input
+                                        type="text"
+                                        name="issuerName"
+                                        id="issuerName"
+                                        {...register("issuerName", {
+                                            required: true,
+                                            minLength: {
+                                                value: 3,
+                                                message: "Issuer name must be at least 3 characters"
+                                            }
+                                        })}
+                                        autoComplete="issuer-name"
+                                        className="block w-full rounded-md border-0 py-1.5 pl-3 px-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black-600 sm:text-sm sm:leading-6"
+                                    />
+                                    {errors.issuerName && <p>{errors.issuerName.message}</p>}
+
+                                </div>
+                            </div>
+
+                            <div className="col-span-full">
+                                <label htmlFor="issuerDescription" className="block text-sm font-medium leading-6 text-gray-900">
+                                    Issuer Description
+                                </label>
+                                <div className="mt-2">
+                                    <textarea
+                                        id="issuerDescription"
+                                        name="issuerDescription"
+                                        rows={3}
+                                        {...register("issuerDescription", {
+                                            required: true, minLength: {
+                                                value: 20,
+                                                message: "Issuer description must be at least 20 characters"
+                                            }
+                                        })}
+                                        className="block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black-600 sm:text-sm sm:leading-6"
+                                        defaultValue={''}
+                                    />
+                                    {errors.issuerDescription && <p>{errors.issuerDescription.message}</p>}
+
+                                </div>
+                                <p className="mt-3 text-sm leading-6 text-gray-600">Write a few sentences describing the issuer.</p>
+                            </div>
+
+                            <div className="sm:col-span-4">
+                                <label htmlFor="logoUri" className="block text-sm font-medium leading-6 text-gray-900">
+                                    Logo URI
+                                </label>
+                                <div className="mt-2">
+                                    <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-black-600 sm:max-w-md">
+                                        <input
+                                            type="text"
+                                            name="logoUri"
+                                            id="logoUri"
+                                            {...register("logoUri", {
+                                                required: true, pattern: {
+                                                    value: /^(https?|chrome):\/\/[^\s$.?#].[^\s]*$/,
+                                                    message: 'Invalid URI' // custom message
+                                                }
+                                            })}
+                                            autoComplete="logoUri"
+                                            className="block flex-1 border-0 bg-transparent py-1.5 pl-3 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+                                            placeholder="https://example.com/logo.png"
+                                        />
+                                    </div>
+                                    {errors.logoUri && <p>{errors.logoUri.message}</p>}
+
+                                </div>
+                            </div>
+
+                            <div className="sm:col-span-4">
+                                <label htmlFor="apiDocsUri" className="block text-sm font-medium leading-6 text-gray-900">
+                                    API Docs URI
+                                </label>
+                                <div className="mt-2">
+                                    <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-black-600 sm:max-w-md">
+                                        <input
+                                            type="text"
+                                            name="apiDocsUri"
+                                            id="apiDocsUri"
+                                            {...register("apiDocsUri", {
+                                                required: true, pattern: {
+                                                    value: /^(https?|chrome):\/\/[^\s$.?#].[^\s]*$/,
+                                                    message: 'Invalid URI' // custom message
+                                                }
+                                            })}
+                                            autoComplete="apiDocsUri"
+                                            className="block flex-1 border-0 bg-transparent py-1.5 pl-3 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+                                            placeholder="https://example.com/docs"
+                                        />
+                                    </div>
+                                    {errors.apiDocsUri && <p>{errors.apiDocsUri.message}</p>}
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                    <div className="border-b border-gray-900/10 pb-12">
+                        <div className="mt-2 flex items-center flex-start gap-x-6 mb-8">
+
+                            <button
+                                type="button"
+                                onClick={() => setShowAdvanced(!showAdvanced)}
+                                className="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black-600"
+                            >
+                                {showAdvanced ? 'Hide Additional Settings' : 'Show Additional Settings'}
+                            </button>
+                        </div>
+
+                        {showAdvanced && (<div>
+                            <h2 className="text-base font-semibold leading-7 text-gray-900">Additional Settings</h2>
+                            <p className="mt-1 text-sm leading-6 text-gray-600">
+                                By default, expiry is not set, recipient is self, referenced attestations are none and revocable is false.
+                            </p>
+
+                            <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+
+                                <div className="sm:col-span-3">
+                                    <label htmlFor="expirationTime" className="block text-sm font-medium leading-6 text-gray-900">
+                                        Expiration Time
+                                    </label>
+                                    <div className="mt-2">
+                                        <input
+                                            type="text"
+                                            name="expirationTime"
+                                            id="expirationTime"
+                                            {...register("expirationTime", {
+                                                valueAsNumber: true, // Ensures the input is parsed as a number
+                                                pattern: {
+                                                    value: /^[0-9]*$/, // Regex to allow only numbers
+                                                    message: "Expiration time must be a numeric value" // Error message if regex fails
+                                                }
+                                            })}
+                                            autoComplete="expirationTime"
+                                            placeholder='Time in secs'
+                                            className="block w-full rounded-md border-0 py-1.5 pl-3 px-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black-600 sm:text-sm sm:leading-6"
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* <div className="col-span-full">
+                                    <label htmlFor="referenceAttestation" className="block text-sm font-medium leading-6 text-gray-900">
+                                        Referenced Attestation
+                                    </label>
+                                    <div className="mt-2">
+                                        <input
+                                            id="referenceAttestation"
+                                            name="referenceAttestation"
+                                            rows={3}
+                                            {...register("referencedAttestation", {
+                                                pattern: {
+                                                    value: /^0x[0-9A-Fa-f]{64}$/,
+                                                    message: "Schema UID must be a 64-character hexadecimal value starting with 0x"
+                                                }
+                                            })}
+                                            placeholder='Schema UID'
+                                            className="block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black-600 sm:text-sm sm:leading-6"
+                                            defaultValue={''}
+                                        />
+                                    </div>
+                                </div> */}
+                                <div className="sm:col-span-4">
+                                    <label htmlFor="isRevocable" className="block text-sm font-medium leading-6 text-gray-900">
+                                        Is Revocable?
+                                    </label>
+                                    <div className="mt-2">
+                                        <div className="flex items-center mb-4">
+                                            <input
+                                                id="default-radio-1"
+                                                type="radio"
+                                                value="true"
+                                                name="default-radio"
+                                                {...register("isRevoked")}
+                                                className="w-4 h-4 text-blue-600 bg-white border-gray-300 focus:ring-blue-600 focus:ring-2"
+                                            />
+                                            <label htmlFor="default-radio-1" className="ml-2 text-sm font-medium text-gray-900">
+                                                Yes
+                                            </label>
+                                        </div>
+                                        <div className="flex items-center">
+                                            <input
+                                                id="default-radio-2"
+                                                type="radio"
+                                                value="false"
+                                                name="default-radio"
+                                                {...register("isRevoked")}
+                                                className="w-4 h-4 text-blue-600 bg-white border-gray-300 focus:ring-blue-600 focus:ring-2"
+                                            />
+                                            <label htmlFor="default-radio-2" className="ml-2 text-sm font-medium text-gray-900">
+                                                No
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+
+                                <div className="sm:col-span-4 mt-1">
+                                    <label htmlFor="recipient" className="block text-sm font-medium leading-6 text-gray-900">
+                                        Recipient
+                                    </label>
+                                    <div className="mt-2">
+                                        <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-black-600 sm:max-w-md">
+                                            <input
+                                                type="text"
+                                                name="recipient"
+                                                id="recipient"
+                                                autoComplete="recepient"
+                                                className="block flex-1 border-0 bg-transparent py-1.5 pl-3 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+                                                placeholder="0x..."
+                                                {...register("recipient")}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </div>)}
+                    </div>
+
+                </div>
+
+                <div className="mt-6 flex items-center justify-end gap-x-6 mb-8 sm:mr-2">
+                    <button
+                        type="submit"
+                        className="rounded-md bg-black px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black-600"
+                    >
+                        Submit
+                    </button>
+                </div>
+            </form>
+        </div>
+    )
+}