diff --git a/package.json b/package.json
index dcf66732..7e99bb36 100644
--- a/package.json
+++ b/package.json
@@ -170,19 +170,26 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@storybook/addon-actions": "8.3.5",
     "@tanstack/react-query": "^5.59.15",
+    "@types/papaparse": "^5.3.15",
     "@uiw/react-markdown-preview": "^5.1.3",
+    "@uiw/react-md-editor": "^4.0.4",
     "cmdk": "1.0.0",
     "embla-carousel-react": "^8.3.0",
     "graphql-request": "^7.1.0",
+    "idb": "^8.0.1",
     "input-otp": "^1.2.4",
     "moment": "^2.30.1",
+    "moment-timezone": "^0.5.46",
     "next-themes": "^0.3.0",
+    "papaparse": "^5.4.1",
     "react-day-picker": "9.3.2",
     "react-hook-form": "^7.53.0",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.1.4",
+    "react-use": "^17.6.0",
     "recharts": "^2.13.0",
     "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.5.0",
     "tailwind-variants": "^0.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10172a80..f7af4e22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,9 +104,15 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.59.15
         version: 5.62.8(react@18.3.1)
+      '@types/papaparse':
+        specifier: ^5.3.15
+        version: 5.3.15
       '@uiw/react-markdown-preview':
         specifier: ^5.1.3
         version: 5.1.3(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/react-md-editor':
+        specifier: ^4.0.4
+        version: 4.0.5(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       cmdk:
         specifier: 1.0.0
         version: 1.0.0(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -116,15 +122,24 @@ importers:
       graphql-request:
         specifier: ^7.1.0
         version: 7.1.2(graphql@16.10.0)
+      idb:
+        specifier: ^8.0.1
+        version: 8.0.1
       input-otp:
         specifier: ^1.2.4
         version: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       moment:
         specifier: ^2.30.1
         version: 2.30.1
+      moment-timezone:
+        specifier: ^0.5.46
+        version: 0.5.46
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      papaparse:
+        specifier: ^5.4.1
+        version: 5.4.1
       react-day-picker:
         specifier: 9.3.2
         version: 9.3.2(react@18.3.1)
@@ -137,12 +152,18 @@ importers:
       react-resizable-panels:
         specifier: ^2.1.4
         version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-use:
+        specifier: ^17.6.0
+        version: 17.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       recharts:
         specifier: ^2.13.0
         version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-raw:
         specifier: ^7.0.0
         version: 7.0.0
+      rehype-sanitize:
+        specifier: ^6.0.0
+        version: 6.0.0
       remark-gfm:
         specifier: ^4.0.0
         version: 4.0.0
@@ -2660,6 +2681,9 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
+  '@types/js-cookie@2.2.7':
+    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2681,6 +2705,9 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/papaparse@5.3.15':
+    resolution: {integrity: sha512-JHe6vF6x/8Z85nCX4yFdDslN11d+1pr12E526X8WAfhadOeaOTx5AuIkvDKIBopfvlzpzkdMx4YyvSKCM9oqtw==}
+
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
@@ -2784,6 +2811,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@uiw/react-md-editor@4.0.5':
+    resolution: {integrity: sha512-x+S7ZMz1B+KwVODOZk663H2gdOZhcFsrPUF8V69K4L2BbTZ3A4sBCw/uTrBE9dHH0gajAzRAYbAYCHsUQaTcyA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@ungap/structured-clone@1.2.1':
     resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==}
 
@@ -2868,6 +2901,9 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@xobotyi/scrollbar-width@1.9.5':
+    resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
+
   abitype@1.0.7:
     resolution: {integrity: sha512-ZfYYSktDQUwc2eduYu8C4wOs+RDPmnRYMh7zNfzeMtGGgb0U+6tLGjixUic6mXf5xKKCcgT5Qp6cv39tOARVFw==}
     peerDependencies:
@@ -3392,6 +3428,9 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -3433,9 +3472,16 @@ packages:
     resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
     engines: {node: '>=12'}
 
+  css-in-js-utils@3.1.0:
+    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
+
   css-selector-parser@3.0.5:
     resolution: {integrity: sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==}
 
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -3708,6 +3754,9 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
+  error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -3886,6 +3935,12 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-shallow-equal@1.0.0:
+    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
+
+  fastest-stable-stringify@2.0.2:
+    resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
+
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
@@ -4187,9 +4242,15 @@ packages:
   hast-util-raw@9.1.0:
     resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
 
+  hast-util-sanitize@5.0.2:
+    resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
+
   hast-util-select@6.0.3:
     resolution: {integrity: sha512-OVRQlQ1XuuLP8aFVLYmC2atrfWHS5UD3shonxpnyrjcCkwtvmt/+N6kYJdcY4mkMJhxp4kj2EFIxQ9kvkkt/eQ==}
 
+  hast-util-to-html@9.0.4:
+    resolution: {integrity: sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==}
+
   hast-util-to-jsx-runtime@2.3.2:
     resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==}
 
@@ -4284,10 +4345,16 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  hyphenate-style-name@1.1.0:
+    resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  idb@8.0.1:
+    resolution: {integrity: sha512-EkBCzUZSdhJV8PxMSbeEV//xguVKZu9hZZulM+2gHXI0t2hGVU3eYE6/XnH77DS6FM2FY8wl17aDcu9vXpvLWQ==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -4344,6 +4411,9 @@ packages:
   inline-style-parser@0.2.4:
     resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
 
+  inline-style-prefixer@7.0.1:
+    resolution: {integrity: sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==}
+
   input-otp@1.4.1:
     resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
     peerDependencies:
@@ -4696,6 +4766,9 @@ packages:
   joi@17.13.3:
     resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
+  js-cookie@2.2.1:
+    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -4961,6 +5034,9 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
@@ -5126,6 +5202,9 @@ packages:
   mlly@1.7.3:
     resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
 
+  moment-timezone@0.5.46:
+    resolution: {integrity: sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==}
+
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
@@ -5161,6 +5240,12 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  nano-css@5.6.2:
+    resolution: {integrity: sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5425,6 +5510,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  papaparse@5.4.1:
+    resolution: {integrity: sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -5853,6 +5941,18 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
+  react-universal-interface@0.6.2:
+    resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
+    peerDependencies:
+      react: '*'
+      tslib: '*'
+
+  react-use@17.6.0:
+    resolution: {integrity: sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -5931,9 +6031,18 @@ packages:
     resolution: {integrity: sha512-rjLJ3z6fIV11phwCqHp/KRo8xuUCO8o9bFJCNw5o6O2wlLk6g8r323aRswdGBQwfXPFYeSuZdAjp4tzo6RGqEg==}
     engines: {node: '>=16.0.0'}
 
+  rehype-sanitize@6.0.0:
+    resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==}
+
   rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
 
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
   release-zalgo@1.0.0:
     resolution: {integrity: sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==}
     engines: {node: '>=4'}
@@ -5968,6 +6077,9 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -6013,6 +6125,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rtl-css-js@1.16.1:
+    resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -6031,6 +6146,10 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+
   secure-compare@3.0.1:
     resolution: {integrity: sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==}
 
@@ -6068,6 +6187,10 @@ packages:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
 
+  set-harmonic-interval@1.0.1:
+    resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
+    engines: {node: '>=6.9'}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -6149,6 +6272,10 @@ packages:
   source-map-support@0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
 
+  source-map@0.5.6:
+    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
@@ -6188,6 +6315,9 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  stack-generator@2.0.10:
+    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -6195,6 +6325,15 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
+  stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
+  stacktrace-gps@3.1.2:
+    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
+
+  stacktrace-js@2.0.2:
+    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
+
   statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -6297,6 +6436,9 @@ packages:
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
+  stylis@4.3.4:
+    resolution: {integrity: sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6367,6 +6509,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  throttle-debounce@3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+
   through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
 
@@ -6406,6 +6552,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -6434,6 +6583,9 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
+  ts-easing@0.2.0:
+    resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==}
+
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
@@ -9458,6 +9610,8 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
+  '@types/js-cookie@2.2.7': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/junit-report-builder@3.0.2': {}
@@ -9476,6 +9630,10 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/papaparse@5.3.15':
+    dependencies:
+      '@types/node': 22.10.2
+
   '@types/prismjs@1.26.5': {}
 
   '@types/prop-types@15.7.14': {}
@@ -9615,6 +9773,18 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  '@uiw/react-md-editor@4.0.5(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@uiw/react-markdown-preview': 5.1.3(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      rehype: 13.0.2
+      rehype-prism-plus: 2.0.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
   '@ungap/structured-clone@1.2.1': {}
 
   '@vitejs/plugin-react-swc@3.7.2(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.7)(yaml@2.6.1))':
@@ -9743,6 +9913,8 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@xobotyi/scrollbar-width@1.9.5': {}
+
   abitype@1.0.7(typescript@5.4.2)(zod@3.24.1):
     optionalDependencies:
       typescript: 5.4.2
@@ -10263,6 +10435,10 @@ snapshots:
 
   cookie@0.7.2: {}
 
+  copy-to-clipboard@3.3.3:
+    dependencies:
+      toggle-selection: 1.0.6
+
   core-util-is@1.0.3: {}
 
   corser@2.0.1: {}
@@ -10312,8 +10488,17 @@ snapshots:
     dependencies:
       type-fest: 1.4.0
 
+  css-in-js-utils@3.1.0:
+    dependencies:
+      hyphenate-style-name: 1.1.0
+
   css-selector-parser@3.0.5: {}
 
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
@@ -10530,6 +10715,10 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  error-stack-parser@2.1.4:
+    dependencies:
+      stackframe: 1.3.4
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -10779,6 +10968,10 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-shallow-equal@1.0.0: {}
+
+  fastest-stable-stringify@2.0.2: {}
+
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
@@ -11116,6 +11309,12 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
+  hast-util-sanitize@5.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@ungap/structured-clone': 1.2.1
+      unist-util-position: 5.0.0
+
   hast-util-select@6.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -11134,6 +11333,20 @@ snapshots:
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
+  hast-util-to-html@9.0.4:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.2:
     dependencies:
       '@types/estree': 1.0.6
@@ -11276,10 +11489,14 @@ snapshots:
 
   husky@9.1.7: {}
 
+  hyphenate-style-name@1.1.0: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
 
+  idb@8.0.1: {}
+
   ignore@5.3.2: {}
 
   import-fresh@3.3.0:
@@ -11324,6 +11541,10 @@ snapshots:
 
   inline-style-parser@0.2.4: {}
 
+  inline-style-prefixer@7.0.1:
+    dependencies:
+      css-in-js-utils: 3.1.0
+
   input-otp@1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -11880,6 +12101,8 @@ snapshots:
       '@sideway/formula': 3.0.1
       '@sideway/pinpoint': 2.0.0
 
+  js-cookie@2.2.1: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1:
@@ -12245,6 +12468,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  mdn-data@2.0.14: {}
+
   memoizerific@1.11.3:
     dependencies:
       map-or-similar: 1.5.0
@@ -12498,6 +12723,10 @@ snapshots:
       pkg-types: 1.2.1
       ufo: 1.5.4
 
+  moment-timezone@0.5.46:
+    dependencies:
+      moment: 2.30.1
+
   moment@2.30.1: {}
 
   ms@2.1.3: {}
@@ -12544,6 +12773,19 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nano-css@5.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      css-tree: 1.1.3
+      csstype: 3.1.3
+      fastest-stable-stringify: 2.0.2
+      inline-style-prefixer: 7.0.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      rtl-css-js: 1.16.1
+      stacktrace-js: 2.0.2
+      stylis: 4.3.4
+
   nanoid@3.3.8: {}
 
   natural-compare@1.4.0: {}
@@ -12750,6 +12992,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  papaparse@5.4.1: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -13122,6 +13366,30 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  react-universal-interface@0.6.2(react@18.3.1)(tslib@2.8.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
+  react-use@17.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@types/js-cookie': 2.2.7
+      '@xobotyi/scrollbar-width': 1.9.5
+      copy-to-clipboard: 3.3.3
+      fast-deep-equal: 3.1.3
+      fast-shallow-equal: 1.0.0
+      js-cookie: 2.2.1
+      nano-css: 5.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-universal-interface: 0.6.2(react@18.3.1)(tslib@2.8.1)
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      set-harmonic-interval: 1.0.1
+      throttle-debounce: 3.0.1
+      ts-easing: 0.2.0
+      tslib: 2.8.1
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -13254,6 +13522,11 @@ snapshots:
       unified: 11.0.5
       unist-util-visit: 5.0.0
 
+  rehype-sanitize@6.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-sanitize: 5.0.2
+
   rehype-slug@6.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -13262,6 +13535,19 @@ snapshots:
       hast-util-to-string: 3.0.1
       unist-util-visit: 5.0.0
 
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.4
+      unified: 11.0.5
+
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
+
   release-zalgo@1.0.0:
     dependencies:
       es6-error: 4.1.1
@@ -13312,6 +13598,8 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-cwd@3.0.0:
     dependencies:
       resolve-from: 5.0.0
@@ -13371,6 +13659,10 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.28.1
       fsevents: 2.3.3
 
+  rtl-css-js@1.16.1:
+    dependencies:
+      '@babel/runtime': 7.26.0
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -13389,6 +13681,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  screenfull@5.2.0: {}
+
   secure-compare@3.0.1: {}
 
   semantic-release@24.2.0(typescript@5.4.2):
@@ -13451,6 +13745,8 @@ snapshots:
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
+  set-harmonic-interval@1.0.1: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -13536,6 +13832,8 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  source-map@0.5.6: {}
+
   source-map@0.5.7: {}
 
   source-map@0.6.1: {}
@@ -13582,12 +13880,29 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  stack-generator@2.0.10:
+    dependencies:
+      stackframe: 1.3.4
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
 
   stackback@0.0.2: {}
 
+  stackframe@1.3.4: {}
+
+  stacktrace-gps@3.1.2:
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.3.4
+
+  stacktrace-js@2.0.2:
+    dependencies:
+      error-stack-parser: 2.1.4
+      stack-generator: 2.0.10
+      stacktrace-gps: 3.1.2
+
   statuses@2.0.1: {}
 
   std-env@3.8.0: {}
@@ -13686,6 +14001,8 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
+  stylis@4.3.4: {}
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -13783,6 +14100,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  throttle-debounce@3.0.1: {}
+
   through2@2.0.5:
     dependencies:
       readable-stream: 2.3.8
@@ -13812,6 +14131,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toggle-selection@1.0.6: {}
+
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.15.0
@@ -13833,6 +14154,8 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
+  ts-easing@0.2.0: {}
+
   ts-interface-checker@0.1.13: {}
 
   ts-node@10.9.2(@swc/core@1.10.1)(@types/node@22.10.2)(typescript@5.4.2):
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
new file mode 100644
index 00000000..14cff7b2
--- /dev/null
+++ b/src/components/Form/Form.stories.tsx
@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Form, FormProps } from "@/components/Form";
+import { FormField } from "@/components/Form/types/fieldTypes";
+
+const fields: FormField[] = [
+  {
+    field: {
+      name: "roundName",
+      label: "Round name",
+      className: "border-grey-300",
+      validation: { stringValidation: { minLength: 7 } },
+    },
+    component: "Input",
+    placeholder: "your cool round name",
+  },
+
+  {
+    field: {
+      name: "roundDescription",
+      label: "Round description",
+      validation: { required: true },
+    },
+    component: "MarkdownEditor",
+  },
+  {
+    field: {
+      name: "select",
+      label: "Select",
+      validation: { required: true },
+    },
+    component: "Select",
+    options: [
+      {
+        items: [
+          { label: "Apple", value: "apple" },
+          { label: "Banana", value: "banana" },
+        ],
+      },
+      {
+        items: [
+          { label: "Carrot", value: "carrot" },
+          { label: "Lettuce", value: "lettuce" },
+        ],
+      },
+    ],
+    placeholder: "Select",
+    variant: "filled",
+    size: "md",
+  },
+  {
+    field: {
+      name: "fileUpload",
+      label: "File upload",
+      validation: { required: true },
+    },
+    component: "FileUpload",
+    mimeTypes: ["image/png", "image/jpeg", "image/jpg", "image/webp", "image/svg+xml"],
+  },
+];
+
+export default {
+  title: "Components/Form",
+  component: Form,
+} as Meta;
+type Story = StoryObj<FormProps>;
+
+export const Default: Story = {
+  args: {
+    fields,
+    persistKey: "storybook-form",
+  },
+  render: (args) => {
+    return (
+      <div>
+        <Form {...args} />
+      </div>
+    );
+  },
+};
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
new file mode 100644
index 00000000..cc2ad949
--- /dev/null
+++ b/src/components/Form/Form.tsx
@@ -0,0 +1,83 @@
+import { ForwardedRef, forwardRef, useImperativeHandle } from "react";
+import { FormProvider, useFormContext } from "react-hook-form";
+
+import { useFormWithPersist } from "@/hooks";
+
+import { FormField } from "./types/fieldTypes";
+import { buildSchemaFromFields } from "./utils/buildSchemaFromFields";
+import { componentRegistry } from "./utils/componentRegistry";
+
+export interface FormProps {
+  persistKey: string;
+  fields: FormField[];
+  defaultValues?: any;
+  dbName: string;
+  storeName: string;
+}
+
+export const Form = forwardRef(function Form(
+  { persistKey, fields, defaultValues, dbName, storeName }: FormProps,
+  ref: ForwardedRef<{ isFormValid: () => Promise<boolean> }>,
+) {
+  const schema = buildSchemaFromFields(fields);
+
+  const form = useFormWithPersist({ schema, defaultValues, persistKey, dbName, storeName });
+
+  useImperativeHandle(ref, () => ({
+    isFormValid: async () => {
+      try {
+        const isValid = await form.trigger(); // Trigger validation on all fields
+        if (!isValid) return false;
+
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    },
+  }));
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(() => void 0)} className="flex flex-col gap-4">
+        {fields.map((field) => (
+          <FormControl key={field.field.name} field={field} />
+        ))}
+      </form>
+    </FormProvider>
+  );
+});
+function FormControl({ field }: { field: FormField }) {
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  type FieldOfType = Extract<FormField, { component: typeof field.component }>;
+  const { field: fieldProps, ...componentProps } = field as FieldOfType;
+
+  const registryEntry = componentRegistry[field.component];
+  const { Component, isControlled } = registryEntry;
+
+  const props = isControlled
+    ? { ...componentProps, name: fieldProps.name, control }
+    : { ...componentProps, ...register(fieldProps.name) };
+
+  return (
+    <div className="flex flex-col justify-center gap-2">
+      <div className="flex items-center justify-between">
+        <label htmlFor={fieldProps.name} className="block text-[14px]/[20px] font-medium">
+          {fieldProps.label}
+        </label>
+        {fieldProps.validation?.required && (
+          <div className="text-[14px]/[16px] text-moss-700">*Required</div>
+        )}
+      </div>
+      <Component {...props} />
+      {errors[fieldProps.name]?.message && (
+        <p className="text-sm text-red-300">{String(errors[fieldProps.name]?.message)}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Form/FormControllers/AllowlistFormController/AllowlistFormController.tsx b/src/components/Form/FormControllers/AllowlistFormController/AllowlistFormController.tsx
new file mode 100644
index 00000000..9dcb1150
--- /dev/null
+++ b/src/components/Form/FormControllers/AllowlistFormController/AllowlistFormController.tsx
@@ -0,0 +1,100 @@
+// src/components/Form/FormAllowlistController.tsx
+import React, { useRef } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+
+import { UploadIcon } from "@heroicons/react/solid";
+import Papa from "papaparse";
+import { getAddress, isAddress } from "viem";
+
+import { Button } from "@/primitives/Button";
+import { TextArea } from "@/primitives/TextArea";
+
+export interface AllowlistFormControllerProps {
+  /** The name of the form field */
+  name: string;
+}
+
+export const AllowlistFormController: React.FC<AllowlistFormControllerProps> = ({ name }) => {
+  const { control, setValue } = useFormContext();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * Handles CSV file upload and extracts valid addresses
+   * @param event - The input change event
+   */
+  const handleCSVUpload = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    Papa.parse(file, {
+      complete: ({ data }) => {
+        const uniqueAddresses = Array.from(
+          new Set(
+            data
+              .flat()
+              .filter((item): item is string => typeof item === "string" && isAddress(item.trim())),
+          ),
+        ).join(",");
+
+        const formattedAddresses = uniqueAddresses.split(",").map((addr) => getAddress(addr));
+
+        setValue(name, formattedAddresses);
+      },
+      skipEmptyLines: true,
+    });
+
+    // Reset the input value to allow re-uploading the same file if needed
+    event.target.value = "";
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-start">
+        <Button
+          value="Import CSV"
+          className="bg-grey-100 text-grey-900"
+          icon={<UploadIcon className="size-4 text-grey-900" />}
+          onClick={() => fileInputRef.current?.click()}
+        />
+        <input
+          type="file"
+          id="csv-upload"
+          className="hidden"
+          accept=".csv"
+          onChange={handleCSVUpload}
+          ref={fileInputRef}
+        />
+      </div>
+
+      <Controller
+        name={name}
+        control={control}
+        render={({ field }) => (
+          <TextArea
+            value={field.value}
+            onChange={(e) => field.onChange(e.target.value.split(","))}
+            placeholder="Enter all the addresses as a comma-separated list here..."
+            className="min-h-52 w-full"
+          />
+        )}
+      />
+
+      <p className="text-sm text-grey-500">
+        Enter all the addresses as a comma-separated list below. Duplicates and invalid addresses
+        will automatically be removed.
+      </p>
+    </div>
+  );
+};
+
+/**
+ * Utility function to validate a list of addresses
+ * @param addresses - A comma-separated string of addresses
+ * @returns An array of valid, trimmed addresses
+ */
+export const validateAddresses = (addresses: string): string[] => {
+  return addresses
+    .split(",")
+    .map((addr) => addr.trim())
+    .filter((addr) => isAddress(addr));
+};
diff --git a/src/components/Form/FormControllers/AllowlistFormController/index.ts b/src/components/Form/FormControllers/AllowlistFormController/index.ts
new file mode 100644
index 00000000..87ef5cb2
--- /dev/null
+++ b/src/components/Form/FormControllers/AllowlistFormController/index.ts
@@ -0,0 +1 @@
+export * from "./AllowlistFormController";
diff --git a/src/components/Form/FormControllers/ApplicationQuestionsFormController/ApplicationQuestionsFormController.tsx b/src/components/Form/FormControllers/ApplicationQuestionsFormController/ApplicationQuestionsFormController.tsx
new file mode 100644
index 00000000..688639de
--- /dev/null
+++ b/src/components/Form/FormControllers/ApplicationQuestionsFormController/ApplicationQuestionsFormController.tsx
@@ -0,0 +1,303 @@
+// src/components/Form/ApplicationQuestionsController.tsx
+import React from "react";
+import { useEffect } from "react";
+import { useFieldArray, useFormContext, Controller } from "react-hook-form";
+
+import { PlusIcon } from "@heroicons/react/outline";
+import { X } from "lucide-react";
+
+import { Button } from "@/primitives/Button";
+import { Checkbox } from "@/ui-shadcn/checkbox";
+import { Input } from "@/ui-shadcn/input";
+import { Label } from "@/ui-shadcn/label";
+import { Select, SelectTrigger, SelectContent, SelectItem } from "@/ui-shadcn/select";
+import { Switch } from "@/ui-shadcn/switch";
+
+import { inputTypes } from "./utils";
+
+export interface ApplicationQuestionsFormControllerProps {
+  name: string;
+}
+
+export const ApplicationQuestionsFormController: React.FC<
+  ApplicationQuestionsFormControllerProps
+> = ({ name }) => {
+  const { control, watch, setValue } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ control, name: `${name}.questions` });
+
+  const twitterRequired = watch(`${name}.requirements.twitter.required`);
+  const githubRequired = watch(`${name}.requirements.github.required`);
+
+  useEffect(() => {
+    if (!twitterRequired || !githubRequired) {
+      setValue(`${name}.requirements.twitter.verification`, false);
+      setValue(`${name}.requirements.github.verification`, false);
+    }
+  }, [twitterRequired, githubRequired]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4">
+        <Label className="text-[16px]/[24px] font-medium">Project socials</Label>
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-4">
+            <Controller
+              name={`${name}.requirements.twitter.required`}
+              control={control}
+              render={({ field }) => (
+                <div className="flex w-64 items-center justify-between ">
+                  <Label className="text-sm font-normal">Project X</Label>
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-normal">
+                      {field.value ? "Required" : "Optional"}
+                    </Label>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+          {watch(`${name}.requirements.twitter.required`) && (
+            <div className="flex items-center gap-4">
+              <Controller
+                name={`${name}.requirements.twitter.verification`}
+                control={control}
+                render={({ field }) => (
+                  <div className="flex w-64 items-center justify-between">
+                    <Label className="text-sm font-normal">Account Verification</Label>
+                    <div className="flex items-center gap-2">
+                      <Label className="text-sm font-normal">
+                        {field.value ? "Required" : "Optional"}
+                      </Label>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+          )}
+          <div className="flex items-center gap-4">
+            <Controller
+              name={`${name}.requirements.github.required`}
+              control={control}
+              render={({ field }) => (
+                <div className="flex w-64 items-center justify-between">
+                  <Label className="text-sm font-normal">Project Github</Label>
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-normal">
+                      {field.value ? "Required" : "Optional"}
+                    </Label>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+          {watch(`${name}.requirements.github.required`) && (
+            <div className="flex items-center gap-4">
+              <Controller
+                name={`${name}.requirements.github.verification`}
+                control={control}
+                render={({ field }) => (
+                  <div className="flex w-64 items-center justify-between">
+                    <Label className="text-sm font-normal">Account Verification</Label>
+                    <div className="flex items-center gap-2">
+                      <Label className="text-sm font-normal">
+                        {field.value ? "Required" : "Optional"}
+                      </Label>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div>
+        <Label className="text-[16px]/[24px] font-medium">Application questions</Label>
+      </div>
+
+      {fields.map((field, index) => {
+        const typeField = `${name}.questions.${index}.type`;
+        const titleField = `${name}.questions.${index}.title`;
+        const requiredField = `${name}.questions.${index}.required`;
+        const hiddenField = `${name}.questions.${index}.hidden`;
+        const encryptedField = `${name}.questions.${index}.encrypted`;
+        const choicesField = `${name}.questions.${index}.choices`;
+        const selectedType = watch(typeField);
+
+        return (
+          <div key={field.id} className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <Controller
+                name={typeField}
+                control={control}
+                render={({ field }) => (
+                  <div className="flex w-1/4 flex-col gap-2">
+                    <Label>Question Type</Label>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>{field.value || "Select question type"}</SelectTrigger>
+                      <SelectContent>
+                        {inputTypes.map((inputType) => (
+                          <SelectItem key={inputType.value} value={inputType.value}>
+                            {inputType.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              />
+
+              <Controller
+                name={titleField}
+                control={control}
+                render={({ field }) => (
+                  <div className="flex w-3/4 flex-col gap-2">
+                    <Label>Question Title</Label>
+                    <div className="flex flex-col gap-2">
+                      <div className="flex gap-6">
+                        <div className="flex w-full flex-col gap-2">
+                          <div className="flex gap-6">
+                            <Input {...field} placeholder="Enter your question title" />
+                            <div className="flex items-center">
+                              <Button
+                                type="button"
+                                className="bg-transparent p-0"
+                                icon={<X className="size-5 text-red-700" />}
+                                aria-label="Remove question"
+                                onClick={() => remove(index)}
+                              />
+                            </div>
+                          </div>
+                          <div className="flex flex-wrap items-center gap-4">
+                            <Controller
+                              name={requiredField}
+                              control={control}
+                              render={({ field }) => (
+                                <div className="flex items-center gap-2">
+                                  <Checkbox
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                  />
+                                  <Label>Required</Label>
+                                </div>
+                              )}
+                            />
+
+                            <Controller
+                              name={hiddenField}
+                              control={control}
+                              render={({ field }) => (
+                                <div className="flex items-center gap-2">
+                                  <Checkbox
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                  />
+                                  <Label>Hidden</Label>
+                                </div>
+                              )}
+                            />
+
+                            <Controller
+                              name={encryptedField}
+                              control={control}
+                              render={({ field }) => (
+                                <div className="flex items-center gap-2">
+                                  <Checkbox
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                  />
+                                  <Label>Encrypted</Label>
+                                </div>
+                              )}
+                            />
+                          </div>
+                          {selectedType === "multiple-choice" ||
+                          selectedType === "checkbox" ||
+                          selectedType === "dropdown" ? (
+                            <Controller
+                              name={choicesField}
+                              control={control}
+                              render={({ field }) => (
+                                <div className="flex flex-col gap-2 pr-10">
+                                  {field.value?.map((choice: string, choiceIndex: number) => (
+                                    <div
+                                      key={choiceIndex}
+                                      className="flex items-center justify-between gap-2"
+                                    >
+                                      <span className="w-20 font-ui-sans text-sm font-normal">{`Option ${
+                                        choiceIndex + 1
+                                      }`}</span>
+                                      <Input
+                                        value={choice}
+                                        onChange={(e) => {
+                                          const updatedChoices = [...field.value];
+                                          updatedChoices[choiceIndex] = e.target.value;
+                                          field.onChange(updatedChoices);
+                                        }}
+                                        placeholder="Enter answer"
+                                        className="w-full"
+                                      />
+                                      <Button
+                                        type="button"
+                                        className="bg-transparent p-0"
+                                        onClick={() => {
+                                          const updatedChoices = [...field.value];
+                                          updatedChoices.splice(choiceIndex, 1);
+                                          field.onChange(updatedChoices);
+                                        }}
+                                        icon={<X className="size-5 text-red-700" />}
+                                        aria-label="Remove option"
+                                      />
+                                    </div>
+                                  ))}
+                                  <div className="flex justify-start">
+                                    <Button
+                                      type="button"
+                                      onClick={() => field.onChange([...(field.value || []), ""])}
+                                      className="bg-white font-ui-mono text-sm font-medium text-black"
+                                      icon={<PlusIcon className="size-4 text-black" />}
+                                      aria-label="Add option"
+                                      value="Add option"
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                            />
+                          ) : null}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <div className="flex justify-end">
+        <Button
+          type="button"
+          onClick={() =>
+            append({
+              id: fields.length + 1,
+              title: "",
+              type: "short-answer",
+              required: false,
+              hidden: false,
+              encrypted: false,
+              choices: [],
+            })
+          }
+          className="bg-green-100 font-ui-mono text-sm font-medium text-black"
+          icon={<PlusIcon className="size-4 text-black" />}
+          aria-label="Add question"
+          value="Add question"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/ApplicationQuestionsFormController/index.ts b/src/components/Form/FormControllers/ApplicationQuestionsFormController/index.ts
new file mode 100644
index 00000000..b37aa960
--- /dev/null
+++ b/src/components/Form/FormControllers/ApplicationQuestionsFormController/index.ts
@@ -0,0 +1 @@
+export * from "./ApplicationQuestionsFormController";
diff --git a/src/components/Form/FormControllers/ApplicationQuestionsFormController/utils.ts b/src/components/Form/FormControllers/ApplicationQuestionsFormController/utils.ts
new file mode 100644
index 00000000..95cc3123
--- /dev/null
+++ b/src/components/Form/FormControllers/ApplicationQuestionsFormController/utils.ts
@@ -0,0 +1,12 @@
+export const inputTypes = [
+  { value: "email", label: "Email" },
+  { value: "address", label: "Address" },
+  { value: "number", label: "Number" },
+  { value: "text", label: "Text" },
+  { value: "short-answer", label: "Short Answer" },
+  { value: "paragraph", label: "Paragraph" },
+  { value: "multiple-choice", label: "Multiple Choice" },
+  { value: "checkbox", label: "Checkbox" },
+  { value: "dropdown", label: "Dropdown" },
+  { value: "link", label: "Link" },
+];
diff --git a/src/components/Form/FormControllers/DisabledProgramInputFormController/DisabledProgramInputFormController.tsx b/src/components/Form/FormControllers/DisabledProgramInputFormController/DisabledProgramInputFormController.tsx
new file mode 100644
index 00000000..4ea5fe37
--- /dev/null
+++ b/src/components/Form/FormControllers/DisabledProgramInputFormController/DisabledProgramInputFormController.tsx
@@ -0,0 +1,39 @@
+// src/components/Form/DisabledInputController.tsx
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { getChainInfo } from "@/lib";
+import { Icon } from "@/primitives/Icon";
+
+export interface DisabledProgramInputFormControllerProps {
+  name: string;
+}
+
+export const DisabledProgramInputFormController = ({
+  name,
+}: DisabledProgramInputFormControllerProps) => {
+  const { control, watch } = useFormContext();
+
+  const value = watch(name);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Controller name={name} control={control} render={() => renderDisabledProgramInput(value)} />
+    </div>
+  );
+};
+
+export const renderDisabledProgramInput = (value: {
+  chainId: number;
+  programId: string;
+  programName: string;
+}) => {
+  const { chainId, programName } = value;
+  const chainInfo = getChainInfo(chainId);
+  return (
+    <div className="flex cursor-not-allowed gap-2 rounded-md bg-grey-100 px-3 py-2 font-normal text-grey-500">
+      <Icon type={chainInfo.icon} />
+      <div>{programName}</div>
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/DisabledProgramInputFormController/index.ts b/src/components/Form/FormControllers/DisabledProgramInputFormController/index.ts
new file mode 100644
index 00000000..5255bdcb
--- /dev/null
+++ b/src/components/Form/FormControllers/DisabledProgramInputFormController/index.ts
@@ -0,0 +1 @@
+export * from "./DisabledProgramInputFormController";
diff --git a/src/components/Form/FormControllers/FieldArrayFormController/FieldArrayFormController.tsx b/src/components/Form/FormControllers/FieldArrayFormController/FieldArrayFormController.tsx
new file mode 100644
index 00000000..5029f88a
--- /dev/null
+++ b/src/components/Form/FormControllers/FieldArrayFormController/FieldArrayFormController.tsx
@@ -0,0 +1,83 @@
+// src/components/Form/FieldArrayController.tsx
+import React from "react";
+import { useFieldArray, useFormContext, Controller } from "react-hook-form";
+
+import { PlusIcon, TrashIcon, XIcon } from "@heroicons/react/outline";
+
+import { Button } from "@/primitives/Button";
+import { Input } from "@/ui-shadcn/input";
+import { Label } from "@/ui-shadcn/label";
+
+export interface FieldArrayProps {
+  itemName: string;
+  placeholder?: string;
+  addButtonLabel?: string;
+  removeIconType?: "x" | "trash";
+  buttonJustify?: "start" | "center" | "end";
+}
+
+export interface FieldArrayFormControllerProps extends FieldArrayProps {
+  name: string;
+}
+
+export const FieldArrayFormController: React.FC<FieldArrayFormControllerProps> = ({
+  name,
+  itemName,
+  placeholder,
+  addButtonLabel,
+  removeIconType = "x",
+  buttonJustify = "end",
+}) => {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ control, name });
+
+  const renderRemoveIcon = (index: number) => {
+    return removeIconType === "x" ? (
+      <Button
+        className="bg-transparent"
+        onClick={() => remove(index)}
+        aria-label="Remove field X"
+        icon={<XIcon className="size-5 text-red-500" />}
+      />
+    ) : (
+      <Button
+        className="bg-transparent"
+        onClick={() => remove(index)}
+        aria-label="Remove field Trash"
+        icon={<TrashIcon className="size-5 text-red-500" />}
+      />
+    );
+  };
+
+  return (
+    <div>
+      {fields.map((field, index) => (
+        <div key={field.id} className="mb-4 flex items-center gap-2">
+          <Controller
+            name={`${name}.${index}`}
+            control={control}
+            render={({ field }) => (
+              <div className="flex w-full flex-col gap-2">
+                <Label htmlFor={`${field.name}-${index}`}>{`${itemName} ${index + 1}`}</Label>
+                <div className="flex items-center gap-2">
+                  <Input {...field} placeholder={placeholder} />
+                  {renderRemoveIcon(index)}
+                </div>
+              </div>
+            )}
+          />
+        </div>
+      ))}
+      <div className={`flex justify-${buttonJustify}`}>
+        <Button
+          type="button"
+          onClick={() => append("")}
+          className="bg-green-100 text-green-700"
+          value={addButtonLabel}
+          icon={<PlusIcon className="size-4 text-green-700" />}
+          aria-label="Add field"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/FieldArrayFormController/index.ts b/src/components/Form/FormControllers/FieldArrayFormController/index.ts
new file mode 100644
index 00000000..c67f629a
--- /dev/null
+++ b/src/components/Form/FormControllers/FieldArrayFormController/index.ts
@@ -0,0 +1 @@
+export * from "./FieldArrayFormController";
diff --git a/src/components/Form/FormControllers/FileUploadController/FileUploadController.tsx b/src/components/Form/FormControllers/FileUploadController/FileUploadController.tsx
new file mode 100644
index 00000000..2f4f4193
--- /dev/null
+++ b/src/components/Form/FormControllers/FileUploadController/FileUploadController.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FileUpload, FileUploadProps } from "@/primitives/FileUpload";
+
+export interface FileUploadFormControllerProps extends Omit<FileUploadProps, "onChange" | "value"> {
+  name: string;
+}
+
+export const FileUploadFormController: React.FC<FileUploadFormControllerProps> = ({
+  name,
+  mimeTypes,
+  className,
+}) => {
+  const { control, watch } = useFormContext();
+  const fieldValue = watch(name);
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FileUpload
+          onChange={async (file) => {
+            if (file) {
+              field.onChange(file);
+            }
+          }}
+          value={fieldValue}
+          mimeTypes={mimeTypes}
+          className={className}
+        />
+      )}
+    />
+  );
+};
diff --git a/src/components/Form/FormControllers/FileUploadController/index.ts b/src/components/Form/FormControllers/FileUploadController/index.ts
new file mode 100644
index 00000000..8c987650
--- /dev/null
+++ b/src/components/Form/FormControllers/FileUploadController/index.ts
@@ -0,0 +1 @@
+export * from "./FileUploadController";
diff --git a/src/components/Form/FormControllers/MarkdownEditorFormController/MarkdownEditorFormController.tsx b/src/components/Form/FormControllers/MarkdownEditorFormController/MarkdownEditorFormController.tsx
new file mode 100644
index 00000000..16dd0f8c
--- /dev/null
+++ b/src/components/Form/FormControllers/MarkdownEditorFormController/MarkdownEditorFormController.tsx
@@ -0,0 +1,23 @@
+// src/components/Form/MarkdownEditorController.tsx
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { MarkdownEditor } from "@/primitives/MarkdownEditor";
+
+export interface MarkdownEditorFormControllerProps {
+  name: string;
+}
+
+export const MarkdownEditorFormController: React.FC<MarkdownEditorFormControllerProps> = ({
+  name,
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => <MarkdownEditor value={field.value} onChange={field.onChange} />}
+    />
+  );
+};
diff --git a/src/components/Form/FormControllers/MarkdownEditorFormController/index.ts b/src/components/Form/FormControllers/MarkdownEditorFormController/index.ts
new file mode 100644
index 00000000..7dd0870a
--- /dev/null
+++ b/src/components/Form/FormControllers/MarkdownEditorFormController/index.ts
@@ -0,0 +1 @@
+export * from "./MarkdownEditorFormController";
diff --git a/src/components/Form/FormControllers/MetricsFormController/MetricsFormController.tsx b/src/components/Form/FormControllers/MetricsFormController/MetricsFormController.tsx
new file mode 100644
index 00000000..f40a689c
--- /dev/null
+++ b/src/components/Form/FormControllers/MetricsFormController/MetricsFormController.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import {
+  MetricCard,
+  MetricCardProps,
+} from "@/features/retrofunding/components/MetricCard/MetricCard";
+import { Button } from "@/primitives/Button";
+import { Icon } from "@/primitives/Icon";
+import { IconType } from "@/primitives/Icon";
+
+export interface MetricsProps {
+  metrics: Omit<MetricCardProps, "variant" | "onClick">[];
+}
+
+export interface MetricsFormControllerProps extends MetricsProps {
+  name: string;
+}
+export const MetricsFormController: React.FC<MetricsFormControllerProps> = ({ name, metrics }) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field: { value, onChange } }) => {
+        const selectedMetrics = value || [];
+
+        const handleToggleMetric = (title: string) => {
+          const newValue = selectedMetrics.includes(title)
+            ? selectedMetrics.filter((t: string) => t !== title)
+            : [...selectedMetrics, title];
+          onChange(newValue);
+        };
+
+        const isMetricSelected = (title: string) => selectedMetrics.includes(title);
+
+        return (
+          <div className="space-y-6">
+            {metrics.map((metric) => (
+              <MetricCard
+                key={metric.title}
+                {...metric}
+                onClick={() => handleToggleMetric(metric.title)}
+                className="w-full"
+                customButton={
+                  isMetricSelected(metric.title) ? (
+                    <Button
+                      value={"Added to Round"}
+                      onClick={() => handleToggleMetric(metric.title)}
+                      className="flex items-center gap-2 rounded bg-moss-100 px-4 py-2 text-sm font-medium text-moss-700 hover:bg-moss-50"
+                      icon={<Icon className="size-4" type={IconType.CHECK} />}
+                    />
+                  ) : (
+                    <Button
+                      value={"Add to Round"}
+                      onClick={() => handleToggleMetric(metric.title)}
+                      variant="light-purple"
+                      icon={<Icon className="size-4" type={IconType.CHECK} />}
+                    />
+                  )
+                }
+              />
+            ))}
+            {errors && (
+              <div className="text-red-500">
+                {Array.isArray(errors) && errors.map((error) => error.message)}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
diff --git a/src/components/Form/FormControllers/MetricsFormController/index.ts b/src/components/Form/FormControllers/MetricsFormController/index.ts
new file mode 100644
index 00000000..935147e5
--- /dev/null
+++ b/src/components/Form/FormControllers/MetricsFormController/index.ts
@@ -0,0 +1 @@
+export * from "./MetricsFormController";
diff --git a/src/components/Form/FormControllers/RoundDatesFormController/RoundDatesFormController.tsx b/src/components/Form/FormControllers/RoundDatesFormController/RoundDatesFormController.tsx
new file mode 100644
index 00000000..1a8e0355
--- /dev/null
+++ b/src/components/Form/FormControllers/RoundDatesFormController/RoundDatesFormController.tsx
@@ -0,0 +1,255 @@
+import * as React from "react";
+import { useFormContext, Controller } from "react-hook-form";
+
+import moment from "moment-timezone";
+
+import { Checkbox } from "@/ui-shadcn/checkbox";
+import { Label } from "@/ui-shadcn/label";
+import { Select, SelectTrigger, SelectContent, SelectItem } from "@/ui-shadcn/select";
+
+import { SelectedDateRenderer } from "./SelectedDateRenderer";
+import { TimelineRow } from "./TimelineRow";
+import { timezones } from "./utils";
+
+export const RoundDatesFormController: React.FC = () => {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
+
+  const timezone = watch("roundDates.timezone");
+  const roundHasNoEndDate = watch("roundDates.round.noEndDate");
+  const applicationsStart = watch("roundDates.applications.start");
+  const applicationsEnd = watch("roundDates.applications.end");
+  const roundStart = watch("roundDates.round.start");
+  const roundEnd = watch("roundDates.round.end");
+
+  // When timezone is changed, we need to update the dates to match the new timezone
+  React.useEffect(() => {
+    const timezone = watch("roundDates.timezone");
+    if (timezone) {
+      if (applicationsStart) {
+        setValue("roundDates.applications.start", moment.tz(applicationsStart, timezone).format());
+      }
+      if (applicationsEnd) {
+        setValue("roundDates.applications.end", moment.tz(applicationsEnd, timezone).format());
+      }
+      if (roundStart) {
+        setValue("roundDates.round.start", moment.tz(roundStart, timezone).format());
+      }
+      if (roundEnd) {
+        setValue("roundDates.round.end", moment.tz(roundEnd, timezone).format());
+      }
+    }
+  }, [timezone]);
+
+  const isSelected = (v?: string) => Boolean(v && v.trim() !== "");
+  const applicationsLineColor = isSelected(applicationsEnd) ? "bg-grey-300" : "bg-grey-100";
+  const roundLineColor = isSelected(roundEnd) || roundHasNoEndDate ? "bg-grey-300" : "bg-grey-100";
+
+  const formErrors = errors.roundDates as {
+    timezone?: { message: string };
+    applications?: { start?: { message: string }; end?: { message: string } };
+    round?: { start?: { message: string }; end?: { message: string } };
+  };
+
+  // Get error states from nested fields
+  const timezoneError = formErrors?.timezone?.message;
+  const appStartError = formErrors?.applications?.start?.message;
+  const appEndError = formErrors?.applications?.end?.message;
+  const roundStartError = formErrors?.round?.start?.message;
+  const roundEndError = formErrors?.round?.end?.message;
+
+  // Collect all errors for bottom display
+  const allErrors = [
+    { field: "Timezone", message: timezoneError },
+    { field: "Applications start", message: appStartError },
+    { field: "Applications end", message: appEndError },
+    { field: "Round start", message: roundStartError },
+    { field: "Round end", message: roundEndError },
+  ].filter((error) => error.message);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="max-w-sm">
+        <Controller
+          name="roundDates.timezone"
+          control={control}
+          render={({ field }) => (
+            <Select onValueChange={field.onChange} value={field.value}>
+              <Label className="ml-1 text-sm font-normal">Select timezone</Label>
+              <SelectTrigger
+                id="roundDates.timezone"
+                className={`w-40 ${timezoneError ? "border-red-500" : ""}`}
+              >
+                {field.value
+                  ? timezones.find((tz) => tz.value === field.value)?.label
+                  : "Select timezone"}
+              </SelectTrigger>
+              <SelectContent className="w-40">
+                {timezones.map((tz) => (
+                  <SelectItem key={tz.value} value={tz.value}>
+                    {tz.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <TimelineRow
+          label="Applications start"
+          isSelected={isSelected(applicationsStart)}
+          lineColor={applicationsLineColor}
+          lineHeight="h-[75px]"
+          showLine
+          error={appStartError}
+        >
+          <Controller
+            name="roundDates.applications.start"
+            control={control}
+            render={({ field }) => (
+              <SelectedDateRenderer
+                id="roundDates.applications.start"
+                dateValue={field.value || ""}
+                onChange={(val) => {
+                  /*
+                   * 1) Interpret the user’s typed local time (val) in
+                   *    the currently selected timezone.
+                   * 2) Store it as an ISO-like string with offset for that timezone.
+                   *    (e.g. "2025-01-04T15:00:00-05:00").
+                   */
+                  const tzToUse = timezone || moment.tz.guess();
+                  const dt = moment.tz(val, "YYYY-MM-DDTHH:mm", tzToUse).format(); // => "YYYY-MM-DDTHH:mm:ssZ"
+                  field.onChange(dt);
+                }}
+                displayTimezone={timezone}
+                error={appStartError}
+              />
+            )}
+          />
+        </TimelineRow>
+
+        <TimelineRow
+          label="Applications end"
+          isSelected={isSelected(applicationsEnd)}
+          showLine={false}
+          error={appEndError}
+        >
+          <Controller
+            name="roundDates.applications.end"
+            control={control}
+            render={({ field }) => (
+              <SelectedDateRenderer
+                id="roundDates.applications.end"
+                dateValue={field.value || ""}
+                onChange={(val) => {
+                  const tzToUse = timezone || moment.tz.guess();
+                  const dt = moment.tz(val, "YYYY-MM-DDTHH:mm", tzToUse).format();
+                  field.onChange(dt);
+                }}
+                min={applicationsStart || ""}
+                displayTimezone={timezone}
+                error={appEndError}
+              />
+            )}
+          />
+        </TimelineRow>
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <TimelineRow
+          label="Round starts"
+          isSelected={isSelected(roundStart)}
+          lineColor={roundLineColor}
+          showLine
+          lineHeight="h-[104px]"
+          error={roundStartError}
+        >
+          <div className="flex flex-col gap-2 ">
+            <Controller
+              name="roundDates.round.start"
+              control={control}
+              render={({ field }) => (
+                <SelectedDateRenderer
+                  id="roundDates.round.start"
+                  dateValue={field.value || ""}
+                  onChange={(val) => {
+                    const tzToUse = timezone || moment.tz.guess();
+                    const dt = moment.tz(val, "YYYY-MM-DDTHH:mm", tzToUse).format();
+                    field.onChange(dt);
+                  }}
+                  displayTimezone={timezone}
+                  error={roundStartError}
+                />
+              )}
+            />
+            <div className="flex items-center gap-2">
+              <Controller
+                name="roundDates.round.noEndDate"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setValue("roundDates.round.end", "");
+                      }
+                      field.onChange(checked);
+                    }}
+                  />
+                )}
+              />
+              <Label className="text-sm font-normal">This round does not have an end date</Label>
+            </div>
+          </div>
+        </TimelineRow>
+
+        <TimelineRow
+          label="Round ends"
+          isSelected={isSelected(roundEnd) || roundHasNoEndDate}
+          showLine={false}
+          error={roundEndError}
+        >
+          <Controller
+            name="roundDates.round.end"
+            control={control}
+            render={({ field }) => (
+              <SelectedDateRenderer
+                id="roundDates.round.end"
+                dateValue={field.value || ""}
+                onChange={(val) => {
+                  const tzToUse = timezone || moment.tz.guess();
+                  const dt = moment.tz(val, "YYYY-MM-DDTHH:mm", tzToUse).format();
+                  field.onChange(dt);
+                }}
+                disabled={roundHasNoEndDate}
+                min={roundStart || ""}
+                displayTimezone={timezone}
+                error={roundEndError}
+              />
+            )}
+          />
+        </TimelineRow>
+      </div>
+
+      {/* Error messages section */}
+      {allErrors.length > 0 && (
+        <div className="mt-4 rounded-md border border-red-300 bg-red-50 p-4">
+          <div className="flex flex-col gap-2">
+            {allErrors.map((error, index) => (
+              <div key={index} className="flex items-start gap-2 text-sm ">
+                <span className="font-medium">{error.field}:</span>
+                <span>{error.message}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/RoundDatesFormController/SelectedDateRenderer.tsx b/src/components/Form/FormControllers/RoundDatesFormController/SelectedDateRenderer.tsx
new file mode 100644
index 00000000..61551250
--- /dev/null
+++ b/src/components/Form/FormControllers/RoundDatesFormController/SelectedDateRenderer.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import moment from "moment-timezone";
+
+import { IconType, Icon } from "@/primitives/Icon";
+
+interface SelectedDateRendererProps {
+  id: string;
+  dateValue: string;
+  onChange: (val: string) => void;
+  disabled?: boolean;
+  min?: string;
+  displayTimezone?: string;
+  error?: string;
+}
+
+export const SelectedDateRenderer: React.FC<SelectedDateRendererProps> = ({
+  id,
+  dateValue,
+  onChange,
+  disabled,
+  min,
+  displayTimezone,
+  error,
+}) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    if (!disabled) {
+      if (inputRef.current?.showPicker) {
+        inputRef.current.showPicker();
+      } else {
+        inputRef.current?.click();
+      }
+    }
+  };
+
+  /**
+   * How we display the user-chosen time:
+   * - We parse the stored string (which includes its offset).
+   * - Then we call `.tz(currentTimeZone, true)` so the local hour doesn't shift
+   *   if the user toggles to a new timezone in the form.
+   * - Finally, we show it in the "YYYY-MM-DDTHH:mm" format for <input>.
+   */
+  const inputValue = React.useMemo(() => {
+    if (!dateValue) return "";
+    const tzToUse = displayTimezone || moment.tz.guess();
+    // parse the stored date (which might have offset),
+    // then .tz(tzToUse, true) => re-interpret the same "local hour" in the new TZ
+    const dt = moment(dateValue).tz(tzToUse, true);
+    return dt.format("YYYY-MM-DDTHH:mm");
+  }, [dateValue, displayTimezone]);
+
+  /**
+   * For the textual label, e.g. "January 04, 2025 - 15:00 PST"
+   */
+  const displayText = React.useMemo(() => {
+    if (!dateValue) return "Select date and time";
+    const tzToUse = displayTimezone || moment.tz.guess();
+    const dt = moment(dateValue).tz(tzToUse, true);
+    return dt.format("MMMM DD, YYYY - HH:mm z");
+  }, [dateValue, displayTimezone]);
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        id={id}
+        type="datetime-local"
+        value={inputValue}
+        disabled={disabled}
+        min={min}
+        onChange={(e) => onChange(e.target.value)}
+        className="hidden"
+      />
+      <div
+        className={`
+            flex w-[250px] items-center gap-2 rounded-md border bg-white p-2 text-sm
+            ${error ? "border-red-500" : "border-grey-300"}
+            ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-grey-50"}
+          `}
+        onClick={handleClick}
+      >
+        <Icon
+          type={IconType.CALENDAR}
+          className={error ? "size-4 text-red-500" : "size-4 text-black"}
+        />
+        <span className="text-sm font-normal">{displayText}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/RoundDatesFormController/TimelineRow.tsx b/src/components/Form/FormControllers/RoundDatesFormController/TimelineRow.tsx
new file mode 100644
index 00000000..479629f5
--- /dev/null
+++ b/src/components/Form/FormControllers/RoundDatesFormController/TimelineRow.tsx
@@ -0,0 +1,48 @@
+import { CheckCircle2Icon } from "lucide-react";
+
+import { Label } from "@/ui-shadcn/label";
+
+interface TimelineRowProps {
+  label: string;
+  isSelected: boolean;
+  lineColor?: string;
+  lineHeight?: string;
+  showLine?: boolean;
+  error?: string;
+  children: React.ReactNode;
+}
+
+export const TimelineRow: React.FC<TimelineRowProps> = ({
+  label,
+  isSelected,
+  lineColor = "bg-grey-300",
+  lineHeight,
+  showLine = false,
+  error,
+  children,
+}) => {
+  return (
+    <div className="relative">
+      <div className="flex gap-6">
+        <div className="relative flex flex-col items-center">
+          {isSelected ? (
+            <CheckCircle2Icon className={`size-4 ${error ? "text-red-500" : "text-moss-500"}`} />
+          ) : (
+            <div
+              className={`size-4 rounded-full border ${
+                error ? "border-red-500" : "border-grey-300"
+              }`}
+            />
+          )}
+          {showLine && (
+            <div className={`absolute bottom-0 top-[15px] ${lineHeight} w-px ${lineColor}`} />
+          )}
+        </div>
+        <div className="flex flex-col items-start justify-start gap-2">
+          <Label className="text-sm font-normal">{label}</Label>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Form/FormControllers/RoundDatesFormController/index.ts b/src/components/Form/FormControllers/RoundDatesFormController/index.ts
new file mode 100644
index 00000000..41b46504
--- /dev/null
+++ b/src/components/Form/FormControllers/RoundDatesFormController/index.ts
@@ -0,0 +1 @@
+export * from "./RoundDatesFormController";
diff --git a/src/components/Form/FormControllers/RoundDatesFormController/utils.ts b/src/components/Form/FormControllers/RoundDatesFormController/utils.ts
new file mode 100644
index 00000000..46652888
--- /dev/null
+++ b/src/components/Form/FormControllers/RoundDatesFormController/utils.ts
@@ -0,0 +1,18 @@
+import moment from "moment";
+
+export const timezones = [
+  {
+    label: `UTC${moment.tz(moment.tz.guess()).format("Z")}`,
+    value: moment.tz.guess(),
+  },
+  { label: "UTC-10", value: "Pacific/Honolulu" },
+  { label: "UTC-7", value: "America/Denver" },
+  { label: "UTC-5", value: "America/New_York" },
+  { label: "UTC-4", value: "America/Halifax" },
+  { label: "UTC", value: "UTC" },
+  { label: "UTC+1", value: "Europe/London" },
+  { label: "UTC+2", value: "Africa/Cairo" },
+  { label: "UTC+3", value: "Europe/Moscow" },
+  { label: "UTC+5:30", value: "Asia/Kolkata" },
+  { label: "UTC+8", value: "Asia/Shanghai" },
+];
diff --git a/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx b/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx
new file mode 100644
index 00000000..e9c34e8b
--- /dev/null
+++ b/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { Select, SelectProps } from "@/primitives/Select";
+
+export interface SelectFormControllerProps extends SelectProps {
+  name: string;
+}
+
+export const SelectFormController: React.FC<any> = ({
+  name,
+  options,
+  placeholder,
+  className,
+  size,
+  variant,
+}) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <Select
+          options={options}
+          defaultValue={field.value}
+          onValueChange={field.onChange}
+          placeholder={placeholder}
+          className={className}
+          size={size}
+          variant={variant}
+        />
+      )}
+    />
+  );
+};
diff --git a/src/components/Form/FormControllers/SelectFormController/index.ts b/src/components/Form/FormControllers/SelectFormController/index.ts
new file mode 100644
index 00000000..dfe93e5c
--- /dev/null
+++ b/src/components/Form/FormControllers/SelectFormController/index.ts
@@ -0,0 +1 @@
+export * from "./SelectFormController";
diff --git a/src/components/Form/FormControllers/index.ts b/src/components/Form/FormControllers/index.ts
new file mode 100644
index 00000000..cd650aef
--- /dev/null
+++ b/src/components/Form/FormControllers/index.ts
@@ -0,0 +1,9 @@
+export * from "./FileUploadController";
+export * from "./MarkdownEditorFormController";
+export * from "./SelectFormController";
+export * from "./FieldArrayFormController";
+export * from "./RoundDatesFormController";
+export * from "./AllowlistFormController";
+export * from "./ApplicationQuestionsFormController";
+export * from "./MetricsFormController";
+export * from "./DisabledProgramInputFormController";
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
new file mode 100644
index 00000000..e0fadaf1
--- /dev/null
+++ b/src/components/Form/index.ts
@@ -0,0 +1,4 @@
+export * from "./Form";
+export * from "./types";
+export * from "./utils";
+export * from "./FormControllers";
diff --git a/src/components/Form/types/fieldTypes.ts b/src/components/Form/types/fieldTypes.ts
new file mode 100644
index 00000000..0db40e5a
--- /dev/null
+++ b/src/components/Form/types/fieldTypes.ts
@@ -0,0 +1,122 @@
+import { FieldArrayProps, MetricsProps } from "@/components/Form";
+import { FileUploadProps } from "@/primitives/FileUpload";
+import { MarkdownEditorProps } from "@/primitives/MarkdownEditor";
+import { SelectProps } from "@/primitives/Select";
+
+export interface BaseValidation {
+  required?: boolean | string;
+  isObject?: boolean;
+  isRoundDates?: boolean;
+  // ...
+}
+
+export interface FileValidationConfig {
+  maxSize?: number;
+  maxSizeMessage?: string;
+  allowedTypes?: string[];
+  allowedTypesMessage?: string;
+}
+
+export interface ArrayValidationConfig {
+  itemType?: "string" | "address";
+  minItems?: number;
+  minItemsMessage?: string;
+  maxItems?: number;
+  maxItemsMessage?: string;
+}
+
+export interface StringValidationConfig {
+  minLength?: number;
+  minLengthMessage?: string;
+  maxLength?: number;
+  maxLengthMessage?: string;
+  pattern?: string | RegExp;
+  patternMessage?: string;
+}
+
+export interface ValidationConfig extends BaseValidation {
+  fileValidation?: FileValidationConfig;
+  arrayValidation?: ArrayValidationConfig;
+  stringValidation?: StringValidationConfig;
+  // any other custom validations
+}
+
+export interface BaseField {
+  name: string;
+  label: string;
+  validation?: ValidationConfig;
+  className?: string;
+}
+
+export interface InputField {
+  field: BaseField;
+  component: "Input";
+  type?: string;
+  placeholder?: string;
+}
+
+export interface TextareaField {
+  field: BaseField;
+  component: "Textarea";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  heading?: string;
+  placeholder?: string;
+}
+
+export interface MarkdownEditorField extends Omit<MarkdownEditorProps, "onChange" | "value"> {
+  field: BaseField;
+  component: "MarkdownEditor";
+}
+
+export interface FileUploadField extends FileUploadProps {
+  field: BaseField;
+  component: "FileUpload";
+}
+
+export interface SelectField extends SelectProps {
+  field: BaseField;
+  component: "Select";
+}
+
+export interface FieldArray extends FieldArrayProps {
+  field: BaseField;
+  component: "FieldArray";
+}
+
+export interface RoundDates {
+  field: BaseField;
+  component: "RoundDates";
+}
+
+export interface Metrics extends MetricsProps {
+  field: BaseField;
+  component: "Metrics";
+}
+
+export interface ApplicationQuestions {
+  field: BaseField;
+  component: "ApplicationQuestions";
+}
+
+export interface Allowlist {
+  field: BaseField;
+  component: "Allowlist";
+}
+
+export interface DisabledProgramInput {
+  field: BaseField;
+  component: "DisabledProgramInput";
+}
+
+export type FormField =
+  | InputField
+  | TextareaField
+  | MarkdownEditorField
+  | FileUploadField
+  | SelectField
+  | FieldArray
+  | RoundDates
+  | Metrics
+  | ApplicationQuestions
+  | Allowlist
+  | DisabledProgramInput;
diff --git a/src/components/Form/types/index.ts b/src/components/Form/types/index.ts
new file mode 100644
index 00000000..5051a9dc
--- /dev/null
+++ b/src/components/Form/types/index.ts
@@ -0,0 +1 @@
+export * from "./fieldTypes";
diff --git a/src/components/Form/utils/buildSchemaFromFields.ts b/src/components/Form/utils/buildSchemaFromFields.ts
new file mode 100644
index 00000000..61ce42ae
--- /dev/null
+++ b/src/components/Form/utils/buildSchemaFromFields.ts
@@ -0,0 +1,63 @@
+// File: utils/buildSchemaFromFields.ts
+import { z } from "zod";
+
+import { FormField } from "../types/fieldTypes";
+import { buildArraySchema } from "./validations/validateArray";
+import { buildFileSchema } from "./validations/validateFile";
+import { getRoundDatesSchema } from "./validations/validateRoundDates";
+import { buildStringSchema } from "./validations/validateString";
+
+/**
+ * Builds a Zod schema object from an array of FormFields.
+ * Each field can have different validation rules, which we
+ * delegate to separate utility functions for clarity.
+ */
+export function buildSchemaFromFields(fields: FormField[]): z.ZodObject<any> {
+  const shape: Record<string, z.ZodTypeAny> = {};
+
+  for (const { field } of fields) {
+    const { validation, name, label } = field;
+    let fieldSchema: z.ZodTypeAny;
+
+    // 1) File validation
+    if (validation?.fileValidation) {
+      fieldSchema = buildFileSchema(validation.fileValidation);
+      shape[name] = fieldSchema;
+      continue;
+    }
+
+    // 2) isObject
+    if (validation?.isObject) {
+      // Example: for "ApplicationQuestions" or any arbitrary object.
+      // You might want to expand this if you have a known shape.
+      shape[name] = z.object({});
+      continue;
+    }
+
+    // 3) arrayValidation
+    if (validation?.arrayValidation) {
+      fieldSchema = buildArraySchema(validation.arrayValidation);
+      shape[name] = fieldSchema;
+      continue;
+    }
+
+    // 4) isRoundDates
+    if (validation?.isRoundDates) {
+      shape[name] = getRoundDatesSchema();
+      continue;
+    }
+
+    // 5) isStringValidation
+    if (validation?.stringValidation) {
+      fieldSchema = buildStringSchema(label, validation?.required, validation?.stringValidation);
+      shape[name] = fieldSchema;
+      continue;
+    }
+
+    // 6) Otherwise, default to string-based validation
+    shape[name] = z.string();
+  }
+
+  // Return a Zod object with the constructed shape
+  return z.object(shape);
+}
diff --git a/src/components/Form/utils/componentRegistry.ts b/src/components/Form/utils/componentRegistry.ts
new file mode 100644
index 00000000..939ab06c
--- /dev/null
+++ b/src/components/Form/utils/componentRegistry.ts
@@ -0,0 +1,62 @@
+import { TextArea } from "@/primitives/TextArea";
+import { Input } from "@/ui-shadcn/input";
+
+import { AllowlistFormController } from "../FormControllers";
+import { ApplicationQuestionsFormController } from "../FormControllers";
+import { FieldArrayFormController } from "../FormControllers";
+import { FileUploadFormController } from "../FormControllers";
+import { MarkdownEditorFormController } from "../FormControllers";
+import { MetricsFormController } from "../FormControllers";
+import { RoundDatesFormController } from "../FormControllers";
+import { DisabledProgramInputFormController } from "../FormControllers";
+import { SelectFormController } from "../FormControllers";
+
+// Extend or adjust as you add more components.
+export const componentRegistry = {
+  Input: {
+    Component: Input,
+    isControlled: false,
+  },
+  Textarea: {
+    Component: TextArea,
+    isControlled: false,
+  },
+  MarkdownEditor: {
+    Component: MarkdownEditorFormController,
+    isControlled: true,
+  },
+  FileUpload: {
+    Component: FileUploadFormController,
+    isControlled: true,
+  },
+  Select: {
+    Component: SelectFormController,
+    isControlled: true,
+  },
+  FieldArray: {
+    Component: FieldArrayFormController,
+    isControlled: true,
+  },
+  RoundDates: {
+    Component: RoundDatesFormController,
+    isControlled: true,
+  },
+  Metrics: {
+    Component: MetricsFormController,
+    isControlled: true,
+  },
+  ApplicationQuestions: {
+    Component: ApplicationQuestionsFormController,
+    isControlled: true,
+  },
+  Allowlist: {
+    Component: AllowlistFormController,
+    isControlled: true,
+  },
+  DisabledProgramInput: {
+    Component: DisabledProgramInputFormController,
+    isControlled: true,
+  },
+};
+
+export type ComponentName = keyof typeof componentRegistry;
diff --git a/src/components/Form/utils/index.ts b/src/components/Form/utils/index.ts
new file mode 100644
index 00000000..8d8e6823
--- /dev/null
+++ b/src/components/Form/utils/index.ts
@@ -0,0 +1,3 @@
+export * from "./buildSchemaFromFields";
+export * from "./componentRegistry";
+export * from "./validations";
diff --git a/src/components/Form/utils/validations/index.ts b/src/components/Form/utils/validations/index.ts
new file mode 100644
index 00000000..5680acae
--- /dev/null
+++ b/src/components/Form/utils/validations/index.ts
@@ -0,0 +1,4 @@
+export * from "./validateArray";
+export * from "./validateFile";
+export * from "./validateRoundDates";
+export * from "./validateString";
diff --git a/src/components/Form/utils/validations/validateArray.ts b/src/components/Form/utils/validations/validateArray.ts
new file mode 100644
index 00000000..7213d9c0
--- /dev/null
+++ b/src/components/Form/utils/validations/validateArray.ts
@@ -0,0 +1,36 @@
+// File: utils/validations/validateArray.ts
+import { isAddress } from "viem";
+import { z } from "zod";
+
+import { ArrayValidationConfig } from "../../types/fieldTypes";
+
+/**
+ * Builds a Zod array schema, optionally:
+ * - limiting min/max items
+ * - validating each item as an address
+ */
+export function buildArraySchema(config: ArrayValidationConfig) {
+  let schema = z.array(z.string());
+
+  if (config.minItems) {
+    schema = schema.min(config.minItems, config.minItemsMessage);
+  }
+  if (config.maxItems) {
+    schema = schema.max(config.maxItems, config.maxItemsMessage);
+  }
+
+  if (config.itemType === "address") {
+    return schema.superRefine((arr, ctx) => {
+      arr.forEach((item, idx) => {
+        if (!isAddress(item.trim())) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Invalid address at index ${idx}`,
+          });
+        }
+      });
+    });
+  }
+
+  return schema;
+}
diff --git a/src/components/Form/utils/validations/validateFile.ts b/src/components/Form/utils/validations/validateFile.ts
new file mode 100644
index 00000000..12c560dc
--- /dev/null
+++ b/src/components/Form/utils/validations/validateFile.ts
@@ -0,0 +1,31 @@
+// File: utils/validations/validateFile.ts
+import { z } from "zod";
+
+import { FileValidationConfig } from "../../types";
+
+/**
+ * Builds a Zod schema for file fields.
+ * - Enforces optional max size.
+ * - Enforces optional allowed mime-types.
+ */
+export function buildFileSchema(config: FileValidationConfig) {
+  let schema = z.instanceof(File);
+  const maxSize = config.maxSize;
+  if (maxSize) {
+    schema = schema.refine(
+      (file) => file.size > maxSize,
+      config.maxSizeMessage || `File exceeds the maximum size of ${maxSize} bytes`,
+    );
+  }
+
+  if (config.allowedTypes && config.allowedTypes.length > 0) {
+    schema = schema.refine(
+      (file) => config.allowedTypes?.includes(file.type),
+      config.allowedTypesMessage
+        ? config.allowedTypesMessage
+        : `Invalid file type. Allowed: ${config.allowedTypes.join(", ")}`,
+    );
+  }
+
+  return schema;
+}
diff --git a/src/components/Form/utils/validations/validateRoundDates.ts b/src/components/Form/utils/validations/validateRoundDates.ts
new file mode 100644
index 00000000..9eca9728
--- /dev/null
+++ b/src/components/Form/utils/validations/validateRoundDates.ts
@@ -0,0 +1,105 @@
+import { z } from "zod";
+
+export interface RoundDatesData {
+  timezone: string;
+  round: {
+    start: string;
+    end?: string;
+    noEndDate: boolean;
+  };
+  applications: {
+    start: string;
+    end: string;
+  };
+}
+
+export const getRoundDatesSchema = () => {
+  return z
+    .object({
+      timezone: z.string(),
+      round: z.object({
+        start: z.string(),
+        end: z.string().optional(),
+        noEndDate: z.boolean(),
+      }),
+      applications: z.object({
+        start: z.string(),
+        end: z.string(),
+      }),
+    })
+    .superRefine(validateRoundDates);
+};
+
+export const validateRoundDates = (data: RoundDatesData, ctx: z.RefinementCtx) => {
+  const roundStart = new Date(data.round.start);
+  const roundEnd = data.round.end ? new Date(data.round.end) : null;
+  const appStart = new Date(data.applications.start);
+  const appEnd = new Date(data.applications.end);
+
+  // Validate round start and end dates
+  if (isNaN(roundStart.getTime())) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Round start date must be valid",
+      path: ["round", "start"],
+    });
+  }
+
+  if (!data.round.noEndDate && (!roundEnd || isNaN(roundEnd.getTime()))) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Round end date must be valid if noEndDate is not checked",
+      path: ["round", "end"],
+    });
+  }
+
+  if (!data.round.noEndDate && roundEnd && roundStart >= roundEnd) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Round end date must be after the start date",
+      path: ["round", "end"],
+    });
+  }
+
+  // Validate application start and end dates
+  if (isNaN(appStart.getTime())) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Application start date must be valid",
+      path: ["applications", "start"],
+    });
+  }
+
+  if (isNaN(appEnd.getTime())) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Application end date must be valid",
+      path: ["applications", "end"],
+    });
+  }
+
+  if (appStart && appEnd && appStart >= appEnd) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Application end date must be after the start date",
+      path: ["applications", "end"],
+    });
+  }
+
+  // Ensure application dates are within round dates
+  if (roundStart && appStart && appStart < roundStart) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Application start date must not be before the round start date",
+      path: ["applications", "start"],
+    });
+  }
+
+  if (!data.round.noEndDate && roundEnd && appEnd && appEnd > roundEnd) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Application end date must not be after the round end date",
+      path: ["applications", "end"],
+    });
+  }
+};
diff --git a/src/components/Form/utils/validations/validateString.ts b/src/components/Form/utils/validations/validateString.ts
new file mode 100644
index 00000000..dbb61ee9
--- /dev/null
+++ b/src/components/Form/utils/validations/validateString.ts
@@ -0,0 +1,51 @@
+// File: utils/validations/validateString.ts
+import { z } from "zod";
+
+import { StringValidationConfig } from "../../types";
+
+/**
+ * Builds a Zod string schema.
+ * Handles optional minLength, maxLength, regex pattern, etc.
+ */
+export function buildStringSchema(
+  label: string,
+  isRequired?: boolean | string,
+  stringValidation?: StringValidationConfig,
+) {
+  let schema = z.string();
+
+  if (isRequired) {
+    const requiredMessage = typeof isRequired === "string" ? isRequired : `${label} is required`;
+    schema = schema.min(1, requiredMessage);
+  }
+
+  if (stringValidation?.minLength !== undefined) {
+    const { minLength, minLengthMessage } = stringValidation;
+    const msg = minLengthMessage || `${label} must have at least ${minLength} characters`;
+    schema = schema.min(minLength, msg);
+  }
+
+  if (stringValidation?.maxLength !== undefined) {
+    const { maxLength, maxLengthMessage } = stringValidation;
+    const msg = maxLengthMessage || `${label} must have at most ${maxLength} characters`;
+    schema = schema.max(maxLength, msg);
+  }
+
+  if (stringValidation?.pattern) {
+    const { pattern, patternMessage } = stringValidation;
+    let regex: RegExp;
+    let msg: string;
+
+    // pattern can be a string or a RegExp
+    if (typeof pattern === "string") {
+      regex = new RegExp(pattern);
+      msg = patternMessage || `${label} is invalid`;
+    } else {
+      regex = pattern;
+      msg = patternMessage || `${label} is invalid`;
+    }
+    schema = schema.regex(regex, msg);
+  }
+
+  return schema;
+}
diff --git a/src/components/SetupProgressForm/SetupProgressForm.stories.tsx b/src/components/SetupProgressForm/SetupProgressForm.stories.tsx
new file mode 100644
index 00000000..1ac9d976
--- /dev/null
+++ b/src/components/SetupProgressForm/SetupProgressForm.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SetupProgressForm } from "./SetupProgressForm";
+import { roundSetupSteps } from "./mocks/RoundSetup";
+
+const meta: Meta<typeof SetupProgressForm> = {
+  title: "Components/SetupProgressForm",
+  component: SetupProgressForm,
+} satisfies Meta<typeof SetupProgressForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof SetupProgressForm>;
+
+export const Default: Story = {
+  args: {
+    name: "Round setup",
+    steps: roundSetupSteps,
+    onSubmit: async (values: any) => {
+      console.log("Submitted final values:", values);
+    },
+    dbName: "formDB",
+    storeName: "formDrafts",
+  },
+};
diff --git a/src/components/SetupProgressForm/SetupProgressForm.tsx b/src/components/SetupProgressForm/SetupProgressForm.tsx
new file mode 100644
index 00000000..23e0c380
--- /dev/null
+++ b/src/components/SetupProgressForm/SetupProgressForm.tsx
@@ -0,0 +1,140 @@
+// src/components/SetupProgressForm.tsx
+import { useRef } from "react";
+
+import { CheckIcon } from "@heroicons/react/solid";
+
+import { Form, FormProps } from "@/components/Form";
+import { retrieveDBValuesFromKeys } from "@/lib/indexDB";
+import { Button } from "@/primitives/Button";
+import { ProgressBar } from "@/primitives/ProgressBar";
+
+import { useFormProgress } from "./hooks/useFormProgress";
+
+export interface FormStep {
+  name: string;
+  formProps: Omit<FormProps, "dbName" | "storeName">;
+  stepProps: {
+    formTitle: string;
+    formDescription: string;
+  };
+}
+
+export interface SetupProgressFormProps {
+  name: string;
+  steps: FormStep[];
+  onSubmit: (values: any) => Promise<void>;
+  dbName: string;
+  storeName: string;
+}
+
+export const SetupProgressForm = ({
+  name,
+  steps,
+  onSubmit,
+  dbName,
+  storeName,
+}: SetupProgressFormProps) => {
+  const { currentStep, updateStep } = useFormProgress(name);
+  const formRef = useRef<{ isFormValid: () => Promise<boolean> }>(null);
+
+  const handleNextStep = () => {
+    if (currentStep < steps.length - 1) {
+      updateStep(currentStep + 1);
+    }
+  };
+
+  const handlePreviousStep = () => {
+    if (currentStep > 0) {
+      updateStep(currentStep - 1);
+    }
+  };
+
+  const handleSubmit = async () => {
+    const persistKeys = steps.map((step) => step.formProps.persistKey).filter(Boolean) as string[];
+
+    const persistedValues = await retrieveDBValuesFromKeys(persistKeys, dbName, storeName);
+
+    let FinalValues = {};
+    for (const stepValues of persistedValues) {
+      FinalValues = { ...FinalValues, ...stepValues };
+    }
+    // Do something with the values here
+    await onSubmit(FinalValues);
+  };
+
+  const currentStepProps = steps[currentStep];
+  const progressValue = (currentStep / steps.length) * 100;
+
+  return (
+    <div className="inset-0 flex justify-center gap-24 px-20 pt-16">
+      <div className="relative flex flex-col gap-6">
+        <div>{name}</div>
+        <ProgressBar value={progressValue} variant="green-md" />
+        {steps.map((step, index) => (
+          <div key={index} className="flex h-6 items-center justify-start gap-2">
+            <div className="flex items-center gap-2">
+              <div className="flex size-5 shrink-0 items-center justify-center">
+                {currentStep > index ? (
+                  <CheckIcon className="size-5 text-moss-700" />
+                ) : (
+                  <span className="inline-flex items-center justify-center text-black">•</span>
+                )}
+              </div>
+              <div className="font-ui-sans text-[16px]/[28px] font-normal text-grey-900">
+                {step.name}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="w-full max-w-[956px]">
+        <div className="flex flex-col gap-6 rounded-2xl bg-grey-50 p-6">
+          <div className="flex flex-col gap-3">
+            {/* Form Title */}
+            <div className="font-ui-sans text-[24px]/[32px] font-medium">
+              {currentStepProps.stepProps.formTitle}
+            </div>
+            {/* Form Description */}
+            <div className="font-ui-sans text-[18px]/[28px] font-normal text-grey-900">
+              {currentStepProps.stepProps.formDescription}
+            </div>
+          </div>
+          <Form
+            ref={formRef}
+            key={currentStep}
+            {...currentStepProps.formProps}
+            dbName={dbName}
+            storeName={storeName}
+          />
+          <div className="flex items-center justify-between">
+            <Button
+              variant="outlined-secondary"
+              onClick={handlePreviousStep}
+              value={"Back"}
+              type="button"
+              className="border-transparent"
+            />
+
+            {steps.length && (
+              <Button
+                variant="primary"
+                onClick={async () => {
+                  if (currentStep === steps.length - 1) {
+                    await handleSubmit();
+                  } else {
+                    const isValid = await formRef.current?.isFormValid();
+                    if (isValid) {
+                      handleNextStep();
+                    }
+                  }
+                }}
+                value={currentStep === steps.length - 1 ? "Publish" : "Next"}
+                type="button"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/SetupProgressForm/hooks/useFormProgress.ts b/src/components/SetupProgressForm/hooks/useFormProgress.ts
new file mode 100644
index 00000000..aaa13f09
--- /dev/null
+++ b/src/components/SetupProgressForm/hooks/useFormProgress.ts
@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+
+import { openDB } from "idb";
+
+const DB_NAME = "formProgressDB";
+const STORE_NAME = "formProgress";
+
+export const useFormProgress = (formKey: string) => {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  useEffect(() => {
+    const initDB = async () => {
+      const db = await openDB(DB_NAME, 1, {
+        upgrade(db) {
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.createObjectStore(STORE_NAME);
+          }
+        },
+      });
+
+      // Load saved progress
+      const savedStep = await db.get(STORE_NAME, formKey);
+      if (savedStep !== undefined) {
+        setCurrentStep(savedStep);
+      }
+    };
+
+    initDB();
+  }, [formKey]);
+
+  const updateStep = async (step: number) => {
+    setCurrentStep(step);
+    const db = await openDB(DB_NAME, 1);
+    await db.put(STORE_NAME, step, formKey);
+  };
+
+  const resetProgress = async () => {
+    const db = await openDB(DB_NAME, 1);
+    await db.delete(STORE_NAME, formKey);
+    setCurrentStep(0);
+  };
+
+  return {
+    currentStep,
+    updateStep,
+    resetProgress,
+  };
+};
diff --git a/src/components/SetupProgressForm/index.ts b/src/components/SetupProgressForm/index.ts
new file mode 100644
index 00000000..75d2e997
--- /dev/null
+++ b/src/components/SetupProgressForm/index.ts
@@ -0,0 +1 @@
+export * from "./SetupProgressForm";
diff --git a/src/components/SetupProgressForm/mocks/RoundSetup.ts b/src/components/SetupProgressForm/mocks/RoundSetup.ts
new file mode 100644
index 00000000..828c50e4
--- /dev/null
+++ b/src/components/SetupProgressForm/mocks/RoundSetup.ts
@@ -0,0 +1,269 @@
+import moment from "moment";
+
+import { FormStep } from "@/components/";
+import { FormField } from "@/components/Form";
+
+const program = {
+  chainId: 10,
+  programId: "1",
+  programName: "Cool program",
+} as {
+  chainId: number;
+  programId: string;
+  programName: string;
+};
+const roundDetailsFields: FormField[] = [
+  {
+    field: {
+      name: "program",
+      label: "Program",
+      validation: { isObject: true },
+    },
+    component: "DisabledProgramInput",
+  },
+  {
+    field: {
+      name: "name",
+      label: "Round name",
+      className: "border-grey-300",
+      validation: {
+        required: true,
+        stringValidation: { minLength: 5 },
+      },
+    },
+    component: "Input",
+    placeholder: "My Round Name",
+  },
+  {
+    field: {
+      name: "payoutToken",
+      label: "Select payout token",
+      validation: { required: true },
+    },
+    component: "Select",
+    options: [
+      {
+        items: [
+          { label: "ETH", value: "ETH" },
+          { label: "USDC", value: "USDC" },
+        ],
+      },
+    ],
+    placeholder: "Select",
+    className: "bg-white border-grey-300",
+    size: "md",
+  },
+  {
+    field: {
+      name: "banner",
+      label: "Cover image",
+      validation: {
+        required: true,
+        fileValidation: {},
+      },
+    },
+    component: "FileUpload",
+    mimeTypes: ["image/png", "image/jpeg", "image/jpg", "image/webp", "image/svg+xml"],
+  },
+];
+
+const roundDescriptionAndRequirementsFields: FormField[] = [
+  {
+    field: {
+      name: "description",
+      label: "Round description",
+      validation: { required: true },
+      className: "border-grey-300",
+    },
+    component: "MarkdownEditor",
+  },
+  {
+    field: {
+      name: "requirements",
+      label: "What requirements do you have from applicants?",
+      className: "border-grey-300",
+      validation: { arrayValidation: { minItems: 1 } },
+    },
+    component: "FieldArray",
+    placeholder: "Enter an eligibility requirement",
+    addButtonLabel: "Add requirement",
+    removeIconType: "x",
+    itemName: "Requirement",
+  },
+];
+
+const roundDetailsArgs = {
+  fields: roundDetailsFields,
+  persistKey: "storybook-round-setup-round-details",
+  defaultValues: {
+    program: program,
+  },
+};
+
+const roundDescriptionAndRequirementsArgs = {
+  fields: roundDescriptionAndRequirementsFields,
+  persistKey: "storybook-round-setup-round-description-and-requirements",
+};
+const metrics = [
+  {
+    title: "Metric 1",
+    description: "Description for Metric 1",
+    onReadMore: () => void 0,
+  },
+  {
+    title: "Metric 2",
+    description: "Description for Metric 2",
+    onReadMore: () => void 0,
+  },
+  {
+    title: "Metric 3",
+    description: "Description for Metric 3",
+    onReadMore: () => void 0,
+  },
+];
+const metricsFields: FormField[] = [
+  {
+    field: {
+      name: "metrics",
+      label: "",
+      validation: { arrayValidation: { minItems: 1 } },
+    },
+    component: "Metrics",
+    metrics: metrics,
+  },
+];
+
+const metricsArgs = {
+  fields: metricsFields,
+  persistKey: "storybook-round-setup-impact-metrics",
+};
+
+const roundDatesFields: FormField[] = [
+  {
+    field: {
+      name: "roundDates",
+      label: "",
+      validation: { isRoundDates: true },
+    },
+    component: "RoundDates",
+  },
+];
+
+const roundDatesArgs = {
+  fields: roundDatesFields,
+  persistKey: "storybook-round-setup-round-dates",
+  defaultValues: {
+    roundDates: {
+      timezone: moment.tz.guess(),
+      round: {
+        noEndDate: false,
+      },
+    },
+  },
+};
+
+const applicationQuestionsFields: FormField[] = [
+  {
+    field: {
+      name: "applicationQuestions",
+      label: "",
+      validation: { isObject: true },
+    },
+    component: "ApplicationQuestions",
+  },
+];
+
+const applicationQuestionsArgs = {
+  fields: applicationQuestionsFields,
+  persistKey: "storybook-round-setup-application-questions",
+};
+
+const voterAllowlistFields: FormField[] = [
+  {
+    field: {
+      name: "voterAllowlist",
+      label: "",
+      validation: {
+        arrayValidation: {
+          itemType: "address",
+          minItems: 2,
+          maxItems: 100,
+          minItemsMessage: "At least two addresses are required",
+          maxItemsMessage: "Maximum of 100 addresses allowed",
+        },
+      },
+    },
+    component: "Allowlist",
+  },
+];
+
+const voterAllowlistArgs = {
+  fields: voterAllowlistFields,
+  persistKey: "storybook-round-setup-voter-allowlist",
+};
+
+const deployArgs = {
+  fields: [],
+  persistKey: "storybook-round-setup-deploy",
+};
+
+export const roundSetupSteps = [
+  {
+    name: "Round details",
+    formProps: roundDetailsArgs,
+    stepProps: {
+      formTitle: "Round details",
+      formDescription:
+        "Fill out the details about your round. You can change most of these at any time.",
+    },
+  },
+  {
+    name: "Round dates",
+    formProps: roundDatesArgs,
+    stepProps: {
+      formTitle: "Round dates",
+      formDescription: "Configure the dates for the application and payout periods.",
+    },
+  },
+  {
+    name: "Round description & requirements",
+    formProps: roundDescriptionAndRequirementsArgs,
+    stepProps: {
+      formTitle: "Round description & requirements",
+      formDescription:
+        "Provide details about your round and specify the requirements for applicants.",
+    },
+  },
+  {
+    name: "Impact metrics",
+    formProps: metricsArgs,
+    stepProps: {
+      formTitle: "Impact metrics",
+      formDescription: "Define your impact categories for the application form.",
+    },
+  },
+  {
+    name: "Application questions",
+    formProps: applicationQuestionsArgs,
+    stepProps: {
+      formTitle: "Application questions",
+      formDescription: "Add questions for project owners to complete their application.",
+    },
+  },
+  {
+    name: "Voter allowlist",
+    formProps: voterAllowlistArgs,
+    stepProps: {
+      formTitle: "Voter allowlist",
+      formDescription: "Provide wallet addresses to grant voter access to the round.",
+    },
+  },
+  {
+    name: "Deploy",
+    formProps: deployArgs,
+    stepProps: {
+      formTitle: "Review your round and deploy onchain",
+      formDescription: "You can edit your round after it’s been deployed. ",
+    },
+  },
+] satisfies FormStep[];
diff --git a/src/components/index.ts b/src/components/index.ts
index 455a7ef6..635501a1 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,6 @@ export * from "./IconLabel";
 export * from "./ProgressModal";
 export * from "./RadioGroupList";
 export * from "./Toaster";
+export * from "./Form";
+export * from "./SetupProgressForm";
+export * from "./Form/types";
diff --git a/src/features/retrofunding/components/MetricCard/index.ts b/src/features/retrofunding/components/MetricCard/index.ts
index 93160918..47431566 100644
--- a/src/features/retrofunding/components/MetricCard/index.ts
+++ b/src/features/retrofunding/components/MetricCard/index.ts
@@ -1 +1 @@
-export * from './MetricCard';
\ No newline at end of file
+export * from "./MetricCard";
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e7e297a6..0d4e52b7 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
 export * from "./use-toast";
+export * from "./usePersistForm";
diff --git a/src/hooks/usePersistForm.ts b/src/hooks/usePersistForm.ts
new file mode 100644
index 00000000..bcf9bc83
--- /dev/null
+++ b/src/hooks/usePersistForm.ts
@@ -0,0 +1,96 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { useInterval } from "react-use";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ZodSchema } from "zod";
+
+import { setupDB } from "@/lib/indexDB";
+
+/**
+ * Initialize the form with values from IndexedDB
+ * @param form - The form instance
+ * @param persistKey - The key of the value to retrieve
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ */
+const initializeForm = async (
+  form: ReturnType<typeof useForm>,
+  persistKey: string,
+  dbName: string,
+  storeName: string,
+) => {
+  try {
+    const db = await setupDB(dbName, storeName);
+    if (persistKey) {
+      const draft = await db.get(storeName, persistKey);
+      if (draft) {
+        form.reset(draft);
+      }
+    }
+  } catch (error) {
+    console.error("Error initializing form:", error);
+  }
+};
+
+/**
+ * Use the form with persist
+ * @param form - The form instance
+ * @param persistKey - The key of the value to retrieve
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ */
+export const usePersistForm = (
+  form: ReturnType<typeof useForm>,
+  persistKey: string,
+  dbName: string,
+  storeName: string,
+) => {
+  useEffect(() => {
+    initializeForm(form, persistKey, dbName, storeName);
+  }, [form, persistKey, dbName, storeName]);
+
+  useInterval(() => {
+    if (persistKey) {
+      (async () => {
+        try {
+          const db = await setupDB(dbName, storeName);
+          const values = form.getValues();
+          await db.put(storeName, values, persistKey);
+        } catch (error) {
+          console.error("Error saving to IndexedDB:", error);
+        }
+      })();
+    }
+  }, 500);
+};
+
+/**
+ * Use the form with persist
+ * @param schema - The schema of the form
+ * @param defaultValues - The default values of the form
+ * @param persistKey - The key of the value to retrieve
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ */
+export const useFormWithPersist = ({
+  schema,
+  defaultValues,
+  persistKey,
+  dbName,
+  storeName,
+}: {
+  schema: ZodSchema;
+  defaultValues: any;
+  persistKey: string;
+  dbName: string;
+  storeName: string;
+}) => {
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues,
+    mode: "onBlur",
+  });
+  usePersistForm(form, persistKey, dbName, storeName);
+  return form;
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 56fcb44c..ef3cb1a8 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,3 +2,4 @@ export * from "./dates";
 export * from "./icons";
 export * from "./tanstack";
 export * from "./utils";
+export * from "./indexDB";
diff --git a/src/lib/indexDB/deleteDBValues.ts b/src/lib/indexDB/deleteDBValues.ts
new file mode 100644
index 00000000..766ae181
--- /dev/null
+++ b/src/lib/indexDB/deleteDBValues.ts
@@ -0,0 +1,18 @@
+import { setupDB } from "./setupDB";
+
+/**
+ * Delete values from IndexedDB
+ * @param keys - The keys of the values to delete
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ */
+export const deleteDBValues = async (keys: string[], dbName: string, storeName: string) => {
+  try {
+    const db = await setupDB(dbName, storeName);
+    for (const key of keys) {
+      await db.delete(storeName, key);
+    }
+  } catch (error) {
+    console.error("Error deleting values from IndexedDB:", error);
+  }
+};
diff --git a/src/lib/indexDB/index.ts b/src/lib/indexDB/index.ts
new file mode 100644
index 00000000..8ef11bbf
--- /dev/null
+++ b/src/lib/indexDB/index.ts
@@ -0,0 +1,3 @@
+export * from "./setupDB";
+export * from "./deleteDBValues";
+export * from "./retrieveDBValues";
diff --git a/src/lib/indexDB/retrieveDBValues.ts b/src/lib/indexDB/retrieveDBValues.ts
new file mode 100644
index 00000000..36249ad0
--- /dev/null
+++ b/src/lib/indexDB/retrieveDBValues.ts
@@ -0,0 +1,43 @@
+import { setupDB } from "@/lib/indexDB";
+
+/**
+ * Retrieve values from IndexedDB
+ * @param key - The key of the value to retrieve
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ * @returns The value retrieved from IndexedDB
+ */
+export const retrieveDBValuesFromKey = async (
+  persistKey: string,
+  dbName: string,
+  storeName: string,
+) => {
+  try {
+    const db = await setupDB(dbName, storeName);
+    const values = await db.get(storeName, persistKey);
+    return values;
+  } catch (error) {
+    console.error("Error retrieving values from IndexedDB:", error);
+    return null;
+  }
+};
+
+/**
+ * Retrieve values from IndexedDB
+ * @param keys - The keys of the values to retrieve
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ * @returns The values retrieved from IndexedDB
+ */
+export const retrieveDBValuesFromKeys = async (
+  persistKeys: string[],
+  dbName: string,
+  storeName: string,
+) => {
+  const values = [];
+  for (const key of persistKeys) {
+    const value = await retrieveDBValuesFromKey(key, dbName, storeName);
+    values.push(value);
+  }
+  return values;
+};
diff --git a/src/lib/indexDB/setupDB.ts b/src/lib/indexDB/setupDB.ts
new file mode 100644
index 00000000..fb293946
--- /dev/null
+++ b/src/lib/indexDB/setupDB.ts
@@ -0,0 +1,23 @@
+import { openDB } from "idb";
+
+/**
+ * Setup IndexedDB
+ * @param dbName - The name of the database
+ * @param storeName - The name of the store
+ * @returns The database instance
+ */
+export const setupDB = async (dbName: string, storeName: string) => {
+  try {
+    const db = await openDB(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains(storeName)) {
+          db.createObjectStore(storeName);
+        }
+      },
+    });
+    return db;
+  } catch (error) {
+    console.error("Error setting up IndexedDB:", error);
+    throw error;
+  }
+};
diff --git a/src/primitives/Button/Button.stories.tsx b/src/primitives/Button/Button.stories.tsx
index 2d3d83c2..7205fad0 100644
--- a/src/primitives/Button/Button.stories.tsx
+++ b/src/primitives/Button/Button.stories.tsx
@@ -177,7 +177,7 @@ export const OutlinedFilled: Story = {
       {
         variant: "outlined-success-filled",
         value: "Outlined Success Filled",
-      }
+      },
     ];
 
     return (
diff --git a/src/primitives/Button/Button.tsx b/src/primitives/Button/Button.tsx
index 1613b6e4..04585a89 100644
--- a/src/primitives/Button/Button.tsx
+++ b/src/primitives/Button/Button.tsx
@@ -116,4 +116,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
\ No newline at end of file
+export { Button, buttonVariants };
diff --git a/src/primitives/FileUpload/FileUpload.stories.tsx b/src/primitives/FileUpload/FileUpload.stories.tsx
new file mode 100644
index 00000000..3f0f5f62
--- /dev/null
+++ b/src/primitives/FileUpload/FileUpload.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { FileUpload } from "./FileUpload";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "Primitives/FileUpload",
+  component: FileUpload,
+};
+
+export default meta;
+export const Default: StoryObj<any> = {
+  decorators: [(Story) => <Story />],
+  render: (args) => {
+    return (
+      <div>
+        <FileUpload {...args} />
+      </div>
+    );
+  },
+};
diff --git a/src/primitives/FileUpload/FileUpload.tsx b/src/primitives/FileUpload/FileUpload.tsx
new file mode 100644
index 00000000..10b1f061
--- /dev/null
+++ b/src/primitives/FileUpload/FileUpload.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import { CloudUpload, Image } from "lucide-react";
+
+import { cn } from "@/lib";
+
+export interface FileUploadProps {
+  value?: Blob | null;
+  onChange?: (file: File | null) => void;
+  className?: string;
+  mimeTypes?: string[];
+}
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+  value,
+  onChange,
+  className,
+  mimeTypes = [],
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const base64 = useMemo(() => (value ? URL.createObjectURL(value) : null), [value]);
+  const [preview, setPreview] = useState<string | null>(base64);
+
+  useEffect(() => {
+    setPreview(base64);
+  }, [base64]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || null;
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+    onChange?.(file);
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-[134px] flex-col items-center justify-center rounded-lg border border-dashed border-grey-300 bg-white",
+        preview ? "" : "px-4 py-6",
+        className,
+      )}
+    >
+      <input
+        type="file"
+        onChange={handleFileChange}
+        className="hidden"
+        ref={fileInputRef}
+        id="file-upload"
+        accept={mimeTypes.join(",")}
+      />
+      {preview ? (
+        <div className="group relative w-full max-w-[906px] items-center justify-center">
+          <div
+            style={{
+              backgroundImage: `url(${preview})`,
+              backgroundSize: "contain",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+              height: "132px",
+            }}
+            aria-label="Preview"
+          />
+          <div
+            onClick={triggerFileInput}
+            className="absolute inset-0 flex cursor-pointer items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+          >
+            <div className="flex size-10 items-center justify-center rounded-full bg-white p-3">
+              <Image className="text-black" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <label htmlFor="file-upload" style={{ cursor: "pointer" }}>
+          <div className="flex flex-col items-center gap-2">
+            <span role="img" aria-label="upload">
+              <CloudUpload />
+            </span>
+            <div className="flex">
+              <a className="cursor-pointer text-moss-700 hover:underline">{"Upload a file"}</a>
+              &nbsp;
+              <span>{"or drag and drop"}</span>
+            </div>
+          </div>
+          {/* TODO different file types message */}
+          <div>PNG, JPG (Recommended: 1500x1500px)</div>
+        </label>
+      )}
+    </div>
+  );
+};
diff --git a/src/primitives/FileUpload/index.ts b/src/primitives/FileUpload/index.ts
new file mode 100644
index 00000000..e1eae5e8
--- /dev/null
+++ b/src/primitives/FileUpload/index.ts
@@ -0,0 +1 @@
+export * from "./FileUpload";
diff --git a/src/primitives/MarkdownEditor/MarkdownEditor.stories.tsx b/src/primitives/MarkdownEditor/MarkdownEditor.stories.tsx
new file mode 100644
index 00000000..944f1f39
--- /dev/null
+++ b/src/primitives/MarkdownEditor/MarkdownEditor.stories.tsx
@@ -0,0 +1,36 @@
+// src/primitives/MarkdownEditor/MarkdownEditor.stories.tsx
+import React, { useState } from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import { MarkdownEditor } from "./MarkdownEditor";
+import "./markdown_editor.css";
+
+const meta = {
+  title: "Primitives/MarkdownEditor",
+  component: MarkdownEditor,
+  argTypes: {
+    value: { control: "text" },
+    onChange: { action: "changed" },
+  },
+} satisfies Meta<typeof MarkdownEditor>;
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownEditor>;
+
+const MarkdownEditorWithHooks = (args: React.ComponentProps<typeof MarkdownEditor>) => {
+  const [value, setValue] = useState(args.value || "");
+
+  const handleChange = (valueOrEvent: string | React.FormEvent<HTMLDivElement>) => {
+    if (typeof valueOrEvent === "string") {
+      setValue(valueOrEvent);
+    }
+  };
+
+  return <MarkdownEditor {...args} value={value} onChange={handleChange} />;
+};
+
+export const Default: Story = {
+  render: (args) => <MarkdownEditorWithHooks {...args} />,
+};
diff --git a/src/primitives/MarkdownEditor/MarkdownEditor.tsx b/src/primitives/MarkdownEditor/MarkdownEditor.tsx
new file mode 100644
index 00000000..c01d2078
--- /dev/null
+++ b/src/primitives/MarkdownEditor/MarkdownEditor.tsx
@@ -0,0 +1,104 @@
+import { ComponentProps, forwardRef, Ref, useContext } from "react";
+
+import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
+import rehypeSanitize from "rehype-sanitize";
+
+import { cn } from "@/lib";
+
+import "./markdown_editor.css";
+
+export interface MarkdownEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+const WriteButton = () => {
+  const { preview, dispatch } = useContext(EditorContext);
+
+  const click = () => {
+    if (dispatch) {
+      dispatch({
+        preview: "edit",
+      });
+    }
+  };
+
+  return (
+    <span
+      className={cn(
+        "cursor-pointer rounded-tl-lg px-4 py-3 text-sm",
+        preview === "edit" ? "rounded-tr-lg border-r border-t border-[#d0d7de] bg-white" : "",
+      )}
+      onClick={click}
+    >
+      Write
+    </span>
+  );
+};
+
+const PreviewButton = () => {
+  const { preview, dispatch } = useContext(EditorContext);
+
+  const click = () => {
+    if (dispatch) {
+      dispatch({
+        preview: "preview",
+      });
+    }
+  };
+
+  return (
+    <span
+      className={cn(
+        "cursor-pointer px-4 py-3 text-sm",
+        preview === "preview"
+          ? " rounded-tl-lg rounded-tr-lg border-l border-r border-t border-[#d0d7de] bg-white"
+          : "",
+      )}
+      onClick={click}
+    >
+      Preview
+    </span>
+  );
+};
+
+const editPreviewCommand = {
+  name: "edit-preview",
+  keyCommand: "edit-preview",
+  icon: <WriteButton />,
+};
+
+const customPreviewCommand = {
+  name: "custom-preview",
+  keyCommand: "custom-preview",
+  icon: <PreviewButton />,
+};
+
+export const MarkdownEditor = forwardRef(function MarkdownEditorComponent(
+  { ...props }: MarkdownEditorProps & ComponentProps<"div">,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <MDEditor
+      commands={[editPreviewCommand, customPreviewCommand]}
+      // TODO: Customize commands Icons
+      extraCommands={[
+        commands.title,
+        commands.bold,
+        commands.italic,
+        commands.divider,
+        commands.link,
+        commands.image,
+      ]}
+      ref={ref}
+      preview="edit"
+      previewOptions={{
+        rehypePlugins: [[rehypeSanitize]],
+      }}
+      value={props.value ?? props.placeholder}
+      onChange={(val) => props.onChange?.(val ?? "")}
+      data-color-mode="light"
+    />
+  );
+});
diff --git a/src/primitives/MarkdownEditor/index.ts b/src/primitives/MarkdownEditor/index.ts
new file mode 100644
index 00000000..2fc1101f
--- /dev/null
+++ b/src/primitives/MarkdownEditor/index.ts
@@ -0,0 +1 @@
+export * from "./MarkdownEditor";
diff --git a/src/primitives/MarkdownEditor/markdown_editor.css b/src/primitives/MarkdownEditor/markdown_editor.css
new file mode 100644
index 00000000..8d7d28ba
--- /dev/null
+++ b/src/primitives/MarkdownEditor/markdown_editor.css
@@ -0,0 +1,59 @@
+:root {
+  --md-editor-background-color: #f0f0f0; /* New global background color */
+  --md-editor-box-shadow-color: #a0a0a0; /* New global box shadow color */
+  --md-editor-border-color: transparent;
+  --md-editor-border: transparent;
+}
+
+.w-md-editor {
+  border-radius: 8px;
+  --md-editor-box-shadow-color: #d0d7de;
+  --md-editor-background-color: white;
+  --md-editor-border: transparent;
+}
+
+.w-md-editor-text-pre > code {
+  -webkit-text-fill-color: transparent;
+}
+
+.w-md-editor-text-input {
+  -webkit-text-fill-color: black;
+}
+
+.w-md-editor-preview {
+  background-color: white;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.w-md-editor-toolbar {
+  background-color: white;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 0;
+}
+
+.w-md-editor-toolbar ul {
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+}
+
+.w-md-editor-toolbar ul > *:last-child {
+  margin-right: 12px;
+}
+
+.w-md-editor-toolbar li > button {
+  color: black !important;
+}
+
+.w-md-editor-toolbar li > button > span:hover {
+  color: black !important;
+  opacity: 0.5;
+}
+
+/* When in preview mode */
+.w-md-editor-show-preview svg,
+.w-md-editor-toolbar-divider {
+  opacity: 100;
+}
diff --git a/src/primitives/ProgressBar/ProgressBar.tsx b/src/primitives/ProgressBar/ProgressBar.tsx
index 5db07a01..387fbe49 100644
--- a/src/primitives/ProgressBar/ProgressBar.tsx
+++ b/src/primitives/ProgressBar/ProgressBar.tsx
@@ -10,7 +10,7 @@ export const ProgressBar = ({ value, className, variant }: ProgressBarProps) =>
   return (
     <div className="flex flex-col gap-2">
       <Progress value={value} className={className} variant={variant} />
-      <p className="text-sm">{value}% complete</p>
+      <p className="text-sm">{value.toFixed(0)}% complete</p>
     </div>
   );
 };
diff --git a/src/primitives/Select/Select.stories.tsx b/src/primitives/Select/Select.stories.tsx
new file mode 100644
index 00000000..87ceafd8
--- /dev/null
+++ b/src/primitives/Select/Select.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Select } from "./Select";
+
+const meta = {
+  title: "Primitives/Select",
+  component: Select,
+  args: {
+    options: [
+      {
+        items: [
+          { label: "Apple", value: "apple" },
+          { label: "Banana", value: "banana" },
+          { label: "Carrot", value: "carrot" },
+          { label: "Lettuce", value: "lettuce" },
+        ],
+      },
+    ],
+    placeholder: "Select",
+    variant: "default",
+    size: "md",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    variant: "filled",
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    size: "sm",
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    size: "lg",
+  },
+};
diff --git a/src/primitives/Select/Select.tsx b/src/primitives/Select/Select.tsx
new file mode 100644
index 00000000..9b6439e7
--- /dev/null
+++ b/src/primitives/Select/Select.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { SelectGroup } from "@radix-ui/react-select";
+import { tv } from "tailwind-variants";
+
+import {
+  Select as ShadcnSelect,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectValue,
+} from "@/ui-shadcn/select";
+
+export interface SelectProps {
+  options: {
+    groupLabel?: string;
+    items: {
+      label: string;
+      value: string;
+    }[];
+    separator?: boolean;
+  }[];
+  placeholder?: string;
+  onValueChange?: (value: string) => void;
+  defaultValue?: string;
+  variant?: "default" | "outlined" | "filled";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const selectStyles = tv({
+  base: "h-10 rounded-md border text-sm",
+  variants: {
+    variant: {
+      default: "border-transparent bg-white ",
+      outlined: "border-transparent bg-transparent",
+      filled: "bg-grey-200",
+    },
+    size: {
+      sm: "h-8 text-xs",
+      md: "h-10 text-sm",
+      lg: "h-12 text-base",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+export const Select = ({
+  options,
+  placeholder = "Select an option",
+  onValueChange,
+  defaultValue,
+  variant,
+  size,
+  className,
+}: SelectProps) => {
+  return (
+    <ShadcnSelect defaultValue={defaultValue} onValueChange={onValueChange}>
+      <SelectTrigger className={selectStyles({ variant, size, className })}>
+        <SelectValue placeholder={defaultValue ?? placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((group, index) => (
+          <React.Fragment key={index}>
+            {group.groupLabel && (
+              <SelectGroup>
+                <SelectLabel>{group.groupLabel}</SelectLabel>
+              </SelectGroup>
+            )}
+            {group.items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+            {group.separator && <SelectSeparator />}
+          </React.Fragment>
+        ))}
+      </SelectContent>
+    </ShadcnSelect>
+  );
+};
diff --git a/src/primitives/Select/index.ts b/src/primitives/Select/index.ts
new file mode 100644
index 00000000..b6e8a07c
--- /dev/null
+++ b/src/primitives/Select/index.ts
@@ -0,0 +1 @@
+export * from "./Select";
diff --git a/src/primitives/index.ts b/src/primitives/index.ts
index 4a2971e8..a879396a 100644
--- a/src/primitives/index.ts
+++ b/src/primitives/index.ts
@@ -16,3 +16,6 @@ export * from "./StatCard";
 export * from "./StatCardGroup";
 export * from "./TextArea";
 export * from "./Toast";
+export * from "./FileUpload";
+export * from "./Select";
+export * from "./MarkdownEditor";
diff --git a/src/ui-shadcn/checkbox.tsx b/src/ui-shadcn/checkbox.tsx
index 0e84b05e..fc844d0d 100644
--- a/src/ui-shadcn/checkbox.tsx
+++ b/src/ui-shadcn/checkbox.tsx
@@ -12,13 +12,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-black border-grey-100 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-black data-[state=checked]:text-grey-50 dark:border-black dark:border-grey-50 dark:ring-offset-black dark:focus-visible:ring-grey-100 dark:data-[state=checked]:bg-grey-50 dark:data-[state=checked]:text-black",
+      "peer size-4 shrink-0 rounded-sm border border-grey-300 ring-offset-white hover:border-moss-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-black data-[state=checked]:text-grey-50 ",
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
+      <Check className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/src/ui-shadcn/progress.tsx b/src/ui-shadcn/progress.tsx
index 9ce7e21c..73a71411 100644
--- a/src/ui-shadcn/progress.tsx
+++ b/src/ui-shadcn/progress.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { tv } from "tailwind-variants";
 
-export type ProgressVariants = "default" | "green";
+export type ProgressVariants = "default" | "green" | "green-md";
 
 const progressVariants = tv({
   slots: {
@@ -17,7 +17,11 @@ const progressVariants = tv({
         indicator: "bg-black dark:bg-grey-50",
       },
       green: {
-        root: "bg-grey-100",
+        root: " bg-grey-100",
+        indicator: "bg-moss-700",
+      },
+      "green-md": {
+        root: "w-[228px] bg-grey-100",
         indicator: "bg-moss-700",
       },
     },
@@ -30,7 +34,7 @@ const progressVariants = tv({
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
-    variant?: "default" | "green";
+    variant?: "default" | "green" | "green-md";
   }
 >(({ className, value, variant = "default", ...props }, ref) => {
   const { root, indicator } = progressVariants({ variant });