diff --git a/package-lock.json b/package-lock.json
index a9c51776..896204f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "sprout-ui",
       "version": "0.0.9",
       "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@mui/material": "^5.15.15",
         "@reduxjs/toolkit": "^2.2.3",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.7",
         "@types/styled-components": "^5.1.34",
-        "@uidotdev/usehooks": "^2.4.1",
         "chia-dat-seeder": "^1.0.1",
         "chia-datalayer": "^2.0.17",
         "chia-datalayer-fs-deploy": "^1.0.15",
@@ -48,7 +50,7 @@
       },
       "devDependencies": {
         "@commitlint/config-conventional": "^19.2.2",
-        "@types/react": "^18.2.78",
+        "@types/react": "^18.2.79",
         "@types/react-dom": "^18.2.25",
         "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -69,7 +71,7 @@
         "standard-version": "^9.5.0",
         "tailwindcss": "^3.4.3",
         "typescript": "^5.4.5",
-        "vite": "^5.2.8",
+        "vite": "^5.2.9",
         "wait-on": "^7.2.0"
       },
       "engines": {
@@ -100,7 +102,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -109,11 +110,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+      "dependencies": {
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -122,7 +141,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
       "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -137,7 +155,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -149,7 +166,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -163,7 +179,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -171,14 +186,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -187,7 +200,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -196,7 +208,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -215,6 +226,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
@@ -508,10 +532,45 @@
         "node": "*"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
-      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -521,10 +580,90 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/unitless": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
@@ -1369,6 +1508,226 @@
         "node": ">=10"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
+      "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
+      "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.15",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.14",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1692,9 +2051,9 @@
       }
     },
     "node_modules/@swc/core": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.14.tgz",
-      "integrity": "sha512-tHXg6OxboUsqa/L7DpsCcFnxhLkqN/ht5pCwav1HnvfthbiNIJypr86rNx4cUnQDJepETviSqBTIjxa7pSpGDQ==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.15.tgz",
+      "integrity": "sha512-7Wl4d4CCJ8xnhArfomHe+x5C0roewn0mRedtiZlTsV/9t61z2who18E9bSZI/IRjS00FGJCAlbbd7aWKLpyieg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -1709,16 +2068,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.4.14",
-        "@swc/core-darwin-x64": "1.4.14",
-        "@swc/core-linux-arm-gnueabihf": "1.4.14",
-        "@swc/core-linux-arm64-gnu": "1.4.14",
-        "@swc/core-linux-arm64-musl": "1.4.14",
-        "@swc/core-linux-x64-gnu": "1.4.14",
-        "@swc/core-linux-x64-musl": "1.4.14",
-        "@swc/core-win32-arm64-msvc": "1.4.14",
-        "@swc/core-win32-ia32-msvc": "1.4.14",
-        "@swc/core-win32-x64-msvc": "1.4.14"
+        "@swc/core-darwin-arm64": "1.4.15",
+        "@swc/core-darwin-x64": "1.4.15",
+        "@swc/core-linux-arm-gnueabihf": "1.4.15",
+        "@swc/core-linux-arm64-gnu": "1.4.15",
+        "@swc/core-linux-arm64-musl": "1.4.15",
+        "@swc/core-linux-x64-gnu": "1.4.15",
+        "@swc/core-linux-x64-musl": "1.4.15",
+        "@swc/core-win32-arm64-msvc": "1.4.15",
+        "@swc/core-win32-ia32-msvc": "1.4.15",
+        "@swc/core-win32-x64-msvc": "1.4.15"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -1730,9 +2089,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.14.tgz",
-      "integrity": "sha512-8iPfLhYNspBl836YYsfv6ErXwDUqJ7IMieddV3Ey/t/97JAEAdNDUdtTKDtbyP0j/Ebyqyn+fKcqwSq7rAof0g==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.15.tgz",
+      "integrity": "sha512-m1D89yN82QTp8AcSm3p9YgcfbdOqc9WmhvnMwoS0lUs6RIIFekI2tEboc9Rp9gre/1lkgzPYI+KGge1BaQzScA==",
       "cpu": [
         "arm64"
       ],
@@ -1746,9 +2105,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.14.tgz",
-      "integrity": "sha512-9CqSj8uRZ92cnlgAlVaWMaJJBdxtNvCzJxaGj5KuIseeG6Q0l1g+qk8JcU7h9dAsH9saHTNwNFBVGKQo0W0ujg==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.15.tgz",
+      "integrity": "sha512-aQBTfKrXIKiBrZY5MtqMRtbXTYCnMxUir4qy0me0+sIWTVxQ7znBxrwQsXsbPHIIZ+pohcLCg0HKfybev0NqXA==",
       "cpu": [
         "x64"
       ],
@@ -1762,9 +2121,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.14.tgz",
-      "integrity": "sha512-mfd5JArPITTzMjcezH4DwMw+BdjBV1y25Khp8itEIpdih9ei+fvxOOrDYTN08b466NuE2dF2XuhKtRLA7fXArQ==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.15.tgz",
+      "integrity": "sha512-EZhdJBjzct/0UiF3sPD1w+LbLFJOsvym4b3njyl7jnP+py5rz2WlIJDxVKcS+b1RKEebLU7OsnYXzuXFjq0dwA==",
       "cpu": [
         "arm"
       ],
@@ -1778,9 +2137,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.14.tgz",
-      "integrity": "sha512-3Lqlhlmy8MVRS9xTShMaPAp0oyUt0KFhDs4ixJsjdxKecE0NJSV/MInuDmrkij1C8/RQ2wySRlV9np5jK86oWw==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.15.tgz",
+      "integrity": "sha512-plKc41q8PgOm5rm3gEmPs+0skuddW0CrXPsERFzyaJ8gKTEwOVtg3sa3folXzsIgw0ODr61xzqYnh7zgJllMGg==",
       "cpu": [
         "arm64"
       ],
@@ -1794,9 +2153,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.14.tgz",
-      "integrity": "sha512-n0YoCa64TUcJrbcXIHIHDWQjdUPdaXeMHNEu7yyBtOpm01oMGTKP3frsUXIABLBmAVWtKvqit4/W1KVKn5gJzg==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.15.tgz",
+      "integrity": "sha512-4Gj0z1bo1rI3pKanqv5grH4EZ/pJRGZXG9LnkZ9FBrg4LUgptEumomca1UYFgBifHi3hirJsOQacuKFpw2NCEg==",
       "cpu": [
         "arm64"
       ],
@@ -1810,9 +2169,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.14.tgz",
-      "integrity": "sha512-CGmlwLWbfG1dB4jZBJnp2IWlK5xBMNLjN7AR5kKA3sEpionoccEnChOEvfux1UdVJQjLRKuHNV9yGyqGBTpxfQ==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.15.tgz",
+      "integrity": "sha512-7nZrrYvHpklwrQboHGXMvpefOP4m5Jf46ncQSztprZ0Ah2Z8vZhehuEiUo9xOB3jl5Vdhw2KP4uAhzzppES+PA==",
       "cpu": [
         "x64"
       ],
@@ -1826,9 +2185,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.14.tgz",
-      "integrity": "sha512-xq4npk8YKYmNwmr8fbvF2KP3kUVdZYfXZMQnW425gP3/sn+yFQO8Nd0bGH40vOVQn41kEesSe0Z5O/JDor2TgQ==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.15.tgz",
+      "integrity": "sha512-LJYSnttiR5vhnn7D92HAEgy/D4Jc5MDpLurF4MHyhN/9wlhQPfa5/2fdF3ogtZTzr1cckxyipYdyuzfVF+WISg==",
       "cpu": [
         "x64"
       ],
@@ -1842,9 +2201,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.14.tgz",
-      "integrity": "sha512-imq0X+gU9uUe6FqzOQot5gpKoaC00aCUiN58NOzwp0QXEupn8CDuZpdBN93HiZswfLruu5jA1tsc15x6v9p0Yg==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.15.tgz",
+      "integrity": "sha512-q+u2toNPU9OQonSUI0pB6BIGkNsIrvok6AbUJYpmvZqawmNrngSs9quS2WDe58vfIe9r0lVenweY6WIRlGMFTg==",
       "cpu": [
         "arm64"
       ],
@@ -1858,9 +2217,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.14.tgz",
-      "integrity": "sha512-cH6QpXMw5D3t+lpx6SkErHrxN0yFzmQ0lgNAJxoDRiaAdDbqA6Col8UqUJwUS++Ul6aCWgNhCdiEYehPaoyDPA==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.15.tgz",
+      "integrity": "sha512-eEtU3yQXuBJO5tiokLz0sf0lABVNqR/l6p071v1ltDJGUD4vSer5kHOmm0Hn1zWB43EGda6b17Bb2DEHZ1DpKA==",
       "cpu": [
         "ia32"
       ],
@@ -1874,9 +2233,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.14.tgz",
-      "integrity": "sha512-FmZ4Tby4wW65K/36BKzmuu7mlq7cW5XOxzvufaSNVvQ5PN4OodAlqPjToe029oma4Av+ykJiif64scMttyNAzg==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.15.tgz",
+      "integrity": "sha512-9CWhKyrDgrotsciAYFSsDIYgi/4LRbvJusyAtA3RBeXar1eNouFPwdlwj8zTqtJsOteZAUpbZSret0Z59cTqCQ==",
       "cpu": [
         "x64"
       ],
@@ -2065,6 +2424,11 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/plist": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
@@ -2082,9 +2446,9 @@
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.78",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.78.tgz",
-      "integrity": "sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==",
+      "version": "18.2.79",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
+      "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2120,6 +2484,14 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/responselike": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
@@ -2367,18 +2739,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@uidotdev/usehooks": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz",
-      "integrity": "sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==",
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
-      }
-    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -2827,6 +3187,20 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3182,7 +3556,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3526,6 +3899,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
@@ -4065,6 +4446,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
     "node_modules/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -4101,6 +4487,21 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/crc": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
@@ -4582,6 +4983,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -4902,9 +5312,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.736",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.736.tgz",
-      "integrity": "sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q==",
+      "version": "1.4.738",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.738.tgz",
+      "integrity": "sha512-lwKft2CLFztD+vEIpesrOtCrko/TFnEJlHFdRhazU7Y/jx5qc4cqsocfVrBg4So4gGe9lvxnbLIoev47WMpg+A==",
       "dev": true
     },
     "node_modules/electron/node_modules/@types/node": {
@@ -4962,7 +5372,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -5048,7 +5457,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -5580,6 +5988,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6266,6 +6679,15 @@
         "uglify-js": "^3.1.4"
       }
     },
+    "node_modules/handlebars/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
@@ -6344,6 +6766,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -6512,7 +6939,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -6585,8 +7011,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -6868,8 +7293,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -7074,6 +7498,15 @@
         "node": ">=16"
       }
     },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/listr2": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.1.tgz",
@@ -7212,6 +7645,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/load-json-file/node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dev": true,
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/load-json-file/node_modules/pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -7547,24 +7993,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/meow/node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/meow/node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -8146,7 +8574,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -8155,16 +8582,20 @@
       }
     },
     "node_modules/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
-      "dev": true,
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "dependencies": {
+        "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/parseurl": {
@@ -8238,7 +8669,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8402,6 +8832,17 @@
         }
       }
     },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -8489,6 +8930,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/property-expr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
@@ -8717,9 +9173,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-json-view-compare": {
       "version": "2.0.2",
@@ -8798,6 +9254,21 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-webview": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/react-webview/-/react-webview-0.1.0.tgz",
@@ -9095,7 +9566,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -9631,10 +10101,9 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9657,6 +10126,15 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/spawn-command": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
@@ -10086,6 +10564,19 @@
         "react-dom": ">= 16.8.0"
       }
     },
+    "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
     "node_modules/styled-components/node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -10118,15 +10609,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/styled-components/node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/stylis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/sucrase": {
       "version": "3.35.0",
@@ -10456,6 +10952,14 @@
         "tmp": "^0.2.0"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -10739,9 +11243,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
-      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",
+      "integrity": "sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
@@ -11049,11 +11553,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
       "engines": {
-        "node": ">= 14"
+        "node": ">= 6"
       }
     },
     "node_modules/yargs": {
diff --git a/package.json b/package.json
index dbf43b8a..471e3f54 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "electron:package:linux": "npm run clean && npm run build && electron-builder -l -c.extraMetadata.main=build/main.js"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.15",
     "@reduxjs/toolkit": "^2.2.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
@@ -63,7 +66,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.2.2",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -84,7 +87,7 @@
     "standard-version": "^9.5.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.8",
+    "vite": "^5.2.9",
     "wait-on": "^7.2.0"
   },
   "standard-version": {
diff --git a/src/renderer/api/cadt/v1/organizations/organizations.api.ts b/src/renderer/api/cadt/v1/organizations/organizations.api.ts
index 8f54af81..0731c695 100644
--- a/src/renderer/api/cadt/v1/organizations/organizations.api.ts
+++ b/src/renderer/api/cadt/v1/organizations/organizations.api.ts
@@ -25,6 +25,18 @@ const organizationsApi = cadtApi.injectEndpoints({
       },
     }),
 
+    getHomeOrg: builder.query<Organization | undefined, void | null>({
+        query: () => ({
+          url: `/v1/organizations`,
+          method: 'GET',
+        }),
+        providesTags: [organizationsTag],
+        transformResponse(baseQueryReturnValue: BaseQueryResult<Organization[]>): Organization | undefined {
+          const organizations: Organization[] =  Object.values(baseQueryReturnValue);
+          return organizations.find(org => org.isHome);
+        },
+    }),
+
     getOrganizationsMap: builder.query<GetOrgnaizationsMapResponse, void | null>({
       query: () => ({
         url: `/v1/organizations`,
@@ -93,4 +105,5 @@ export const {
   useImportOrganizationMutation,
   useDeleteOrganizationMutation,
   useEditOrganizationMutation,
+  useGetHomeOrgQuery
 } = organizationsApi;
diff --git a/src/renderer/api/cadt/v1/projects/projects.api.ts b/src/renderer/api/cadt/v1/projects/projects.api.ts
index f060ef42..152ef432 100644
--- a/src/renderer/api/cadt/v1/projects/projects.api.ts
+++ b/src/renderer/api/cadt/v1/projects/projects.api.ts
@@ -1,11 +1,11 @@
-import { cadtApi, projectsTag } from '../';
+import { cadtApi, projectsTag, stagedProjectsTag } from '../';
 import { Project } from '@/schemas/Project.schema';
 
 interface GetProjectsParams {
   page: number;
-  orgUid?: string;
-  search?: string;
-  order?: string;
+  orgUid?: string | null;
+  search?: string | null;
+  order?: string | null;
 }
 
 interface GetProjectParams {
@@ -47,6 +47,7 @@ const projectsApi = cadtApi.injectEndpoints({
           method: 'GET',
         };
       },
+      // @ts-ignore
       providesTags: (_response, _error, { orgUid }) => [{ type: projectsTag, id: orgUid }],
     }),
 
@@ -68,7 +69,17 @@ const projectsApi = cadtApi.injectEndpoints({
       }),
       invalidatesTags: (_response, _error, { warehouseProjectId }) => [{ type: projectsTag, id: warehouseProjectId }],
     }),
+
+    stageProject: builder.mutation<any, Project>({
+      query: (project) => ({
+        url: `/v1/projects`,
+        method: 'POST',
+        body: project,
+      }),
+      invalidatesTags: [stagedProjectsTag],
+    }),
   }),
 });
 
-export const { useGetProjectsQuery, useGetProjectQuery, useDeleteProjectMutation } = projectsApi;
+export const { useGetProjectsQuery, useGetProjectQuery, useDeleteProjectMutation, useStageProjectMutation } =
+  projectsApi;
diff --git a/src/renderer/api/cadt/v1/units/units.api.ts b/src/renderer/api/cadt/v1/units/units.api.ts
index dde642d2..aeccda49 100644
--- a/src/renderer/api/cadt/v1/units/units.api.ts
+++ b/src/renderer/api/cadt/v1/units/units.api.ts
@@ -1,4 +1,4 @@
-import { cadtApi, unitsTag } from '../';
+import { cadtApi, stagedUnitsTag, unitsTag } from '../';
 import { Unit } from '@/schemas/Unit.schema';
 
 interface GetUnitsParams {
@@ -73,7 +73,16 @@ const unitsApi = cadtApi.injectEndpoints({
       }),
       invalidatesTags: (_response, _error, { warehouseUnitId }) => [{ type: unitsTag, id: warehouseUnitId }],
     }),
+
+    stageUnit: builder.mutation<any, Unit>({
+      query: (unit) => ({
+        url: `/v1/units`,
+        method: 'POST',
+        body: unit,
+      }),
+      invalidatesTags: [stagedUnitsTag],
+    }),
   }),
 });
 
-export const { useGetUnitsQuery, useGetUnitQuery, useDeleteUnitMutation } = unitsApi;
+export const { useGetUnitsQuery, useGetUnitQuery, useDeleteUnitMutation, useStageUnitMutation } = unitsApi;
diff --git a/src/renderer/components/blocks/forms/CoBenifetForm.tsx b/src/renderer/components/blocks/forms/CoBenifetForm.tsx
index c261ecdf..8c6a550f 100644
--- a/src/renderer/components/blocks/forms/CoBenifetForm.tsx
+++ b/src/renderer/components/blocks/forms/CoBenifetForm.tsx
@@ -1,58 +1,72 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import { Field, Repeater } from '@/components';
 import * as yup from 'yup';
 import { CoBenefit } from '@/schemas/CoBenefit.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
-  cobenifets: yup.array().of(
+  cobenefits: yup.array().of(
     yup.object({
       cobenefit: yup.string().required('Co-Benefit is required'),
     }),
   ),
 });
 
-interface CoBenefitFormFormProps {
-  onSubmit: (values: any) => Promise<any>;
+interface CoBenefitFormProps {
   readonly?: boolean;
   data?: CoBenefit[];
-  picklistOptions: PickList | undefined;
+  picklistOptions?: PickList;
 }
 
-const CoBenefitForm: React.FC<CoBenefitFormFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  return (
-    <Formik
-      initialValues={{ cobenifets: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<CoBenefit>
-            name="cobenifets"
-            maxNumber={100}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(coBenefit: CoBenefit) => (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="cobenefit"
-                  label="Co-Benefit"
-                  type="picklist"
-                  options={picklistOptions?.coBenefits}
-                  readonly={readonly}
-                  initialValue={coBenefit.cobenefit}
-                />
-              </div>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface CoBenefitFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const CoBenefitForm = forwardRef<CoBenefitFormRef, CoBenefitFormProps>(
+  ({ readonly = false, data, picklistOptions }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'coBenefits'),
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ coBenefits: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={(values) => console.log(values)}
+      >
+        {() => (
+          <Form>
+            <Repeater<CoBenefit>
+              name="coBenefits"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{ cobenefit: '' }} // Assuming default template needed
+            >
+              {(coBenefit, index, name) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name={`${name}[${index}].cobenefit`}
+                    label="Co-Benefit"
+                    type="picklist"
+                    options={picklistOptions?.coBenefits}
+                    readonly={readonly}
+                    initialValue={coBenefit.cobenefit}
+                  />
+                </div>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  },
+);
 
 export { CoBenefitForm };
diff --git a/src/renderer/components/blocks/forms/EstimationForm.tsx b/src/renderer/components/blocks/forms/EstimationForm.tsx
index 1caf6d01..59905422 100644
--- a/src/renderer/components/blocks/forms/EstimationForm.tsx
+++ b/src/renderer/components/blocks/forms/EstimationForm.tsx
@@ -1,64 +1,79 @@
-import React from 'react';
-import { Formik, Form } from 'formik';
-import { Repeater, Field } from '@/components';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
+import { Field, Repeater } from '@/components';
 import { Estimation } from '@/schemas/Estimation.schema';
 import * as yup from 'yup';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   estimations: yup.array().of(
     yup.object({
       creditingPeriodStart: yup.date().required('Crediting period start is required'),
-      creditingPeriodEnd: yup.date().required('Crediting period end is required')
-        .min(
-          yup.ref('creditingPeriodStart'),
-          'Crediting period end date must be after the start date'
-        ),
+      creditingPeriodEnd: yup
+        .date()
+        .required('Crediting period end is required')
+        .min(yup.ref('creditingPeriodStart'), 'Crediting period end date must be after the start date'),
       unitCount: yup.number().required('Unit count is required').positive('Unit count must be positive'),
-    })
+    }),
   ),
 });
 
 interface EstimationFormProps {
-  onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: Estimation[];
 }
 
-const EstimationForm: React.FC<EstimationFormProps> = ({ readonly = false, data, onSubmit }) => {
+export interface EstimationFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const EstimationForm = forwardRef<EstimationFormRef, EstimationFormProps>(({ readonly = false, data }, ref) => {
+  const formikRef = useRef<FormikProps<any>>(null);
+
+  useImperativeHandle(ref, () => ({
+    submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'estimations'),
+  }));
+
   return (
     <Formik
+      innerRef={formikRef}
       initialValues={{ estimations: data || [] }}
       validationSchema={validationSchema}
-      onSubmit={onSubmit}
+      onSubmit={() => {}}
       enableReinitialize={true}
     >
-      {({ isSubmitting }) => (
+      {() => (
         <Form>
           <Repeater<Estimation>
             name="estimations"
             maxNumber={10}
-            minNumber={1}
+            minNumber={0}
             readonly={readonly}
             initialValue={data || []}
+            itemTemplate={{
+              creditingPeriodStart: null,
+              creditingPeriodEnd: null,
+              unitCount: 0,
+            }}
           >
-            {(estimation: Estimation) => (
+            {(estimation, index, name) => (
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
                 <Field
-                  name="creditingPeriodStart"
+                  name={`${name}[${index}].creditingPeriodStart`}
                   label="Crediting Period Start"
                   type="date"
                   readonly={readonly}
-                  initialValue={estimation.creditingPeriodEnd}
+                  initialValue={estimation.creditingPeriodStart}
                 />
                 <Field
-                  name="creditingPeriodEnd"
+                  name={`${name}[${index}].creditingPeriodEnd`}
                   label="Crediting Period End"
                   type="date"
                   readonly={readonly}
                   initialValue={estimation.creditingPeriodEnd}
                 />
                 <Field
-                  name="unitCount"
+                  name={`${name}[${index}].unitCount`}
                   label="Unit Count"
                   type="number"
                   readonly={readonly}
@@ -67,15 +82,10 @@ const EstimationForm: React.FC<EstimationFormProps> = ({ readonly = false, data,
               </div>
             )}
           </Repeater>
-          {!readonly && (
-            <button type="submit" disabled={isSubmitting} className="mt-4 bg-blue-500 text-white p-2 rounded">
-              Save Estimations
-            </button>
-          )}
         </Form>
       )}
     </Formik>
   );
-};
+});
 
 export { EstimationForm };
diff --git a/src/renderer/components/blocks/forms/IssuanceForm.tsx b/src/renderer/components/blocks/forms/IssuanceForm.tsx
index bd550959..2ecc96ad 100644
--- a/src/renderer/components/blocks/forms/IssuanceForm.tsx
+++ b/src/renderer/components/blocks/forms/IssuanceForm.tsx
@@ -1,15 +1,18 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import * as yup from 'yup';
 import { Field, Repeater, UnitSummary } from '@/components';
 import { Issuance } from '@/schemas/Issuance.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   issuances: yup.array().of(
     yup.object({
       startDate: yup.date().required('Start date is required'),
-      endDate: yup.date().required('End date is required')
+      endDate: yup
+        .date()
+        .required('End date is required')
         .min(yup.ref('startDate'), 'End date must be after the start date'),
       verificationApproach: yup.string().required('Verification approach is required'),
       verificationBody: yup.string().required('Verification body is required'),
@@ -19,82 +22,103 @@ const validationSchema = yup.object({
 });
 
 interface IssuanceFormProps {
-  onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: Issuance[] | undefined;
   showUnits?: boolean;
-  picklistOptions: PickList | undefined;
+  picklistOptions?: PickList | undefined;
 }
 
-const IssuanceForm: React.FC<IssuanceFormProps> = ({ readonly = false, data, showUnits = false, picklistOptions }) => {
-  return (
-    <Formik
-      initialValues={{ issuances: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<Issuance>
-            name="issuances"
-            maxNumber={100}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(issuance: Issuance) => (
-              <>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                  <Field
-                    name="startDate"
-                    label="Start Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={issuance.startDate}
-                  />
-                  <Field
-                    name="endDate"
-                    label="End Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={issuance.endDate}
-                  />
-                  <Field
-                    name="verificationApproach"
-                    label="Verification Approach"
-                    type="text"
-                    readonly={readonly}
-                    initialValue={issuance.verificationApproach}
-                  />
-                  <Field
-                    name="verificationBody"
-                    label="Verification Body"
-                    type="picklist"
-                    options={picklistOptions?.verificationBody}
-                    readonly={readonly}
-                    initialValue={issuance.verificationBody}
-                  />
-                  <Field
-                    name="verificationReportDate"
-                    label="Verification Report Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={issuance.verificationReportDate}
-                  />
-                </div>
-                {showUnits && readonly && issuance.id && (
-                  <div>
-                    <div className="text-xl font-semibold text-gray-800 p-4">Unit Belonging to this Issuance</div>
-                    <UnitSummary issuanceId={issuance.id} />
+export interface IssuanceFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const defaultIssuanceData: Issuance[] = [];
+
+const IssuanceForm = forwardRef<IssuanceFormRef, IssuanceFormProps>(
+  ({ readonly = false, data = defaultIssuanceData, showUnits = false, picklistOptions }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'issuances') 
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ issuances: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={() => {}}
+      >
+        {() => (
+          <Form>
+            <Repeater<Issuance>
+              name="issuances"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data}
+              itemTemplate={{
+                startDate: null,
+                endDate: null,
+                verificationApproach: '',
+                verificationBody: '',
+                verificationReportDate: null,
+              }}
+            >
+              {(issuance: Issuance, index, name) => (
+                <>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                    <Field
+                      name={`${name}[${index}].startDate`}
+                      label="Start Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={issuance.startDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].endDate`}
+                      label="End Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={issuance.endDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].verificationApproach`}
+                      label="Verification Approach"
+                      type="text"
+                      readonly={readonly}
+                      initialValue={issuance.verificationApproach}
+                    />
+                    <Field
+                      name={`${name}[${index}].verificationBody`}
+                      label="Verification Body"
+                      type="picklist"
+                      options={picklistOptions?.verificationBody}
+                      readonly={readonly}
+                      initialValue={issuance.verificationBody || ''}
+                    />
+                    <Field
+                      name={`${name}[${index}].verificationReportDate`}
+                      label="Verification Report Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={issuance.verificationReportDate || null}
+                    />
                   </div>
-                )}
-              </>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+                  {showUnits && readonly && issuance.id && (
+                    <div>
+                      <div className="text-xl font-semibold text-gray-800 p-4">Unit Belonging to this Issuance</div>
+                      <UnitSummary issuanceId={issuance.id} />
+                    </div>
+                  )}
+                </>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  },
+);
 
 export { IssuanceForm };
diff --git a/src/renderer/components/blocks/forms/LabelForm.tsx b/src/renderer/components/blocks/forms/LabelForm.tsx
index b198898a..2dd4fe5f 100644
--- a/src/renderer/components/blocks/forms/LabelForm.tsx
+++ b/src/renderer/components/blocks/forms/LabelForm.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import { Field, Repeater } from '@/components';
 import * as yup from 'yup';
 import { Label } from '@/schemas/Label.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   labels: yup.array().of(
@@ -12,15 +13,23 @@ const validationSchema = yup.object({
       labelType: yup.string().required('Label type is required'),
       labelLink: yup.string().url('Must be a valid URL').nullable(),
       validityPeriodStartDate: yup.date().nullable(),
-      validityPeriodEndDate: yup.date().nullable().when(
-        'validityPeriodStartDate',
-        (validityPeriodStartDate, schema) => validityPeriodStartDate ? schema.min(validityPeriodStartDate, 'Validity Period End Date must be after the start date') : schema
-      ),
+      validityPeriodEndDate: yup
+        .date()
+        .nullable()
+        .when('validityPeriodStartDate', (validityPeriodStartDate, schema) =>
+          validityPeriodStartDate
+            ? schema.min(validityPeriodStartDate, 'Validity Period End Date must be after the start date')
+            : schema,
+        ),
       creditingPeriodStartDate: yup.date().nullable(),
-      creditingPeriodEndDate: yup.date().nullable().when(
-        'creditingPeriodStartDate',
-        (creditingPeriodStartDate, schema) => creditingPeriodStartDate ? schema.min(creditingPeriodStartDate, 'Crediting Period End Date must be after the start date') : schema
-      ),
+      creditingPeriodEndDate: yup
+        .date()
+        .nullable()
+        .when('creditingPeriodStartDate', (creditingPeriodStartDate, schema) =>
+          creditingPeriodStartDate
+            ? schema.min(creditingPeriodStartDate, 'Crediting Period End Date must be after the start date')
+            : schema,
+        ),
       unitQuantity: yup
         .number()
         .positive('Unit Quantity must be positive')
@@ -31,88 +40,114 @@ const validationSchema = yup.object({
 });
 
 interface LabelFormFormProps {
-  onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: Label[];
-  picklistOptions: PickList | undefined | null;
+  picklistOptions?: PickList | null;
 }
 
-const LabelForm: React.FC<LabelFormFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  return (
-    <Formik
-      initialValues={{ labels: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<Label> name="locations" maxNumber={100} minNumber={1} readonly={readonly} initialValue={data || []}>
-            {(label: Label) => (
-              <>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                  <Field name="label" label="Label" type="text" readonly={readonly} initialValue={label.label} />
-                  <Field
-                    name="labelType"
-                    label="Label Type"
-                    type="picklist"
-                    options={picklistOptions?.labelType}
-                    readonly={readonly}
-                    initialValue={label.labelType}
-                  />
-                </div>
-                <div>
-                  <Field
-                    name="labelLink"
-                    label="Label Link"
-                    type="link"
-                    readonly={readonly}
-                    initialValue={label.labelLink}
-                  />
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                  <Field
-                    name="validityPeriodStartDate"
-                    label="Validity Period Start Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={label.validityPeriodStartDate}
-                  />
-                  <Field
-                    name="validityPeriodEndDate"
-                    label="Validity Period End Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={label.validityPeriodEndDate}
-                  />
-                  <Field
-                    name="creditingPeriodStartDate"
-                    label="Crediting Period End Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={label.creditingPeriodStartDate}
-                  />
-                  <Field
-                    name="creditingPeriodEndDate"
-                    label="Crediting Period End Date"
-                    type="date"
-                    readonly={readonly}
-                    initialValue={label.creditingPeriodEndDate}
-                  />
-                  <Field
-                    name="unitQuantity"
-                    label="Unit Quantity"
-                    type="number"
-                    readonly={readonly}
-                    initialValue={label.unitQuantity}
-                  />
-                </div>
-              </>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface LabelFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const LabelForm = forwardRef<LabelFormRef, LabelFormFormProps>(
+  ({ readonly = false, data, picklistOptions }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'labels'),
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ labels: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={(values) => console.log(values)}
+      >
+        {() => (
+          <Form>
+            <Repeater<Label>
+              name="labels"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{
+                label: null,
+                labelType: null,
+                labelLink: null,
+                validityPeriodStartDate: null,
+                validityPeriodEndDate: null,
+                creditingPeriodStartDate: null,
+                creditingPeriodEndDate: null,
+                unitQuantity: null
+              }}
+            >
+              {(label: Label, index: number, name: string) => (
+                <>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                    <Field name="label" label="Label" type="text" readonly={readonly} initialValue={label.label} />
+                    <Field
+                      name={`${name}[${index}].labelType`}
+                      label="Label Type"
+                      type="picklist"
+                      options={picklistOptions?.labelType}
+                      readonly={readonly}
+                      initialValue={label.labelType}
+                    />
+                    <Field
+                      name={`${name}[${index}].labelLink`}
+                      label="Label Link"
+                      type="link"
+                      readonly={readonly}
+                      initialValue={label.labelLink}
+                    />
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                    <Field
+                      name={`${name}[${index}].validityPeriodStartDate`}
+                      label="Validity Period Start Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={label.validityPeriodStartDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].validityPeriodEndDate`}
+                      label="Validity Period End Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={label.validityPeriodEndDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].creditingPeriodStartDate`}
+                      label="Crediting Period End Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={label.creditingPeriodStartDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].creditingPeriodEndDate`}
+                      label="Crediting Period End Date"
+                      type="date"
+                      readonly={readonly}
+                      initialValue={label.creditingPeriodEndDate}
+                    />
+                    <Field
+                      name={`${name}[${index}].unitQuantity`}
+                      label="Unit Quantity"
+                      type="number"
+                      readonly={readonly}
+                      initialValue={label.unitQuantity}
+                    />
+                  </div>
+                </>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  },
+);
 
 export { LabelForm };
diff --git a/src/renderer/components/blocks/forms/ProjectForm.tsx b/src/renderer/components/blocks/forms/ProjectForm.tsx
index ffff5a00..b91fd0c9 100644
--- a/src/renderer/components/blocks/forms/ProjectForm.tsx
+++ b/src/renderer/components/blocks/forms/ProjectForm.tsx
@@ -1,197 +1,271 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import * as yup from 'yup';
-import { Field } from '@/components';
+import { Card, Field } from '@/components';
 import { Project } from '@/schemas/Project.schema';
-import { Card } from '@/components';
 import { PickList } from '@/schemas/PickList.schema';
 
 const validationSchema = yup.object({
-  projectName: yup.string().required('Project Name is required'),
-  projectId: yup.string().required('Project ID is required'),
-  projectDeveloper: yup.string().required('Project Developer is required'),
-  program: yup.string().required('Program is required'),
-  projectLink: yup.string().url('Must be a valid URL').required('Project Link is required'),
-  sector: yup.string().required('Sector is required'),
-  projectType: yup.string().required('Project Type is required'),
-  projectStatus: yup.string().required('Project Status is required'),
+  projectName: yup.string().required('Project Name is required').min(1, 'Project Name cannot be empty'),
+  projectId: yup.string().required('Project ID is required').min(1, 'Project ID cannot be empty'),
+  projectDeveloper: yup.string().required('Project Developer is required').min(1, 'Project Developer cannot be empty'),
+  program: yup.string().required('Program is required').min(1, 'Program cannot be empty'),
+  projectLink: yup
+    .string()
+    .url('Must be a valid URL')
+    .required('Project Link is required')
+    .min(1, 'Project Link cannot be empty'),
+  sector: yup.string().required('Sector is required').min(1, 'Sector cannot be empty'),
+  projectType: yup.string().required('Project Type is required').min(1, 'Project Type cannot be empty'),
+  projectStatus: yup.string().required('Project Status is required').min(1, 'Project Status cannot be empty'),
   projectStatusDate: yup.date().required('Project Status Date is required'),
-  coveredByNDC: yup.string().required('Covered By NDC is required'),
-  ndcInformation: yup.string(),
-  currentRegistry: yup.string(),
-  registryOfOrigin: yup.string().required('Registry of Origin is required'),
-  originProjectId: yup.string().required('Origin Project ID is required'),
-  unitMetric: yup.string().required('Unit Metric is required'),
-  methodology: yup.string().required('Methodology is required'),
-  validationBody: yup.string().required('Validation Body is required'),
+  coveredByNDC: yup.string().required('Covered By NDC is required').min(1, 'Covered By NDC cannot be empty'),
+  ndcInformation: yup.string().min(1, 'NDC Information cannot be empty'), // Optional field with no empty string
+  currentRegistry: yup.string().min(1, 'Current Registry cannot be empty'), // Optional field with no empty string
+  registryOfOrigin: yup
+    .string()
+    .required('Registry of Origin is required')
+    .min(1, 'Registry Of Origin cannot be empty'),
+  originProjectId: yup.string().required('Origin Project ID is required').min(1, 'Origin Project ID cannot be empty'),
+  unitMetric: yup.string().required('Unit Metric is required').min(1, 'Unit Metric cannot be empty'),
+  methodology: yup.string().required('Methodology is required').min(1, 'Methodology cannot be empty'),
+  validationBody: yup.string().required('Validation Body is required').min(1, 'Validation Body cannot be empty'),
   validationDate: yup.date().required('Validation Date is required'),
-  projectTags: yup.string(),
+  projectTags: yup.string().min(1, 'Project Tags cannot be empty'), // Optional field with no empty string
 });
 
-
 interface ProjectFormProps {
-  onSubmit: () => Promise<any>;
   readonly?: boolean;
-  data: Project;
-  picklistOptions: PickList | undefined;
+  data?: Project;
+  picklistOptions?: PickList;
 }
 
-const ProjectForm: React.FC<ProjectFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  return (
-    <Formik initialValues={data} validationSchema={validationSchema} onSubmit={() => {}}>
-      {() => (
-        <Form>
-          <div className="flex flex-col gap-4">
-            <Card>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="projectName"
-                  label="Project Name"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.projectName}
-                />
-                <Field
-                  name="projectId"
-                  label="External Project Id"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.projectId}
-                />
-                <Field
-                  name="projectDeveloper"
-                  label="Project Developer"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.projectDeveloper}
-                />
-                <Field name="program" label="Program" type="text" readonly={readonly} initialValue={data.program} />
-              </div>
-              <div>
-                <Field
-                  name="projectLink"
-                  label="Project Link"
-                  type="link"
-                  readonly={readonly}
-                  initialValue={data.projectLink}
-                />
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field name="sector" label="Sector" type="text" readonly={readonly} initialValue={data.sector} />
-                <Field
-                  name="projectType"
-                  label="Project Type"
-                  type="picklist"
-                  options={picklistOptions?.projectType}
-                  readonly={readonly}
-                  initialValue={data.sector}
-                />
-                <Field
-                  name="projectStatus"
-                  label="Project Status"
-                  type="picklist"
-                  options={picklistOptions?.projectStatusValues}
-                  readonly={readonly}
-                  initialValue={data.projectStatus}
-                />
-                <Field
-                  name="projectStatusDate"
-                  label="Project Status Date"
-                  type="date"
-                  readonly={readonly}
-                  initialValue={data.projectStatusDate}
-                />
-              </div>
-            </Card>
-            <Card>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="coveredByNDC"
-                  label="Covered By NDC"
-                  type="picklist"
-                  options={picklistOptions?.coveredByNDC}
-                  readonly={readonly}
-                  initialValue={data.coveredByNDC}
-                />
-                <Field
-                  name="ndcInformation"
-                  label="NDC Information"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.ndcInformation}
-                />
-                <Field
-                  name="currentRegistry"
-                  label="Current Registry"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.currentRegistry}
-                />
-                <Field
-                  name="registryOfOrigin"
-                  label="Registry Of Origin"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.registryOfOrigin}
-                />
-                <Field
-                  name="originProjectId"
-                  label="Origin Project ID"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={data.originProjectId}
-                />
-              </div>
-            </Card>
-            <Card>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="unitMetric"
-                  label="Unit Metric"
-                  type="picklist"
-                  options={picklistOptions?.unitMetric}
-                  readonly={readonly}
-                  initialValue={data.unitMetric}
-                />
-                <Field
-                  name="methodology"
-                  label="Methodology"
-                  type="picklist"
-                  options={picklistOptions?.methodology}
-                  readonly={readonly}
-                  initialValue={data.methodology}
-                />
-                <Field
-                  name="validationBody"
-                  label="Validation Body"
-                  type="picklist"
-                  options={picklistOptions?.validationBody}
-                  readonly={readonly}
-                  initialValue={data.validationBody}
-                />
+export interface ProjectFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const defaultProjectData: Project = {
+  projectName: '',
+  projectId: '',
+  projectDeveloper: '',
+  program: '',
+  projectLink: '',
+  sector: '',
+  projectType: '',
+  projectStatus: '',
+  projectStatusDate: new Date(),
+  coveredByNDC: '',
+  ndcInformation: '',
+  currentRegistry: '',
+  registryOfOrigin: '',
+  originProjectId: '',
+  unitMetric: '',
+  methodology: '',
+  validationBody: '',
+  validationDate: new Date(),
+  projectTags: '',
+};
+
+const getDefaultInitialValues = (data: Partial<Project>): Project => {
+  return {
+    ...defaultProjectData,
+    ...data,
+  };
+};
+
+const ProjectForm: React.FC<ProjectFormProps> = forwardRef<ProjectFormRef, ProjectFormProps>(
+  ({ readonly = false, data = {}, picklistOptions }, ref) => {
+    const formikRef = React.useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: async () => {
+        if (formikRef.current) {
+          const formik = formikRef.current;
+          if (formik) {
+            const errors = await formik.validateForm(formik.values);
+            formik.setTouched(
+              Object.keys(errors).reduce((acc, key) => ({ ...acc, [key]: true }), {})
+            );
+
+            return [errors, formik.values];
+          }
+        }
+      },
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={getDefaultInitialValues(data)}
+        validationSchema={validationSchema}
+        onSubmit={() => {}}
+      >
+        {() => (
+          <Form>
+            <div className="flex flex-col gap-4">
+              <Card>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name="projectName"
+                    label="Project Name"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.projectName || ''}
+                  />
+                  <Field
+                    name="projectId"
+                    label="External Project Id"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.projectId || ''}
+                  />
+                  <Field
+                    name="projectDeveloper"
+                    label="Project Developer"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.projectDeveloper || ''}
+                  />
+                  <Field
+                    name="program"
+                    label="Program"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.program || ''}
+                  />
+                </div>
+                <div>
+                  <Field
+                    name="projectLink"
+                    label="Project Link"
+                    type="link"
+                    readonly={readonly}
+                    initialValue={data?.projectLink || ''}
+                  />
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name="sector"
+                    label="Sector"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.sector || ''}
+                  />
+                  <Field
+                    name="projectType"
+                    label="Project Type"
+                    type="picklist"
+                    options={picklistOptions?.projectType}
+                    readonly={readonly}
+                    initialValue={data?.projectType || ''}
+                  />
+                  <Field
+                    name="projectStatus"
+                    label="Project Status"
+                    type="picklist"
+                    options={picklistOptions?.projectStatusValues}
+                    readonly={readonly}
+                    initialValue={data?.projectStatus || ''}
+                  />
+                  <Field
+                    name="projectStatusDate"
+                    label="Project Status Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={data?.projectStatusDate || ''}
+                  />
+                </div>
+              </Card>
+              <Card>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name="coveredByNDC"
+                    label="Covered By NDC"
+                    type="picklist"
+                    options={picklistOptions?.coveredByNDC}
+                    readonly={readonly}
+                    initialValue={data?.coveredByNDC || ''}
+                  />
+                  <Field
+                    name="ndcInformation"
+                    label="NDC Information"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.ndcInformation || ''}
+                  />
+                  <Field
+                    name="currentRegistry"
+                    label="Current Registry"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.currentRegistry || ''}
+                  />
+                  <Field
+                    name="registryOfOrigin"
+                    label="Registry Of Origin"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.registryOfOrigin || ''}
+                  />
+                  <Field
+                    name="originProjectId"
+                    label="Origin Project ID"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={data?.originProjectId || ''}
+                  />
+                </div>
+              </Card>
+              <Card>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name="unitMetric"
+                    label="Unit Metric"
+                    type="picklist"
+                    options={picklistOptions?.unitMetric}
+                    readonly={readonly}
+                    initialValue={data?.unitMetric || ''}
+                  />
+                  <Field
+                    name="methodology"
+                    label="Methodology"
+                    type="picklist"
+                    options={picklistOptions?.methodology}
+                    readonly={readonly}
+                    initialValue={data?.methodology || ''}
+                  />
+                  <Field
+                    name="validationBody"
+                    label="Validation Body"
+                    type="picklist"
+                    options={picklistOptions?.validationBody}
+                    readonly={readonly}
+                    initialValue={data?.validationBody || ''}
+                  />
+                  <Field
+                    name="validationDate"
+                    label="Validation Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={data?.validationDate || ''}
+                  />
+                </div>
+              </Card>
+              <Card>
                 <Field
-                  name="validationDate"
-                  label="Validation Date"
-                  type="date"
+                  name="projectTags"
+                  label="Project Tags"
+                  type="tag"
                   readonly={readonly}
-                  initialValue={data.validationDate}
+                  initialValue={data?.projectTags || ''}
                 />
-              </div>
-            </Card>
-            <Card>
-              <Field
-                name="projectTags"
-                label="Project Tags"
-                type="tag"
-                readonly={readonly}
-                initialValue={data.projectTags}
-              />
-            </Card>
-          </div>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+              </Card>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    );
+  },
+);
 
 export { ProjectForm };
diff --git a/src/renderer/components/blocks/forms/ProjectLocationForm.tsx b/src/renderer/components/blocks/forms/ProjectLocationForm.tsx
index 46914810..26408ace 100644
--- a/src/renderer/components/blocks/forms/ProjectLocationForm.tsx
+++ b/src/renderer/components/blocks/forms/ProjectLocationForm.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import { Field, Repeater } from '@/components';
 import * as yup from 'yup';
 import { ProjectLocation } from '@/schemas/ProjectLocation.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   locations: yup.array().of(
@@ -17,60 +18,84 @@ const validationSchema = yup.object({
 });
 
 interface ProjectLocationFormProps {
-  onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: ProjectLocation[];
-  picklistOptions: PickList | undefined;
+  picklistOptions?: PickList;
 }
 
-const ProjectLocationForm: React.FC<ProjectLocationFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  return (
-    <Formik
-      initialValues={{ locations: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<ProjectLocation>
-            name="locations"
-            maxNumber={100}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(location: ProjectLocation) => (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="country"
-                  label="Host Country"
-                  type="picklist"
-                  options={picklistOptions?.countries}
-                  readonly={readonly}
-                  initialValue={location.country}
-                />
-                <Field
-                  name="inCountryRegion"
-                  label="In-Country Region"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={location.inCountryRegion}
-                />
-                <Field
-                  name="geographicIdentifier"
-                  label="Geographic Identifier"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={location.geographicIdentifier}
-                />
-                <Field name="fileId" label="File ID" type="text" readonly={readonly} initialValue={location.fileId} />
-              </div>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface ProjectLocationFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const ProjectLocationForm = forwardRef<ProjectLocationFormRef, ProjectLocationFormProps>(
+  ({ readonly = false, data, picklistOptions }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'projectLocations'),
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ projectLocations: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={(values) => console.log(values)}
+      >
+        {() => (
+          <Form>
+            <Repeater<ProjectLocation>
+              name="projectLocations"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{
+                country: '',
+                geographicIdentifier: '',
+                inCountryRegion: '',
+                fileId: ''
+              }}
+            >
+              {(location, index, name) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name={`${name}[${index}].country`}
+                    label="Host Country"
+                    type="picklist"
+                    options={picklistOptions?.countries}
+                    readonly={readonly}
+                    initialValue={location.country}
+                  />
+                  <Field
+                    name={`${name}[${index}].inCountryRegion`}
+                    label="In-Country Region"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={location.inCountryRegion}
+                  />
+                  <Field
+                    name={`${name}[${index}].geographicIdentifier`}
+                    label="Geographic Identifier"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={location.geographicIdentifier}
+                  />
+                  <Field
+                    name={`${name}[${index}].fileId`}
+                    label="File ID"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={location.fileId}
+                  />
+                </div>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+);
 
 export { ProjectLocationForm };
diff --git a/src/renderer/components/blocks/forms/RatingForm.tsx b/src/renderer/components/blocks/forms/RatingForm.tsx
index 1d06ce5f..f930af33 100644
--- a/src/renderer/components/blocks/forms/RatingForm.tsx
+++ b/src/renderer/components/blocks/forms/RatingForm.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
 import { Field, Repeater } from '@/components';
 import * as yup from 'yup';
 import { Rating } from '@/schemas/Rating.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   ratings: yup.array().of(
@@ -17,34 +18,51 @@ const validationSchema = yup.object({
   ),
 });
 
-interface RatingFormFormProps {
-  onSubmit: (values: any) => Promise<any>;
+interface RatingFormProps {
   readonly?: boolean;
   data?: Rating[];
-  picklistOptions: PickList | undefined | null;
+  picklistOptions?: PickList | null;
 }
 
-const RatingForm: React.FC<RatingFormFormProps> = ({ readonly = false, data, picklistOptions }) => {
+export interface RatingFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const RatingForm = forwardRef<RatingFormRef, RatingFormProps>(({ readonly = false, data, picklistOptions }, ref) => {
+  const formikRef = useRef<FormikProps<any>>(null);
+
+  useImperativeHandle(ref, () => ({
+    submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'projectRatings'),
+  }));
+
   return (
     <Formik
-      initialValues={{ ratings: data || [] }}
+      innerRef={formikRef}
+      initialValues={{ projectRatings: data || [] }}
       validationSchema={validationSchema}
       onSubmit={(values) => console.log(values)}
     >
       {() => (
         <Form>
           <Repeater<Rating>
-            name="ratings"
+            name="projectRatings"
             maxNumber={100}
-            minNumber={1}
+            minNumber={0}
             readonly={readonly}
             initialValue={data || []}
+            itemTemplate={{
+              ratingType: null,
+              ratingRangeLowest: null,
+              ratingRangeHighest: null,
+              rating: null,
+              ratingLink: null,
+            }}
           >
-            {(rating: Rating) => (
+            {(rating, index, name) => (
               <>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
                   <Field
-                    name="ratingType"
+                    name={`${name}[${index}].ratingType`}
                     label="Rating Type"
                     type="picklist"
                     options={picklistOptions?.ratingType}
@@ -52,26 +70,29 @@ const RatingForm: React.FC<RatingFormFormProps> = ({ readonly = false, data, pic
                     initialValue={rating.ratingType}
                   />
                   <Field
-                    name="ratingLowest"
+                    name={`${name}[${index}].ratingRangeLowest`}
                     label="Rating Lowest"
                     type="text"
                     readonly={readonly}
                     initialValue={rating.ratingRangeLowest}
                   />
-
                   <Field
-                    name="ratingHighest"
+                    name={`${name}[${index}].ratingRangeHighest`}
                     label="Rating Highest"
                     type="text"
                     readonly={readonly}
                     initialValue={rating.ratingRangeHighest}
                   />
-                  <Field name="rating" label="Rating" type="text" readonly={readonly} initialValue={rating.rating} />
-                </div>
-                <div>
                   <Field
-                    name="rating"
+                    name={`${name}[${index}].rating`}
                     label="Rating"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={rating.rating}
+                  />
+                  <Field
+                    name={`${name}[${index}].ratingLink`}
+                    label="Rating Link"
                     type="link"
                     readonly={readonly}
                     initialValue={rating.ratingLink}
@@ -84,6 +105,6 @@ const RatingForm: React.FC<RatingFormFormProps> = ({ readonly = false, data, pic
       )}
     </Formik>
   );
-};
+});
 
 export { RatingForm };
diff --git a/src/renderer/components/blocks/forms/RelatedProjectForm.tsx b/src/renderer/components/blocks/forms/RelatedProjectForm.tsx
index 855153a6..fe76cf3a 100644
--- a/src/renderer/components/blocks/forms/RelatedProjectForm.tsx
+++ b/src/renderer/components/blocks/forms/RelatedProjectForm.tsx
@@ -1,63 +1,99 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
-import { Field, Repeater } from '@/components';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Form, Formik, FormikProps } from 'formik';
+import { Field, Repeater, Spinner } from '@/components';
 import * as yup from 'yup';
 import { RelatedProject } from '@/schemas/RelatedProject.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
+import { useGetProjectOptionsList, useQueryParamState } from '@/hooks';
 
 const validationSchema = yup.object({
   relatedProjects: yup.array().of(
     yup.object({
       relationshipType: yup.string().required('Relationship Type is required'),
       registry: yup.string().required('Registry is required'),
+      relatedProjectId: yup.string().required('Related Project ID is required'),
     }),
   ),
 });
 
-interface RelatedProjectFormFormProps {
-  onSubmit: (values: any) => Promise<any>;
+interface RelatedProjectFormProps {
   readonly?: boolean;
   data?: RelatedProject[];
 }
 
-const RelatedProjectForm: React.FC<RelatedProjectFormFormProps> = ({ readonly = false, data }) => {
-  return (
-    <Formik
-      initialValues={{ relatedProjects: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<RelatedProject>
-            name="relatedProjects"
-            maxNumber={100}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(relatedProject: RelatedProject) => (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="relationshipType"
-                  label="Relationship Type"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={relatedProject.relationshipType}
-                />
-                <Field
-                  name="registry"
-                  label="Registry"
-                  type="text"
-                  readonly={readonly}
-                  initialValue={relatedProject.registry}
-                />
-              </div>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface RelatedProjectFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const RelatedProjectForm = forwardRef<RelatedProjectFormRef, RelatedProjectFormProps>(
+  ({ readonly = false, data }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+    const [orgUid] = useQueryParamState('orgUid');
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'relatedProjects'),
+    }));
+
+    console.log(orgUid);
+    const { projects: projectOptions, isLoading } = useGetProjectOptionsList(orgUid);
+
+    if (isLoading) {
+      return <Spinner />;
+    }
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ relatedProjects: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={(values) => console.log(values)}
+      >
+        {() => (
+          <Form>
+            <Repeater<RelatedProject>
+              name="relatedProjects"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{
+                relationshipType: null,
+                registry: null,
+                relatedProjectId: null,
+              }}
+            >
+              {(relatedProject, index, name) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name={`${name}[${index}].relationshipType`}
+                    label="Relationship Type"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={relatedProject.relationshipType}
+                  />
+                  <Field
+                    name={`${name}[${index}].registry`}
+                    label="Registry"
+                    type="text"
+                    readonly={readonly}
+                    initialValue={relatedProject.registry}
+                  />
+                  <Field
+                    name={`${name}[${index}].relatedProjectId`}
+                    label="Related Projects"
+                    type="picklist"
+                    options={projectOptions}
+                    readonly={readonly}
+                    initialValue={relatedProject.relatedProjectId}
+                  />
+                </div>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  },
+);
 
 export { RelatedProjectForm };
diff --git a/src/renderer/components/blocks/forms/UnitForm.tsx b/src/renderer/components/blocks/forms/UnitForm.tsx
index cb74fe22..f30dc208 100644
--- a/src/renderer/components/blocks/forms/UnitForm.tsx
+++ b/src/renderer/components/blocks/forms/UnitForm.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Form, Formik } from 'formik';
 import * as yup from 'yup';
-import { Card, Field, SelectOption } from '@/components';
+import { Card, Field, SelectOption, Select, Spinner,Label } from '@/components';
 import { Unit } from '@/schemas/Unit.schema';
-import { useGetProjectQuery } from '@/api';
+import { useGetProjectQuery, useGetHomeOrgQuery } from '@/api';
 import { PickList } from '@/schemas/PickList.schema';
+import { useGetProjectOptionsList } from '@/hooks';
 
 const validationSchema = yup.object({
   unitOwner: yup.string().required('Unit Owner is required'),
@@ -27,23 +28,26 @@ const validationSchema = yup.object({
 });
 
 interface UnitFormProps {
-  onSubmit: () => Promise<any>;
   readonly?: boolean;
-  data: Unit;
+  data?: Unit;
   picklistOptions: PickList | undefined;
 }
 
 const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  const { data: projectData, isLoading } = useGetProjectQuery(
+  const { data: homeOrg, isLoading: isHomeOrgLoading } = useGetHomeOrgQuery();
+  const { projects: projectOptions, isLoading: isProjectOptionsLoading } = useGetProjectOptionsList(homeOrg?.orgUid);
+  const [selectedWarehouseProjectId, setSelectedWarehouseProjectId] = useState<string | undefined>();
+
+  const { data: projectData, isLoading: isProjectLoading, isFetching: isProjectFetching } = useGetProjectQuery(
     {
       // @ts-ignore
-      warehouseProjectId: data?.issuance?.warehouseProjectId,
+      warehouseProjectId: selectedWarehouseProjectId,
     },
-    { skip: !data?.issuance?.warehouseProjectId },
+    { skip: !selectedWarehouseProjectId },
   );
 
   const projectLocationOptions: SelectOption[] = useMemo(() => {
-    if (isLoading || !projectData?.projectLocations) {
+    if (isProjectLoading || !projectData?.projectLocations) {
       return [];
     }
 
@@ -53,36 +57,53 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
         value: location.id || '',
       }),
     );
-  }, [projectData, isLoading]);
+  }, [projectData, isProjectLoading]);
+
+  if (isHomeOrgLoading || isProjectOptionsLoading || isProjectLoading || isProjectFetching) {
+    return <Spinner />;
+  }
 
   return (
-    <Formik initialValues={data} validationSchema={validationSchema} onSubmit={() => {}}>
+    <Formik initialValues={data || {}} validationSchema={validationSchema} onSubmit={() => {}}>
       {() => (
         <Form>
           <div className="flex flex-col gap-4">
             <Card>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                <div>
+                <Label htmlFor="select-project">Select Project</Label>
+                <Select
+                  id="select-project"
+                  name="select-project"
+                  onChange={(event) => {
+                    console.log(event.target.value);
+                    setSelectedWarehouseProjectId(event.target.value)
+                  }}
+                  options={projectOptions}
+                />
+                </div>
                 <Field
                   name="projectLocationId"
                   label="Project Location Id"
+                  disabled={!selectedWarehouseProjectId}
                   type="picklist"
                   options={projectLocationOptions}
                   readonly={readonly}
-                  initialValue={data.projectLocationId}
+                  initialValue={data?.projectLocationId}
                 />
                 <Field
                   name="unitOwner"
                   label="Unit Owner"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.unitOwner}
+                  initialValue={data?.unitOwner}
                 />
                 <Field
                   name="unitBlockStart"
                   label="Unit Block Start"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.unitBlockStart}
+                  initialValue={data?.unitBlockStart}
                 />
 
                 <Field
@@ -90,7 +111,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Unit Block End"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.unitBlockEnd}
+                  initialValue={data?.unitBlockEnd}
                 />
 
                 <Field
@@ -98,7 +119,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Unit Count"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.unitCount}
+                  initialValue={data?.unitCount}
                 />
 
                 <Field
@@ -106,7 +127,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Serial Number Block"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.serialNumberBlock}
+                  initialValue={data?.serialNumberBlock}
                 />
 
                 <Field
@@ -114,7 +135,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Country Jurisdiction Of Owner"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.countryJurisdictionOfOwner}
+                  initialValue={data?.countryJurisdictionOfOwner}
                 />
 
                 <Field
@@ -122,7 +143,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="In-Country Jurisdiction Of Owner"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.inCountryJurisdictionOfOwner}
+                  initialValue={data?.inCountryJurisdictionOfOwner}
                 />
 
                 <Field
@@ -131,7 +152,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   type="picklist"
                   options={picklistOptions?.unitType}
                   readonly={readonly}
-                  initialValue={data.unitType}
+                  initialValue={data?.unitType}
                 />
 
                 <Field
@@ -140,7 +161,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   type="picklist"
                   options={picklistOptions?.unitStatus}
                   readonly={readonly}
-                  initialValue={data.unitStatusReason}
+                  initialValue={data?.unitStatusReason}
                 />
 
                 <Field
@@ -148,7 +169,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Unit Status Reason"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.vintageYear}
+                  initialValue={data?.vintageYear}
                 />
               </div>
               <div>
@@ -157,7 +178,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Unit Registry Link"
                   type="link"
                   readonly={readonly}
-                  initialValue={data.unitRegistryLink}
+                  initialValue={data?.unitRegistryLink}
                 />
               </div>
             </Card>
@@ -168,7 +189,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Marketplace"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.marketplace}
+                  initialValue={data?.marketplace}
                 />
 
                 <Field
@@ -176,7 +197,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Marketplace Identifier"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.marketplaceIdentifier}
+                  initialValue={data?.marketplaceIdentifier}
                 />
 
                 <Field
@@ -184,7 +205,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   label="Marketplace Link"
                   type="text"
                   readonly={readonly}
-                  initialValue={data.marketplaceLink}
+                  initialValue={data?.marketplaceLink}
                 />
 
                 <Field
@@ -193,7 +214,7 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   type="picklist"
                   options={picklistOptions?.correspondingAdjustmentStatus}
                   readonly={readonly}
-                  initialValue={data.correspondingAdjustmentStatus}
+                  initialValue={data?.correspondingAdjustmentStatus}
                 />
 
                 <Field
@@ -202,12 +223,12 @@ const UnitForm: React.FC<UnitFormProps> = ({ readonly = false, data, picklistOpt
                   type="picklist"
                   options={picklistOptions?.correspondingAdjustmentDeclaration}
                   readonly={readonly}
-                  initialValue={data.correspondingAdjustmentDeclaration}
+                  initialValue={data?.correspondingAdjustmentDeclaration}
                 />
               </div>
             </Card>
             <Card>
-              <Field name="unitTags" label="Unit Tags" type="tag" readonly={readonly} initialValue={data.unitTags} />
+              <Field name="unitTags" label="Unit Tags" type="tag" readonly={readonly} initialValue={data?.unitTags} />
             </Card>
           </div>
         </Form>
diff --git a/src/renderer/components/blocks/modals/ProjectModal.tsx b/src/renderer/components/blocks/modals/ProjectModal.tsx
index e6f1acbe..96683809 100644
--- a/src/renderer/components/blocks/modals/ProjectModal.tsx
+++ b/src/renderer/components/blocks/modals/ProjectModal.tsx
@@ -23,10 +23,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
   const { data: projectData, isLoading: isProjectLoading } = useGetProjectQuery({ warehouseProjectId });
   const { data: pickListData, isLoading: isPickListLoading } = useGetPickListsQuery();
 
-  const handleProjectFormSubmit = async () => {
-    return Promise.resolve();
-  };
-
   return (
     <Modal onClose={onClose} show={true} size={'8xl'} position="top-center">
       <Modal.Header>
@@ -39,7 +35,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             <Tabs.Item title={<FormattedMessage id="project" />}>
               {!isProjectLoading && !isPickListLoading && projectData ? (
                 <ProjectForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData}
                   picklistOptions={pickListData}
@@ -51,7 +46,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             {projectData?.issuances?.length && (
               <Tabs.Item title={<FormattedMessage id="issuance" />}>
                 <IssuanceForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData?.issuances}
                   showUnits={true}
@@ -62,7 +56,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             {projectData?.projectLocations?.length && (
               <Tabs.Item title={<FormattedMessage id="project-locations" />}>
                 <ProjectLocationForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData?.projectLocations}
                   picklistOptions={pickListData}
@@ -71,13 +64,12 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             )}
             {projectData?.estimations?.length && (
               <Tabs.Item title={<FormattedMessage id="estimations" />}>
-                <EstimationForm onSubmit={handleProjectFormSubmit} readonly={true} data={projectData?.estimations} />
+                <EstimationForm readonly={true} data={projectData?.estimations} />
               </Tabs.Item>
             )}
             {projectData?.coBenefits?.length && (
               <Tabs.Item title={<FormattedMessage id="co-benefits" />}>
                 <CoBenefitForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData?.coBenefits}
                   picklistOptions={pickListData}
@@ -87,7 +79,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             {projectData?.relatedProjects?.length && (
               <Tabs.Item title={<FormattedMessage id="related-projects" />}>
                 <RelatedProjectForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData?.relatedProjects}
                 />
@@ -96,7 +87,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
             {(projectData?.projectRatings?.length || projectData?.labels?.length) && (
               <Tabs.Item title={<FormattedMessage id="ratings" />}>
                 <RatingForm
-                  onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={projectData?.projectRatings}
                   picklistOptions={pickListData}
diff --git a/src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx b/src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx
new file mode 100644
index 00000000..76067028
--- /dev/null
+++ b/src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Modal } from "flowbite-react";
+import {FormattedMessage} from "react-intl";
+
+interface StagedProjectSuccessModalProps {
+  showModal: boolean;
+  onClose: () => void;
+}
+
+const StagedProjectSuccessModal: React.FC<StagedProjectSuccessModalProps> = (
+  { showModal = true, onClose }: StagedProjectSuccessModalProps) => {
+
+  return (
+    <Modal show={showModal} onClose={onClose}>
+      <Modal.Header>
+        <FormattedMessage id="project-successfully-staged"/>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="space-y-6">
+          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            Your project has been successfully staged, and is waiting your review before it is commited to the blockchain.
+          </p>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export { StagedProjectSuccessModal };
\ No newline at end of file
diff --git a/src/renderer/components/blocks/modals/UnitModal.tsx b/src/renderer/components/blocks/modals/UnitModal.tsx
index 4e96a1ca..e6a95dcc 100644
--- a/src/renderer/components/blocks/modals/UnitModal.tsx
+++ b/src/renderer/components/blocks/modals/UnitModal.tsx
@@ -28,6 +28,7 @@ const UnitModal: React.FC<UnitModalProps> = ({ warehouseUnitId, onClose }: UnitM
             <Tabs.Item title={<FormattedMessage id="unit" />}>
               {!unitLoading && !isPickListLoading && unitData ? (
                 <UnitForm
+                  // @ts-ignore
                   onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={unitData}
@@ -40,6 +41,7 @@ const UnitModal: React.FC<UnitModalProps> = ({ warehouseUnitId, onClose }: UnitM
             {unitData?.issuance && (
               <Tabs.Item title={<FormattedMessage id="issuance" />}>
                 <IssuanceForm
+                  // @ts-ignore
                   onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={[unitData?.issuance]}
@@ -50,6 +52,7 @@ const UnitModal: React.FC<UnitModalProps> = ({ warehouseUnitId, onClose }: UnitM
             {unitData?.labels?.length && (
               <Tabs.Item title={<FormattedMessage id="labels" />}>
                 <LabelForm
+                  // @ts-ignore
                   onSubmit={handleProjectFormSubmit}
                   readonly={true}
                   data={unitData?.labels}
diff --git a/src/renderer/components/blocks/modals/UpsertProjectModal.tsx b/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
index 3b0b5e8a..2c41b63a 100644
--- a/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
+++ b/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
@@ -1,18 +1,165 @@
-import React from 'react';
-import { ComponentCenteredSpinner, Modal } from '@/components';
-import { useWildCardUrlHash } from '@/hooks';
-import { useGetProjectQuery } from '@/api';
-import { FormattedMessage } from 'react-intl';
+import { isEmpty } from 'lodash';
+import React, { useMemo, useState, useRef } from 'react';
+import {
+  Button,
+  CoBenefitForm,
+  ComponentCenteredSpinner,
+  EstimationForm,
+  IssuanceForm,
+  LabelForm,
+  Modal,
+  ProjectForm,
+  ProjectLocationForm,
+  RatingForm,
+  RelatedProjectForm,
+  ProjectFormRef,
+  IssuanceFormRef,
+  ProjectLocationFormRef,
+  EstimationFormRef,
+  LabelFormRef,
+  RatingFormRef,
+  CoBenefitFormRef,
+  RelatedProjectFormRef,
+  Spacer
+} from '@/components';
+import { useWildCardUrlHash, useUrlHash } from '@/hooks';
+import { useGetPickListsQuery, useGetProjectQuery, useStageProjectMutation } from '@/api';
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import { StepButton } from '@mui/material';
+import { Project } from '@/schemas/Project.schema';
+
+enum UpsertProjectTabs {
+  PROJECT,
+  ISSUANCES,
+  PROJECT_LOCATIONS,
+  ESTIMATIONS,
+  LABELS,
+  RATINGS,
+  CO_BENEFITS,
+  RELATED_PROJECTS,
+}
 
 interface UpsertModalProps {
   onClose: () => void;
 }
 
 const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalProps) => {
+  const intl: IntlShape = useIntl();
+  const projectFormRef = useRef<ProjectFormRef>(null);
+  const issuanceFormRef = useRef<IssuanceFormRef>(null);
+  const projectLocationFormRef = useRef<ProjectLocationFormRef>(null);
+  const estimationFormRef = useRef<EstimationFormRef>(null);
+  const labelFormRef = useRef<LabelFormRef>(null);
+  const relatedProjectFormRef = useRef<RelatedProjectFormRef>(null);
+  const ratingFormRef = useRef<RatingFormRef>(null);
+  const cobenefitFormRef = useRef<CoBenefitFormRef>(null);
+
+  const [projectFormData, setProjectFormData] = useState<Project>();
   const [, createProjectModalActive] = useWildCardUrlHash('create-project');
   const [projectUpsertFragment] = useWildCardUrlHash('edit-project');
   const warehouseProjectId = projectUpsertFragment.replace('edit-project-', '');
   const { data: projectData, isLoading: projectLoading } = useGetProjectQuery({ warehouseProjectId });
+  const { data: pickListData, isLoading: isPickListLoading } = useGetPickListsQuery();
+  const [triggerStageProject, { isLoading: isProjectStaging }] = useStageProjectMutation();
+  const [, setProjectStagedSuccessModal] = useUrlHash('success-stage-project');
+
+  const steps: string[] = useMemo<string[]>(() => {
+    return [
+      intl.formatMessage({ id: 'project' }),
+      intl.formatMessage({ id: 'issuances' }),
+      intl.formatMessage({ id: 'project-locations' }),
+      intl.formatMessage({ id: 'estimations' }),
+      intl.formatMessage({ id: 'labels' }),
+      intl.formatMessage({ id: 'ratings' }),
+      intl.formatMessage({ id: 'co-benefits' }),
+      intl.formatMessage({ id: 'related-projects' }),
+    ];
+  }, [intl]);
+
+  const [activeStep, setActiveStep] = useState(UpsertProjectTabs.PROJECT);
+
+  const totalSteps = () => {
+    return steps.length;
+  };
+
+  const isLastStep = () => {
+    return activeStep === totalSteps() - 1;
+  };
+
+  const handleNext = () => {
+    let currentRef;
+
+    switch (activeStep) {
+      case UpsertProjectTabs.PROJECT:
+        currentRef = projectFormRef;
+        break;
+      case UpsertProjectTabs.ISSUANCES:
+        currentRef = issuanceFormRef;
+        break;
+      case UpsertProjectTabs.PROJECT_LOCATIONS:
+        currentRef = projectLocationFormRef;
+        break;
+      case UpsertProjectTabs.ESTIMATIONS:
+        currentRef = estimationFormRef;
+        break;
+      case UpsertProjectTabs.LABELS:
+        currentRef = labelFormRef;
+        break;
+      case UpsertProjectTabs.RATINGS:
+        currentRef = ratingFormRef;
+        break;
+      case UpsertProjectTabs.CO_BENEFITS:
+        currentRef = cobenefitFormRef;
+        break;
+      case UpsertProjectTabs.RELATED_PROJECTS:
+        currentRef = relatedProjectFormRef;
+        break;
+      default:
+        break;
+    }
+
+    currentRef.current
+      ?.submitForm()
+      .then(async ([errors, values]) => {
+        if (!isEmpty(errors)) {
+          console.error('Form submission error:', errors);
+          return;
+        }
+
+        if (values) {
+          setProjectFormData({ ...projectFormData, ...values });
+        }
+
+        if (activeStep === UpsertProjectTabs.RELATED_PROJECTS) {
+          if (projectFormData) {
+            const response: any = await triggerStageProject(projectFormData);
+
+            if (response.data) {
+              setProjectStagedSuccessModal(true);
+            }
+          }
+        } else {
+          const newActiveStep = isLastStep()
+            ? // @ts-ignore
+              steps.findIndex((step, i) => !(i in completed))
+            : activeStep + 1;
+          setActiveStep(newActiveStep);
+        }
+      })
+      .catch((error) => {
+        console.error('Form submission error:', error);
+      });
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleStep = (step: number) => () => {
+    setActiveStep(step);
+  };
 
   const ModalHeader: React.FC = () => {
     return (
@@ -22,7 +169,7 @@ const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModal
     );
   };
 
-  if (projectLoading) {
+  if (projectLoading || isPickListLoading || isProjectStaging) {
     return (
       <Modal show={true} onClose={onClose}>
         <ModalHeader />
@@ -34,11 +181,68 @@ const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModal
   }
 
   return (
-    <Modal show={true} onClose={onClose}>
+    <Modal onClose={onClose} show={true} size={'8xl'} position="top-center">
       <ModalHeader />
       <Modal.Body>
-        <div className="h-screen">
-          <p>the project form goes here {projectData?.warehouseProjectId}</p>
+        <Stepper nonLinear alternativeLabel activeStep={activeStep}>
+          {steps.map((label, index) => (
+            <Step key={label}>
+              <StepButton color="inherit" onClick={handleStep(index)}>
+                {label}
+              </StepButton>
+            </Step>
+          ))}
+        </Stepper>
+        <div className="mt-4">
+          {/* TODO this call to handlecomplete is just a placeholder and does nothing useful, will probably break */}
+          {activeStep === UpsertProjectTabs.PROJECT && (
+            // @ts-ignore
+            <ProjectForm ref={projectFormRef} data={projectFormData || projectData} picklistOptions={pickListData} />
+          )}
+          {activeStep === UpsertProjectTabs.ISSUANCES && (
+            <IssuanceForm
+              ref={issuanceFormRef}
+              data={projectFormData?.issuances || projectData?.issuances}
+              picklistOptions={pickListData}
+            />
+          )}
+          {activeStep === UpsertProjectTabs.PROJECT_LOCATIONS && (
+            <ProjectLocationForm
+              ref={projectLocationFormRef}
+              data={projectData?.projectLocations}
+              picklistOptions={pickListData}
+            />
+          )}
+          {activeStep === UpsertProjectTabs.ESTIMATIONS && (
+            <EstimationForm ref={estimationFormRef} data={projectData?.estimations} />
+          )}
+          {activeStep === UpsertProjectTabs.LABELS && (
+            <LabelForm ref={labelFormRef} data={projectData?.labels} picklistOptions={pickListData} />
+          )}
+          {activeStep === UpsertProjectTabs.RATINGS && (
+            <RatingForm ref={ratingFormRef} data={projectData?.projectRatings} picklistOptions={pickListData} />
+          )}
+          {activeStep === UpsertProjectTabs.CO_BENEFITS && (
+            <CoBenefitForm ref={cobenefitFormRef} data={projectData?.coBenefits} picklistOptions={pickListData} />
+          )}
+          {activeStep === UpsertProjectTabs.RELATED_PROJECTS && (
+            <RelatedProjectForm ref={relatedProjectFormRef} data={projectData?.relatedProjects} />
+          )}
+          <Spacer size={15} />
+          <div className="flex">
+            <Button color="gray" disabled={activeStep === 0} onClick={handleBack}>
+              Back
+            </Button>
+            <div className="flex space-x-1 flex-grow justify-end">
+              <Button onClick={handleNext}>
+                {activeStep !== steps.length - 1 ? (
+                  <FormattedMessage id="next" />
+                ) : (
+                  <FormattedMessage id="create-project" />
+                )}
+              </Button>
+            </div>
+          </div>
         </div>
       </Modal.Body>
     </Modal>
diff --git a/src/renderer/components/blocks/modals/UpsertUnitModal.tsx b/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
index 0ed43688..5287d8ba 100644
--- a/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
+++ b/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ComponentCenteredSpinner, Modal } from '@/components';
+import { ComponentCenteredSpinner, Modal, UnitForm } from '@/components';
 import { useWildCardUrlHash } from '@/hooks';
-import { useGetUnitQuery } from '@/api';
+import { useGetPickListsQuery, useGetUnitQuery, useStageUnitMutation } from '@/api';
 import { FormattedMessage } from 'react-intl';
 
 interface UpsertModalProps {
@@ -12,7 +12,15 @@ const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalPro
   const [, createUnitModalActive] = useWildCardUrlHash('create-unit');
   const [unitUpsertFragment] = useWildCardUrlHash('edit-unit');
   const warehouseUnitId = unitUpsertFragment.replace('edit-unit-', '');
-  const { data: unitData, isLoading: unitLoading } = useGetUnitQuery({ warehouseUnitId });
+  const { data: pickListData, isLoading: isPickListLoading } = useGetPickListsQuery();
+  const { data: unitData, isLoading: unitLoading } = useGetUnitQuery(
+    { warehouseUnitId },
+    {
+      skip: !warehouseUnitId,
+    },
+  );
+  // @ts-ignore
+  const [triggerStageUnit, { isLoading: isUnitStaging }] = useStageUnitMutation();
 
   const ModalHeader: React.FC = () => {
     return (
@@ -22,7 +30,7 @@ const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalPro
     );
   };
 
-  if (unitLoading) {
+  if (unitLoading || isPickListLoading || isUnitStaging) {
     return (
       <Modal show={true} onClose={onClose}>
         <ModalHeader />
@@ -38,7 +46,7 @@ const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalPro
       <ModalHeader />
       <Modal.Body>
         <div className="h-screen">
-          <p>the unit form goes here {unitData?.warehouseUnitId}</p>
+          <UnitForm data={unitData} picklistOptions={pickListData} />
         </div>
       </Modal.Body>
     </Modal>
diff --git a/src/renderer/components/blocks/modals/index.ts b/src/renderer/components/blocks/modals/index.ts
index 9c7c6920..fc3e44e2 100644
--- a/src/renderer/components/blocks/modals/index.ts
+++ b/src/renderer/components/blocks/modals/index.ts
@@ -7,3 +7,4 @@ export * from './UpsertProjectModal';
 export * from './UpsertUnitModal';
 export * from './ConfirmDeleteCommittedItemModal';
 export * from './ConfirmDeleteStagedItemModal';
+export * from './StagedProjectSuccessModal';
diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
index 7ca5241c..160b76de 100644
--- a/src/renderer/components/blocks/tables/ProjectsListTable.tsx
+++ b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import {DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip} from '@/components';
+import { DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip } from '@/components';
 import { Project } from '@/schemas/Project.schema';
 import { Badge } from 'flowbite-react';
 
@@ -36,7 +36,7 @@ const ProjectsListTable: React.FC<TableProps> = ({
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
-        render: (row: Project) => <ProjectAndUnitActions type="project" warehouseId={row.warehouseProjectId} />,
+        render: (row: Project) => <ProjectAndUnitActions type="project" warehouseId={row?.warehouseProjectId || ''} />,
       },
     ];
 
diff --git a/src/renderer/components/form/Field.tsx b/src/renderer/components/form/Field.tsx
index f39b486a..8d2c205f 100644
--- a/src/renderer/components/form/Field.tsx
+++ b/src/renderer/components/form/Field.tsx
@@ -1,3 +1,4 @@
+import { get } from 'lodash';
 import React from 'react';
 import { useFormikContext, FormikValues } from 'formik';
 import { Label, TextInput, Textarea, Checkbox, Datepicker } from 'flowbite-react';
@@ -12,34 +13,35 @@ interface FieldProps {
   options?: SelectOption[];
   readonly?: boolean;
   initialValue?: any;
+  disabled?: boolean;
 }
 
 const renderOption = (options, initialValue) => {
   // Find the option that matches the initialValue
-  const foundOption = options?.find(option => {
-      if (typeof option === 'object') {
-          return option.value === initialValue;
-      } else {
-          return option === initialValue;
-      }
+  const foundOption = options?.find((option) => {
+    if (typeof option === 'object') {
+      return option.value === initialValue;
+    } else {
+      return option === initialValue;
+    }
   });
 
   // Determine the label to display
   if (foundOption) {
-      if (typeof foundOption === 'object') {
-          return foundOption.label;  // Use label from the object
-      } else {
-          return foundOption;  // Use the value directly as it is a string or number
-      }
+    if (typeof foundOption === 'object') {
+      return foundOption.label; // Use label from the object
+    } else {
+      return foundOption; // Use the value directly as it is a string or number
+    }
   } else {
-      return "No Option Selected";
+    return 'No Option Selected';
   }
 };
 
-const Field: React.FC<FieldProps> = ({ name, label, type, options, readonly, initialValue }) => {
-  const { errors, touched, setFieldValue }: FormikValues = useFormikContext();
+const Field: React.FC<FieldProps> = ({ name, label, type, options, readonly, initialValue, disabled = false }) => {
+  const { errors, setFieldValue }: FormikValues = useFormikContext();
 
-  const isError: boolean = !!errors[name] && touched[name];
+  const isError: boolean = !!get(errors, name);
 
   if (readonly) {
     const renderReadOnlyField = () => {
@@ -72,7 +74,7 @@ const Field: React.FC<FieldProps> = ({ name, label, type, options, readonly, ini
         <div id={name} className="py-2 text-gray-800 rounded">
           {renderReadOnlyField()}
         </div>
-        {isError && <p className="text-red-500 text-xs italic">{errors[name]}</p>}
+        {isError && <p className="text-red-500 text-xs italic">{get(errors, name)}</p>}
       </div>
     );
   }
@@ -105,13 +107,20 @@ const Field: React.FC<FieldProps> = ({ name, label, type, options, readonly, ini
           <Select
             id={name}
             name={name}
+            disabled={disabled}
             initialValue={initialValue}
             onChange={(e) => setFieldValue(name, e.target.value)}
             options={options}
           />
         );
       case 'date':
-        return <Datepicker defaultDate={initialValue ? new Date(initialValue) : undefined} />;
+        return (
+          <Datepicker
+            defaultDate={initialValue ? new Date(initialValue) : undefined}
+            onSelectedDateChanged={(date) => setFieldValue(name, date)}
+            placeholder="Select date"
+          />
+        );
       case 'checkbox':
         return <Checkbox id={name} name={name} onChange={(e) => setFieldValue(name, e.target.checked)} />;
       // Add cases for other field types as needed
@@ -126,7 +135,7 @@ const Field: React.FC<FieldProps> = ({ name, label, type, options, readonly, ini
     <div className="mb-4">
       {label && <Label htmlFor={name}>{label}</Label>}
       {renderField()}
-      {isError && <p className="text-red-500 text-xs italic">{errors[name]}</p>}
+      <p className="text-red-500 text-xs italic">{get(errors, name)}</p>
     </div>
   );
 };
diff --git a/src/renderer/components/form/Repeater.tsx b/src/renderer/components/form/Repeater.tsx
index c2e1b351..42561397 100644
--- a/src/renderer/components/form/Repeater.tsx
+++ b/src/renderer/components/form/Repeater.tsx
@@ -5,11 +5,12 @@ import { IoAddCircleOutline } from 'react-icons/io5'; // Importing a plus icon f
 
 interface RepeaterProps<T> {
   name: string;
-  children: ReactNode | ((item: T, index: number) => ReactNode);
+  children: ReactNode | ((item: T, index: number, name: string) => ReactNode);
   maxNumber?: number;
   minNumber?: number;
   readonly?: boolean;
   initialValue?: T[];
+  itemTemplate: T;
 }
 
 function Repeater<T extends { [key in keyof T]: any }>({
@@ -19,6 +20,7 @@ function Repeater<T extends { [key in keyof T]: any }>({
   minNumber = 1,
   readonly = false,
   initialValue = [],
+  itemTemplate,
 }: RepeaterProps<T>) {
   const { values, setFieldValue }: FormikContextType<{ [key: string]: any[] }> = useFormikContext();
 
@@ -30,17 +32,6 @@ function Repeater<T extends { [key in keyof T]: any }>({
 
   const groups = values[name] || initialValue;
 
-  const createBlankItem = (): T => {
-    const blankItem = {} as T;
-    React.Children.forEach(children, (child: any) => {
-      if (child.props.name) {
-        // @ts-ignore
-        blankItem[child.props.name as keyof T] = null; // Assign a default blank or appropriate value
-      }
-    });
-    return blankItem;
-  };
-
   return (
     <FieldArray
       name={name}
@@ -53,7 +44,7 @@ function Repeater<T extends { [key in keyof T]: any }>({
                   readonly ? 'grid-cols-1' : 'sm:grid-cols-1 md:grid-cols-[1fr_auto]'
                 } grid items-center gap-x-4 relative`}
               >
-                {typeof children === 'function' ? children(_group, index) : children}
+                {typeof children === 'function' ? children(_group, index, name) : children}
 
                 {!readonly && (
                   <div className="relative flex items-center">
@@ -74,7 +65,7 @@ function Repeater<T extends { [key in keyof T]: any }>({
           {!readonly && groups.length < maxNumber && (
             <button
               type="button"
-              onClick={() => arrayHelpers.push(createBlankItem())}
+              onClick={() => arrayHelpers.push(itemTemplate)}
               className="fixed bottom-12 left-6 p-4 bg-blue-500 text-white rounded-full shadow-lg text-lg hover:bg-blue-600 transition duration-150 ease-in-out z-50"
               aria-label="Add new item"
             >
diff --git a/src/renderer/components/form/_example.addressgroup.txt b/src/renderer/components/form/_example.addressgroup.txt
deleted file mode 100644
index 23a8da9d..00000000
--- a/src/renderer/components/form/_example.addressgroup.txt
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { TextInput } from '@/components';
-import Field from './Field'; // Make sure the import path is correct
-
-interface AddressGroupProps {
-  name: string; // Base name for the group, used to construct field names
-}
-
-const AddressGroup: React.FC<AddressGroupProps> = ({ name }) => {
-  return (
-    <div className="space-y-2">
-      <Field name={`${name}.street`} label="Street">
-        <TextInput placeholder="123 Main St" />
-      </Field>
-      <Field name={`${name}.city`} label="City">
-        <TextInput placeholder="Anytown" />
-      </Field>
-      <Field name={`${name}.zipCode`} label="Zip Code">
-        <TextInput placeholder="12345" />
-      </Field>
-    </div>
-  );
-};
-
-export default AddressGroup;
diff --git a/src/renderer/components/form/_example.txt b/src/renderer/components/form/_example.txt
deleted file mode 100644
index 2703bcef..00000000
--- a/src/renderer/components/form/_example.txt
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { Form, Formik } from 'formik';
-import * as Yup from 'yup';
-import { Button } from '@/components';
-import Field from './Field'; // Adjust import path
-import Repeater from './Repeater'; // Adjust import path
-import AddressGroup from './_example.addressgroup.txt'; // Adjust import path
-import { useSubmitUserFormMutation } from './userService'; // Adjust import path
-
-// Define validation schemas for each tab
-const validationSchema = Yup.object({
-  firstName: Yup.string().max(15, 'Must be 15 characters or less').required('Required'),
-  lastName: Yup.string().max(20, 'Must be 20 characters or less').required('Required'),
-  email: Yup.string().email('Invalid email address').required('Required'),
-});
-
-// @ts-ignore
-const UserForm: React.FC = () => {
-  const [submitUserForm, { isLoading }] = useSubmitUserFormMutation();
-  const [activeTab, setActiveTab] = useState('userInfo');
-
-  const initialValues = {
-    userId: '12345',
-    firstName: '',
-    lastName: '',
-    email: '',
-    addresses: [{ street: '', city: '', zipCode: '' }],
-  };
-
-  const handleSubmit = async (values) => {
-    try {
-      await submitUserForm(values).unwrap();
-    } catch (error) {
-      console.error('Form submission error:', error);
-    }
-  };
-
-  // Function to handle tab changes with validation
-  const handleTabChange = async (tab, validateForm) => {
-    const errors = await validateForm();
-    // Check for errors in the current active tab's fields before switching
-    if (activeTab === 'userInfo' && !errors.firstName && !errors.lastName && !errors.email) {
-      setActiveTab(tab);
-    } else if (activeTab === 'addresses' && !errors.addresses) {
-      setActiveTab(tab);
-    }
-  };
-
-  return (
-    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-      {({ validateForm }) => (
-        <Form className="space-y-4">
-          <Tab.Group>
-            <Tab.List>
-              <Tab onClick={() => handleTabChange('userInfo', validateForm)}>User Information</Tab>
-              <Tab onClick={() => handleTabChange('addresses', validateForm)}>Addresses</Tab>
-            </Tab.List>
-          </Tab.Group>
-
-          {activeTab === 'userInfo' && (
-            <div>
-              <Field name="firstName" label="First Name">
-                <input className="form-input mt-1 block w-full" placeholder="Enter your first name" />
-              </Field>
-              <Field name="lastName" label="Last Name">
-                <input className="form-input mt-1 block w-full" placeholder="Enter your last name" />
-              </Field>
-              <Field name="email" label="Email">
-                <input className="form-input mt-1 block w-full" placeholder="Enter your email address" />
-              </Field>
-            </div>
-          )}
-
-          {activeTab === 'addresses' && (
-            // @ts-ignore
-            <Repeater name="addresses" maxNumber={3}>
-              <AddressGroup name="" />
-            </Repeater>
-          )}
-
-          <Button type="submit" disabled={isLoading}>
-            {isLoading ? 'Submitting...' : 'Submit'}
-          </Button>
-        </Form>
-      )}
-    </Formik>
-  );
-};
diff --git a/src/renderer/components/proxy/Select.tsx b/src/renderer/components/proxy/Select.tsx
index c9e74a13..a60e7871 100644
--- a/src/renderer/components/proxy/Select.tsx
+++ b/src/renderer/components/proxy/Select.tsx
@@ -13,9 +13,10 @@ interface SelectProps {
     name: string;
     onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     required?: boolean;
+    disabled?: boolean;
 }
 
-const Select: React.FC<SelectProps> = ({ options, initialValue, id, name, onChange, required = false }) => {
+const Select: React.FC<SelectProps> = ({ options, initialValue, id, name, onChange, required = false, disabled = false }) => {
     // Helper function to determine the display text for each option
     const getOptionLabel = (option: SelectOption): string => {
         if (typeof option === 'object') {
@@ -41,6 +42,7 @@ const Select: React.FC<SelectProps> = ({ options, initialValue, id, name, onChan
                 name={name}
                 defaultValue={initialValue?.toString()}
                 onChange={onChange}
+                disabled={disabled}
             >
                 <option value="" disabled={required} selected={!initialValue}>
                     No Selection
diff --git a/src/renderer/hooks/index.ts b/src/renderer/hooks/index.ts
index fda32006..17cdeba7 100644
--- a/src/renderer/hooks/index.ts
+++ b/src/renderer/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from './useUrlHash';
 export * from './useQueryParamState';
 export * from './useColumnOrder';
-export * from './useWildCardUrlHash';
\ No newline at end of file
+export * from './useWildCardUrlHash';
+export * from './useGetProjectOptionsList';
diff --git a/src/renderer/hooks/useGetProjectOptionsList.ts b/src/renderer/hooks/useGetProjectOptionsList.ts
new file mode 100644
index 00000000..0377407e
--- /dev/null
+++ b/src/renderer/hooks/useGetProjectOptionsList.ts
@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { useGetProjectsQuery } from '@/api';
+import { SelectOption } from '@/components';
+import { Project } from '@/schemas/Project.schema';
+
+export interface ProjectOptionsResult {
+  projects: SelectOption[];
+  isLoading: boolean;
+}
+
+const useGetProjectOptionsList = (orgUid: string | null | undefined) => {
+  const [projects, setProjects] = useState<SelectOption[]>([]);
+  const [allDataFetched, setAllDataFetched] = useState(false);
+  const [page, setPage] = useState(1);
+
+  const { data, isFetching, isLoading, error } = useGetProjectsQuery({ orgUid, page }, {
+    skip: !orgUid || allDataFetched,
+    refetchOnMountOrArgChange: false,
+  });
+
+  useEffect(() => {
+    if (data && data.data.length > 0) {
+      // @ts-ignore
+      const newProjects: SelectOption[] = data.data.map((p: Project) => ({
+        label: p.projectName,
+        value: p.warehouseProjectId
+      }));
+
+      // Merge and filter duplicates
+      setProjects(prev => {
+        // @ts-ignore
+        const existingValues = new Set(prev.map(p => p.value));
+        // @ts-ignore
+        const uniqueNewProjects = newProjects.filter(p => !existingValues.has(p.value));
+        return [...prev, ...uniqueNewProjects];
+      });
+
+      // Update pagination if more data is available
+      if (page < data.pageCount) {
+        setPage(page + 1);
+      } else {
+        setAllDataFetched(true);
+      }
+    } else if (data) {
+      setAllDataFetched(true);
+    }
+  }, [data, page]);
+
+  return { projects, isLoading: isFetching || isLoading, error } as ProjectOptionsResult;
+};
+
+export { useGetProjectOptionsList };
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index 9b43c376..ec5bfab6 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -13,6 +13,7 @@ import {
   SyncIndicator,
   Tabs,
   UpsertProjectModal,
+  StagedProjectSuccessModal
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
@@ -38,6 +39,9 @@ const MyProjectsPage: React.FC = () => {
   const navigate = useNavigate();
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
+  const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
+  const [createProjectModalActive, setCreateProjectModalActive] = useUrlHash('create-project');
+  const [projectStagedSuccess, setProjectStagedSuccess] = useUrlHash('success-stage-project');
   const [, createProjectModalActive, setCreateProjectModalActive] = useWildCardUrlHash('create-project');
   const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
@@ -157,6 +161,7 @@ const MyProjectsPage: React.FC = () => {
         </Tabs>
       </div>
       {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
+      {projectStagedSuccess && <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />}
     </>
   );
 };
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index 5a203620..6381dc8b 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useWildCardUrlHash } from '@/hooks';
+import { useQueryParamState, useWildCardUrlHash, useUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
diff --git a/src/renderer/schemas/CoBenefit.schema.ts b/src/renderer/schemas/CoBenefit.schema.ts
index 578f5e09..9f58475c 100644
--- a/src/renderer/schemas/CoBenefit.schema.ts
+++ b/src/renderer/schemas/CoBenefit.schema.ts
@@ -1,12 +1,6 @@
 export interface CoBenefit {
-  // Required properties
-  orgUid: string; // Derived upon creation
-  warehouseProjectId: string; // Derived upon creation
-  cobenefit: string;
-
-  // Optional properties
   id?: string;
-  timeStaged?: Date | null;
-  updatedAt?: Date;
-  createdAt?: Date;
+  orgUid?: string;
+  warehouseProjectId?: string;
+  cobenefit: string | null;
 }
diff --git a/src/renderer/schemas/Estimation.schema.ts b/src/renderer/schemas/Estimation.schema.ts
index 7049686d..7f86a3d8 100644
--- a/src/renderer/schemas/Estimation.schema.ts
+++ b/src/renderer/schemas/Estimation.schema.ts
@@ -1,14 +1,8 @@
 export interface Estimation {
-  // Required properties
-  orgUid: string; // Derived upon creation
-  warehouseProjectId: string; // Derived upon creation
-  creditingPeriodStart: Date;
-  creditingPeriodEnd: Date;
-  unitCount: number;
-
-  // Optional properties
   id?: string;
-  timeStaged?: Date | null;
-  updatedAt?: Date;
-  createdAt?: Date;
+  orgUid?: string;
+  warehouseProjectId?: string;
+  creditingPeriodStart: Date | null;
+  creditingPeriodEnd: Date | null;
+  unitCount: number | null;
 }
\ No newline at end of file
diff --git a/src/renderer/schemas/Issuance.schema.ts b/src/renderer/schemas/Issuance.schema.ts
index 1fa0bbc1..dd18fbab 100644
--- a/src/renderer/schemas/Issuance.schema.ts
+++ b/src/renderer/schemas/Issuance.schema.ts
@@ -1,11 +1,11 @@
 export interface Issuance {
   // Required properties
-  orgUid: string;
-  startDate: Date;
-  endDate: Date;
-  verificationApproach: string;
-  verificationBody: string;
-  verificationReportDate: Date;
+  orgUid?: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  verificationApproach: string | null;
+  verificationBody: string | null;
+  verificationReportDate: Date | null;
 
   // Optional properties
   id?: string | null;
diff --git a/src/renderer/schemas/Label.schema.ts b/src/renderer/schemas/Label.schema.ts
index e17dca7c..dda18203 100644
--- a/src/renderer/schemas/Label.schema.ts
+++ b/src/renderer/schemas/Label.schema.ts
@@ -1,22 +1,16 @@
-import {LabelUnit} from "./LabelUnit.schema";
-
 export interface Label {
-  // Optional properties
-  id?: string;
-  updatedAt?: Date;
-  createdAt?: Date;
-  label_unit?: LabelUnit; // Assuming LabelUnit is another interface you'll define based on labelUnitSchema
+  id?: string | undefined;
 
   // Required properties
-  warehouseProjectId: string;
-  orgUid: string;
-  label: string;
-  labelType: string; // Assuming pickListValidation results in a string, adjust if necessary
-  creditingPeriodStartDate: Date;
-  creditingPeriodEndDate: Date;
-  validityPeriodStartDate: string; // Noted as string, adjust if it should be a Date
-  validityPeriodEndDate: Date;
-  unitQuantity: number;
-  timeStaged?: Date | null; // Allowing null as per your schema
-  labelLink: string;
+  warehouseProjectId?: string | undefined;
+  orgUid?: string | undefined;
+  label: string | null;
+  labelType: string | null; 
+  creditingPeriodStartDate: Date | null;
+  creditingPeriodEndDate: Date | null;
+  validityPeriodStartDate: string | null; 
+  validityPeriodEndDate: Date | null;
+  unitQuantity: number | null;
+  timeStaged?: Date | null; 
+  labelLink: string | null;
 }
diff --git a/src/renderer/schemas/Project.schema.ts b/src/renderer/schemas/Project.schema.ts
index 59c6b89f..acaed889 100644
--- a/src/renderer/schemas/Project.schema.ts
+++ b/src/renderer/schemas/Project.schema.ts
@@ -7,10 +7,9 @@ import { Rating } from './Rating.schema';
 import { Estimation } from './Estimation.schema';
 
 export interface Project {
-
   // Required properties
-  warehouseProjectId: string; // Derived upon creation
-  orgUid: string; // Derived upon creation
+  warehouseProjectId?: string; // Derived upon creation
+  orgUid?: string; // Derived upon creation
   projectId: string | number;
   originProjectId: string | number;
   registryOfOrigin: string;
@@ -21,7 +20,7 @@ export interface Project {
   projectType: string;
   coveredByNDC: string;
   projectStatus: string;
-  projectStatusDate: Date;
+  projectStatusDate: Date | null;
   unitMetric: string;
   methodology: string;
 
@@ -44,4 +43,4 @@ export interface Project {
   updatedAt?: Date | null;
   createdAt?: Date | null;
   timeStaged?: Date | null;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/schemas/ProjectLocation.schema.ts b/src/renderer/schemas/ProjectLocation.schema.ts
index bcae287e..87317bb4 100644
--- a/src/renderer/schemas/ProjectLocation.schema.ts
+++ b/src/renderer/schemas/ProjectLocation.schema.ts
@@ -1,15 +1,10 @@
 export interface ProjectLocation {
-  // Required properties
-  orgUid: string; // Derived upon creation
-  warehouseProjectId: string; // Derived upon creation
-  country: string; // Uses custom validation, represented as string in TypeScript
-  geographicIdentifier: string | number; // Can be either string or number
-
-  // Optional properties
   id?: string;
-  inCountryRegion?: string | null; // Can be null or empty string
-  timeStaged?: Date | null; // Can be null
-  fileId?: string | null; // Can be null or empty string
-  updatedAt?: Date;
-  createdAt?: Date;
+  orgUid?: string;
+  warehouseProjectId?: string;
+  country: string | null; 
+  geographicIdentifier: string | number | null; 
+  inCountryRegion?: string | null;
+  timeStaged?: Date | null; 
+  fileId?: string | null; 
 }
diff --git a/src/renderer/schemas/Rating.schema.ts b/src/renderer/schemas/Rating.schema.ts
index 9b9773d2..aa1c7a52 100644
--- a/src/renderer/schemas/Rating.schema.ts
+++ b/src/renderer/schemas/Rating.schema.ts
@@ -1,16 +1,10 @@
 export interface Rating {
-  // Required properties
-  orgUid: string; // Derived upon creation
-  warehouseProjectId: string; // Derived upon creation
-  ratingType: string; // Uses custom validation, represented as string in TypeScript
-  ratingRangeLowest: string;
-  ratingRangeHighest: string;
-  rating: string;
-  ratingLink: string;
-
-  // Optional properties
   id?: string;
-  timeStaged?: Date | null; // Can be null
-  updatedAt?: Date;
-  createdAt?: Date;
+  orgUid?: string; 
+  warehouseProjectId?: string; 
+  ratingType: string | null;
+  ratingRangeLowest: string | null;
+  ratingRangeHighest: string | null;
+  rating: string | null;
+  ratingLink: string | null;
 }
diff --git a/src/renderer/schemas/RelatedProject.schema.ts b/src/renderer/schemas/RelatedProject.schema.ts
index 30364a78..ca3fe677 100644
--- a/src/renderer/schemas/RelatedProject.schema.ts
+++ b/src/renderer/schemas/RelatedProject.schema.ts
@@ -1,13 +1,13 @@
 export interface RelatedProject {
   // Required properties
-  orgUid: string; // Derived upon creation
-  warehouseProjectId: string; // Derived upon creation
-  relatedProjectId: string;
+  orgUid?: string | null; 
+  warehouseProjectId?: string | null;
+  relatedProjectId: string | null;
 
   // Optional properties
   id?: string;
-  relationshipType?: string;
-  registry?: string;
+  relationshipType?: string | null;
+  registry?: string | null;
   timeStaged?: Date | null;
   updatedAt?: Date;
   createdAt?: Date;
diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json
index 4fba2f2a..2671d019 100644
--- a/src/renderer/translations/tokens/en-US.json
+++ b/src/renderer/translations/tokens/en-US.json
@@ -101,6 +101,13 @@
   "unit": "Unit",
   "detailed-unit-view": "Detailed Unit View",
   "edit-project": "Edit Project",
+  "next": "Next",
+  "issuances": "Issuances",
+  "project_locations": "Project Locations",
+  "labels": "Labels",
+  "ratings": "Ratings",
+  "co-benefits": "Co-Benefits",
+  "related-projects": "Related Projects",
   "delete": "Delete",
   "edit": "Edit",
   "confirm-delete": "Confirm Delete",
diff --git a/src/renderer/utils/formik-utils.ts b/src/renderer/utils/formik-utils.ts
new file mode 100644
index 00000000..52ed1135
--- /dev/null
+++ b/src/renderer/utils/formik-utils.ts
@@ -0,0 +1,36 @@
+export const validateAndSubmitFieldArrayForm = async (formikRef, formName) => {
+  if (formikRef.current) {
+    const formik = formikRef.current;
+    if (formik) {
+      const errors = await formik.validateForm(formik.values);
+      console.log('errors', errors);
+
+      if (errors && errors.issuances) {
+        // @ts-ignore
+        const touchedIssuances = flatten(
+          errors.issuances.map((issuanceError, index) => {
+            return Object.keys(issuanceError).reduce((acc, key) => {
+              acc[`${formName}[${index}].${key}`] = true;
+              return acc;
+            }, {});
+          }),
+        );
+
+        // @ts-ignore
+        const touched = touchedIssuances.reduce((acc, curr) => ({ ...acc, ...curr }), {});
+        console.log(touched);
+        // @ts-ignore
+        formik.setTouched(touched);
+      }
+
+      if (formik.values[formName].length) {
+        return [errors, formik.values];
+      } else {
+        return [errors, null];
+      }
+      
+    }
+  }
+
+  return Promise.resolve([null, null]);
+};