diff --git a/package-lock.json b/package-lock.json
index fd2d613..da28044 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -844,6 +844,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -989,6 +990,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -1055,7 +1064,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
@@ -1070,6 +1080,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1189,6 +1200,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -1244,6 +1256,7 @@
       "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,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1254,7 +1267,8 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -1268,7 +1282,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -2780,6 +2795,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2852,7 +2878,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.2",
@@ -2962,6 +2989,7 @@
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3075,7 +3103,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
     },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
@@ -3108,6 +3137,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3210,6 +3240,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3218,7 +3249,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/install": {
       "version": "0.13.0",
@@ -3603,7 +3635,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/joycon": {
       "version": "3.1.1",
@@ -3796,6 +3829,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -3853,6 +3887,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3872,7 +3907,8 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -6849,6 +6885,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -6957,6 +6994,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7266,15 +7304,31 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
     "node_modules/react-hook-form": {
-      "version": "7.43.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz",
-      "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==",
+      "version": "7.43.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.5.tgz",
+      "integrity": "sha512-YcaXhuFHoOPipu5pC7ckxrLrialiOcU91pKu8P+isAcXZyMgByUK9PkI9j5fENO4+6XU5PwWXRGMIFlk9u9UBQ==",
       "engines": {
         "node": ">=12.22.0"
       },
@@ -7494,6 +7548,7 @@
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
       "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -7785,6 +7840,7 @@
       "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,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -7923,7 +7979,8 @@
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
     },
     "node_modules/thenify": {
       "version": "3.3.1",
@@ -8322,6 +8379,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -8395,7 +8453,8 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/xtend": {
       "version": "4.0.2",
@@ -8409,7 +8468,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -8444,7 +8504,9 @@
         "clsx": "^1.2.1",
         "next": "13.1.1",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
+        "react-hook-form": "^7.43.5"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",
@@ -8669,7 +8731,7 @@
     },
     "packages/@holaplexui-react": {
       "name": "@holaplex/ui-library-react",
-      "version": "0.8.0",
+      "version": "0.12.0",
       "dependencies": {
         "@headlessui/react": "^1.7.11",
         "@heroicons/react": "^2.0.13",
@@ -8678,6 +8740,7 @@
         "install": "^0.13.0",
         "npm": "^9.5.1",
         "react-debounce-input": "^3.3.0",
+        "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.41.1",
         "react-intersection-observer": "^9.4.1",
         "react-popper": "^2.3.0"
@@ -8872,6 +8935,8 @@
         "postcss": "^8.4.20",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
+        "react-hook-form": "*",
         "tailwindcss": "^3.2.4",
         "typescript": "4.9.4"
       },
@@ -9038,7 +9103,7 @@
     "@holaplex/ui-library-react": {
       "version": "file:packages/@holaplexui-react",
       "requires": {
-        "@headlessui/react": "^1.7.4",
+        "@headlessui/react": "^1.7.11",
         "@heroicons/react": "^2.0.13",
         "@react-hook/window-size": "^3.1.1",
         "@tailwindcss/forms": "^0.5.3",
@@ -9047,13 +9112,15 @@
         "@types/react-dom": "^18.0.8",
         "autoprefixer": "^10.4.13",
         "clsx": "^1.2.1",
-        "install": "*",
-        "npm": "*",
+        "install": "^0.13.0",
+        "npm": "^9.5.1",
         "postcss": "^8.4.20",
         "prettier": "2.8.1",
         "react-debounce-input": "^3.3.0",
+        "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.41.1",
         "react-intersection-observer": "^9.4.1",
+        "react-popper": "^2.3.0",
         "tailwindcss": "^3.2.4",
         "tsup": "^6.5.0",
         "typescript": "^4.6.4"
@@ -9227,6 +9294,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
     "@react-hook/debounce": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
@@ -9458,6 +9531,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "requires": {
         "color-convert": "^2.0.1"
       }
@@ -9570,6 +9644,11 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -9608,7 +9687,8 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -9620,6 +9700,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -9692,6 +9773,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -9727,6 +9809,7 @@
       "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,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -9734,7 +9817,8 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "commander": {
       "version": "4.1.1",
@@ -9745,7 +9829,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "cross-spawn": {
       "version": "7.0.3",
@@ -10806,6 +10891,14 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10859,7 +10952,8 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "fsevents": {
       "version": "2.3.2",
@@ -10935,6 +11029,7 @@
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -11017,7 +11112,8 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
     },
     "grapheme-splitter": {
       "version": "1.0.4",
@@ -11043,7 +11139,8 @@
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
     },
     "has-property-descriptors": {
       "version": "1.0.0",
@@ -11107,6 +11204,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -11115,7 +11213,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "install": {
       "version": "0.13.0",
@@ -11371,7 +11470,8 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "joycon": {
       "version": "3.1.1",
@@ -11530,6 +11630,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -11572,6 +11673,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -11585,7 +11687,8 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "mz": {
       "version": "2.7.0",
@@ -13541,6 +13644,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -13615,7 +13719,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
     },
     "path-key": {
       "version": "3.1.1",
@@ -13796,10 +13901,25 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-hook-form": {
-      "version": "7.43.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz",
-      "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==",
+      "version": "7.43.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.5.tgz",
+      "integrity": "sha512-YcaXhuFHoOPipu5pC7ckxrLrialiOcU91pKu8P+isAcXZyMgByUK9PkI9j5fENO4+6XU5PwWXRGMIFlk9u9UBQ==",
       "requires": {}
     },
     "react-intersection-observer": {
@@ -13813,6 +13933,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13933,6 +14062,7 @@
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
       "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -14141,6 +14271,7 @@
       "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,
       "requires": {
         "has-flag": "^4.0.0"
       }
@@ -14245,7 +14376,8 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
     },
     "thenify": {
       "version": "3.3.1",
@@ -14500,6 +14632,14 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -14521,6 +14661,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
@@ -14573,7 +14714,8 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "xtend": {
       "version": "4.0.2",
@@ -14584,7 +14726,8 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/packages/@holaplexui-playground/hooks/useUpload.ts b/packages/@holaplexui-playground/hooks/useUpload.ts
new file mode 100644
index 0000000..002145c
--- /dev/null
+++ b/packages/@holaplexui-playground/hooks/useUpload.ts
@@ -0,0 +1,31 @@
+import {
+  DropzoneInputProps,
+  DropzoneRootProps,
+  useDropzone
+} from 'react-dropzone';
+
+interface UploadContext {
+  getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
+  getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;
+  isDragActive: boolean;
+}
+
+export default function useUpload(
+  onDrop: (files: File[]) => void
+): UploadContext {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'image/png': ['.png'],
+      'image/jpeg': ['.jpeg', '.jpg'],
+      'image/svg': ['.svg']
+    },
+    maxSize: 2 * 1024 * 1024,
+    onDrop
+  });
+
+  return {
+    getInputProps,
+    getRootProps,
+    isDragActive
+  };
+}
diff --git a/packages/@holaplexui-playground/package.json b/packages/@holaplexui-playground/package.json
index 0223c34..4174015 100644
--- a/packages/@holaplexui-playground/package.json
+++ b/packages/@holaplexui-playground/package.json
@@ -17,7 +17,9 @@
     "clsx": "^1.2.1",
     "next": "13.1.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.43.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
index ec2d745..34086e3 100644
--- a/packages/@holaplexui-playground/pages/form.tsx
+++ b/packages/@holaplexui-playground/pages/form.tsx
@@ -1,72 +1,81 @@
-import { Form, Icon } from "@holaplex/ui-library-react";
-import { useState } from "react";
+import { Form, Icon } from '@holaplex/ui-library-react';
+import clsx from 'clsx';
+import { watch } from 'fs';
+import { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Controller, useForm } from 'react-hook-form';
+import useUpload from '../hooks/useUpload';
 
-function HidePasswordIcon({ size = 16, color = "none", className = "" }) {
+function HidePasswordIcon({ size = 16, color = 'none', className = '' }) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox='0 0 16 16'
       fill={color}
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
+      xmlns='http://www.w3.org/2000/svg'
     >
       <path
-        d="M9.41452 6.5865C10.1952 7.36717 10.1952 8.6345 9.41452 9.4165C8.63386 10.1972 7.36652 10.1972 6.58452 9.4165C5.80386 8.63583 5.80386 7.3685 6.58452 6.5865C7.36652 5.8045 8.63319 5.8045 9.41452 6.5865"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        d='M9.41452 6.5865C10.1952 7.36717 10.1952 8.6345 9.41452 9.4165C8.63386 10.1972 7.36652 10.1972 6.58452 9.4165C5.80386 8.63583 5.80386 7.3685 6.58452 6.5865C7.36652 5.8045 8.63319 5.8045 9.41452 6.5865'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M2 7.99992C2 7.56059 2.10133 7.12592 2.29733 6.72525V6.72525C3.30733 4.66059 5.53933 3.33325 8 3.33325C10.4607 3.33325 12.6927 4.66059 13.7027 6.72525V6.72525C13.8987 7.12592 14 7.56059 14 7.99992C14 8.43925 13.8987 8.87392 13.7027 9.27458V9.27458C12.6927 11.3393 10.4607 12.6666 8 12.6666C5.53933 12.6666 3.30733 11.3393 2.29733 9.27458V9.27458C2.10133 8.87392 2 8.43925 2 7.99992Z"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M2 7.99992C2 7.56059 2.10133 7.12592 2.29733 6.72525V6.72525C3.30733 4.66059 5.53933 3.33325 8 3.33325C10.4607 3.33325 12.6927 4.66059 13.7027 6.72525V6.72525C13.8987 7.12592 14 7.56059 14 7.99992C14 8.43925 13.8987 8.87392 13.7027 9.27458V9.27458C12.6927 11.3393 10.4607 12.6666 8 12.6666C5.53933 12.6666 3.30733 11.3393 2.29733 9.27458V9.27458C2.10133 8.87392 2 8.43925 2 7.99992Z'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
     </svg>
   );
 }
 
-function ShowPasswordIcon({ size = 16, color = "none", className = "" }) {
+function ShowPasswordIcon({ size = 16, color = 'none', className = '' }) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox='0 0 16 16'
       fill={color}
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
+      xmlns='http://www.w3.org/2000/svg'
     >
       <path
-        d="M9.70514 9.03858C9.27877 9.75749 8.45061 10.1358 7.62805 9.98746C6.80549 9.83911 6.16168 9.1953 6.01333 8.37274C5.86497 7.55018 6.2433 6.72202 6.96221 6.29565"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        d='M9.70514 9.03858C9.27877 9.75749 8.45061 10.1358 7.62805 9.98746C6.80549 9.83911 6.16168 9.1953 6.01333 8.37274C5.86497 7.55018 6.2433 6.72202 6.96221 6.29565'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
       <path
-        d="M11.9973 11.3309C10.8474 12.203 9.44277 12.6731 7.99956 12.6687C5.60816 12.7113 3.39859 11.397 2.29452 9.2753C1.89792 8.47142 1.89792 7.52878 2.29452 6.7249C2.84668 5.62531 3.72688 4.72447 4.81338 4.14697"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        d='M11.9973 11.3309C10.8474 12.203 9.44277 12.6731 7.99956 12.6687C5.60816 12.7113 3.39859 11.397 2.29452 9.2753C1.89792 8.47142 1.89792 7.52878 2.29452 6.7249C2.84668 5.62531 3.72688 4.72447 4.81338 4.14697'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
       <path
-        d="M13.6185 9.42294C13.6453 9.37225 13.6801 9.32678 13.7054 9.27513C14.102 8.47125 14.102 7.52861 13.7054 6.72473C12.6013 4.60302 10.3917 3.28874 8.00031 3.33133C7.85038 3.33133 7.70465 3.35134 7.55664 3.36109"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        d='M13.6185 9.42294C13.6453 9.37225 13.6801 9.32678 13.7054 9.27513C14.102 8.47125 14.102 7.52861 13.7054 6.72473C12.6013 4.60302 10.3917 3.28874 8.00031 3.33133C7.85038 3.33133 7.70465 3.35134 7.55664 3.36109'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
       <path
-        d="M14.0021 13.3356L2.66406 1.99756"
-        stroke="black"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        d='M14.0021 13.3356L2.66406 1.99756'
+        stroke='black'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
     </svg>
   );
 }
 
+interface DragDropForm {
+  files: File[];
+}
+
 export default function App() {
   const [singleValue, setSingleValue] = useState<{
     name: string;
@@ -80,43 +89,53 @@ export default function App() {
   >();
 
   const options = [
-    { name: "Solana", id: "sol" },
-    { name: "Polygon", id: "polygon" },
-    { name: "Near", id: "near" },
-    { name: "Ethereum", id: "eth" },
-    { name: "Sui", id: "sui" },
-    { name: "Aptos", id: "aptos" },
-    { name: "Avalanche", id: "avalanche" },
-    { name: "Bitcoin", id: "btc" },
-    { name: "Cardano", id: "ada" },
+    { name: 'Solana', id: 'sol' },
+    { name: 'Polygon', id: 'polygon' },
+    { name: 'Near', id: 'near' },
+    { name: 'Ethereum', id: 'eth' },
+    { name: 'Sui', id: 'sui' },
+    { name: 'Aptos', id: 'aptos' },
+    { name: 'Avalanche', id: 'avalanche' },
+    { name: 'Bitcoin', id: 'btc' },
+    { name: 'Cardano', id: 'ada' }
   ];
+
+  const { control, setValue } = useForm<DragDropForm>();
+  const onDrop = useCallback(
+    (files: File[]) => {
+      setValue('files', files, { shouldValidate: true });
+    },
+    [setValue]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useUpload(onDrop);
+
   return (
-    <div className="w-[400px] mx-auto p-4">
+    <div className='w-[400px] mx-auto p-4'>
       <Form>
-        <Form.Label name="Email">
-          <Form.Input placeholder="e.g. name@example.com" />
+        <Form.Label name='Email'>
+          <Form.Input placeholder='e.g. name@example.com' />
         </Form.Label>
 
         <Form.Label
-          name="Password"
-          asideComponent={<div className="text-xs">Forgot Password?</div>}
-          className="mt-5"
+          name='Password'
+          asideComponent={<div className='text-xs'>Forgot Password?</div>}
+          className='mt-5'
         >
           <Form.Password
-            placeholder="Enter your password"
+            placeholder='Enter your password'
             showPasswordIcon={<ShowPasswordIcon />}
             hidePasswordIcon={<HidePasswordIcon />}
           />
         </Form.Label>
 
         <Form.Select
-          className="mt-5"
+          className='mt-5'
           onChange={(v) => {
             setSingleValue(v);
           }}
           value={singleValue}
         >
-          <Form.Select.Button icon={<Icon.Sol />} placeholder="e.g. Solana">
+          <Form.Select.Button icon={<Icon.Sol />} placeholder='e.g. Solana'>
             {singleValue?.name}
           </Form.Select.Button>
           <Form.Select.Options>
@@ -129,15 +148,17 @@ export default function App() {
         </Form.Select>
 
         <Form.Select
-          className="mt-5"
+          className='mt-5'
           multiple
           onChange={(v) => {
             setMultiValue(v);
           }}
           value={multiValue}
         >
-          <Form.Select.Button icon={<Icon.Sol />} placeholder="e.g. Solana">
-            {singleValue?.name}
+          <Form.Select.Button icon={<Icon.Sol />} placeholder='e.g. Solana'>
+            {multiValue && multiValue?.length > 0
+              ? multiValue[0].name
+              : undefined}
           </Form.Select.Button>
           <Form.Select.Options>
             {options.map((option) => (
@@ -148,10 +169,49 @@ export default function App() {
           </Form.Select.Options>
         </Form.Select>
 
+        <Form.Label name='Drop Image' className='mt-5'>
+          <Controller
+            name='files'
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Form.DragDrop
+                getInputProps={getInputProps}
+                getRootProps={getRootProps}
+                isDragActive={isDragActive}
+                onChange={(e: any) => onChange(e.target.value)}
+                multiple={false}
+              >
+                <div
+                  className={clsx(
+                    'flex items-center justify-center border border-dashed border-gray-200 cursor-pointer rounded-md',
+                    {
+                      'bg-gray-100': isDragActive,
+                      'p-6 text-center text-gray-500': !value
+                    }
+                  )}
+                >
+                  {value ? (
+                    <div className='bg-white rounded-lg p-3 overflow-hidden'>
+                      {value.map((file, index) => (
+                        <Form.DragDrop.Preview key={index} file={file} />
+                      ))}
+                    </div>
+                  ) : (
+                    <>
+                      Drag & drop photo here <br />
+                      Required jpeg, png or svg. Max 2mb.
+                    </>
+                  )}
+                </div>
+              </Form.DragDrop>
+            )}
+          />
+        </Form.Label>
+
         <Form.Checkbox
-          id="subscribe"
-          label="Subscribe newsletter"
-          className="mt-5 text-xs"
+          id='subscribe'
+          label='Subscribe newsletter'
+          className='mt-5 text-xs'
         />
       </Form>
     </div>
diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
index ab37f3a..5fe023a 100644
--- a/packages/@holaplexui-playground/styles/globals.css
+++ b/packages/@holaplexui-playground/styles/globals.css
@@ -130,3 +130,7 @@ a {
 .modal-title {
   @apply text-lg font-medium leading-6;
 }
+
+.dragdrop-preview-image {
+  @apply w-full h-48;
+}
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 989ffd9..4082f9b 100644
--- a/packages/@holaplexui-react/package.json
+++ b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.10.0",
+  "version": "0.13.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [
@@ -22,6 +22,7 @@
     "install": "^0.13.0",
     "npm": "^9.5.1",
     "react-debounce-input": "^3.3.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.41.1",
     "react-intersection-observer": "^9.4.1",
     "react-popper": "^2.3.0"
diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
index aca9309..7a6e228 100644
--- a/packages/@holaplexui-react/src/components/Form.tsx
+++ b/packages/@holaplexui-react/src/components/Form.tsx
@@ -8,12 +8,11 @@ import {
   InputHTMLAttributes,
   useState,
   Fragment,
-  cloneElement,
 } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import { Listbox } from '@headlessui/react';
 import { FieldError } from 'react-hook-form';
 import { Icon } from './Icon';
-import { useRef } from 'react';
+import { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone';
 
 export function Form({
   children,
@@ -167,14 +166,7 @@ interface FormSelectProps {
   children: JSX.Element[];
 }
 
-function FormSelect<T>({
-  className,
-  multiple,
-  ref,
-  children,
-  onChange,
-  value,
-}: FormSelectProps) {
+function FormSelect<T>({ className, multiple, ref, children, onChange, value }: FormSelectProps) {
   return (
     <div className={clsx('w-full relative', className)}>
       <Listbox
@@ -207,26 +199,26 @@ function FormSelectButton({
   children,
   icon,
   placeholder = 'select an option',
-  dropdown = <Icon.ChevronDown />
+  dropdown = <Icon.ChevronDown />,
 }: FormSelectButtonProps): JSX.Element {
   return (
     <Listbox.Button
-      className={clsx(
-        'w-full inline-block',
-        'form-select-button',
-        {
-          'pl-12': icon,
-        },
-      )}
+      className={clsx('w-full inline-block', 'form-select-button', {
+        'pl-12': icon,
+      })}
     >
-      {children ? <span>{children}</span> : <span className="form-select-button-placeholder">{placeholder}</span>}
+      {children ? (
+        <span>{children}</span>
+      ) : (
+        <span className="form-select-button-placeholder">{placeholder}</span>
+      )}
       <div
-          className={clsx(
-            'absolute top-1/2 right-0 transform -translate-y-1/2 form-select-button-dropdown',
-          )}
-        >
-          {dropdown}
-        </div>
+        className={clsx(
+          'absolute top-1/2 right-0 transform -translate-y-1/2 form-select-button-dropdown'
+        )}
+      >
+        {dropdown}
+      </div>
     </Listbox.Button>
   );
 }
@@ -309,3 +301,46 @@ const FormCheckbox = forwardRef(function FormCheckbox(
 });
 
 Form.Checkbox = FormCheckbox;
+
+interface DragDropProps {
+  getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
+  getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;
+  isDragActive: boolean;
+  onChange: any;
+  multiple?: boolean;
+  children: JSX.Element;
+  className?: string;
+}
+
+const DragDrop = ({
+  getInputProps,
+  getRootProps,
+  isDragActive,
+  onChange,
+  multiple = false,
+  className,
+  children,
+}: DragDropProps) => {
+  return (
+    <div {...getRootProps()} className={clsx('relative', className)}>
+      <input
+        {...getInputProps({
+          onChange,
+          multiple,
+        })}
+      />
+      {children}
+    </div>
+  );
+};
+
+Form.DragDrop = DragDrop;
+
+interface DragDropPreviewProps {
+  file: File;
+}
+
+const DragDropPreview = ({ file }: DragDropPreviewProps) => {
+  return <img src={URL.createObjectURL(file)} alt={file.name} className="dragdrop-preview-image" />;
+};
+DragDrop.Preview = DragDropPreview;
diff --git a/packages/@holaplexui-react/src/components/Popover.tsx b/packages/@holaplexui-react/src/components/Popover.tsx
index 3735ef1..77d54d1 100644
--- a/packages/@holaplexui-react/src/components/Popover.tsx
+++ b/packages/@holaplexui-react/src/components/Popover.tsx
@@ -11,7 +11,7 @@ export function PopoverBox({
 }: {
   triggerButton: JSX.Element;
   elements?: JSX.Element[];
-  popperPlacement:
+  popperPlacement?:
     | 'top-start'
     | 'top-end'
     | 'bottom-start'