diff --git a/package-lock.json b/package-lock.json
index fc2296c84..65f4c0097 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
         "lodash.isequal": "^4.5.0",
         "moralis": "^2.26.3",
         "react": "^18.2.0",
+        "react-calendar": "^5.0.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^13.5.0",
         "react-idle-timer": "^5.5.3",
@@ -13412,6 +13413,14 @@
         "tslib": "^2.3.1"
       }
     },
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz",
+      "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      }
+    },
     "node_modules/@wry/context": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.0.tgz",
@@ -13602,6 +13611,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "peer": true,
       "dependencies": {
         "debug": "4"
       },
@@ -13613,6 +13623,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
       "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "peer": true,
       "dependencies": {
         "clean-stack": "^2.0.0",
         "indent-string": "^4.0.0"
@@ -14367,6 +14378,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "peer": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -14391,6 +14403,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -14564,7 +14577,8 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "peer": true
     },
     "node_modules/buffer-xor": {
       "version": "1.0.3",
@@ -15067,6 +15081,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -15075,6 +15090,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "peer": true,
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -15086,6 +15102,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
       "integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
+      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -15330,6 +15347,7 @@
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
       "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "peer": true,
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -15488,6 +15506,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
       "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -15822,6 +15841,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
       "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "peer": true,
       "dependencies": {
         "clone": "^1.0.2"
       },
@@ -15833,6 +15853,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "peer": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -15914,6 +15935,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -16252,6 +16274,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -16260,6 +16283,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "peer": true,
       "bin": {
         "envinfo": "dist/cli.js"
       },
@@ -16947,6 +16971,7 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -17252,6 +17277,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
       "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "peer": true,
       "dependencies": {
         "cross-spawn": "^6.0.0",
         "get-stream": "^4.0.0",
@@ -17269,6 +17295,7 @@
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
       "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "peer": true,
       "dependencies": {
         "nice-try": "^1.0.4",
         "path-key": "^2.0.1",
@@ -17284,6 +17311,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
       "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -17292,6 +17320,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -17300,6 +17329,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
       "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "peer": true,
       "dependencies": {
         "shebang-regex": "^1.0.0"
       },
@@ -17311,6 +17341,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
       "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17319,6 +17350,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -18172,6 +18204,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
       "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "peer": true,
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -18196,6 +18229,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-user-locale": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.2.tgz",
+      "integrity": "sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==",
+      "dependencies": {
+        "mem": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      }
+    },
     "node_modules/get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -18800,6 +18844,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
       "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "peer": true,
       "dependencies": {
         "depd": "2.0.0",
         "inherits": "2.0.4",
@@ -18815,6 +18860,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -18857,6 +18903,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "peer": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -19410,6 +19457,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -19550,6 +19598,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19614,6 +19663,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -20979,6 +21029,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "peer": true,
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -21133,6 +21184,17 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dependencies": {
+        "p-defer": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -21388,6 +21450,29 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
+    "node_modules/mem/node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -22677,6 +22762,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -39012,7 +39098,8 @@
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "peer": true
     },
     "node_modules/no-case": {
       "version": "3.0.4",
@@ -39127,6 +39214,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
       "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "peer": true,
       "dependencies": {
         "path-key": "^2.0.0"
       },
@@ -39138,6 +39226,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
       "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -39507,6 +39596,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "peer": true,
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -39563,6 +39653,7 @@
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
       "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "peer": true,
       "dependencies": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -39590,10 +39681,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -39630,6 +39730,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
       "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "peer": true,
       "dependencies": {
         "aggregate-error": "^3.0.0"
       },
@@ -40392,6 +40493,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
       "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "peer": true,
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -40406,6 +40508,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -40414,6 +40517,7 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
       },
@@ -40432,6 +40536,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-calendar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.0.0.tgz",
+      "integrity": "sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-calendar/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-clientside-effect": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -41213,6 +41349,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "peer": true,
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -41814,7 +41951,8 @@
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "peer": true
     },
     "node_modules/sha.js": {
       "version": "2.4.11",
@@ -41896,7 +42034,8 @@
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "peer": true
     },
     "node_modules/signedsource": {
       "version": "1.0.0",
@@ -42303,6 +42442,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -42312,6 +42452,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -42693,6 +42834,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -43106,6 +43248,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "peer": true,
       "engines": {
         "node": ">=0.6"
       }
@@ -43731,6 +43874,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "peer": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -45261,10 +45405,19 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
       "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "peer": true,
       "dependencies": {
         "defaults": "^1.0.3"
       }
@@ -45605,6 +45758,7 @@
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
       "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.11",
         "imurmurhash": "^0.1.4",
diff --git a/package.json b/package.json
index c4fc02dc7..028a58daa 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "lodash.isequal": "^4.5.0",
     "moralis": "^2.26.3",
     "react": "^18.2.0",
+    "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
     "react-idle-timer": "^5.5.3",
diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css
new file mode 100644
index 000000000..150e58908
--- /dev/null
+++ b/src/assets/css/Calendar.css
@@ -0,0 +1,137 @@
+.react-calendar {
+  /* width: 350px; */
+  max-width: 100%;
+  background: var(--Neutral-2, #221d25);
+  border-radius: 0.5rem;
+  border: 0;
+  font-family: 'TT Firs Neue Variable';
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: var(--Neutral-2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  color: #dcc8f0;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: var(--Neutral-2);
+  color: #524f55;
+}
+
+.react-calendar__navigation button:enabled:focus {
+  background-color: var(--Neutral-2);
+}
+
+.react-calendar__navigation button:enabled:hover {
+  background: var(--Neutral-3, #2e2833);
+  border-radius: 0.5rem;
+}
+
+.react-calendar__month-view__weekdays {
+  text-decoration: none;
+  text-underline-offset: 2rem;
+  text-align: center;
+  text-transform: capitalize;
+  font-size: 0.75rem;
+  color: #9ea8b3;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #8f8796;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-calendar__tile {
+  height: 2.5rem;
+  width: 2.5rem;
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #221d25;
+  color: #524f55;
+  cursor: not-allowed;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #524f55;
+}
+
+.react-calendar__tile:enabled:hover {
+  background: var(--Neutral-3);
+}
+
+.react-calendar__tile:enabled:focus {
+  background-color: #221d25;
+}
+
+.react-calendar__tile--hasActive {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--active {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #dcc8f0;
+  color: #501464;
+}
diff --git a/src/assets/theme/colors/color.styles.tokens.json b/src/assets/theme/colors/color.styles.tokens.json
index 0dbd5b158..cac18dd41 100644
--- a/src/assets/theme/colors/color.styles.tokens.json
+++ b/src/assets/theme/colors/color.styles.tokens.json
@@ -243,6 +243,10 @@
     "0": {
       "$type": "color",
       "$value": "#f8f4fc"
+    },
+    "1": {
+      "$type": "color",
+      "$value": "#D9D9D9"
     }
   },
   "White Alpha": {
diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx
index aa2f6e6cb..e663ef0fb 100644
--- a/src/components/pages/Roles/forms/RoleFormPayroll.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPayroll.tsx
@@ -15,10 +15,12 @@ import {
   MenuList,
   NumberInput,
   NumberInputField,
+  Show,
   Text,
 } from '@chakra-ui/react';
 import {
   ArrowUpRight,
+  CalendarBlank,
   CaretDown,
   CaretUp,
   CheckCircle,
@@ -26,17 +28,20 @@ import {
   Minus,
   Plus,
 } from '@phosphor-icons/react';
+import { format } from 'date-fns';
 import { Field, FieldProps, useFormikContext } from 'formik';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { BigIntValuePair } from '../../../../types';
-import { formatUSD } from '../../../../utils';
+import { DEFAULT_DATE_FORMAT, formatUSD } from '../../../../utils';
+import DraggableDrawer from '../../../ui/containers/DraggableDrawer';
 import { BigIntInput } from '../../../ui/forms/BigIntInput';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
 import ExternalLink from '../../../ui/links/ExternalLink';
 import ModalTooltip from '../../../ui/modals/ModalTooltip';
+import { DecentDatePicker } from '../../../ui/utils/DecentDatePicker';
 import Divider from '../../../ui/utils/Divider';
 import { EaseOutComponent } from '../../../ui/utils/EaseOutComponent';
 import { RoleFormValues, frequencyAmountLabel, frequencyOptions } from '../types';
@@ -373,28 +378,85 @@ function FrequencySelector() {
 }
 
 function PaymentStartDatePicker() {
-  // @todo implement date picker
-  const { t } = useTranslation(['roles']);
+  const { t } = useTranslation(['common']);
+
+  const { setFieldValue, values } = useFormikContext<RoleFormValues>();
+
+  const selectedDate = values.roleEditing?.payroll?.paymentStartDate;
+  const selectedDateStr = selectedDate && format(selectedDate, DEFAULT_DATE_FORMAT);
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  function DatePickerTrigger() {
+    return (
+      <Flex
+        borderRadius="0.25rem"
+        bg="neutral-1"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        padding="0.5rem 1rem"
+        alignItems="center"
+        gap="0.5rem"
+      >
+        <Icon
+          as={CalendarBlank}
+          boxSize="24px"
+          color="neutral-5"
+        />
+        <Text>{selectedDateStr ?? t('select')}</Text>
+      </Flex>
+    );
+  }
+
   return (
     <FormControl my="1rem">
-      <Field>
+      <Field name="roleEditing.payroll.paymentStartDate">
         {({ field }: FieldProps<string, RoleFormValues>) => (
-          <LabelWrapper
-            label={t('paymentStart')}
-            tooltipContent={<Box></Box>}
-          >
-            <Input
-              value={field.value}
-              onChange={() => ''}
-            />
-          </LabelWrapper>
+          <>
+            <Show below="md">
+              <Button
+                onClick={() => setIsDrawerOpen(true)}
+                variant="unstyled"
+              >
+                <DatePickerTrigger />
+              </Button>
+
+              <DraggableDrawer
+                isOpen={isDrawerOpen}
+                headerContent={undefined}
+                onOpen={() => {}}
+                onClose={() => setIsDrawerOpen(false)}
+              >
+                <DecentDatePicker onChange={date => setFieldValue(field.name, date)} />
+              </DraggableDrawer>
+            </Show>
+
+            <Show above="md">
+              <Menu placement="top">
+                <>
+                  <MenuButton
+                    as={Button}
+                    variant="unstyled"
+                    p="0"
+                    w="full"
+                  >
+                    <DatePickerTrigger />
+                  </MenuButton>
+                  <MenuList>
+                    <DecentDatePicker onChange={date => setFieldValue(field.name, date)} />
+                  </MenuList>
+                </>
+              </Menu>
+            </Show>
+          </>
         )}
       </Field>
     </FormControl>
   );
 }
 
-function PaymentFrequencyAmount() {
+// @todo @dev is this frequency or period???
+function PaymentFrequency() {
   const { t } = useTranslation(['roles']);
   return (
     <FormControl my="1rem">
@@ -404,6 +466,7 @@ function PaymentFrequencyAmount() {
           const frequencyLabel = !!paymentFrequency
             ? t(frequencyAmountLabel[paymentFrequency])
             : '';
+
           return (
             <LabelWrapper
               label={frequencyLabel}
@@ -423,17 +486,16 @@ function PaymentFrequencyAmount() {
                     />
                   }
                   onClick={() => {
-                    if (field.value === undefined || Number(field.value) <= 0) return;
+                    if (field.value === undefined || Number(field.value) <= 1) return;
                     setFieldValue(field.name, Number(field.value) - 1);
                   }}
                 />
-                <NumberInput w="full">
-                  <NumberInputField
-                    value={field.value}
-                    onChange={() => {
-                      setFieldValue(field.name, field.value);
-                    }}
-                  />
+                <NumberInput
+                  w="full"
+                  value={values.roleEditing?.payroll?.paymentFrequencyNumber}
+                  onChange={(value: string) => setFieldValue(field.name, Number(value))}
+                >
+                  <NumberInputField />
                 </NumberInput>
                 <IconButton
                   aria-label="stepper-plus"
@@ -490,7 +552,7 @@ export default function RoleFormPayroll() {
       {values.roleEditing?.payroll?.paymentFrequency && (
         <>
           <PaymentStartDatePicker />
-          <PaymentFrequencyAmount />
+          <PaymentFrequency />
         </>
       )}
     </Box>
diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
index b5cd5f754..645ff0cc8 100644
--- a/src/components/pages/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -93,22 +93,15 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj:
     };
   }, [existingRoleHat, isRoleNameUpdated, isRoleDescriptionUpdated, isMemberUpdated]);
 
-  const payrollTabContainerRef = useRef<HTMLDivElement>(null);
   const vestingTabContainerRef = useRef<HTMLDivElement>(null);
 
   if (!daoAddress) return null;
 
-  function ComingSoonTooltip({
-    children,
-    type,
-  }: {
-    children: ReactNode;
-    type: 'payroll' | 'vesting';
-  }) {
-    if (payrollTabContainerRef || vestingTabContainerRef) {
+  function ComingSoonTooltip({ children }: { children: ReactNode }) {
+    if (vestingTabContainerRef) {
       return (
         <ModalTooltip
-          containerRef={type === 'payroll' ? payrollTabContainerRef : vestingTabContainerRef}
+          containerRef={vestingTabContainerRef}
           maxW={TOOLTIP_MAXW}
           label="Coming soon"
         >
@@ -137,20 +130,18 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj:
         <TabList>
           <Tab>{t('roleInfo')}</Tab>
           <Tab>
-            <Flex ref={payrollTabContainerRef}>
-              <ComingSoonTooltip type="payroll">
-                <Flex
-                  px={{ base: '10vw', md: '5vw' }}
-                  py="0.5rem"
-                >
-                  {t('payroll')}
-                </Flex>
-              </ComingSoonTooltip>
+            <Flex>
+              <Flex
+                px={{ base: '10vw', md: '5vw' }}
+                py="0.5rem"
+              >
+                {t('payroll')}
+              </Flex>
             </Flex>
           </Tab>
           <Tab isDisabled={true}>
             <Flex ref={vestingTabContainerRef}>
-              <ComingSoonTooltip type="vesting">
+              <ComingSoonTooltip>
                 <Flex
                   px={{ base: '10vw', md: '5vw' }}
                   py="0.5rem"
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 420102caf..3290d930c 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -91,7 +91,7 @@ export interface RoleFormPayrollValue {
   };
   amount: BigIntValuePair;
   paymentFrequency: string;
-  paymentStartDate: string;
+  paymentStartDate: Date;
   paymentFrequencyNumber: number;
 }
 
diff --git a/src/components/ui/containers/DraggableDrawer.tsx b/src/components/ui/containers/DraggableDrawer.tsx
index 7a4b459bb..2d49dd184 100644
--- a/src/components/ui/containers/DraggableDrawer.tsx
+++ b/src/components/ui/containers/DraggableDrawer.tsx
@@ -96,6 +96,7 @@ export default function DraggableDrawer({
         onClose();
       }}
       size="md"
+      onOverlayClick={onClose}
     >
       <DrawerOverlay
         bg={BACKGROUND_SEMI_TRANSPARENT}
diff --git a/src/components/ui/utils/DecentDatePicker.tsx b/src/components/ui/utils/DecentDatePicker.tsx
new file mode 100644
index 000000000..418c8e84d
--- /dev/null
+++ b/src/components/ui/utils/DecentDatePicker.tsx
@@ -0,0 +1,68 @@
+import { Box, Icon, useBreakpointValue } from '@chakra-ui/react';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { Calendar } from 'react-calendar';
+import { SEXY_BOX_SHADOW_T_T } from '../../../constants/common';
+
+import '../../../assets/css/Calendar.css';
+
+interface DecentDatePickerProps {
+  minDate?: Date;
+  onChange?: (date: Date) => void;
+}
+
+type DateOrNull = Date | null;
+type OnDateChangeValue = DateOrNull | [DateOrNull, DateOrNull];
+
+export function DecentDatePicker({ minDate, onChange }: DecentDatePickerProps) {
+  const isToday = (someDate: Date) => {
+    const today = new Date();
+    return (
+      someDate.getDate() === today.getDate() &&
+      someDate.getMonth() === today.getMonth() &&
+      someDate.getFullYear() === today.getFullYear()
+    );
+  };
+
+  const [selectedDate, setSelectedDate] = useState<DateOrNull>();
+
+  const boxShadow = useBreakpointValue({ base: 'none', md: SEXY_BOX_SHADOW_T_T });
+  const maxBoxW = useBreakpointValue({ base: '100%', md: '26.875rem' });
+
+  return (
+    <Box
+      display="flex"
+      justifySelf="center"
+      borderRadius="0.5rem"
+      boxShadow={boxShadow}
+      maxW={maxBoxW}
+    >
+      <Calendar
+        formatShortWeekday={(_, date) => date.toString().slice(0, 2)}
+        minDate={minDate || new Date()}
+        prevLabel={<Icon as={CaretLeft} />}
+        nextLabel={<Icon as={CaretRight} />}
+        next2Label={null}
+        prev2Label={null}
+        tileContent={({ date }) =>
+          isToday(date) ? (
+            <Box
+              ml="1rem"
+              bg={selectedDate && isToday(selectedDate) ? 'cosmic-nebula-0' : 'white-1'}
+              borderRadius="50%"
+              w="4px"
+              h="4px"
+            />
+          ) : null
+        }
+        onChange={(e: OnDateChangeValue) => {
+          console.log(e);
+          if (e instanceof Date) {
+            setSelectedDate(e);
+            onChange?.(e);
+          }
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/src/hooks/schemas/roles/useRolesSchema.ts b/src/hooks/schemas/roles/useRolesSchema.ts
index fba078899..c56f8375b 100644
--- a/src/hooks/schemas/roles/useRolesSchema.ts
+++ b/src/hooks/schemas/roles/useRolesSchema.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import { RoleFormPayrollValue, RoleValue } from '../../../components/pages/Roles/types';
+import { Frequency, RoleFormPayrollValue, RoleValue } from '../../../components/pages/Roles/types';
 import { useValidationAddress } from '../common/useValidationAddress';
 
 export const useRolesSchema = () => {
@@ -34,7 +34,6 @@ export const useRolesSchema = () => {
                           address: Yup.string(),
                           symbol: Yup.string(),
                           decimals: Yup.number(),
-                          logo: Yup.string(),
                           balance: Yup.string(),
                         }),
                         amount: Yup.object()
@@ -58,9 +57,19 @@ export const useRolesSchema = () => {
                               return (v.bigintValue as bigint) <= BigInt(balance);
                             },
                           }),
-                        paymentFrequency: Yup.string(),
-                        paymentStartData: Yup.date(),
-                        paymentFrequencyNumber: Yup.number(),
+                        paymentFrequency: Yup.string()
+                          .oneOf([
+                            Frequency.Monthly.toString(),
+                            Frequency.EveryTwoWeeks.toString(),
+                            Frequency.Weekly.toString(),
+                          ])
+                          .required(t('roleInfoErrorPaymentFrequencyRequired')),
+                        paymentStartDate: Yup.date().required(
+                          t('roleInfoErrorPaymentStartDateRequired'),
+                        ),
+                        paymentFrequencyNumber: Yup.number().required(
+                          t('roleInfoErrorPaymentFrequencyNumberRequired'),
+                        ),
                       }),
                   }),
               }),
diff --git a/src/i18n/locales/en/roles.json b/src/i18n/locales/en/roles.json
index 04163d4c9..a43047bb1 100644
--- a/src/i18n/locales/en/roles.json
+++ b/src/i18n/locales/en/roles.json
@@ -39,6 +39,9 @@
   "roleInfoErrorDescriptionRequired": "Role description is required.",
   "roleInfoErrorMemberRequired": "Role member is required.",
   "roleInfoErrorAmountInvalid": "Invalid amount.",
+  "roleInfoErrorPaymentStartDateRequired": "Payment start date is required.",
+  "roleInfoErrorPaymentFrequencyRequired": "Select a payment frequency.",
+  "roleInfoErrorPaymentFrequencyNumberRequired": "Payment frequency is required.",
   "monthly": "Monthly",
   "everyTwoWeeks": "Every Two Weeks",
   "weekly": "Weekly",