diff --git a/.github/workflows/dev-build-deploy.yml b/.github/workflows/dev-build-deploy.yml
index 454aae484..b71790cf2 100644
--- a/.github/workflows/dev-build-deploy.yml
+++ b/.github/workflows/dev-build-deploy.yml
@@ -17,6 +17,12 @@ jobs:
           yarn workspace @shiksha/common-lib build
           yarn install
           yarn build
+        env:
+          REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+          REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
+          REACT_APP_SENTRY_DSN_URL: ${{ secrets.REACT_APP_SENTRY_DSN_URL }}
+          REACT_APP_SENTRY_ENV: ${{ secrets.REACT_APP_SENTRY_ENV }}
+          
       - name: Create Lerna Bundles
         run: |
           sh ./scripts/pack-prod-build.sh
diff --git a/apps/front-end/.env.development b/apps/front-end/.env.development
deleted file mode 100644
index 0498ea8eb..000000000
--- a/apps/front-end/.env.development
+++ /dev/null
@@ -1,2 +0,0 @@
-REACT_APP_API_URL=https://eg-dev.uniteframework.io/mw
-REACT_APP_BASE_URL=https://eg-dev.uniteframework.io
\ No newline at end of file
diff --git a/apps/front-end/.env.example b/apps/front-end/.env.example
new file mode 100644
index 000000000..148da0e2f
--- /dev/null
+++ b/apps/front-end/.env.example
@@ -0,0 +1,2 @@
+REACT_APP_API_URL=
+REACT_APP_BASE_URL=
\ No newline at end of file
diff --git a/apps/front-end/.env.production b/apps/front-end/.env.production
deleted file mode 100644
index 0498ea8eb..000000000
--- a/apps/front-end/.env.production
+++ /dev/null
@@ -1,2 +0,0 @@
-REACT_APP_API_URL=https://eg-dev.uniteframework.io/mw
-REACT_APP_BASE_URL=https://eg-dev.uniteframework.io
\ No newline at end of file
diff --git a/apps/front-end/public/Aadhaar2.png b/apps/front-end/public/Aadhaar2.png
new file mode 100644
index 000000000..d3bd66a8e
Binary files /dev/null and b/apps/front-end/public/Aadhaar2.png differ
diff --git a/apps/front-end/public/addAg.svg b/apps/front-end/public/addAg.svg
new file mode 100644
index 000000000..6b2bad5f9
--- /dev/null
+++ b/apps/front-end/public/addAg.svg
@@ -0,0 +1,3 @@
+<svg width="43" height="48" viewBox="0 0 43 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.80193 2.30565C9.53791 2.28615 9.72436 2.3154 10.4211 2.55918C10.9216 2.73469 11.4122 2.97847 11.7655 3.22225C12.0697 3.43677 12.472 3.79756 12.6781 4.03158C12.8744 4.25586 13.1295 4.59714 13.4631 5.11395L14.3463 4.7044C14.837 4.48013 15.6515 4.1486 16.1617 3.96333C16.672 3.78781 17.5159 3.54403 18.0459 3.43677C18.5856 3.31976 19.4393 3.18324 19.9594 3.12474C20.5286 3.06623 21.3823 3.04673 22.0888 3.07598C22.7463 3.10523 23.6491 3.19299 24.1005 3.271C24.5617 3.33926 25.3173 3.50503 25.7982 3.64154C26.279 3.7683 27.0052 4.01208 27.4173 4.17785C27.8295 4.34362 28.4477 4.61665 28.7912 4.79216C29.1444 4.96768 29.4388 5.1237 29.4683 5.1432C29.4879 5.15295 29.6155 4.98718 29.7529 4.76291C29.8902 4.53864 30.2239 4.12909 30.4987 3.84631C30.7734 3.57328 31.2346 3.20274 31.5094 3.03698C31.794 2.86146 32.3239 2.62743 32.6968 2.51042C33.2169 2.34465 33.5407 2.2959 34.1197 2.2959C34.6987 2.2959 35.0225 2.34465 35.5328 2.51042C35.9057 2.62743 36.4356 2.86146 36.7202 3.02723C37.0145 3.20274 37.4856 3.60254 37.829 3.97308C38.1725 4.33387 38.5454 4.84092 38.7122 5.1627C38.8594 5.45523 39.0655 5.97204 39.1636 6.29382C39.2519 6.62536 39.3501 7.22992 39.3795 7.64922C39.4089 8.20503 39.3893 8.58532 39.2814 9.08262C39.2127 9.45316 39.0066 10.0675 38.8398 10.4478C38.6141 10.9646 38.3786 11.3156 37.9566 11.7837C37.6426 12.1347 37.2402 12.5247 36.7398 12.8758L37.0145 13.5096C37.1617 13.8509 37.4071 14.4749 37.5543 14.8942C37.7113 15.3135 37.937 16.0741 38.0645 16.5812C38.1921 17.0882 38.3491 17.8878 38.4178 18.3559C38.4963 18.8922 38.5945 19.253 38.6828 19.3602C38.7613 19.4577 38.9183 19.682 39.036 19.8673C39.144 20.0525 39.3304 20.4913 39.4384 20.8424C39.5758 21.2714 39.6346 21.6517 39.6346 22.0417C39.6346 22.3928 39.5659 22.8413 39.458 23.2216C39.3599 23.5629 39.1538 24.0407 39.0066 24.2942C38.8496 24.538 38.5258 24.9378 38.2804 25.1718C37.8683 25.5716 37.829 25.6301 37.829 25.9617C37.8192 26.1567 37.7702 26.5955 37.7015 26.927C37.6426 27.2683 37.4954 27.7851 37.3776 28.0874C37.2697 28.3897 37.0538 28.8285 36.9164 29.0625C36.779 29.2965 36.4944 29.6671 36.2786 29.8913C36.0627 30.1156 35.6603 30.4471 35.3758 30.6324C35.0912 30.8079 34.6692 31.0225 33.9725 31.2565L34.2963 31.6368C34.4828 31.8513 34.7673 32.2413 34.944 32.5241C35.1108 32.7971 35.3659 33.3042 35.5131 33.6552C35.6505 34.0063 35.8272 34.6108 35.8959 35.0009C35.994 35.5177 36.0136 35.9662 35.994 36.6098C35.9645 37.0973 35.886 37.7409 35.8173 38.0432C35.7388 38.3455 35.5916 38.794 35.4739 39.0476C35.3561 39.3108 35.1697 39.5644 35.0617 39.6326C34.944 39.7009 34.7772 39.7301 34.6496 39.6911C34.5122 39.6619 34.3846 39.5449 34.3061 39.3693C34.1884 39.1061 34.1884 39.0671 34.3944 38.5405C34.5122 38.248 34.6594 37.7507 34.7183 37.4484C34.7772 37.1461 34.8262 36.6195 34.8262 36.2685C34.8262 35.898 34.7575 35.3617 34.6692 34.9619C34.5809 34.5913 34.3748 34.0258 34.2178 33.6942C34.0216 33.2944 33.7173 32.8849 33.2561 32.3876C32.7066 31.8025 32.4515 31.588 31.9117 31.315C31.5388 31.12 30.9501 30.8957 30.6066 30.8274C30.165 30.7202 29.7627 30.7007 29.2622 30.7299C28.7912 30.7559 28.3594 30.8437 27.9669 30.9932C27.643 31.1102 27.1818 31.3345 26.9463 31.4808C26.7108 31.6368 26.2594 32.0268 25.9552 32.3486C25.651 32.6704 25.2683 33.1872 25.1015 33.4895C24.9445 33.7917 24.7188 34.3378 24.601 34.7083C24.4342 35.2642 24.3949 35.5469 24.3851 36.3075C24.3851 36.9706 24.4244 37.3801 24.5225 37.7409C24.601 38.0237 24.8169 38.5503 24.9935 38.9208C25.229 39.4083 25.494 39.7886 25.9356 40.2567C26.4262 40.7735 26.6912 40.9783 27.28 41.2903C27.6725 41.4951 28.2515 41.7193 28.5557 41.7876C28.8599 41.8559 29.3113 41.9144 29.5664 41.9144C29.8117 41.9144 30.2926 41.8559 30.6262 41.7876C30.9599 41.7096 31.4898 41.5243 31.794 41.3683C32.0982 41.222 32.5202 40.9588 32.736 40.793C32.9716 40.6077 33.2267 40.481 33.3641 40.481C33.5015 40.481 33.6585 40.5492 33.737 40.6272C33.8057 40.715 33.894 40.871 33.9136 40.988C33.9529 41.144 33.9136 41.2708 33.786 41.4463C33.6879 41.5828 33.3935 41.8461 33.1286 42.0314C32.8734 42.2264 32.373 42.4994 31.3916 42.9285L31.4211 44.0011C31.4407 45.0347 31.4407 45.0834 31.0776 45.4637L21.5001 45.454C14.101 45.454 11.893 45.4345 11.7851 45.3467C11.7164 45.298 11.6281 45.1517 11.5888 45.0347C11.5398 44.9177 11.5398 44.4204 11.579 43.8548C11.6183 43.2503 11.7262 42.5092 11.8832 41.8754C12.0206 41.2805 12.2758 40.52 12.4916 40.0227C12.7075 39.5546 13.0706 38.872 13.3061 38.5015C13.5416 38.1407 14.0127 37.5264 14.3659 37.1559C14.7094 36.7853 15.2197 36.2978 15.9851 35.6834L15.0529 35.2056C14.5426 34.9521 13.787 34.5036 13.3748 34.211C12.9627 33.9185 12.315 33.4017 11.9225 33.0507C11.53 32.6996 11.0197 32.1926 10.3524 31.4222L9.7538 31.354C9.42997 31.3247 8.96875 31.237 8.72342 31.159C8.48791 31.0907 8.04632 30.8859 7.74211 30.7202C7.40847 30.5349 6.98651 30.1936 6.6823 29.8621C6.3094 29.472 6.06408 29.1015 5.82856 28.5944C5.64211 28.2044 5.43604 27.6486 5.37716 27.3756C5.30847 27.0928 5.22996 26.5857 5.12202 25.6009L4.62155 25.0841C4.33697 24.8013 4.00333 24.343 3.86595 24.0797C3.72856 23.8067 3.56174 23.3679 3.49305 23.1144C3.42436 22.8608 3.36548 22.4025 3.36548 22.1003C3.36548 21.8077 3.42436 21.3299 3.49305 21.0471C3.56174 20.7741 3.68931 20.3938 3.77763 20.2086C3.86595 20.0233 4.05239 19.721 4.18978 19.5357C4.40567 19.253 4.46454 19.0774 4.54305 18.5216C4.59211 18.1511 4.7295 17.449 4.83744 16.9615C4.94539 16.4739 5.17109 15.6743 5.3281 15.1868C5.49492 14.709 5.76968 13.9874 6.26034 12.8758L6.05426 12.7393C5.94632 12.6613 5.69118 12.4565 5.49492 12.281C5.29866 12.1152 4.98464 11.7739 4.808 11.5399C4.62155 11.2961 4.34679 10.8573 4.19959 10.555C4.04258 10.2527 3.84632 9.70669 3.758 9.33615C3.65987 8.9071 3.60099 8.3903 3.60099 7.94175C3.60099 7.4932 3.65987 6.9764 3.758 6.54735C3.84632 6.17681 4.05239 5.61125 4.21922 5.28947C4.37623 4.96768 4.70006 4.47038 4.94538 4.19735C5.1809 3.92432 5.57342 3.54403 5.80894 3.34901C6.04445 3.16374 6.47623 2.91021 6.75099 2.78345C7.03557 2.65669 7.4281 2.50067 7.62436 2.43241C7.82062 2.36416 8.3309 2.30565 8.80193 2.30565ZM6.97669 4.07059C6.66267 4.23635 6.28978 4.54839 5.96595 4.89943C5.68137 5.20171 5.35753 5.66001 5.23978 5.91353C5.12202 6.17681 4.97482 6.60586 4.90613 6.88864C4.83744 7.16167 4.78838 7.65897 4.78838 7.98075C4.78838 8.31229 4.83744 8.78034 4.90613 9.03387C4.96501 9.28739 5.11221 9.70669 5.23978 9.96021C5.35753 10.2235 5.65193 10.6525 5.88744 10.9256C6.12296 11.1888 6.43697 11.4911 6.57436 11.5789C6.72155 11.6666 6.84912 11.7252 6.85894 11.7154C6.87856 11.7056 7.09445 11.3741 7.34959 10.9743C7.60473 10.5843 8.00707 10.009 8.24258 9.70669C8.4781 9.41416 8.90006 8.9071 9.19445 8.58532C9.47903 8.27328 10.0089 7.73698 10.3818 7.40544C10.7547 7.07391 11.3337 6.59611 11.687 6.34258C12.0304 6.0988 12.3543 5.86478 12.3935 5.82577C12.4426 5.78677 12.3543 5.59175 12.158 5.31872C11.9814 5.07494 11.6673 4.72391 11.4515 4.53864C11.2258 4.36312 10.8823 4.11934 10.6762 4.01208C10.4702 3.90482 10.0776 3.7488 9.81267 3.68055C9.53791 3.61229 9.10613 3.56353 8.84118 3.56353C8.58604 3.56353 8.16408 3.62204 7.91875 3.6903C7.67342 3.75855 7.24165 3.92432 6.97669 4.07059ZM32.2454 4.05108C31.9902 4.1876 31.6173 4.46063 31.3916 4.67515C31.1758 4.87992 30.8912 5.21146 30.7636 5.40648C30.5477 5.72826 30.5379 5.77702 30.6557 5.86478C30.7342 5.91353 31.1071 6.19631 31.4898 6.47909C31.8725 6.77162 32.5398 7.33718 32.9716 7.74673C33.4033 8.15627 34.0412 8.8486 34.3944 9.27764C34.7379 9.70669 35.2188 10.3503 35.4543 10.711C35.6996 11.0718 35.9449 11.4521 36.0136 11.5691L36.1412 11.7739C36.5533 11.5009 36.8772 11.1888 37.1127 10.9158C37.3482 10.6428 37.6426 10.2137 37.7603 9.96021C37.8781 9.70669 38.0253 9.27764 38.094 8.99486C38.1627 8.71208 38.2117 8.26353 38.2117 7.98075C38.2117 7.70772 38.1627 7.22992 38.094 6.92764C38.0253 6.62536 37.8585 6.15731 37.7211 5.87453C37.5837 5.6015 37.2599 5.1432 36.9949 4.86042C36.7398 4.57764 36.308 4.23635 36.0529 4.09009C35.7879 3.94382 35.3463 3.75855 35.0617 3.6903C34.7772 3.62204 34.3356 3.56353 34.0804 3.56353C33.8155 3.56353 33.4033 3.62204 33.1482 3.6903C32.9029 3.75855 32.4907 3.91457 32.2454 4.05108ZM19.2529 4.48988C18.8603 4.53864 18.0851 4.71416 17.5159 4.86042C16.9566 5.01644 16.1519 5.27972 15.7398 5.45523C15.3276 5.63075 14.6603 5.95254 14.2482 6.17681C13.836 6.39133 13.1589 6.81063 12.7468 7.10316C12.3346 7.38594 11.8244 7.78573 11.6085 7.971C11.3926 8.15627 10.9706 8.54631 10.6664 8.81934C10.372 9.10212 9.79305 9.74569 9.3809 10.2625C8.96875 10.7695 8.41922 11.5301 8.16408 11.9494C7.90894 12.359 7.5066 13.1 7.27109 13.5876C7.03557 14.0752 6.71174 14.8357 6.55473 15.2745C6.39772 15.7133 6.16221 16.5032 6.03464 17.0297C5.91688 17.5465 5.80894 18.0341 5.80894 18.1023C5.80894 18.2096 5.84819 18.2096 6.12296 18.1023C6.29959 18.0341 6.79025 17.9366 7.21221 17.8976C7.68324 17.8488 8.4094 17.683 9.11595 17.4685C9.7538 17.2735 10.686 16.942 11.2061 16.7274C11.7262 16.5227 12.6388 16.1229 13.2178 15.8303C13.8066 15.5476 14.7094 15.0405 15.2295 14.7187C15.7496 14.3872 16.5346 13.8314 16.9664 13.4803C17.3982 13.1391 17.987 12.632 18.2617 12.359C18.5365 12.0859 19.0173 11.5399 19.3314 11.1401C19.6356 10.75 20.087 10.087 20.3225 9.67743C20.5678 9.24839 20.8524 8.85835 20.9898 8.77059C21.1173 8.68283 21.3529 8.61457 21.5001 8.61457C21.6473 8.61457 21.8828 8.68283 22.0103 8.77059C22.1477 8.85835 22.4029 9.20938 22.5991 9.55067C22.7856 9.89196 23.1683 10.477 23.4332 10.8476C23.708 11.2181 24.1888 11.7934 24.5029 12.1152C24.8267 12.4467 25.337 12.9245 25.6412 13.1878C25.9454 13.4413 26.6225 13.9484 27.1426 14.3092C27.6627 14.6602 28.6145 15.2258 29.2622 15.5671C29.9197 15.9083 30.7734 16.3179 31.1561 16.4837C31.5487 16.6397 32.2454 16.9127 32.6968 17.0785C33.1482 17.2442 33.8645 17.4783 34.2767 17.5953C34.6888 17.7123 35.3561 17.8488 35.7683 17.8976C36.1804 17.9366 36.6515 18.0243 36.8183 18.0828C36.9753 18.1413 37.1225 18.1608 37.1519 18.1413C37.1716 18.1218 37.1029 17.722 36.9949 17.254C36.8968 16.7957 36.7005 16.0741 36.5631 15.6548C36.4258 15.2355 36.1019 14.4457 35.8566 13.8801C35.6015 13.3243 35.1795 12.5345 34.9244 12.1152C34.6692 11.6959 34.2473 11.0718 33.9921 10.7208C33.7272 10.3795 33.1973 9.74569 32.8145 9.33615C32.422 8.91685 31.7645 8.29279 31.3524 7.9515C30.9402 7.61021 30.2926 7.12266 29.9001 6.85938C29.5075 6.60586 28.8304 6.21582 28.3987 5.99154C27.9669 5.76727 27.2015 5.44548 26.701 5.26021C26.2103 5.07494 25.4449 4.84092 25.0131 4.74341C24.5716 4.63615 23.8159 4.49963 23.3155 4.44113C22.815 4.37287 21.9613 4.32411 21.4216 4.33386C20.8818 4.33386 20.3323 4.35337 20.1949 4.37287C20.0673 4.38262 19.6454 4.44113 19.2529 4.48988ZM19.4884 12.788C18.929 13.4023 18.1538 14.1434 17.7809 14.4359C17.408 14.7382 16.7505 15.216 16.3188 15.4988C15.8968 15.7816 15.0823 16.2594 14.523 16.5617C13.9538 16.8639 13.1589 17.2637 12.7468 17.449C12.3346 17.6343 11.5692 17.9463 11.0491 18.1413C10.529 18.3364 9.66548 18.6191 9.11595 18.7849C8.57623 18.9409 8.11501 19.0969 8.09539 19.1262C8.07576 19.1457 8.02669 19.4187 7.99725 19.7308C7.96782 20.0428 7.94819 20.7059 7.94819 21.2227C7.93838 21.7297 7.98744 22.5488 8.04632 23.0364C8.11501 23.5239 8.23277 24.2162 8.32109 24.5965C8.4094 24.9671 8.59585 25.6106 8.73324 26.0299C8.87062 26.4395 9.11595 27.0733 9.28277 27.4341C9.4594 27.7949 9.74398 28.3507 9.92062 28.6627C10.0973 28.9747 10.48 29.55 10.7645 29.9498C11.0491 30.3399 11.5692 30.9639 11.9225 31.3345C12.2758 31.705 12.8547 32.2511 13.2276 32.5534C13.5907 32.8459 14.2089 33.2847 14.6015 33.5285C14.994 33.782 15.5926 34.1135 15.9459 34.2793C16.2893 34.4353 16.8879 34.6888 17.2804 34.8254C17.673 34.9619 18.3795 35.1569 18.8603 35.2544C19.4491 35.3812 20.1459 35.4592 21.029 35.4884C21.7454 35.5177 22.5206 35.5079 22.7659 35.4787L23.1977 35.4202C23.4038 34.4158 23.6197 33.7917 23.7963 33.4017C23.973 33.0117 24.2281 32.5144 24.3655 32.3096C24.5029 32.0951 24.8267 31.6953 25.0916 31.4222C25.3468 31.1395 25.8473 30.7299 26.1907 30.4959C26.544 30.2619 27.1033 29.9693 27.4566 29.8426C27.8001 29.7158 28.3103 29.5793 28.5949 29.5305C28.8795 29.4818 29.3505 29.4428 29.6449 29.4428C29.9295 29.4428 30.43 29.4915 30.744 29.5598C31.058 29.6281 31.5192 29.7646 31.7744 29.8523L32.2258 30.0278C33.0893 28.6237 33.5211 27.8339 33.7272 27.3756C33.9332 26.9075 34.208 26.1859 34.3454 25.7764C34.473 25.3571 34.6496 24.6745 34.7379 24.2552C34.8262 23.8359 34.9342 23.1241 34.9734 22.6756C35.0225 22.2173 35.0617 21.5542 35.0617 21.2032C35.0617 20.8424 35.0225 20.2183 34.9832 19.8283C34.9342 19.4382 34.8949 19.1067 34.8851 19.0969C34.8753 19.0872 34.5318 18.9799 34.1197 18.8629C33.7075 18.7361 32.9814 18.5119 32.5005 18.3364C32.0197 18.1706 31.2052 17.8586 30.6851 17.6343C30.165 17.4198 29.4388 17.0882 29.0659 16.903C28.7029 16.7177 28.065 16.3666 27.6529 16.1229C27.2407 15.8791 26.5832 15.45 26.1907 15.1673C25.7982 14.8942 25.229 14.4554 24.9346 14.1922C24.6304 13.9386 24.0613 13.4023 23.6786 13.0025C23.2959 12.6027 22.7365 11.9397 22.4323 11.5204C22.1281 11.1108 21.8043 10.6233 21.7061 10.4478C21.6178 10.2722 21.5197 10.1357 21.5001 10.1357C21.4804 10.1357 21.2449 10.4868 20.9898 10.9061C20.6856 11.4131 20.1557 12.0664 19.4884 12.788ZM5.46548 19.916C5.28884 20.0818 5.07296 20.3451 4.97482 20.5011C4.88651 20.6669 4.73931 21.0276 4.66081 21.3007C4.56267 21.681 4.54305 21.954 4.5823 22.3538C4.61174 22.6853 4.70987 23.0754 4.82763 23.3289C4.94538 23.5629 5.1809 23.9139 5.35753 24.109C5.54398 24.304 5.88744 24.5575 6.12296 24.6745C6.35847 24.7818 6.70193 24.8988 6.86875 24.9378L7.19258 25.0061C7.10426 24.616 7.01595 24.148 6.93744 23.7092C6.83931 23.1144 6.80006 22.4318 6.80006 21.0764C6.79024 19.4967 6.78043 19.2432 6.67249 19.2432C6.61361 19.2432 6.3781 19.331 6.16221 19.4382C5.94632 19.5455 5.6323 19.76 5.46548 19.916ZM36.2099 21.7297C36.1902 22.3733 36.1216 23.2314 36.0529 23.6214C35.994 24.0212 35.9057 24.4893 35.8762 24.6745L35.8075 24.9963C36.2982 24.8988 36.622 24.7915 36.8379 24.6843C37.0538 24.5868 37.3874 24.3527 37.5739 24.1675C37.7701 23.9725 38.0253 23.6019 38.1627 23.2899C38.3786 22.8121 38.4178 22.6561 38.408 22.0612C38.408 21.5249 38.3687 21.3007 38.2117 20.9204C38.1038 20.6669 37.8683 20.2963 37.7015 20.0915C37.5248 19.8965 37.1716 19.6235 36.9164 19.487C36.6515 19.3505 36.3669 19.2334 36.2786 19.2334C36.1314 19.2334 36.1216 19.2627 36.1902 19.8965C36.2295 20.2476 36.2393 21.0764 36.2099 21.7297ZM6.41735 26.498C6.43697 26.7027 6.52529 27.0928 6.61361 27.3756C6.70193 27.6486 6.84912 28.0289 6.95707 28.2142C7.0552 28.3994 7.32996 28.7505 7.55567 28.9942C7.79118 29.238 8.16408 29.5305 8.38978 29.6476C8.61548 29.7646 8.90987 29.8913 9.04725 29.9206L9.29258 29.9888C8.4781 28.5457 8.07576 27.7071 7.8795 27.1805L7.5066 26.2347C7.07482 26.2347 6.81968 26.2054 6.66267 26.1762L6.36828 26.1274L6.41735 26.498ZM35.4445 26.2737C35.1697 27.0635 34.9342 27.6291 34.7379 28.0484C34.5416 28.4677 34.2374 29.0527 34.0608 29.355C33.8744 29.6573 33.7272 29.9303 33.7272 29.9693C33.7272 29.9986 33.894 29.9596 34.1001 29.8816C34.3061 29.7938 34.6398 29.6281 34.836 29.511C35.0225 29.3843 35.3463 29.1015 35.5524 28.8772C35.7487 28.6529 36.0038 28.2629 36.1314 28.0094C36.2491 27.7559 36.4159 27.2586 36.4944 26.9075C36.5828 26.5662 36.6515 26.2542 36.6416 26.2152C36.6416 26.1762 36.5631 26.1567 36.465 26.1664C36.3669 26.1762 36.1019 26.2054 35.8664 26.2249L35.4445 26.2737ZM18.1047 37.1559C18.144 37.2924 18.2323 37.5166 18.301 37.6629C18.3795 37.7994 18.5561 37.9944 18.6935 38.1017C18.8309 38.209 19.0664 38.3162 19.2234 38.3455C19.3706 38.3747 19.6258 38.3747 19.7926 38.3455C19.9594 38.3162 20.2047 38.1797 20.3716 38.0139C20.5286 37.8677 20.7052 37.6434 20.7641 37.5069C20.823 37.3801 20.872 37.1656 20.872 37.0291C20.872 36.7951 20.8524 36.7756 20.5776 36.7756C20.4206 36.7756 19.93 36.7171 19.4982 36.6488C19.0664 36.5805 18.5856 36.5025 18.4286 36.4733C18.1734 36.4245 18.1538 36.4343 18.0949 36.6586C18.0655 36.7951 18.0753 37.0096 18.1047 37.1559ZM15.1608 38.092C14.8959 38.3747 14.4935 38.9013 14.258 39.2718C14.0225 39.6326 13.6888 40.2372 13.5318 40.6077C13.3748 40.9783 13.1491 41.6413 13.0412 42.0899C12.9332 42.5287 12.8155 43.182 12.7762 43.5428L12.7173 44.1961H30.2631C30.2631 43.8353 30.2435 43.611 30.2141 43.4745L30.165 43.221C28.9286 43.1332 28.3005 43.0357 27.9767 42.948C27.643 42.8505 27.1131 42.6359 26.7893 42.4702C26.4655 42.2947 26.0239 42.0119 25.808 41.8364C25.5921 41.6608 25.18 41.261 24.8954 40.9393C24.6108 40.6175 24.2968 40.1982 24.1888 40.0032L23.9926 39.6521C23.0996 39.5936 22.7365 39.5156 22.4912 39.3986C22.2753 39.2913 21.9515 39.0768 21.7846 38.9305L21.4706 38.6478C21.0977 39.0476 20.8033 39.2523 20.558 39.3791C20.2047 39.5546 20.0085 39.5936 19.4982 39.5936C18.9388 39.5936 18.7916 39.5644 18.3304 39.3206C17.9772 39.1386 17.7122 38.9305 17.5356 38.6965C17.3884 38.4917 17.2117 38.2187 17.1431 38.0822C17.0842 37.9457 16.986 37.5751 16.9468 37.2631C16.8977 36.9413 16.8388 36.6878 16.7996 36.6878C16.7603 36.6878 16.4758 36.8926 16.1814 37.1266C15.8772 37.3704 15.4159 37.7994 15.1608 38.092ZM22.1281 37.0681C22.1379 37.2046 22.2164 37.4581 22.3047 37.6142C22.393 37.7799 22.5697 37.9944 22.7169 38.1017C22.8543 38.1992 23.0702 38.3065 23.1977 38.3357L23.4431 38.3845C23.2959 37.5654 23.2272 37.1754 23.2075 37.0096C23.1781 36.8243 23.1192 36.6976 23.0603 36.7073C23.0113 36.7073 22.7659 36.7366 22.5304 36.7658C22.1085 36.8146 22.0987 36.8243 22.1281 37.0681ZM29.586 32.6411C29.694 32.6411 29.8706 32.7386 29.9786 32.8556C30.1748 33.0604 30.1846 33.0897 30.1846 35.6737H31.4015C32.5987 35.6737 32.6281 35.6834 32.8244 35.8882C32.9323 36.0052 33.0206 36.1905 33.0206 36.3075C33.0206 36.4245 32.9323 36.6195 32.8244 36.7268C32.6379 36.9413 32.6085 36.9413 30.1846 36.9413V39.5546L29.9589 39.7789C29.7921 39.9544 29.7038 39.9934 29.5075 39.9446C29.38 39.9154 29.2131 39.8081 29.1346 39.7009C29.0071 39.5351 28.9874 39.3401 28.9973 36.9413H27.7902C26.7206 36.9511 26.5734 36.9316 26.3968 36.7853C26.2496 36.6586 26.2005 36.5415 26.2005 36.3075C26.2005 36.0832 26.2496 35.9565 26.3968 35.8395C26.5734 35.6834 26.7206 35.6737 28.9973 35.6737V34.3671C29.0071 33.0994 29.0071 33.0507 29.1935 32.8459C29.3015 32.7386 29.4781 32.6411 29.586 32.6411ZM14.7683 20.3938C14.8566 20.4133 14.994 20.5108 15.0823 20.5986C15.2197 20.7449 15.2393 20.8716 15.2393 21.7297C15.2393 22.6756 15.2295 22.7146 15.043 22.8706C14.9351 22.9681 14.7487 23.0364 14.6309 23.0364C14.5033 23.0364 14.3365 22.9583 14.2482 22.8608C14.1108 22.7146 14.0912 22.5781 14.0912 21.7005C14.0912 20.8619 14.1108 20.6961 14.2286 20.5791C14.3071 20.5011 14.4248 20.4231 14.4935 20.3938C14.5524 20.3646 14.68 20.3646 14.7683 20.3938ZM28.4281 20.3743C28.5459 20.4036 28.7029 20.5108 28.7814 20.6083C28.8991 20.7644 28.9286 20.9594 28.9188 21.7492C28.9188 22.5781 28.8991 22.7146 28.7617 22.8608C28.6734 22.9583 28.4968 23.0266 28.3692 23.0266C28.222 23.0266 28.0552 22.9486 27.9374 22.8218C27.751 22.6171 27.7314 22.5586 27.7412 21.72C27.751 20.8424 27.751 20.8229 27.9865 20.5693C28.173 20.3646 28.2613 20.3256 28.4281 20.3743ZM20.2832 23.2021C20.3323 23.2021 20.4893 23.2899 20.6365 23.3874C20.7837 23.4947 20.98 23.6214 21.0683 23.6799C21.1566 23.7384 21.3529 23.7872 21.5099 23.7872C21.6767 23.7969 21.8828 23.7189 22.0594 23.5824C22.2066 23.4654 22.4127 23.3386 22.5108 23.2899C22.6089 23.2411 22.7856 23.2314 22.9033 23.2606C23.0113 23.2996 23.1585 23.4069 23.2173 23.4947C23.2762 23.5922 23.3253 23.7482 23.3253 23.8554C23.3253 23.953 23.1879 24.1967 23.0211 24.382C22.8346 24.6063 22.5697 24.7915 22.2949 24.8988C21.9711 25.0256 21.7356 25.0646 21.3529 25.0353C21.0683 25.0158 20.715 24.9281 20.558 24.85C20.4108 24.7623 20.1557 24.5575 19.9888 24.3917C19.8122 24.2162 19.6945 24.0017 19.6945 23.8944C19.6945 23.7872 19.7337 23.6312 19.7926 23.5337C19.8416 23.4361 19.9594 23.3289 20.0477 23.2801C20.136 23.2411 20.244 23.2119 20.2832 23.2021ZM14.6407 23.8749C15.7202 23.8749 15.7594 23.8847 15.9459 24.0895C16.0538 24.1967 16.1421 24.3917 16.1421 24.5088C16.1421 24.6258 16.0538 24.811 15.9557 24.9281C15.7594 25.1328 15.73 25.1426 14.6505 25.1426C13.5711 25.1426 13.5416 25.1328 13.3454 24.9281C13.2374 24.811 13.1491 24.6258 13.1491 24.499C13.1589 24.382 13.2374 24.1967 13.3454 24.0797C13.5318 23.8847 13.5711 23.8749 14.6407 23.8749ZM28.3594 23.8749C29.3015 23.8652 29.4585 23.8847 29.6253 24.031C29.7725 24.1577 29.8216 24.2747 29.8216 24.5088C29.8216 24.733 29.7725 24.8598 29.6253 24.9768C29.4487 25.1231 29.3113 25.1426 28.33 25.1426C27.2996 25.1328 27.2113 25.1231 27.0445 24.9476C26.9365 24.8305 26.858 24.655 26.858 24.4893C26.858 24.2942 26.9071 24.1772 27.0739 24.0505C27.2603 23.8944 27.3977 23.8749 28.3594 23.8749ZM21.5197 39.8081C21.6374 39.8081 21.8141 39.8861 21.9024 39.9739C21.9907 40.0714 22.0594 40.2567 22.0594 40.4225C22.0594 40.598 22.0005 40.754 21.8926 40.8612C21.8043 40.9588 21.6276 41.027 21.5001 41.027C21.3725 41.027 21.1959 40.949 21.0977 40.8417C20.98 40.7247 20.9113 40.5492 20.9113 40.3834C20.9113 40.2079 20.98 40.0714 21.1075 39.9642C21.2057 39.8764 21.3921 39.8081 21.5197 39.8081ZM21.5001 42.0899C21.6571 42.0899 21.8435 42.1484 21.922 42.2361C22.0005 42.3142 22.0594 42.4897 22.0594 42.6359C22.0594 42.7724 22.0103 42.9675 21.9416 43.0747C21.8533 43.2112 21.7454 43.2698 21.5295 43.2698C21.3234 43.2698 21.1762 43.2112 21.0683 43.0942C20.9898 42.987 20.9113 42.8017 20.9113 42.6749C20.9113 42.5482 20.98 42.3629 21.0683 42.2654C21.1664 42.1484 21.3038 42.0899 21.5001 42.0899Z" fill="#790000"/>
+</svg>
diff --git a/apps/front-end/public/index.html b/apps/front-end/public/index.html
index 9a3030b5a..69f6f52d6 100644
--- a/apps/front-end/public/index.html
+++ b/apps/front-end/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -10,7 +10,7 @@
       content="The teacher app Micro Frontend used in the Shiksha Platform.
       It can also function as a standalone package."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/apps/front-end/public/locales/en/translation.json b/apps/front-end/public/locales/en/translation.json
index 1b3d069b2..4d5c5075f 100644
--- a/apps/front-end/public/locales/en/translation.json
+++ b/apps/front-end/public/locales/en/translation.json
@@ -133,7 +133,7 @@
   "JUST_ONE_STEP": "Just one more Step to go!",
   "TAKE_PHOTO": "Take a Photo",
   "UPLOAD_PHOTO": "Upload a Photo",
-  "FILE_SIZE": "file size must be less then 2MB",
+  "FILE_SIZE": "file size must be less then 25MB",
   "TAKE_ANOTHER_PHOTO": "Take another Photo",
   "REQUIRED_MESSAGE": "Please enter a valid data",
   "SELECT_MESSAGE": "Please select a valid option",
@@ -171,7 +171,7 @@
   "COMPANY_NAME": "Company Name",
   "EXPERIENCE_IN_YEARS": "Experience in years",
   "IS_THE_JOB_RELATED_TO_TEACHING": "Is the job related to teaching?",
-  "DO_YOU_HAVE_ANY_WORK_EXPERIENCE": "Do you have any Work Experience ?",
+  "DO_YOU_HAVE_ANY_JOB_EXPERIENCE": "Do you have any Job Experience ?",
   "EXPERIENCE": "Experience",
   "YOUR_WORK_AVAILABILITY_WILL_BE": "Your work availability will be ?",
   "DO_YOU_OWN_A_MOBILE_PHONE": "Do you have a personal smartphone ?",
@@ -217,6 +217,25 @@
   "MARK_ABSENT": "Mark Absent",
   "ENTER_USERNAME_PASSWORD_SENT_ON_MOBILE": "Enter the Username and Password sent on your Mobile Number",
   "AADHAAR_NUMBER_ALREADY_EXISTS": "Aadhaar number already exists",
+  "PROFILE": "Profile",
+  "INTERVIEW_DETAILS": "Interview Details",
+  "CONDUCTED_BY": "Conducted by",
+  "ORIENTATION_DETAILS": "Orientation Details",
+  "ONLINE": "Online",
+  "ACCEPT": "Accept",
+  "DOCUMENTS_YOU_NEED_TO_CARRY": "Documents you need to carry",
+  "UPLOAD_YOUR_DOCUMENTS": "Upload Your Documents",
+  "UPLOAD_NOW": "Upload Now",
+  "QUALIFICATION_PROOF": "Qualification Proof",
+  "WORK_EXPERIENCE_PROOF": "Work Experience Proof",
+  "VOLUNTEER_EXPERIENCE_PROOF": "Volunteer Experience Proof",
+  "AADHAR_NUMBER_KYC": "Aadhar Number KYC",
+  "ADD_AN_AG": "Add an AG",
+  "COMPLETE_YOUR_AADHAR_VERIFICATION_NOW": "Complete Your Aadhaar Verification Now",
+  "ADD_AN_AG_LEARNER": "Add an AG Learner",
+  "MY_CAMP": "Mycamp",
+  "LEARNERS": "learners",
+  "MAX_LENGHT_200": "Max Lenght 200",
   "OWNERSHIP": "Ownership",
   "IDENTIFY_THE_AG_LEARNER": "Identify the AG Learner",
   "MARITAL_STATUS": "Marital status",
diff --git a/apps/front-end/public/locales/hi/translation.json b/apps/front-end/public/locales/hi/translation.json
index 0dd2052ac..df2185bc8 100644
--- a/apps/front-end/public/locales/hi/translation.json
+++ b/apps/front-end/public/locales/hi/translation.json
@@ -133,7 +133,7 @@
   "JUST_ONE_STEP": "बस एक कदम और आगे बढ़ना है!",
   "TAKE_PHOTO": "फोटो लें",
   "UPLOAD_PHOTO": "फोटो अपलोड करें",
-  "FILE_SIZE": "फाइल का आकार 2 एमबी से कम होना चाहिए",
+  "FILE_SIZE": "फाइल का आकार 25 एमबी से कम होना चाहिए",
   "TAKE_ANOTHER_PHOTO": "एक और फोटो लें",
   "REQUIRED_MESSAGE": "कृपया वैध दर्ज करें",
   "SELECT_MESSAGE": "कृपया वैध विकल्प चुनें",
@@ -159,7 +159,7 @@
   "GRAMPANCHAYAT": "ग्राम पंचायत",
   "YOUR_HIGHEST_QUALIFICATION": "आपकी उच्चतम शैक्षिक योग्यता क्या है?",
   "DO_YOU_HAVE_ANY_TEACHING_DEGREE": "क्या आपके पास कोई शिक्षण डिग्री है?",
-  "DO_YOU_HAVE_ANY_WORK_EXPERIENCE": "क्या आपके पास काम करने का कुछ अनुभव है?",
+  "DO_YOU_HAVE_ANY_JOB_EXPERIENCE": "क्या आपके पास नौकरी करने का कुछ अनुभव है?",
   "JOB_TITLE": "नौकरी का शीर्षक",
   "COMPANY_NAME": "कंपनी का नाम",
   "EXPERIENCE_IN_YEARS": "अनुभव (वर्षों में)",
@@ -206,6 +206,25 @@
   "LOGOUT": "लॉग आउट",
   "ENTER_USERNAME_PASSWORD_SENT_ON_MOBILE": "आपके मोबाइल नंबर पर भेजा गया यूजरनेम और पासवर्ड दर्ज करें",
   "AADHAAR_NUMBER_ALREADY_EXISTS": "आधार नंबर पहले से मौजूद है",
+  "PROFILE": "प्रोफ़ाइल",
+  "INTERVIEW_DETAILS": "साक्षात्कार विवरण",
+  "CONDUCTED_BY": "द्वारा आयोजित",
+  "ORIENTATION_DETAILS": "अभिविन्यास विवरण",
+  "ONLINE": "ऑनलाइन",
+  "ACCEPT": "स्वीकार करना",
+  "DOCUMENTS_YOU_NEED_TO_CARRY": "दस्तावेज़ जिन्हें आपको ले जाने की आवश्यकता है",
+  "UPLOAD_YOUR_DOCUMENTS": "अपने दस्तावेज़ अपलोड करें",
+  "UPLOAD_NOW": "अभी अपलोड करें",
+  "QUALIFICATION_PROOF": "योग्यता प्रमाण",
+  "WORK_EXPERIENCE_PROOF": "कार्य अनुभव प्रमाण",
+  "VOLUNTEER_EXPERIENCE_PROOF": "स्वयंसेवी अनुभव प्रमाण",
+  "AADHAR_NUMBER_KYC": "आधार संख्या केवाईसी",
+  "ADD_AN_AG": "एजी जोड़ें",
+  "COMPLETE_YOUR_AADHAR_VERIFICATION_NOW": "अपना आधार सत्यापन अभी पूरा करें",
+  "ADD_AN_AG_LEARNER": "एक एजी शिक्षार्थी जोड़ें",
+  "MY_CAMP": "मेरा डेरा",
+  "LEARNERS": "शिक्षार्थियों",
+  "MAX_LENGHT_200": "जडसे जादा 200 शब्द मान्य है",
   "OWNERSHIP": "स्वामित्व",
   "IDENTIFY_THE_AG_LEARNER": "एजी लर्नर की पहचान करें",
   "MARITAL_STATUS": "वैवाहिक स्थिति",
diff --git a/apps/front-end/public/logo.png b/apps/front-end/public/logo.png
new file mode 100644
index 000000000..2c06efe2b
Binary files /dev/null and b/apps/front-end/public/logo.png differ
diff --git a/apps/front-end/public/splash.png b/apps/front-end/public/splash.png
deleted file mode 100644
index 6f146cdf9..000000000
Binary files a/apps/front-end/public/splash.png and /dev/null differ
diff --git a/apps/front-end/public/splash1.png b/apps/front-end/public/splash1.png
index bc390b9c1..468cd8537 100644
Binary files a/apps/front-end/public/splash1.png and b/apps/front-end/public/splash1.png differ
diff --git a/apps/front-end/src/App.css b/apps/front-end/src/App.css
index f60f1838a..0df528829 100644
--- a/apps/front-end/src/App.css
+++ b/apps/front-end/src/App.css
@@ -70,7 +70,7 @@ label {
   flex-direction: column;
 }
 select.form-control {
-  height: 48px;
+  height: 54px;
 }
 .form-control {
   height: 34px;
@@ -287,11 +287,44 @@ img {
   line-height: 15px;
   color: #790000;
 }
+
 .error-detail,
 ul {
   padding: 10px 0;
   list-style-type: none;
 }
 label {
-  margin-top: 8px !important;
+  margin-top: 8px;
+}
+
+@property --progress-value {
+  syntax: "<integer>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes html-progress {
+  to {
+    --progress-value: 92;
+  }
+}
+
+.progress-bar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  /* to center the percentage value */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
+    conic-gradient(hotpink calc(var(--progress-value) * 1%), pink 0);
+  animation: html-progress 2s 1 forwards;
+}
+
+.progress-bar::before {
+  counter-reset: percentage var(--progress-value);
+  content: counter(percentage) "%";
+  animation: html-progress 2s 1 forwards;
 }
diff --git a/apps/front-end/src/App.js b/apps/front-end/src/App.js
index b0e50bf1c..0f6f3bd09 100644
--- a/apps/front-end/src/App.js
+++ b/apps/front-end/src/App.js
@@ -6,6 +6,7 @@ import {
   getTokernUserInfo,
   facilitatorRegistryService,
   setLocalUser,
+  t,
 } from "@shiksha/common-lib";
 import guestRoutes from "./routes/guestRoutes";
 import routes from "./routes/routes";
@@ -39,7 +40,24 @@ function App() {
       basename={process.env.PUBLIC_URL}
       routes={accessRoutes}
       guestRoutes={guestRoutes}
-      isShowFooterLink={false}
+      footerLinks={[
+        {
+          title: "HOME",
+          icon: "Home4LineIcon",
+        },
+        {
+          title: "LEARNERS",
+          icon: "PencilRulerLineIcon",
+        },
+        {
+          title: "MY_CAMP",
+          icon: "CommunityLineIcon",
+        },
+        {
+          title: "DASHBOARD",
+          icon: "DashboardLineIcon",
+        },
+      ]}
       appName="Teacher App"
       userTokenInfo={userTokenInfo}
     />
diff --git a/apps/front-end/src/component/BaseInput.js b/apps/front-end/src/component/BaseInput.js
index a24b2d566..224bffedc 100644
--- a/apps/front-end/src/component/BaseInput.js
+++ b/apps/front-end/src/component/BaseInput.js
@@ -1,59 +1,20 @@
 import React from "react";
-import { Box, Button, HStack, Input, VStack } from "native-base";
-import { getInputProps } from "@rjsf/utils";
-import { BodySmall, H2, t } from "@shiksha/common-lib";
+import {
+  Box,
+  Button,
+  FormControl,
+  HStack,
+  Image,
+  Radio,
+  Stack,
+  Text,
+  VStack,
+} from "native-base";
+import { BodySmall, H2, t, FloatingInput } from "@shiksha/common-lib";
+import CustomRadio from "./CustomRadio";
 
 export function BaseInputTemplate(props) {
-  const {
-    schema,
-    id,
-    options,
-    label,
-    value,
-    type,
-    placeholder,
-    required,
-    disabled,
-    readonly,
-    autofocus,
-    onChange,
-    onChangeOverride,
-    onBlur,
-    onFocus,
-    rawErrors,
-    hideError,
-    uiSchema,
-    registry,
-    formContext,
-    ...rest
-  } = props;
-  const onTextChange = ({ target: { value: val } }) => {
-    // Use the options.emptyValue if it is specified and newVal is also an empty string
-    onChange(val === "" ? options.emptyValue || "" : val);
-  };
-  const onTextBlur = ({ target: { value: val } }) => onBlur(id, val);
-  const onTextFocus = ({ target: { value: val } }) => onFocus(id, val);
-
-  const inputProps = { ...rest, ...getInputProps(schema, type, options) };
-  const hasError = rawErrors?.length > 0 && !hideError;
-
-  return (
-    <Input
-      id={id}
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      disabled={disabled}
-      readOnly={readonly}
-      autoFocus={autofocus}
-      error={hasError}
-      errors={hasError ? rawErrors : undefined}
-      onChange={onChangeOverride || onTextChange}
-      onBlur={onTextBlur}
-      onFocus={onTextFocus}
-      {...inputProps}
-    />
-  );
+  return <FloatingInput {...props} />;
 }
 
 export function AddButton({ icon, iconType, ...btnProps }) {
@@ -97,9 +58,54 @@ export const DescriptionFieldTemplate = ({ description, id }) => {
   );
 };
 
+export const ArrayFieldTemplate = ({ schema, ...props }) => {
+  const [isShow, setIsShow] = React.useState("no");
+  const { title } = schema;
+  console.log(props, schema);
+  return (
+    <div>
+      <RadioBtn
+        value={isShow}
+        options={{
+          enumOptions: [
+            { label: t("YES"), value: "yes" },
+            { label: t("NO"), value: "no" },
+          ],
+        }}
+        onChange={(e) => {
+          setIsShow(e);
+          if (e === "yes" && props.items.length === 0) {
+            props.onAddClick();
+          }
+        }}
+        schema={{ label: t(title) }}
+      />
+      {isShow === "yes" && (
+        <div>
+          {props.items.map((element) => element.children)}
+          {props.canAdd && (
+            <Button
+              variant={"outlinePrimary"}
+              colorScheme="green"
+              onPress={(e) => {
+                console.log(e);
+                const isValid = e.target.closest("form.rjsf"); //?.validateForm();
+                console.log(isValid, isValid?.validateForm() ? "true" : "das");
+                if (isValid && isValid?.validateForm()) {
+                  props?.onClick();
+                }
+              }}
+            >
+              {t("ADD_EXPERIENCE")}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
 export const FieldTemplate = ({
   id,
-  classNames,
   style,
   label,
   help,
@@ -107,40 +113,126 @@ export const FieldTemplate = ({
   description,
   errors,
   children,
+  schema,
+  ...props
 }) => {
+  const { type } = schema;
   return (
-    <div className={classNames} style={style}>
-      <React.Fragment>
-        <label htmlFor={id}>
-          <HStack space="1" alignItems="center">
-            <H2 color="textMaroonColor.400">{t(label)}</H2>
-            <H2 color="textMaroonColor.400">{required ? "*" : null}</H2>
-          </HStack>
-        </label>
-        {description?.props?.description !== "" ? (
-          description
-        ) : (
-          <React.Fragment />
-        )}
-      </React.Fragment>
-      {children}
-      {errors}
-      {help}
-    </div>
+    <VStack style={style} space={id === "root" && label ? "10" : "0"}>
+      {label && typeof type === "string" && type !== "string" && (
+        <Box>
+          {id === "root" && (
+            <label htmlFor={id}>
+              <HStack space="1" alignItems="center">
+                <H2 color="textMaroonColor.400">{t(label)}</H2>
+                <H2 color="textMaroonColor.400">{required ? "*" : null}</H2>
+              </HStack>
+            </label>
+          )}
+          {description?.props?.description !== "" && description}
+        </Box>
+      )}
+      <Box>
+        {children}
+        {errors}
+        {help}
+      </Box>
+    </VStack>
   );
 };
 export const ObjectFieldTemplate = (props) => {
   return (
-    <div>
+    <VStack alignItems="center" space="6">
       {props.properties.map((element, index) => (
-        <div className="property-wrapper" key={`element${index}`}>
+        <VStack key={`element${index}`} w="100%">
           {element.content}
-        </div>
+        </VStack>
       ))}
-    </div>
+    </VStack>
   );
 };
 
 export const ArrayFieldTitleTemplate = (props) => {
   return <React.Fragment />;
 };
+
+export const CustomR = ({
+  options,
+  value,
+  onChange,
+  required,
+  schema,
+  ...props
+}) => {
+  return (
+    <CustomRadio
+      schema={schema}
+      options={options}
+      value={value}
+      required={required}
+      onChange={(value) => onChange(value)}
+    />
+  );
+};
+
+export const RadioBtn = ({ options, value, onChange, required, schema }) => {
+  const items = options?.enumOptions;
+  const { label } = schema ? schema : {};
+  return (
+    <FormControl gap="4">
+      {label && (
+        <FormControl.Label>
+          <H2 color="textMaroonColor.400">{t(label)}</H2>
+          {required && <H2 color="textMaroonColor.400">*</H2>}
+        </FormControl.Label>
+      )}
+      <Radio.Group
+        colorScheme="secondaryBlue"
+        key={items}
+        pb="4"
+        value={value}
+        accessibilityLabel="Pick your favorite number"
+        onChange={(value) => onChange(value)}
+      >
+        <Stack
+          direction={{
+            base: "column",
+            md: "row",
+          }}
+          alignItems={{
+            base: "flex-start",
+            md: "center",
+          }}
+          space={4}
+          w="75%"
+          gap="4"
+        >
+          {items?.map((item) => (
+            <Radio
+              key={item?.value}
+              value={item?.value}
+              size="lg"
+              _text={{ fontSize: 12, fontWeight: 500 }}
+            >
+              {item?.label}
+            </Radio>
+          ))}
+        </Stack>
+      </Radio.Group>
+    </FormControl>
+  );
+};
+
+export const Aadhaar = (props) => {
+  return (
+    <VStack space="10">
+      <Image
+        alignSelf="center"
+        source={{ uri: "/Aadhaar2.png" }}
+        w="248"
+        h="140"
+      />
+      <FloatingInput {...props} />
+    </VStack>
+  );
+};
diff --git a/apps/front-end/src/component/Chip.js b/apps/front-end/src/component/Chip.js
index d5dbbdff3..8a1906475 100644
--- a/apps/front-end/src/component/Chip.js
+++ b/apps/front-end/src/component/Chip.js
@@ -26,7 +26,7 @@ export function ChipStatus({ status, ...props }) {
   const [newStatus, setNewStatus] = React.useState(status);
 
   React.useEffect(() => {
-    switch (status?.toLowerCase()) {
+    switch (status && status?.toLowerCase()) {
       case "screened":
         setColor("green.300");
         setNewStatus(t("SCREENED"));
diff --git a/apps/front-end/src/component/CustomRadio.js b/apps/front-end/src/component/CustomRadio.js
index 9a3b32f92..1c5114ada 100644
--- a/apps/front-end/src/component/CustomRadio.js
+++ b/apps/front-end/src/component/CustomRadio.js
@@ -1,41 +1,98 @@
-import { Box, FormControl, HStack, Pressable } from "native-base";
+import { IconByName, chunk, t, H2 } from "@shiksha/common-lib";
+import {
+  Box,
+  Pressable,
+  Text,
+  VStack,
+  Stack,
+  FormControl,
+  HStack,
+} from "native-base";
 import React from "react";
 
 export default function CustomRadio({
+  options,
   value,
-  label,
-  items,
   onChange,
-  itemElement,
-  _box,
+  schema,
+  required,
 }) {
+  const { _hstack, icons, _pressable, grid, label } = schema;
+  const { enumOptions } = options;
+  let items = [enumOptions];
+  if (grid && enumOptions?.constructor.name === "Array") {
+    items = chunk(enumOptions, grid);
+  }
+
   return (
-    <FormControl>
-      <FormControl.Label>{label}</FormControl.Label>
-      <HStack space={"2"} flexWrap="wrap">
-        {items?.map((item, key) => (
-          <Pressable {...{ key }} onPress={() => onChange(item?.value)} mb="2">
-            {itemElement ? (
-              itemElement
-            ) : (
-              <Box
-                px="5"
-                py="2"
-                rounded={5}
-                borderWidth={1}
-                borderColor={value === item?.value ? "gray.900" : "gray.400"}
-                shadow={value === item?.value ? "2" : "0px"}
-                _text={{
-                  color: value === item?.value ? "gray.900" : "gray.500",
+    <FormControl gap="6">
+      {label && (
+        <FormControl.Label>
+          <H2 color="textMaroonColor.400">{t(label)}</H2>
+          {required && <H2 color="textMaroonColor.400">*</H2>}
+        </FormControl.Label>
+      )}
+      <Stack flexDirection={grid ? "column" : ""} {...(_hstack ? _hstack : {})}>
+        {items?.map((subItem, subKey) => (
+          <Box gap={"2"} key={subKey} flexDirection="row" flexWrap="wrap">
+            {subItem?.map((item, key) => (
+              <Pressable
+                key={key}
+                style={{
+                  background:
+                    value == item?.value
+                      ? "linear-gradient(91deg, rgb(8, 75, 130) -31.46%, #fff -31.44%, #084b822e -10.63%, rgb(0 0 0 / 0%) 26.75%, #fff 70.75%, #084b8224 108.28%, #084b8200 127.93%)"
+                      : "#FAFAFA",
                 }}
-                {..._box}
+                flexDirection="row"
+                alignItems="center"
+                flex={grid ? "1" : ""}
+                p="4"
+                rounded={5}
+                borderWidth={value == item?.value ? "2" : 1}
+                borderColor={
+                  value == item?.value ? "secondaryBlue.500" : "gray.400"
+                }
+                {...(icons?.[key]?.["_pressable"]
+                  ? icons?.[key]?.["_pressable"]
+                  : _pressable
+                  ? _pressable
+                  : {})}
+                onPress={() => onChange(item?.value)}
+                mb="2"
               >
-                {item?.label}
-              </Box>
-            )}
-          </Pressable>
+                <VStack alignItems="center" space="3" flex="1">
+                  {icons?.[key] && icons?.[key].name && (
+                    <IconByName
+                      {...icons[key]}
+                      isDisabled
+                      color={
+                        value === item?.value ? "secondaryBlue.500" : "gray.500"
+                      }
+                      _icon={{
+                        ...(icons?.[key]?.["_icon"]
+                          ? icons?.[key]?.["_icon"]
+                          : {}),
+                      }}
+                    />
+                  )}
+                  <Text
+                    textAlign="center"
+                    {...{
+                      color:
+                        value === item?.value
+                          ? "secondaryBlue.500"
+                          : "gray.500",
+                    }}
+                  >
+                    {item?.label}
+                  </Text>
+                </VStack>
+              </Pressable>
+            ))}
+          </Box>
         ))}
-      </HStack>
+      </Stack>
     </FormControl>
   );
 }
diff --git a/apps/front-end/src/component/Steper.js b/apps/front-end/src/component/Steper.js
index 26d2cc9b9..630720de1 100644
--- a/apps/front-end/src/component/Steper.js
+++ b/apps/front-end/src/component/Steper.js
@@ -1,4 +1,5 @@
-import { Box, HStack, Text, VStack } from "native-base";
+import { IconByName } from "@shiksha/common-lib";
+import { Box, HStack, Stack, Text, VStack } from "native-base";
 import React from "react";
 
 const Circal = ({ text, color, size, ...props }) => (
@@ -16,61 +17,112 @@ const Circal = ({ text, color, size, ...props }) => (
   </VStack>
 );
 
-export default function Steper({ steps, progress, cColor, rColor, size }) {
+export default function Steper({
+  type,
+  steps,
+  progress,
+  cColor,
+  rColor,
+  size,
+  bg,
+}) {
   progress = !isNaN(parseInt(progress)) ? parseInt(progress) : 0;
   const [per, setPer] = React.useState(0);
   const [stepPer, setStepPer] = React.useState(0);
+  const [stage, setStage] = React.useState({});
+  const ncColor = cColor ? cColor : "#084B82";
+  const nrColor = rColor ? rColor : "#CAE9FF";
 
   React.useEffect(() => {
-    let newPer = 0;
-    let stpeTotal = 0;
-    const resultPer = 100 / steps.length;
-    setStepPer(resultPer);
-    for (let i = 0; steps.length > i; i++) {
-      const e = parseInt(steps[i].value);
-      stpeTotal += e;
-      if (stpeTotal >= progress) {
-        const newC = e + progress - stpeTotal;
-        newPer += resultPer * (newC / e);
-        break;
-      } else {
-        newPer += resultPer;
+    if (steps?.length > 0) {
+      let newPer = 0;
+      let stpeTotal = 0;
+      const resultPer = 100 / steps?.length;
+      setStepPer(resultPer);
+      for (let i = 0; steps?.length > i; i++) {
+        const e = parseInt(steps[i].value);
+        stpeTotal += e;
+        if (stpeTotal >= progress) {
+          const newC = e + progress - stpeTotal;
+          newPer += resultPer * (newC / e);
+          setStage({ ...steps[i], index: i });
+          break;
+        } else {
+          setStage({ ...steps[i], index: i });
+          newPer += resultPer;
+        }
       }
+      setPer(newPer);
+    } else {
+      setPer(progress);
     }
-    setPer(newPer);
   }, [progress]);
 
+  if (!type) {
+    return (
+      <LineSteper
+        {...{
+          per,
+          stepPer,
+          steps,
+          cColor: ncColor,
+          rColor: nrColor,
+          size,
+          stage,
+        }}
+      />
+    );
+  }
+
+  return (
+    <CircalSteper
+      {...{ steps, size, cColor: ncColor, rColor: nrColor, bg, per, stage }}
+    />
+  );
+}
+
+const LineSteper = ({ per, stepPer, steps, cColor, rColor, size }) => {
   return (
     <Box position="relative">
       <Box
-        bg={rColor ? rColor : "gray.300"}
+        bg={rColor}
         height={size ? parseInt(size) / 10 : 1}
         w={"100%"}
         position="absolute"
       />
       <Box
         position="absolute"
-        bg={cColor ? cColor : "gray.500"}
+        bg={cColor}
         height={size ? parseInt(size) / 10 : 1}
-        width={`${per}%`}
+        width={`${Math.ceil(steps?.length > 0 ? per : progress)}%`}
       />
       <HStack justifyContent={"space-between"}>
-        {steps.map((e, key) => (
+        {steps?.length > 0 ? (
+          steps?.map((e, key) => (
+            <Circal
+              key={key}
+              text={e.label}
+              color={rColor}
+              size={size}
+              borderWidth={(key + 1) * stepPer <= per ? 0 : 1}
+              left={-1}
+              bg={key * stepPer <= per ? cColor : "white"}
+            />
+          ))
+        ) : (
           <Circal
-            key={key}
-            text={e.label}
             color={rColor}
             size={size}
-            borderWidth={(key + 1) * stepPer <= per ? 0 : 1}
+            borderWidth={0}
             left={-1}
-            bg={key * stepPer <= per ? (cColor ? cColor : "gray.500") : "white"}
+            bg={cColor}
           />
-        ))}
+        )}
         <Circal
           color={rColor}
           size={size}
           bg={
-            steps.length * stepPer <= per
+            steps?.length * stepPer <= per
               ? cColor
                 ? cColor
                 : "gray.500"
@@ -81,4 +133,63 @@ export default function Steper({ steps, progress, cColor, rColor, size }) {
       </HStack>
     </Box>
   );
-}
+};
+
+const CircalSteper = ({ steps, size, cColor, rColor, bg, per, stage }) => {
+  const nSize = parseInt(size ? size : "40px");
+  const fontSize = Math.floor(nSize / 5);
+  console.log(stage);
+  return (
+    <HStack space={4}>
+      <Stack
+        style={{
+          background: `radial-gradient(closest-side, ${
+            bg ? bg : "#F4F4F7"
+          } 59%, transparent 60% 100%), conic-gradient(${cColor} ${per}%, ${rColor} 0)`,
+          animation: "progress 2s 1 forwards",
+        }}
+        w={`${nSize}px`}
+        h={`${nSize}px`}
+        rounded="full"
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+      >
+        <Text fontSize={`${fontSize === 0 ? 1 : fontSize}px`}>
+          {steps?.length > 0 ? (
+            <HStack>
+              <Text>{per === 100 ? stage?.index + 1 : stage?.index}</Text>
+              <Text color="#9E9E9E">/{steps?.length}</Text>
+            </HStack>
+          ) : (
+            `${per}%`
+          )}
+        </Text>
+      </Stack>
+      {steps?.constructor?.name === "Array" && steps?.length > 0 && (
+        <VStack>
+          <HStack space={1} alignItems="center">
+            {steps
+              ?.map((e, key) => (
+                <Text key={key} fontSize="8px" fontWeight="400" color={cColor}>
+                  {e?.label}
+                </Text>
+              ))
+              .reduce((prev, curr) => [
+                prev,
+                <IconByName
+                  name="ArrowRightSLineIcon"
+                  isDisabled
+                  _icon={{ size: "10px" }}
+                />,
+                curr,
+              ])}
+          </HStack>
+          <Text fontSize="18px" fontWeight="700">
+            {stage?.index + 1}. {stage?.label}
+          </Text>
+        </VStack>
+      )}
+    </HStack>
+  );
+};
diff --git a/apps/front-end/src/component/Test.js b/apps/front-end/src/component/Test.js
index d9948fc90..41e315e2e 100644
--- a/apps/front-end/src/component/Test.js
+++ b/apps/front-end/src/component/Test.js
@@ -1,4 +1,4 @@
-import { Box, VStack } from "native-base";
+import { VStack } from "native-base";
 import React from "react";
 import Clipboard from "./Clipboard";
 
diff --git a/apps/front-end/src/pages/admin/AdminHome.js b/apps/front-end/src/pages/admin/AdminHome.js
index d558b228b..801129c39 100644
--- a/apps/front-end/src/pages/admin/AdminHome.js
+++ b/apps/front-end/src/pages/admin/AdminHome.js
@@ -144,7 +144,7 @@ export default function AdminHome({ footerLinks, userTokenInfo }) {
           maxH={Height - refAppBar?.clientHeight}
           minH={Height - refAppBar?.clientHeight}
         >
-          <Box flex={1} bg="white" roundedBottom={"2xl"} py={6} px={4} mb={5}>
+          <Box flex={1} roundedBottom={"2xl"} py={6} px={4} mb={5}>
             <Table facilitator={userTokenInfo?.authUser} />
           </Box>
         </ScrollView>
diff --git a/apps/front-end/src/pages/admin/facilitator/Profile.js b/apps/front-end/src/pages/admin/facilitator/Profile.js
index 36060de1c..401ea5023 100644
--- a/apps/front-end/src/pages/admin/facilitator/Profile.js
+++ b/apps/front-end/src/pages/admin/facilitator/Profile.js
@@ -6,26 +6,14 @@ import {
   H3,
   H1,
   H2,
-  BodyLarge,
+  ImageView,
   BodySmall,
   Loading,
   t,
 } from "@shiksha/common-lib";
-import {
-  Heading,
-  HStack,
-  Text,
-  VStack,
-  Box,
-  Avatar,
-  Stack,
-  Column,
-  Row,
-  Center,
-} from "native-base";
+import { Heading, HStack, Text, VStack, Box, Stack } from "native-base";
 import Chip from "component/Chip";
 import { useNavigate } from "react-router-dom";
-import { Primary } from "stories/Button.stories";
 
 export default function App({ footerLinks, userTokenInfo }) {
   const [data, setData] = React.useState();
@@ -54,14 +42,9 @@ export default function App({ footerLinks, userTokenInfo }) {
             />
             <H3> {t("PRERAK_BIO")}</H3>
           </HStack>
-          <Stack direction="row" justifyContent="spacearound">
-            <HStack
-              width="70%"
-              direction="column"
-              justifyContent="spacearound"
-              alignItems={"center"}
-            >
-              <HStack direction="row" justifyContent="flexStart" mb="6">
+          <HStack alignItems="center" flexWrap="wrap">
+            <HStack flex="0.7" direction="column">
+              <HStack alignItems="center" mb="6" space="4" flexWrap="wrap">
                 <H1>
                   {data?.first_name} {data?.last_name}
                 </H1>
@@ -80,7 +63,7 @@ export default function App({ footerLinks, userTokenInfo }) {
                     color="textGreyColor.300"
                     pt="1"
                   />
-                  <Text fontSize="12px">{data?.mobile}</Text>
+                  <BodyLarge>{data?.mobile}</BodyLarge>
                 </HStack>
                 <HStack bg="badgeColor.400" rounded={"md"} ml="4" py="1" px="1">
                   <IconByName
@@ -89,14 +72,14 @@ export default function App({ footerLinks, userTokenInfo }) {
                     name="MapPinLineIcon"
                     color="textGreyColor.300"
                   />
-                  <Text fontSize="12px">{data?.address}</Text>
+                  <BodyLarge>{data?.address}</BodyLarge>
                 </HStack>
               </HStack>
               <H2 fontSize="18" pb="2">
                 {" "}
                 {t("ELIGIBILITY_CRITERIA")}
               </H2>
-              <HStack>
+              <HStack width={"100%"}>
                 <IconByName
                   flex={0.3}
                   name="DonutChartLineIcon"
@@ -156,10 +139,10 @@ export default function App({ footerLinks, userTokenInfo }) {
               </HStack>
             </HStack>
             <HStack width="30%" pl="5">
-              {data?.profile_url ? (
-                <Avatar
+              {data?.documents?.[0]?.name ? (
+                <ImageView
                   source={{
-                    uri: data?.profile_url,
+                    uri: data?.documents?.[0]?.name,
                   }}
                   // alt="Alternate Text"
                   width={"190px"}
@@ -174,7 +157,7 @@ export default function App({ footerLinks, userTokenInfo }) {
                 />
               )}
             </HStack>
-          </Stack>
+          </HStack>
 
           <VStack space={"5"} p="5" mt="6">
             <H3>{t("APPLICATION_FORM")}</H3>
diff --git a/apps/front-end/src/pages/admin/facilitator/Table.js b/apps/front-end/src/pages/admin/facilitator/Table.js
index 5014711f1..4e5de7790 100644
--- a/apps/front-end/src/pages/admin/facilitator/Table.js
+++ b/apps/front-end/src/pages/admin/facilitator/Table.js
@@ -4,31 +4,49 @@ import {
   H1,
   H3,
   t,
+  ImageView,
+  BlueFillButton,
+  BlueOutlineButton,
 } from "@shiksha/common-lib";
 import { ChipStatus } from "component/Chip";
 import Clipboard from "component/Clipboard";
-import {
-  Button,
-  HStack,
-  Input,
-  Text,
-  VStack,
-  Modal,
-  Avatar,
-} from "native-base";
-import React, { useState, useEffect } from "react";
+import { Button, HStack, Input, Text, VStack, Modal } from "native-base";
+import React from "react";
 import DataTable from "react-data-table-component";
 import { useNavigate } from "react-router-dom";
-
+const customStyles = {
+  rows: {
+    style: {
+      minHeight: "72px", // override the row height
+      borderLeft: "4px solid transparent",
+      "&:hover": {
+        borderLeft: "4px solid #790000",
+        boxShadow: "1px 3px 4px rgba(0, 0, 0, 0.25)",
+        zIndex: "1",
+      },
+    },
+  },
+  headCells: {
+    style: {
+      background: "#E0E0E0",
+    },
+  },
+  cells: {
+    style: {
+      color: "#616161",
+      size: "14px",
+    },
+  },
+};
 const columns = (e) => [
   {
     name: t("FIRST_NAME"),
     selector: (row) => (
       <HStack alignItems={"center"} space="2">
-        {row?.profile_url ? (
-          <Avatar
+        {row?.documents?.[0]?.name ? (
+          <ImageView
             source={{
-              uri: row?.profile_url,
+              uri: row?.documents?.[0]?.name,
             }}
             // alt="Alternate Text"
             width={"35px"}
@@ -42,15 +60,17 @@ const columns = (e) => [
             _icon={{ size: "35" }}
           />
         )}
-        <Text>{row?.first_name + " " + row.last_name}</Text>
+        <Text fontSize="16px" bold>
+          {row?.first_name + " " + row.last_name}
+        </Text>
       </HStack>
     ),
     sortable: true,
     attr: "name",
   },
   {
-    name: t("EMAIL_ID"),
-    selector: (row) => row?.email_id,
+    name: t("MOBILE_NUMBER"),
+    selector: (row) => row?.mobile,
     sortable: true,
     attr: "email",
   },
@@ -104,7 +124,7 @@ function Table({ facilitator }) {
   const [loading, setLoading] = React.useState(true);
   const navigate = useNavigate();
 
-  useEffect(async () => {
+  React.useEffect(async () => {
     setLoading(true);
     const result = await facilitatorRegistryService.getAll(filterObj);
     setData(result.data);
@@ -112,13 +132,13 @@ function Table({ facilitator }) {
     setLoading(false);
   }, [filterObj]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setFilterObj({ page, limit });
   }, [page, limit]);
 
   return (
     <VStack>
-      <HStack justifyContent={"space-between"} flexWrap="Wrap">
+      <HStack justifyContent={"space-between"} my="1">
         <H1>{t("ALL_PRERAK")}</H1>
         {/* <Input
           InputLeftElement={
@@ -134,10 +154,30 @@ function Table({ facilitator }) {
           >
             {t("REGISTER_PRERAK")}
           </Button> */}
-
-          <Button variant={"primary"} onPress={() => setModal(true)}>
+          <BlueOutlineButton
+            _text={{ color: "#084B82" }}
+            shadow="BlueOutlineShadow"
+            onPress={() => setModal(true)}
+            rightIcon={
+              <IconByName
+                color="#084B82"
+                _icon={{}}
+                size="15px"
+                name="ShareLineIcon"
+              />
+            }
+          >
             {t("SEND_AN_INVITE")}
-          </Button>
+          </BlueOutlineButton>
+          {/* <BlueFillButton
+            mx="3"
+            shadow="BlueFillShadow"
+            rightIcon={
+              <IconByName color="white" size="20px" name="PencilLineIcon" />
+            }
+          >
+            {t("REGISTER_PRERAK")}
+          </BlueFillButton> */}
           <Modal
             isOpen={modal}
             onClose={() => setModal(false)}
@@ -195,18 +235,22 @@ function Table({ facilitator }) {
       </HStack>
 
       <DataTable
+        customStyles={customStyles}
         columns={[
           ...columns(),
           {
             name: t("ACTION"),
             selector: (row) => (
               <Button
-                size={"xs"}
+                size={"sm"}
+                px="5"
                 onPress={() => {
                   navigate(`/admin/view/${row?.id}`);
                 }}
               >
-                {t("VIEW")}
+                <Text fontSize="12px" color={"white"}>
+                  {t("VIEW")}
+                </Text>
               </Button>
             ),
           },
diff --git a/apps/front-end/src/pages/admin/facilitator/View.js b/apps/front-end/src/pages/admin/facilitator/View.js
index 7e99796c9..24604fd13 100644
--- a/apps/front-end/src/pages/admin/facilitator/View.js
+++ b/apps/front-end/src/pages/admin/facilitator/View.js
@@ -11,21 +11,22 @@ import {
   BodySmall,
   Loading,
   t,
+  ImageView,
 } from "@shiksha/common-lib";
 import { useNavigate, useParams } from "react-router-dom";
 import {
+  Box,
   Button,
   Center,
   Heading,
   HStack,
   Text,
   VStack,
-  Box,
-  Avatar,
 } from "native-base";
 import { ChipStatus } from "component/Chip";
 import NotFound from "../../NotFound";
 import StatusButton from "./view/StatusButton";
+import Steper from "component/Steper";
 
 const Experience = (obj) => {
   return (
@@ -140,13 +141,9 @@ export default function FacilitatorView({ footerLinks }) {
                 {t("ELIGIBILITY_CRITERIA")}
               </H2>
               <HStack width={"100%"}>
-                <IconByName
-                  flex={0.3}
-                  name="DonutChartLineIcon"
-                  isDisabled
-                  color="darkBlue.400"
-                  _icon={{ size: "100px" }}
-                />
+                <Box flex={0.3}>
+                  <Steper size={100} type="circle" progress={75} bg="white" />
+                </Box>
                 <VStack flex={0.7} space="2">
                   <HStack alignItems={"center"} space={"2"}>
                     <BodySmall> {t("QUALIFICATION")}</BodySmall>
@@ -199,10 +196,10 @@ export default function FacilitatorView({ footerLinks }) {
               </HStack>
             </VStack>
             <HStack flex="0.3" pl="5" justifyContent="center">
-              {data?.profile_url ? (
-                <Avatar
+              {data?.documents?.[0]?.name ? (
+                <ImageView
                   source={{
-                    uri: data?.profile_url,
+                    uri: data?.documents?.[0]?.name,
                   }}
                   // alt="Alternate Text"
                   width={"190px"}
@@ -221,7 +218,7 @@ export default function FacilitatorView({ footerLinks }) {
           <HStack alignItems={Center} space="9" pt="5">
             <VStack flex={0.3} space="5">
               <Button
-                variant="outlinePrimary"
+                bg="sendMessageBtn.200"
                 leftIcon={<IconByName isDisabled name="MessageLineIcon" />}
               >
                 {t("SEND_MESSAGE")}
@@ -231,42 +228,49 @@ export default function FacilitatorView({ footerLinks }) {
 
           <VStack space={"5"} p="5" mt="6">
             <H3>{t("APPLICATION_FORM")}</H3>
-            <HStack flex="1">
-              <VStack space="5" flex={1 / 2} bg="light.100" p="6" rounded="xl">
-                <Heading
-                  fontSize="16px"
+            <HStack justifyContent="space-between">
+              <VStack space={"5"} w="50%" bg="light.100" p="6" rounded="xl">
+                <HStack
+                  justifyContent="space-between"
+                  alignItems="center"
                   borderColor="light.400"
                   pb="1"
                   borderBottomWidth="1"
                 >
-                  {t("BASIC_DETAILS")}
-                </Heading>
-                <VStack>
+                  <Heading fontSize="16px">{t("BASIC_DETAILS")}</Heading>
+                  <IconByName
+                    color="editIcon.300"
+                    size="15px"
+                    name="EditBoxLineIcon"
+                  ></IconByName>
+                </HStack>
+
+                <HStack>
                   <Text color="warmGray.500">{t("FIRST_NAME")} </Text>
                   <Text>{showData(data?.first_name)}</Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("LAST_NAME")} </Text>
                   <Text>{showData(data?.last_name)}</Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("MOBILE_NO")} </Text>
                   <Text>{showData(data?.mobile)}</Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("DATE_OF_BIRTH")} </Text>
                   <Text>{showData(data?.dob)}</Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("GENDER")} </Text>
                   <Text>{showData(data?.gender)}</Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("ADDRESS")} </Text>
                   <Text>
                     {[
@@ -287,49 +291,56 @@ export default function FacilitatorView({ footerLinks }) {
                           .join(", ")
                       : "-"}
                   </Text>
-                </VStack>
+                </HStack>
 
-                <VStack>
+                <HStack>
                   <Text color="warmGray.500">{t("AADHAAR_NO")} </Text>
                   <Text>{showData(data?.aadhar_token)}</Text>
-                </VStack>
+                </HStack>
               </VStack>
               <HStack
-                space="5"
-                flex={1 / 2}
+                space="20px"
+                w="50%"
                 bg="light.100"
                 p="6"
                 ml="2"
                 rounded="xl"
               >
-                <VStack space="5" flex="1">
-                  <Heading
-                    fontSize="16px"
+                <VStack
+                  display="Flex"
+                  flexDirection="column"
+                  space="20px"
+                  w="100%"
+                >
+                  <HStack
+                    justifyContent="space-between"
+                    alignItems="center"
                     borderColor="light.400"
                     pb="1"
                     borderBottomWidth="1"
                   >
-                    {t("EDUCATION")}
-                  </Heading>
-                  <VStack space="4">
-                    <VStack space="2">
-                      <Text color="warmGray.500">{t("QUALIFICATION")} </Text>
-                      {data?.qualifications ? (
-                        data?.qualifications
-                          ?.filter(
-                            (e) =>
-                              e?.qualification_master?.type === "qualification"
-                          )
-                          ?.map((qua, key) => {
-                            return (
-                              <Text key={key}>
-                                {qua?.qualification_master?.name}
-                              </Text>
-                            );
-                          })
-                      ) : (
-                        <Text>{"-"}</Text>
-                      )}
+                    <Heading fontSize="16px">{t("EDUCATION")} </Heading>
+                    <IconByName
+                      color="editIcon.300"
+                      size="15px"
+                      name="EditBoxLineIcon"
+                    ></IconByName>
+                  </HStack>
+                  <VStack>
+                    <Text color="warmGray.500">{t("QUALIFICATION")} </Text>
+                    <VStack>
+                      {data?.qualifications
+                        ?.filter(
+                          (e) =>
+                            e?.qualification_master?.type === "qualification"
+                        )
+                        ?.map((qua, key) => {
+                          return (
+                            <Text key={key}>
+                              {qua?.qualification_master?.name}
+                            </Text>
+                          );
+                        })}
                     </VStack>
                     <VStack space="2">
                       <Text color="warmGray.500">
@@ -381,16 +392,22 @@ export default function FacilitatorView({ footerLinks }) {
                       </VStack>
                     </VStack>
                   </VStack>
-                  <VStack display="Flex" flexDirection="column" space="20px">
-                    <Heading
-                      fontSize="16px"
+                  <HStack space="20px">
+                    <HStack
+                      justifyContent="space-between"
+                      alignItems="center"
                       borderColor="light.400"
                       pb="1"
                       borderBottomWidth="1"
                     >
-                      {t("OTHER_DETAILS")}
-                    </Heading>
-                    <VStack>
+                      <Heading fontSize="16px">{t("OTHER_DETAILS")}</Heading>
+                      <IconByName
+                        color="editIcon.300"
+                        size="15px"
+                        name="EditBoxLineIcon"
+                      ></IconByName>
+                    </HStack>
+                    <HStack>
                       <Text color="warmGray.500">{t("AVAILABILITY")} </Text>
                       <Text>
                         {showData(
@@ -400,16 +417,16 @@ export default function FacilitatorView({ footerLinks }) {
                           )
                         )}
                       </Text>
-                    </VStack>
-                    <VStack>
+                    </HStack>
+                    <HStack>
                       <Text color="warmGray.500">{t("DEVICE_OWNERSHIP")} </Text>
                       <Text>{showData(data?.device_ownership)}</Text>
-                    </VStack>
-                    <VStack>
+                    </HStack>
+                    <HStack>
                       <Text color="warmGray.500">{t("TYPE_OF_DEVICE")} </Text>
                       <Text>{showData(data?.device_type)}</Text>
-                    </VStack>
-                  </VStack>
+                    </HStack>
+                  </HStack>
                 </VStack>
               </HStack>
             </HStack>
diff --git a/apps/front-end/src/pages/admin/facilitator/view/StatusButton.js b/apps/front-end/src/pages/admin/facilitator/view/StatusButton.js
index 23c451094..93fa45aca 100644
--- a/apps/front-end/src/pages/admin/facilitator/view/StatusButton.js
+++ b/apps/front-end/src/pages/admin/facilitator/view/StatusButton.js
@@ -139,10 +139,23 @@ export default function StatusButton({ data, setData }) {
   }, [data?.status]);
 
   return (
-    <Box display="inline-flex" flexWrap="wrap" flexDirection="row" gap="4">
+    <Box
+      display="inline-flex"
+      flexWrap="wrap"
+      flexDirection="row"
+      gap="4"
+      my="2"
+    >
       <Button
-        variant={"outlinePrimary"}
+        variant={"statusBtnAdmin"}
         colorScheme="success"
+        leftIcon={
+          <IconByName
+            name="CheckboxCircleLineIcon"
+            _icon={{ color: "#00D790" }}
+            size="20px"
+          ></IconByName>
+        }
         onPress={() => {
           setShowModal("screened");
           setReason();
@@ -252,7 +265,7 @@ export default function StatusButton({ data, setData }) {
                 <HStack flex={0.3}></HStack>
               </HStack>
               <HStack alignItems="center" space={2} justifyContent="end">
-                <Button variant="outlinePrimary" onPress={() => setShowModal()}>
+                <Button variant="statusBtnAdmin" onPress={() => setShowModal()}>
                   {t("CANCEL")}
                 </Button>
                 <Button variant="primary" onPress={() => update("screened")}>
@@ -266,7 +279,7 @@ export default function StatusButton({ data, setData }) {
       {statusList.map(({ name, ...item }) => (
         <Button
           key={name}
-          variant={"outlinePrimary"}
+          variant={"statusBtnAdmin"}
           colorScheme="warning"
           {...item}
           isDisabled={!disabledBtn.includes(item?.status)}
@@ -339,7 +352,7 @@ export default function StatusButton({ data, setData }) {
               <HStack alignItems="center" space={5}>
                 <Button
                   flex="1"
-                  variant="outlinePrimary"
+                  variant="statusBtnAdmin"
                   colorScheme="blueGray"
                   onPress={() => setShowModal()}
                 >
diff --git a/apps/front-end/src/pages/front-end/Dashboard.js b/apps/front-end/src/pages/front-end/Dashboard.js
index 5c56a8c1a..960324554 100644
--- a/apps/front-end/src/pages/front-end/Dashboard.js
+++ b/apps/front-end/src/pages/front-end/Dashboard.js
@@ -5,17 +5,51 @@ import {
   IconByName,
   Layout,
   t,
+  ButtonStyle,
+  SelectStyle,
+  RedOutlineButton,
 } from "@shiksha/common-lib";
 import { ChipStatus } from "component/Chip";
-import { HStack, Pressable, VStack } from "native-base";
+import {
+  HStack,
+  Pressable,
+  VStack,
+  Box,
+  Stack,
+  Button,
+  Text,
+  View,
+  Center,
+  Alert,
+  Badge,
+  Select,
+  Image,
+} from "native-base";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 
-export default function Dashboard({ userTokenInfo }) {
+export default function Dashboard({ userTokenInfo, footerLinks }) {
   const [facilitator, setFacilitator] = React.useState({});
   const navigate = useNavigate();
   const { form_step_number } = facilitator;
 
+  const styles = {
+    inforBox: {
+      style: {
+        background:
+          "linear-gradient(75.39deg, rgba(255, 255, 255, 0) -7.58%, rgba(255, 255, 255, 0) -7.57%, rgba(255, 255, 255, 0.352337) -7.4%, #CAE9FF 13.31%, #CAE9FF 35.47%, #CAE9FF 79.94%, rgba(255, 255, 255, 0.580654) 103.6%, rgba(255, 255, 255, 0) 108.42%)",
+      },
+    },
+    AddAnAgShadowBox: {
+      style: {
+        boxShadow: "2px 3px 0px #790000",
+        border: "1px solid #790000",
+        borderRadius: "10px",
+        padding: "50px",
+      },
+    },
+  };
+
   React.useEffect(async () => {
     if (userTokenInfo) {
       const fa_id = localStorage.getItem("id");
@@ -24,49 +58,474 @@ export default function Dashboard({ userTokenInfo }) {
     }
   }, []);
   return (
-    <Layout>
-      <VStack space="5">
-        <HStack
-          p="5"
-          space="5"
-          borderBottomWidth="1"
-          borderBottomColor={"gray.300"}
-        >
-          <IconByName
-            isDisabled
-            name="FileCopyLineIcon"
-            _icon={{ size: "40px" }}
-          />
-          <VStack>
-            <H2>{t("APPLICATION_UNDER_REVIEW")}</H2>
-            <BodySmall>{t("MEANWHILE_PROFILE")}</BodySmall>
-          </VStack>
-        </HStack>
-        <VStack p="5" space="5">
-          {!form_step_number ||
-          (form_step_number && parseInt(form_step_number) < 13) ? (
-            <Pressable onPress={(e) => navigate("/form")}>
-              <HStack
-                borderWidth="1"
-                p="5"
+    <Layout
+      _appBar={{ profile_url: facilitator?.documents?.[0]?.name }}
+      _footer={{ menues: footerLinks }}
+    >
+      <VStack pb="5" bg="gray.200">
+        <VStack space="5">
+          <HStack
+            p="5"
+            space="5"
+            borderBottomWidth="1"
+            borderBottomColor={"gray.300"}
+            bg="info.200"
+            {...styles.inforBox}
+          >
+            <IconByName
+              flex="0.1"
+              isDisabled
+              name="UserLineIcon"
+              _icon={{ size: "25px" }}
+            />
+            <VStack flex="0.9">
+              <H2
+                wordWrap="break-word"
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              >
+                {t("APPLICATION_UNDER_REVIEW")}
+              </H2>
+              <BodySmall
+                wordWrap="break-word"
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              >
+                {t("MEANWHILE_PROFILE")}
+              </BodySmall>
+            </VStack>
+          </HStack>
+          <HStack flex="1" px="4">
+            <Text
+              fontSize="lg"
+              bold
+              color="textMaroonColor.400"
+              pl="1"
+              textAlign="center"
+              wordWrap="break-word"
+              whiteSpace="nowrap"
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {t("WELCOME")} {facilitator?.first_name},
+            </Text>
+          </HStack>
+          {/* <Stack bg="bgPinkColor.300" space="6" p={4}>
+            <Text fontSize="lg" bold color="textMaroonColor.400">
+              {t("UPLOAD_YOUR_DOCUMENTS")}
+            </Text>
+            <Text fontSize="sm">
+              You need to upload these documents before attending your Pragati
+              orientation
+            </Text>
+            <HStack space="2">
+              <IconByName
+                isDisabled
+                name="CheckboxCircleLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <VStack>
+                <Text fontSize="sm" bold>
+                  {t("QUALIFICATION_PROOF")}
+                </Text>
+                <Text fontSize="xs">
+                  (This can be your highest grade or graduation certificate)
+                </Text>
+              </VStack>
+            </HStack>
+            <HStack space="2">
+              <IconByName
+                isDisabled
+                name="CheckboxCircleLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <VStack>
+                <Text fontSize="sm" bold>
+                  {t("WORK_EXPERIENCE_PROOF")}
+                </Text>
+                <Text fontSize="xs">
+                  (This can be letter of recommendation from your
+                  company/workplace)
+                </Text>
+              </VStack>
+            </HStack>
+            <HStack space="2">
+              <IconByName
+                isDisabled
+                name="CheckboxCircleLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <VStack>
+                <Text fontSize="sm" bold>
+                  {t("VOLUNTEER_EXPERIENCE_PROOF")}
+                </Text>
+                <Text fontSize="xs">
+                  (This can be references or letter of recommendation from the
+                  organization)
+                </Text>
+              </VStack>
+            </HStack>
+            <HStack>
+              <ButtonStyle
+                shadow="RedFillShadow"
+                width="100%"
+                fontSize="lg"
+                endIcon={
+                  <IconByName
+                    isDisabled
+                    name="Upload2FillIcon"
+                    _icon={{ size: "25px" }}
+                  />
+                }
+                bold
+              >
+                <Text fontSize="lg" bold color="white">
+                  {" "}
+                  {t("UPLOAD_NOW")}
+                </Text>
+              </ButtonStyle>
+            </HStack>
+          </Stack> */}
+          {/* Application status Interview */}
+          {/* <Stack space="5" p="5">
+            <Text fontSize="sm" bold>
+              {t("INTERVIEW_DETAILS")}
+            </Text>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="UserLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">{t("CONDUCTED_BY")}: IP Name</Text>
+            </HStack>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="TimeLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">9th April, 11 am</Text>
+            </HStack>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="MapPinLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">{t("ONLINE")}: Google Meet</Text>
+            </HStack>
+            <HStack space="2">
+              <Button
+                shadow="RedOutlineShadow"
+                variant="redOutlineBtn"
                 rounded="full"
-                justifyContent="center"
+                width="50%"
               >
-                <H2>{t("COMPLETE_FORM")}</H2>
-              </HStack>
-            </Pressable>
-          ) : (
-            <React.Fragment />
-          )}
-          <ChipStatus
-            status={facilitator?.status}
-            flex="1"
-            py="5"
-            rounded="full"
-            _text={{ textAlign: "center", textTransform: "capitalize" }}
-            justifyContent="center"
-          />
+                <Text fontSize="lg" bold color="textMaroonColor.400">
+                  {t("REJECT")}{" "}
+                </Text>
+              </Button>
+              <ButtonStyle shadow="RedFillShadow" width="50%">
+                <Text fontSize="lg" bold color="white">
+                  {t("ACCEPT")}
+                </Text>
+              </ButtonStyle>
+            </HStack>
+          </Stack> */}
+          {/* Application Shortlist */}
+          {/* <Stack bg="bgPinkColor.300" space="6" p={4}>
+            <Text fontSize="sm" bold>
+              {t("ORIENTATION_DETAILS")}
+            </Text>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="UserLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">{t("CONDUCTED_BY")}: IP Name</Text>
+            </HStack>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="TimeLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">9th April, 11 am</Text>
+            </HStack>
+            <HStack space="5">
+              <IconByName
+                isDisabled
+                name="MapPinLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm">{t("ONLINE")}: Google Meet</Text>
+            </HStack>
+            <HStack space="2">
+              <Button
+                shadow="RedOutlineShadow"
+                variant="redOutlineBtn"
+                rounded="full"
+                width="50%"
+              >
+                <Text fontSize="lg" bold color="textMaroonColor.400">
+                  {t("REJECT")}{" "}
+                </Text>
+              </Button>
+              <ButtonStyle shadow="RedFillShadow" width="50%">
+                <Text fontSize="lg" bold color="white">
+                  {t("ACCEPT")}
+                </Text>
+              </ButtonStyle>
+            </HStack>
+            <HStack>
+              <IconByName
+                isDisabled
+                name="FileTextLineIcon"
+                _icon={{ size: "20px" }}
+              />
+              <Text fontSize="sm" space="1" pl="2">
+                {t("DOCUMENTS_YOU_NEED_TO_CARRY")}
+              </Text>
+            </HStack>
+            <Text fontSize="sm">
+              Make sure you have the following list of documents with you when
+              you attend the orientation.
+            </Text>
+            <View style={{ marginBottom: 10 }} space="3">
+              <Text
+                style={{ fontSize: 14 }}
+              >{`\u2022 Original Aadhaar Card`}</Text>
+              <Text
+                style={{ fontSize: 14 }}
+              >{`\u2022 Graduation Certificates`}</Text>
+              <Text
+                style={{ fontSize: 14 }}
+              >{`\u2022 Work Experience Proof`}</Text>
+              <Text
+                style={{ fontSize: 14 }}
+              >{`\u2022 Volunteer Experience Proof`}</Text>
+            </View>
+          </Stack> */}
+          {/* <HStack px="2">
+            <svg
+              width="32"
+              height="22"
+              viewBox="0 0 16 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.20848 15.2996C6.59344 14.806 0.882137 9.25199 0.818298 9.19126C0.566054 8.93902 0.407233 8.67743 0.363636 8.43764C0.318481 8.18851 0.394777 7.97052 0.597195 7.76811C0.7856 7.5797 1.01604 7.48005 1.26362 7.48005C1.56569 7.48005 1.87554 7.6233 2.13402 7.88333L4.72341 10.3715C4.76857 10.4151 4.82773 10.4369 4.88534 10.4369C4.94607 10.4369 5.00524 10.4136 5.05039 10.3684C5.1407 10.2781 5.1407 10.1317 5.05195 10.0414L0.91795 5.77195C0.503771 5.35777 0.309138 4.72405 0.80117 4.23202C0.989575 4.04361 1.22002 3.94396 1.46759 3.94396C1.76966 3.94396 2.07952 4.08721 2.33799 4.34724L6.56697 8.47034C6.61213 8.51394 6.6713 8.5373 6.73046 8.5373C6.78963 8.5373 6.85036 8.51394 6.89551 8.46878C6.98582 8.37847 6.98738 8.23211 6.89707 8.14024L1.81793 2.93343C1.58282 2.69831 1.44112 2.41648 1.41621 2.14244C1.39285 1.86373 1.49095 1.60525 1.70115 1.39505C1.88956 1.20665 2.12 1.10699 2.36757 1.10699C2.66965 1.10699 2.9795 1.25024 3.23797 1.50872L8.41832 6.55983C8.46348 6.60342 8.52264 6.62678 8.58181 6.62678C8.64098 6.62678 8.7017 6.60342 8.74686 6.55827C8.83717 6.46796 8.83873 6.3216 8.74842 6.22973L4.98655 2.36354C4.74988 2.12687 4.60819 1.8466 4.58483 1.57256C4.56148 1.29384 4.65957 1.03537 4.86977 0.825166C5.05818 0.636761 5.28862 0.537109 5.5362 0.537109C5.83827 0.537109 6.14812 0.680359 6.4066 0.940389C7.78615 2.29503 11.3876 5.83735 11.5091 5.96814C11.9715 6.28734 12.065 5.80465 12.0883 5.49168C12.1148 5.12733 11.6975 3.85521 11.9404 2.71077C12.3483 1.18952 13.5239 1.43865 13.5504 1.4511C14.195 1.75318 14.072 2.20472 13.8431 3.11249L13.8198 3.29155C13.58 4.47803 15.2274 7.99388 15.3488 8.25702C15.995 9.67084 16.7393 12.5374 14.2744 15.0022C11.5729 17.7037 8.22836 16.3195 7.20848 15.2996Z"
+                fill="url(#paint0_radial_553_126543)"
+              />
+              <defs>
+                <radialGradient
+                  id="paint0_radial_553_126543"
+                  cx="0"
+                  cy="0"
+                  r="1"
+                  gradientUnits="userSpaceOnUse"
+                  gradientTransform="translate(4.79756 4.48736) rotate(-45) scale(14.1704)"
+                >
+                  <stop offset="0.3533" stopColor="#F9DDBD" />
+                  <stop offset="0.8723" stopColor="#FFD29C" />
+                </radialGradient>
+              </defs>
+            </svg>
+          </HStack> */}
+          {/* <HStack space="2" alignItems="Center" width="100%" justifyContent="space-evenly" px="5">
+              <VStack  space={2} width="50%">
+                <Button alignItems="Center" variant='outline'  py="5">
+                    <IconByName
+                        isDisabled
+                        name="UserAddLineIcon"
+                        _icon={{ size: "60px" }}
+                      />
+                      <Text fontSize="md">{t("ADD_AN_AG")}</Text>
+                </Button>
+              </VStack>
+            
+              <VStack width="50%" space={2} >
+              <Button  variant='outline'   py="5">
+                <IconByName
+                    isDisabled
+                    name="BriefcaseLineIcon"
+                    _icon={{ size: "60px" }}
+                  />
+                  <Text fontSize="md">{t("PRERAK_DUTIES")}</Text>
+                </Button>
+              </VStack>
+          </HStack> */}
+
+          {/* <Stack bg="white" space="5" p="5">
+            <Text fontSize="lg" bold>
+              {t("COMPLETE_YOUR_AADHAR_VERIFICATION_NOW")}
+            </Text>
+            <ButtonStyle rounded={"full"} width="100%" shadow="RedFillShadow">
+              <Text fontSize="lg" bold color="white">
+                {t("AADHAR_NUMBER_KYC")}
+              </Text>
+            </ButtonStyle>
+            <Button
+              rounded={"full"}
+              width="100%"
+              variant="redOutlineBtn"
+              shadow="RedOutlineShadow"
+            >
+              <Text color="textMaroonColor.400" fontSize="lg" bold>
+                {t("SCAN_QR_CODE")}
+              </Text>
+            </Button>
+          </Stack> */}
+          {/* <HStack px="2">
+            <svg
+              width="32"
+              height="22"
+              viewBox="0 0 16 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.20848 15.2996C6.59344 14.806 0.882137 9.25199 0.818298 9.19126C0.566054 8.93902 0.407233 8.67743 0.363636 8.43764C0.318481 8.18851 0.394777 7.97052 0.597195 7.76811C0.7856 7.5797 1.01604 7.48005 1.26362 7.48005C1.56569 7.48005 1.87554 7.6233 2.13402 7.88333L4.72341 10.3715C4.76857 10.4151 4.82773 10.4369 4.88534 10.4369C4.94607 10.4369 5.00524 10.4136 5.05039 10.3684C5.1407 10.2781 5.1407 10.1317 5.05195 10.0414L0.91795 5.77195C0.503771 5.35777 0.309138 4.72405 0.80117 4.23202C0.989575 4.04361 1.22002 3.94396 1.46759 3.94396C1.76966 3.94396 2.07952 4.08721 2.33799 4.34724L6.56697 8.47034C6.61213 8.51394 6.6713 8.5373 6.73046 8.5373C6.78963 8.5373 6.85036 8.51394 6.89551 8.46878C6.98582 8.37847 6.98738 8.23211 6.89707 8.14024L1.81793 2.93343C1.58282 2.69831 1.44112 2.41648 1.41621 2.14244C1.39285 1.86373 1.49095 1.60525 1.70115 1.39505C1.88956 1.20665 2.12 1.10699 2.36757 1.10699C2.66965 1.10699 2.9795 1.25024 3.23797 1.50872L8.41832 6.55983C8.46348 6.60342 8.52264 6.62678 8.58181 6.62678C8.64098 6.62678 8.7017 6.60342 8.74686 6.55827C8.83717 6.46796 8.83873 6.3216 8.74842 6.22973L4.98655 2.36354C4.74988 2.12687 4.60819 1.8466 4.58483 1.57256C4.56148 1.29384 4.65957 1.03537 4.86977 0.825166C5.05818 0.636761 5.28862 0.537109 5.5362 0.537109C5.83827 0.537109 6.14812 0.680359 6.4066 0.940389C7.78615 2.29503 11.3876 5.83735 11.5091 5.96814C11.9715 6.28734 12.065 5.80465 12.0883 5.49168C12.1148 5.12733 11.6975 3.85521 11.9404 2.71077C12.3483 1.18952 13.5239 1.43865 13.5504 1.4511C14.195 1.75318 14.072 2.20472 13.8431 3.11249L13.8198 3.29155C13.58 4.47803 15.2274 7.99388 15.3488 8.25702C15.995 9.67084 16.7393 12.5374 14.2744 15.0022C11.5729 17.7037 8.22836 16.3195 7.20848 15.2996Z"
+                fill="url(#paint0_radial_553_126543)"
+              />
+              <defs>
+                <radialGradient
+                  id="paint0_radial_553_126543"
+                  cx="0"
+                  cy="0"
+                  r="1"
+                  gradientUnits="userSpaceOnUse"
+                  gradientTransform="translate(4.79756 4.48736) rotate(-45) scale(14.1704)"
+                >
+                  <stop offset="0.3533" stop-color="#F9DDBD" />
+                  <stop offset="0.8723" stop-color="#FFD29C" />
+                </radialGradient>
+              </defs>
+            </svg>
+            <Text fontSize="lg" bold color="textMaroonColor.400" pl="1">
+              {t("WELCOME")} Rachana
+            </Text>
+          </HStack> */}
+          {/* potential prerak  */}
+          {/* <RedOutlineButton
+            background="#FCEEE2"
+            mx="5"
+            width="20%"
+            shadow="RedBoxShadow"
+          >
+            <Image
+              source={{
+                uri: "/addAg.svg",
+              }}
+              alt="Add AG"
+              size={"sm"}
+              resizeMode="contain"
+            />
+            <Text color="textMaroonColor.400" fontSize="lg" bold>
+              Add an AG
+            </Text>
+          </RedOutlineButton> */}
+          {/* <Stack px="3">
+            <Text fontSize="lg" bold mx="5">
+              It’s Time to Start Mobilizing!
+            </Text>
+            <Alert
+              mx={3}
+              status="info"
+              colorScheme="info"
+              textAlign={Center}
+              my="4"
+            >
+              <VStack space={2} flexShrink={1}>
+                <HStack
+                  flexShrink={1}
+                  space={2}
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <HStack flexShrink={1} space={2} alignItems="center">
+                    <Alert.Icon />
+                    You will need to Enroll atleast 15 AG learners to set up a
+                    viable camp
+                  </HStack>
+                </HStack>
+              </VStack>
+            </Alert>
+
+            <Button
+              variant="redOutlineBtn"
+              rounded="full"
+              width="100%"
+              shadow="RedOutlineShadow"
+            >
+              <Text fontSize="lg" bold color="textMaroonColor.400">
+                {t("ADD_AN_AG_LEARNER")}{" "}
+              </Text>
+            </Button>
+          </Stack> */}
+          <VStack p="5" space="5">
+            {!form_step_number ||
+            (form_step_number && parseInt(form_step_number) < 10) ? (
+              <Pressable onPress={(e) => navigate("/form")}>
+                <HStack
+                  borderWidth="1"
+                  p="5"
+                  rounded="full"
+                  justifyContent="center"
+                >
+                  <H2>{t("COMPLETE_FORM")}</H2>
+                </HStack>
+              </Pressable>
+            ) : (
+              <React.Fragment />
+            )}
+            <ChipStatus
+              status={facilitator?.status}
+              flex="1"
+              py="5"
+              rounded="full"
+              _text={{ textAlign: "center", textTransform: "capitalize" }}
+              justifyContent="center"
+            />
+          </VStack>
         </VStack>
+        {/* <Box bg="white" py="5">
+          <HStack pb="2" justifyContent="space-around">
+            <SelectStyle placeholder="Status : All" mt={1} width="150px">
+              <Select.Item label="UX Research" value="ux" />
+              <Select.Item label="Web Development" value="web" />
+            </SelectStyle>
+            <SelectStyle placeholder="Sort By" mt={1} width="150px">
+              <Select.Item label="UX Research" value="ux" />
+              <Select.Item label="Web Development" value="web" />
+            </SelectStyle>
+          </HStack>
+          <HStack justifyContent="space-around" py="2" alignItems="center">
+            <IconByName name="AccountCircleLineIcon" width="60px"></IconByName>
+            <VStack>
+              <Text bold>Khushboo Verma</Text>
+              <BodySmall>+91-809876157</BodySmall>
+            </VStack>
+            <Badge colorScheme="info" rounded="8" _text={{ fontSize: 12 }}>
+              Identified
+            </Badge>
+          </HStack>
+          <HStack justifyContent="space-around" py="2" alignItems="center">
+            <IconByName name="AccountCircleLineIcon" width="60px"></IconByName>
+            <VStack>
+              <Text bold>Khushboo Verma</Text>
+              <BodySmall>+91-809876157</BodySmall>
+            </VStack>
+            <Badge colorScheme="success" rounded="8" _text={{ fontSize: 12 }}>
+              Enrolled
+            </Badge>
+          </HStack>
+        </Box> */}
       </VStack>
     </Layout>
   );
diff --git a/apps/front-end/src/pages/front-end/Form.js b/apps/front-end/src/pages/front-end/Form.js
index 54fc23663..c68e09cc0 100644
--- a/apps/front-end/src/pages/front-end/Form.js
+++ b/apps/front-end/src/pages/front-end/Form.js
@@ -10,15 +10,13 @@ import {
   HStack,
   Image,
   Modal,
-  Radio,
-  Stack,
   VStack,
 } from "native-base";
-import CustomRadio from "../../component/CustomRadio";
 import Steper from "../../component/Steper";
 import {
   facilitatorRegistryService,
   geolocationRegistryService,
+  uploadRegistryService,
   Camera,
   Layout,
   H1,
@@ -31,7 +29,6 @@ import {
   H2,
   getBase64,
   BodyMedium,
-  changeLanguage,
 } from "@shiksha/common-lib";
 import moment from "moment";
 import { useNavigate } from "react-router-dom";
@@ -42,53 +39,14 @@ import {
   FieldTemplate,
   ObjectFieldTemplate,
   ArrayFieldTitleTemplate,
+  CustomR,
+  RadioBtn,
+  Aadhaar,
+  BaseInputTemplate,
+  ArrayFieldTemplate,
 } from "../../component/BaseInput";
 import { useScreenshot } from "use-screenshot-hook";
 
-const CustomR = ({ options, value, onChange, required }) => {
-  return (
-    <CustomRadio
-      items={options?.enumOptions}
-      value={value}
-      required={required}
-      onChange={(value) => onChange(value)}
-    />
-  );
-};
-
-const RadioBtn = ({ options, value, onChange, required }) => {
-  const items = options?.enumOptions;
-  return (
-    <Radio.Group
-      name="exampleGroup"
-      defaultValue="1"
-      accessibilityLabel="pick a size"
-      value={value}
-      onChange={(value) => onChange(value)}
-    >
-      <Stack
-        direction={{
-          base: "column",
-          md: "row",
-        }}
-        alignItems={{
-          base: "flex-start",
-          md: "center",
-        }}
-        space={4}
-        w="75%"
-        maxW="300px"
-      >
-        {items.map((item) => (
-          <Radio key={item?.value} value={item?.value} size="lg">
-            {item?.label}
-          </Radio>
-        ))}
-      </Stack>
-    </Radio.Group>
-  );
-};
-
 // App
 export default function App({ facilitator, ip, onClick }) {
   const [page, setPage] = React.useState();
@@ -97,6 +55,7 @@ export default function App({ facilitator, ip, onClick }) {
   const [cameraModal, setCameraModal] = React.useState(false);
   const [credentials, setCredentials] = React.useState();
   const [cameraUrl, setCameraUrl] = React.useState();
+  const [cameraFile, setCameraFile] = React.useState();
   const [submitBtn, setSubmitBtn] = React.useState();
   const [addBtn, setAddBtn] = React.useState(t("YES"));
   const formRef = React.useRef();
@@ -108,14 +67,10 @@ export default function App({ facilitator, ip, onClick }) {
   const [lang, setLang] = React.useState(localStorage.getItem("lang"));
   const navigate = useNavigate();
   const { form_step_number } = facilitator;
-  if (form_step_number && parseInt(form_step_number) >= 13) {
+  if (form_step_number && parseInt(form_step_number) >= 10) {
     navigate("/dashboard");
   }
 
-  window.onbeforeunload = function () {
-    return false;
-  };
-
   const onPressBackButton = async () => {
     const data = await nextPreviewStep("p");
     if (data && onClick) {
@@ -151,52 +106,6 @@ export default function App({ facilitator, ip, onClick }) {
         hideClearButton: true,
       },
     },
-
-    qualification: {
-      "ui:widget": CustomR,
-    },
-    degree: {
-      "ui:widget": CustomR,
-    },
-    gender: {
-      "ui:widget": CustomR,
-    },
-    type_mobile: {
-      "ui:widget": CustomR,
-    },
-    sourcing_channel: {
-      "ui:widget": CustomR,
-    },
-    availability: {
-      "ui:widget": RadioBtn,
-    },
-    device_ownership: {
-      "ui:widget": RadioBtn,
-    },
-    device_type: {
-      "ui:widget": RadioBtn,
-    },
-    experience: {
-      related_to_teaching: {
-        "ui:widget": RadioBtn,
-      },
-    },
-    vo_experience: {
-      items: {
-        experience_in_years: { "ui:widget": CustomR },
-        related_to_teaching: {
-          "ui:widget": RadioBtn,
-        },
-      },
-    },
-    experience: {
-      items: {
-        experience_in_years: { "ui:widget": CustomR },
-        related_to_teaching: {
-          "ui:widget": RadioBtn,
-        },
-      },
-    },
   };
 
   const nextPreviewStep = async (pageStape = "n") => {
@@ -214,7 +123,7 @@ export default function App({ facilitator, ip, onClick }) {
         setPage(nextIndex);
         setSchema(properties[nextIndex]);
       } else if (pageStape.toLowerCase() === "n") {
-        await formSubmitUpdate({ ...formData, form_step_number: "13" });
+        await formSubmitUpdate({ ...formData, form_step_number: "10" });
         setPage("upload");
       } else {
         return true;
@@ -407,6 +316,22 @@ export default function App({ facilitator, ip, onClick }) {
     }
   };
 
+  const uploadProfile = async () => {
+    const { id } = facilitator;
+    if (id) {
+      const form_data = new FormData();
+      const item = {
+        file: cameraFile,
+        document_type: "profile",
+        user_id: id,
+      };
+      for (let key in item) {
+        form_data.append(key, item[key]);
+      }
+      return await uploadRegistryService.uploadFile(form_data);
+    }
+  };
+
   const formSubmitCreate = async (formData) => {
     return await facilitatorRegistryService.create({
       ...formData,
@@ -469,10 +394,21 @@ export default function App({ facilitator, ip, onClick }) {
     ["vo_experience", "experience"].forEach((keyex) => {
       data?.[keyex]?.map((item, index) => {
         ["role_title", "organization", "description"].forEach((key) => {
-          if (item?.[key] && !item?.[key]?.match(/^[a-zA-Z ]*$/g)) {
-            errors[keyex][index]?.[key]?.addError(
-              `${t("REQUIRED_MESSAGE")} ${t(schema?.properties?.[key]?.title)}`
-            );
+          if (item?.[key]) {
+            if (
+              !item?.[key]?.match(/^[a-zA-Z ]*$/g) ||
+              item?.[key]?.replaceAll(" ", "") === ""
+            ) {
+              errors[keyex][index]?.[key]?.addError(
+                `${t("REQUIRED_MESSAGE")} ${t(
+                  schema?.properties?.[key]?.title
+                )}`
+              );
+            } else if (key === "description" && item?.[key].length > 200) {
+              errors[keyex][index]?.[key]?.addError(
+                `${t("MAX_LENGHT_200")} ${t(schema?.properties?.[key]?.title)}`
+              );
+            }
           }
         });
       });
@@ -706,9 +642,12 @@ export default function App({ facilitator, ip, onClick }) {
         if (data?.error) {
           const newErrors = {
             mobile: {
-              __errors: data?.error
-                ? data?.error
-                : [t("MOBILE_NUMBER_ALREADY_EXISTS")],
+              __errors:
+                data?.error?.constructor?.name === "String"
+                  ? [data?.error]
+                  : data?.error?.constructor?.name === "Array"
+                  ? data?.error
+                  : [t("MOBILE_NUMBER_ALREADY_EXISTS")],
             },
           };
           setErrors(newErrors);
@@ -733,10 +672,10 @@ export default function App({ facilitator, ip, onClick }) {
 
   const handleFileInputChange = async (e) => {
     let file = e.target.files[0];
-    if (file.size <= 1048576 * 2) {
+    if (file.size <= 1048576 * 25) {
       const data = await getBase64(file);
       setCameraUrl(data);
-      setFormData({ ...formData, ["profile_url"]: data });
+      setCameraFile(file);
     } else {
       setErrors({ fileSize: t("FILE_SIZE") });
     }
@@ -758,12 +697,13 @@ export default function App({ facilitator, ip, onClick }) {
         <VStack py={6} px={4} mb={5} space="6">
           <Box p="10">
             <Steper
+              type={"circle"}
               steps={[
                 { value: "6", label: t("BASIC_DETAILS") },
                 { value: "3", label: t("WORK_DETAILS") },
-                { value: "4", label: t("OTHER_DETAILS") },
+                { value: "1", label: t("OTHER_DETAILS") },
               ]}
-              progress={page === "upload" ? 13 : page}
+              progress={page === "upload" ? 10 : page}
             />
           </Box>
           <H1 color="red.1000">{t("ADD_PROFILE_PHOTO")}</H1>
@@ -782,7 +722,7 @@ export default function App({ facilitator, ip, onClick }) {
           <Button
             variant={"primary"}
             onPress={async (e) => {
-              await formSubmitUpdate({ ...formData, form_step_number: "13" });
+              await uploadProfile();
               if (onClick) onClick("success");
             }}
           >
@@ -809,9 +749,9 @@ export default function App({ facilitator, ip, onClick }) {
           cameraModal,
           setCameraModal,
           cameraUrl,
-          setCameraUrl: async (url) => {
+          setCameraUrl: async (url, blob) => {
             setCameraUrl(url);
-            setFormData({ ...formData, ["profile_url"]: url });
+            setCameraFile(blob);
           },
         }}
       />
@@ -821,18 +761,19 @@ export default function App({ facilitator, ip, onClick }) {
   if (page === "upload") {
     return (
       <Layout
-        _appBar={{ onPressBackButton: (e) => setPage("13"), lang, setLang }}
+        _appBar={{ onPressBackButton: (e) => setPage("10"), lang, setLang }}
         _page={{ _scollView: { bg: "white" } }}
       >
         <VStack py={6} px={4} mb={5} space="6">
           <Box p="10">
             <Steper
+              type={"circle"}
               steps={[
                 { value: "6", label: t("BASIC_DETAILS") },
                 { value: "3", label: t("WORK_DETAILS") },
-                { value: "4", label: t("OTHER_DETAILS") },
+                { value: "1", label: t("OTHER_DETAILS") },
               ]}
-              progress={page === "upload" ? 13 : page}
+              progress={page === "upload" ? 10 : page}
             />
           </Box>
           <H1 color="red.1000">{t("JUST_ONE_STEP")}</H1>
@@ -855,22 +796,24 @@ export default function App({ facilitator, ip, onClick }) {
             {t("TAKE_PHOTO")}
           </Button>
           <VStack space={2}>
-            <input
-              accept="image/*"
-              type="file"
-              style={{ display: "none" }}
-              ref={uplodInputRef}
-              onChange={handleFileInputChange}
-            />
-            <Button
-              leftIcon={<IconByName name="Download2LineIcon" isDisabled />}
-              variant={"secondary"}
-              onPress={(e) => {
-                uplodInputRef?.current?.click();
-              }}
-            >
-              {t("UPLOAD_PHOTO")}
-            </Button>
+            <Box>
+              <input
+                accept="image/*"
+                type="file"
+                style={{ display: "none" }}
+                ref={uplodInputRef}
+                onChange={handleFileInputChange}
+              />
+              <Button
+                leftIcon={<IconByName name="Download2LineIcon" isDisabled />}
+                variant={"secondary"}
+                onPress={(e) => {
+                  uplodInputRef?.current?.click();
+                }}
+              >
+                {t("UPLOAD_PHOTO")}
+              </Button>
+            </Box>
             {errors?.fileSize ? (
               <H2 color="red.400">{errors?.fileSize}</H2>
             ) : (
@@ -880,7 +823,7 @@ export default function App({ facilitator, ip, onClick }) {
           <Button
             variant={"primary"}
             onPress={async (e) => {
-              await formSubmitUpdate({ ...formData, form_step_number: "13" });
+              await formSubmitUpdate({ ...formData, form_step_number: "10" });
               if (onClick) onClick("success");
             }}
           >
@@ -933,20 +876,23 @@ export default function App({ facilitator, ip, onClick }) {
     <Layout
       _appBar={{
         onPressBackButton,
-        exceptIconsShow: `${page}` === "1" ? ["backBtn"] : [],
+        exceptIconsShow: `${page}` === "1" ? ["backBtn"] : ["notificationBtn"],
         name: `${ip?.name}`.trim(),
         lang,
         setLang,
+        _box: { bg: "white", shadow: "appBarShadow" },
+        _backBtn: { borderWidth: 1, p: 0, borderColor: "btnGray.100" },
       }}
-      _page={{ _scollView: { bg: "white" } }}
+      _page={{ _scollView: { bg: "formBg.500" } }}
     >
       <Box py={6} px={4} mb={5}>
-        <Box px="2" py="10">
+        <Box px="2" pb="10">
           <Steper
+            type={"circle"}
             steps={[
               { value: "6", label: t("BASIC_DETAILS") },
               { value: "3", label: t("WORK_DETAILS") },
-              { value: "4", label: t("OTHER_DETAILS") },
+              { value: "1", label: t("OTHER_DETAILS") },
             ]}
             progress={page - 1}
           />
@@ -965,6 +911,7 @@ export default function App({ facilitator, ip, onClick }) {
           <Form
             key={lang + addBtn}
             ref={formRef}
+            widgets={{ RadioBtn, CustomR, Aadhaar }}
             templates={{
               ButtonTemplates: { AddButton, RemoveButton },
               FieldTemplate,
@@ -972,6 +919,8 @@ export default function App({ facilitator, ip, onClick }) {
               ObjectFieldTemplate,
               TitleFieldTemplate,
               DescriptionFieldTemplate,
+              BaseInputTemplate,
+              ArrayFieldTemplate,
             }}
             extraErrors={errors}
             showErrorList={false}
@@ -989,9 +938,10 @@ export default function App({ facilitator, ip, onClick }) {
             }}
           >
             <Button
-              mt="3"
               variant={"primary"}
               type="submit"
+              p="4"
+              mt="10"
               onPress={() => formRef?.current?.submit()}
             >
               {pages[pages?.length - 1] === page ? "Submit" : submitBtn}
@@ -1003,13 +953,11 @@ export default function App({ facilitator, ip, onClick }) {
       </Box>
       <Modal
         isOpen={credentials}
-        onClose={() => setCredentials(false)}
         safeAreaTop={true}
         size="xl"
         _backdrop={{ opacity: "0.7" }}
       >
         <Modal.Content>
-          {/* <Modal.CloseButton /> */}
           <Modal.Header p="5" borderBottomWidth="0">
             <H1 textAlign="center">{t("STORE_YOUR_CREDENTIALS")}</H1>
           </Modal.Header>
diff --git a/apps/front-end/src/pages/front-end/Home.js b/apps/front-end/src/pages/front-end/Home.js
index 2585b6edd..aa5e7736e 100644
--- a/apps/front-end/src/pages/front-end/Home.js
+++ b/apps/front-end/src/pages/front-end/Home.js
@@ -19,7 +19,7 @@ function Home({ userTokenInfo }) {
     if (userTokenInfo) {
       const fa_id = localStorage.getItem("id");
       const fa_data = await facilitatorRegistryService.getOne({ id: fa_id });
-      localStorage.setItem("profile_url", fa_data?.profile_url);
+      localStorage.setItem("profile_url", fa_data?.documents?.[0]?.name);
       setFacilitator(fa_data);
       if (fa_data?.program_faciltators?.parent_ip) {
         const ip_id = fa_data?.program_faciltators?.parent_ip;
@@ -31,7 +31,7 @@ function Home({ userTokenInfo }) {
       setPage("Form");
     } else {
       const data = await facilitatorRegistryService.getOrganization({ id });
-      localStorage.setItem("profile_url", data?.profile_url);
+      localStorage.setItem("profile_url", data?.documents?.[0]?.name);
       setIp(data);
     }
   }, []);
diff --git a/apps/front-end/src/pages/parts/schema.js b/apps/front-end/src/pages/parts/schema.js
index 8dc5ba4ec..8865989b1 100644
--- a/apps/front-end/src/pages/parts/schema.js
+++ b/apps/front-end/src/pages/parts/schema.js
@@ -13,7 +13,7 @@ export default {
           title: "FIRST_NAME",
         },
         last_name: {
-          type: "string",
+          type: ["string", "null"],
           title: "LAST_NAME",
         },
       },
@@ -29,7 +29,7 @@ export default {
           title: "MOBILE_NUMBER",
         },
         // email_id: {
-        //   type: "string",
+        //   type: ['string', 'null'],
         //   format: "email",
         //   title: "EMAIL_ID",
         // },
@@ -56,6 +56,22 @@ export default {
         gender: {
           title: "GENDER",
           type: "string",
+          format: "CustomR",
+          grid: 3,
+          icons: [
+            {
+              name: "UserFollowLineIcon",
+              _icon: { size: "30" },
+            },
+            {
+              name: "UserLineIcon",
+              _icon: { size: "30" },
+            },
+            {
+              name: "UserStarLineIcon",
+              _icon: { size: "30" },
+            },
+          ],
           enumNames: ["Female", "Male", "Other"],
           enum: ["female", "male", "other"],
         },
@@ -88,7 +104,7 @@ export default {
         },
         grampanchayat: {
           title: "GRAMPANCHAYAT",
-          type: "string",
+          type: ["string", "null"],
         },
       },
     },
@@ -101,30 +117,32 @@ export default {
         aadhar_token: {
           title: "AADHAAR_NUMBER",
           type: "number",
+          format: "Aadhaar",
         },
       },
     },
     7: {
+      title: "YOUR_HIGHEST_QUALIFICATION",
       type: "object",
       required: ["qualification", "degree"],
       properties: {
         qualification: {
-          title: "YOUR_HIGHEST_QUALIFICATION",
-          type: "string",
-          format: "select",
+          type: ["string", "number"],
+          format: "CustomR",
+          grid: 2,
         },
         degree: {
-          title: "DO_YOU_HAVE_ANY_TEACHING_DEGREE",
-          type: "string",
-          format: "select",
+          label: "DO_YOU_HAVE_ANY_TEACHING_DEGREE",
+          type: ["string", "number"],
+          format: "RadioBtn",
         },
       },
     },
     8: {
       type: "object",
+      title: "DO_YOU_HAVE_ANY_VOLUNTEER_EXPERIENCE",
       properties: {
         vo_experience: {
-          title: "DO_YOU_HAVE_ANY_VOLUNTEER_EXPERIENCE",
           type: "array",
           items: {
             title: "VOLUNTEER_EXPERIENCE",
@@ -140,18 +158,22 @@ export default {
               },
               description: {
                 title: "DESCRIPTION",
-                type: "string",
+                type: ["string", "null"],
                 format: "textarea",
+                rows: 5,
               },
               experience_in_years: {
-                title: "EXPERIENCE_IN_YEARS",
+                label: "EXPERIENCE_IN_YEARS",
                 type: "string",
+                format: "CustomR",
+                grid: 3,
                 enumNames: ["1", "2", "3", "4", "+5"],
                 enum: ["1", "2", "3", "4", "5"],
               },
               related_to_teaching: {
-                title: "IS_THE_JOB_RELATED_TO_TEACHING",
-                type: "string",
+                label: "IS_THE_JOB_RELATED_TO_TEACHING",
+                type: ["string", "null"],
+                format: "RadioBtn",
                 enumNames: ["Yes", "No"],
                 enum: ["yes", "no"],
               },
@@ -161,10 +183,10 @@ export default {
       },
     },
     9: {
+      title: "DO_YOU_HAVE_ANY_JOB_EXPERIENCE",
       type: "object",
       properties: {
         experience: {
-          title: "DO_YOU_HAVE_ANY_WORK_EXPERIENCE",
           type: "array",
           items: {
             title: "EXPERIENCE",
@@ -180,18 +202,22 @@ export default {
               },
               description: {
                 title: "DESCRIPTION",
-                type: "string",
+                type: ["string", "null"],
                 format: "textarea",
+                rows: 5,
               },
               experience_in_years: {
-                title: "EXPERIENCE_IN_YEARS",
+                label: "EXPERIENCE_IN_YEARS",
                 type: "string",
+                format: "CustomR",
+                grid: 3,
                 enumNames: ["1", "2", "3", "4", "+5"],
                 enum: ["1", "2", "3", "4", "5"],
               },
               related_to_teaching: {
-                title: "IS_THE_JOB_RELATED_TO_TEACHING",
-                type: "string",
+                label: "IS_THE_JOB_RELATED_TO_TEACHING",
+                type: ["string", "null"],
+                format: "RadioBtn",
                 enumNames: ["Yes", "No"],
                 enum: ["yes", "no"],
               },
@@ -202,48 +228,43 @@ export default {
     },
     10: {
       type: "object",
-      required: ["availability"],
+      required: [
+        "availability",
+        "device_ownership",
+        "device_type",
+        "sourcing_channel",
+      ],
       properties: {
         availability: {
-          title: "YOUR_WORK_AVAILABILITY_WILL_BE",
+          label: "YOUR_WORK_AVAILABILITY_WILL_BE",
           type: "string",
+          format: "CustomR",
+          grid: 2,
           enum: ["part_time", "full_time"],
           enumNames: ["Part time", "Full time"],
         },
-      },
-    },
-    11: {
-      type: "object",
-      required: ["device_ownership"],
-      properties: {
         device_ownership: {
-          title: "DO_YOU_OWN_A_MOBILE_PHONE",
+          label: "DO_YOU_OWN_A_MOBILE_PHONE",
           type: "string",
+          format: "RadioBtn",
           enumNames: ["Yes", "No, I use a Family member's"],
           enum: ["yes", "no"],
         },
-      },
-    },
-    12: {
-      type: "object",
-      required: ["device_type"],
-      properties: {
         device_type: {
-          title: "TYPE_OF_MOBILE_PHONE",
+          label: "TYPE_OF_MOBILE_PHONE",
           type: "string",
+          format: "CustomR",
+          grid: 2,
+          icons: [{ name: "AndroidLineIcon" }, { name: "AppleLineIcon" }],
           enumNames: ["Android", "IPhone"],
           enum: ["android", "iphone"],
         },
-      },
-    },
-    13: {
-      type: "object",
-      required: ["sourcing_channel"],
-      title: "HOW_DID_YOU_FIND_OUT_ABOUT_PROJECT_PRAGATI",
-      properties: {
         sourcing_channel: {
-          title: "PLEASE_SELECT",
+          label: "HOW_DID_YOU_FIND_OUT_ABOUT_PROJECT_PRAGATI",
           type: "string",
+          format: "CustomR",
+          grid: 2,
+
           enumNames: [
             "Prerak Referral",
             "NGO Referral",
diff --git a/lib/common-lib/package.json b/lib/common-lib/package.json
index 95b8ca13e..d9e6b28e3 100644
--- a/lib/common-lib/package.json
+++ b/lib/common-lib/package.json
@@ -29,6 +29,8 @@
     "@mui/icons-material": "^5.2.4",
     "@mui/material": "^5.4.0",
     "@react-navigation/drawer": "^6.1.8",
+    "@sentry/browser": "^7.52.1",
+    "@sentry/react": "^7.52.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
diff --git a/lib/common-lib/src/components/AppShell.tsx b/lib/common-lib/src/components/AppShell.tsx
index 4582cdc67..2981b06d0 100644
--- a/lib/common-lib/src/components/AppShell.tsx
+++ b/lib/common-lib/src/components/AppShell.tsx
@@ -1,8 +1,21 @@
 import React from 'react'
+import * as Sentry from '@sentry/react'
 import { eventBus } from '../services/EventBus'
 import AppRoutesContainer from './AppRoutesContainer'
 import { getAppshellData } from './helper'
 
+if (process.env.REACT_APP_SENTRY_ENV) {
+  Sentry.init({
+    environment: `${process.env.REACT_APP_SENTRY_ENV}`,
+    dsn: `${process.env.REACT_APP_SENTRY_DSN_URL}`,
+    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+    // Performance Monitoring
+    tracesSampleRate: 0.1, // Capture 100% of the transactions, reduce in production!
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  })
+}
 function AppShell({
   colors,
   themeName,
diff --git a/lib/common-lib/src/components/Camera.js b/lib/common-lib/src/components/Camera.js
index 6504586ab..4dbae28a1 100644
--- a/lib/common-lib/src/components/Camera.js
+++ b/lib/common-lib/src/components/Camera.js
@@ -23,7 +23,22 @@ export default function Camera({
   const [cameraWidth, setCameraWidth] = React.useState()
   const [permissionsError, setPermissionsError] = React.useState()
   const capture = () => {
-    setCameraUrl(webcamRef.current.getScreenshot())
+    const screenshot = webcamRef.current.getScreenshot()
+    const blob = dataURLtoBlob(screenshot)
+    setCameraUrl(screenshot, blob)
+  }
+
+  const dataURLtoBlob = (dataurl) => {
+    var arr = dataurl.split(','),
+      mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]),
+      n = bstr.length,
+      u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    const blob = new Blob([u8arr], { type: mime })
+    return new File([blob], 'camera.jpeg', { type: mime })
   }
 
   React.useEffect(() => {
diff --git a/lib/common-lib/src/components/FloatingInput.js b/lib/common-lib/src/components/FloatingInput.js
new file mode 100644
index 000000000..ab53e0708
--- /dev/null
+++ b/lib/common-lib/src/components/FloatingInput.js
@@ -0,0 +1,60 @@
+import { FormControl, HStack, Input, Text } from 'native-base'
+import React from 'react'
+import { t } from 'i18next'
+
+export default function FloatingInput({
+  schema,
+  options,
+  value,
+  onChange,
+  required
+}) {
+  const [isFocus, setIsfocus] = React.useState(false)
+  const { title, help } = schema
+  return (
+    <FormControl>
+      {title && (
+        <FormControl.Label
+          rounded='sm'
+          position='absolute'
+          left='1rem'
+          bg='white'
+          px='1'
+          m='0'
+          height={'1px'}
+          alignItems='center'
+          style={{
+            ...(isFocus || value
+              ? {
+                  top: '0',
+                  opacity: 1,
+                  zIndex: 5,
+                  transition: 'all 0.3s ease'
+                }
+              : {
+                  top: '0.5rem',
+                  zIndex: -2,
+                  opacity: 0,
+                  transition: 'all 0.2s ease-in-out'
+                })
+          }}
+        >
+          <Text fontSize='12' fontWeight='400'>
+            {t(title)}
+            {required && <Text color={'danger.500'}>*</Text>}
+          </Text>
+        </FormControl.Label>
+      )}
+      <Input
+        key={title}
+        onFocus={(e) => setIsfocus(true)}
+        onBlur={(e) => setIsfocus(false)}
+        bg={isFocus || value ? 'white' : ''}
+        {...{ value }}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t(title)}
+      />
+      {help && <FormControl.HelperText>{t(help)}</FormControl.HelperText>}
+    </FormControl>
+  )
+}
diff --git a/lib/common-lib/src/components/IconByName.js b/lib/common-lib/src/components/IconByName.js
index 2b0dadea0..f01cf7d87 100644
--- a/lib/common-lib/src/components/IconByName.js
+++ b/lib/common-lib/src/components/IconByName.js
@@ -101,6 +101,13 @@ import DonutChartLineIcon from 'remixicon-react/DonutChartLineIcon'
 import MessageLineIcon from 'remixicon-react/MessageLineIcon'
 import ShutDownLineIcon from 'remixicon-react/ShutDownLineIcon'
 import LoginCircleLineIcon from 'remixicon-react/LoginCircleLineIcon'
+import FileTextLineIcon from 'remixicon-react/FileTextLineIcon'
+import UserAddLineIcon from 'remixicon-react/UserAddLineIcon'
+import Upload2FillIcon from 'remixicon-react/Upload2FillIcon'
+import PencilRulerLineIcon from 'remixicon-react/PencilRulerLineIcon'
+import CommunityLineIcon from 'remixicon-react/CommunityLineIcon'
+import AppleLineIcon from 'remixicon-react/AppleLineIcon'
+import AndroidLineIcon from 'remixicon-react/AndroidLineIcon'
 import VidiconLineIcon from 'remixicon-react/VidiconLineIcon'
 import UserAddLineIcon from 'remixicon-react/UserAddLineIcon'
 import CalendarLineIcon from 'remixicon-react/CalendarLineIcon'
@@ -126,6 +133,46 @@ export default function IconByName({ _icon, ...props }) {
         />
       )
       break
+    case 'AndroidLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<AndroidLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
+    case 'AppleLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<AppleLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
+    case 'Upload2FillIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<Upload2FillIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
+    case 'FileTextLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<FileTextLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
+    case 'UserAddLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<UserAddLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
     case 'FileCopyLineIcon':
       icon = (
         <IconButton
@@ -134,6 +181,14 @@ export default function IconByName({ _icon, ...props }) {
         />
       )
       break
+    case 'MapPinLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<MapPinLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
     case 'ParentLineIcon':
       icon = (
         <IconButton
@@ -390,14 +445,6 @@ export default function IconByName({ _icon, ...props }) {
         />
       )
       break
-    case 'MapPinLineIcon':
-      icon = (
-        <IconButton
-          {...props}
-          icon={<MapPinLineIcon {...(_icon ? _icon : {})} />}
-        />
-      )
-      break
     case 'FilterLineIcon':
       icon = (
         <IconButton
@@ -919,6 +966,22 @@ export default function IconByName({ _icon, ...props }) {
         />
       )
       break
+    case 'PencilRulerLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<PencilRulerLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
+    case 'CommunityLineIcon':
+      icon = (
+        <IconButton
+          {...props}
+          icon={<CommunityLineIcon {...(_icon ? _icon : {})} />}
+        />
+      )
+      break
     case 'VidiconLineIcon':
       icon = (
         <IconButton
diff --git a/lib/common-lib/src/components/ImageView.js b/lib/common-lib/src/components/ImageView.js
new file mode 100644
index 000000000..d46b09d2f
--- /dev/null
+++ b/lib/common-lib/src/components/ImageView.js
@@ -0,0 +1,23 @@
+import { Avatar } from 'native-base'
+import React from 'react'
+import { getOne } from '../services/uploadRegistryService'
+
+export default function ImageView({ source, ...props }) {
+  const [profileUrl, setProfileUrl] = React.useState()
+  React.useEffect(async () => {
+    const data = await getOne({ id: source.uri })
+    setProfileUrl(data?.fileUrl)
+  }, [source?.uri])
+  return (
+    <Avatar
+      alt='Image not found'
+      width={'30px'}
+      height={'30px'}
+      {...props}
+      source={{
+        ...source,
+        uri: profileUrl
+      }}
+    />
+  )
+}
diff --git a/lib/common-lib/src/components/admin_layout/AppBar.js b/lib/common-lib/src/components/admin_layout/AppBar.js
index 5b421630e..93db3046b 100644
--- a/lib/common-lib/src/components/admin_layout/AppBar.js
+++ b/lib/common-lib/src/components/admin_layout/AppBar.js
@@ -14,6 +14,8 @@ import {
 import IconByName from '../IconByName'
 import { useNavigate } from 'react-router-dom'
 import { logout } from '../helper'
+import ImageView from '../ImageView'
+import { changeLanguage, t } from 'i18next'
 
 export default function AppBar({
   isEnableLanguageMenu,
@@ -25,18 +27,17 @@ export default function AppBar({
 }) {
   const navigate = useNavigate()
   const profile_url = localStorage.getItem('profile_url')
-  const setLang = (e) => {
+  const setMenu = (e) => {
     if (e === 'profile') {
       navigate('/admin/profile')
-    } else {
-      if (e === 'logout') {
-        logout()
-      } else {
-        localStorage.setItem('lang', e)
-      }
-      // window.location.href
-      // window.location.reload()
+    } else if (e === 'logout') {
+      logout()
+      navigate('/login')
       navigate(0)
+    } else {
+      localStorage.setItem('lang', e)
+      changeLanguage(e)
+      setLang ? setLang(e) : navigate(0)
     }
   }
 
@@ -51,12 +52,12 @@ export default function AppBar({
         minH='32px'
       >
         <Image
+          w='67px'
+          h='38px'
           source={{
-            uri: '/logo.svg'
+            uri: '/logo.png'
           }}
-          alt='logo'
-          size='xs'
-          resizeMode='contain'
+          alt=''
         />
         <HStack alignItems={'center'} space='5'>
           {/* <Input
@@ -77,6 +78,7 @@ export default function AppBar({
           ) : (
             <React.Fragment />
           )}
+
           <Stack px='3'>
             <Menu
               w='190'
@@ -89,7 +91,7 @@ export default function AppBar({
                   >
                     <HStack space={4}>
                       {profile_url ? (
-                        <Avatar
+                        <ImageView
                           source={{
                             uri: profile_url
                           }}
@@ -116,22 +118,11 @@ export default function AppBar({
                 )
               }}
             >
-              {languages?.map((e, index) => (
-                <Menu.Item
-                  key={index}
-                  label={e.title}
-                  textValue={e.code}
-                  onPress={(item) => setLang(e.code)}
-                >
-                  {e.title}
-                </Menu.Item>
-              ))}
-
-              <Menu.Item onPress={(item) => setLang('profile')}>
-                Profile
+              <Menu.Item onPress={(item) => setMenu('profile')}>
+                {t('PROFILE')}
               </Menu.Item>
-              <Menu.Item onPress={(item) => setLang('logout')}>
-                Logout
+              <Menu.Item onPress={(item) => setMenu('logout')}>
+                {t('LOGOUT')}
               </Menu.Item>
             </Menu>
           </Stack>
diff --git a/lib/common-lib/src/components/helper.js b/lib/common-lib/src/components/helper.js
index d76cfb5c3..e66cb699e 100644
--- a/lib/common-lib/src/components/helper.js
+++ b/lib/common-lib/src/components/helper.js
@@ -5,6 +5,17 @@ import jwt_decode from 'jwt-decode'
 import * as facilitatorRegistryService from '../services/facilitatorRegistryService'
 import * as authRegistryService from '../services/authRegistryService'
 
+import * as Sentry from '@sentry/react'
+
+export const SentryBreadcrumb = async (category, message, data, level) => {
+  Sentry.addBreadcrumb({
+    category: category,
+    message: message,
+    data: data,
+    level: level
+  })
+}
+
 export function useWindowSize(maxWidth = '100%') {
   const [size, setSize] = React.useState([])
   React.useLayoutEffect(() => {
@@ -107,9 +118,10 @@ export const login = async (credentials) => {
         return { user, token }
       }
     }
-  } catch (e) {
+  } catch ({ response, message }) {
     return {
-      error: e?.response?.data?.message ? e?.response?.data?.message : e.message
+      status: response?.status ? response?.status : 404,
+      error: response?.data?.message ? response?.data?.message : message
     }
   }
 }
@@ -127,15 +139,16 @@ export const setLocalUser = ({
   last_name,
   first_name,
   fullName,
-  profile_url
+  documents
 }) => {
   localStorage.setItem(
     'fullName',
     fullName ? fullName : `${first_name} ${last_name}`
   )
+
   localStorage.setItem('first_name', first_name)
   localStorage.setItem('last_name', last_name)
-  localStorage.setItem('profile_url', profile_url)
+  localStorage.setItem('profile_url', documents?.[0]?.name)
 }
 
 export const logout = () => {
diff --git a/lib/common-lib/src/components/layout/AppBar.js b/lib/common-lib/src/components/layout/AppBar.js
index 5efe6c190..5eac4ecf5 100644
--- a/lib/common-lib/src/components/layout/AppBar.js
+++ b/lib/common-lib/src/components/layout/AppBar.js
@@ -10,17 +10,15 @@ import {
   InputLeftAddon,
   InputGroup,
   InputRightAddon,
-  Text,
-  Avatar,
   Button,
-  Modal,
-  sm
+  Modal
 } from 'native-base'
 import { useNavigate } from 'react-router-dom'
 import IconByName from '../IconByName'
 import { BodyLarge, Caption } from './HeaderTags'
 import { logout } from '../helper'
 import { changeLanguage, t } from 'i18next'
+import ImageView from '../ImageView'
 
 export default function AppBar({
   isEnableSearchBtn,
@@ -35,10 +33,12 @@ export default function AppBar({
   name,
   lang,
   setLang,
+  profile_url,
+  _backBtn,
+  _hstack,
   ...props
 }) {
   const [searchInput, setSearchInput] = useState(false)
-  const profile_url = localStorage.getItem('profile_url')
 
   const headerName = localStorage.getItem('fullName')
     ? localStorage.getItem('fullName')
@@ -75,6 +75,11 @@ export default function AppBar({
     (!onlyIconsShow || onlyIconsShow.includes(item)) &&
     (!exceptIconsShow || !exceptIconsShow.includes(item))
 
+  React.useEffect(() => {
+    const dLang = localStorage.getItem('lang')
+    changeLanguage(dLang ? dLang : 'en')
+  }, [])
+
   return (
     <Box
       p='4'
@@ -124,6 +129,7 @@ export default function AppBar({
                       { icon: 'CellphoneLineIcon', name: 'CALL_MY_IP' }
                     ].map((item, index) => (
                       <Box
+                        key={index}
                         p='4'
                         flex='1'
                         borderWidth='1'
@@ -243,6 +249,7 @@ export default function AppBar({
           justifyContent='space-between'
           alignItems='center'
           minH='32px'
+          {..._hstack}
         >
           <HStack space='4' alignItems='center'>
             {isShow('backBtn') ? (
@@ -251,6 +258,7 @@ export default function AppBar({
                 pl='0'
                 name='ArrowLeftSLineIcon'
                 color={color ? color : ''}
+                {..._backBtn}
                 onPress={() => {
                   if (onPressBackButton) {
                     onPressBackButton()
@@ -265,25 +273,25 @@ export default function AppBar({
             {isShow('userInfo') ? (
               <HStack space='1' alignItems='center'>
                 {profile_url ? (
-                  <Avatar
+                  <ImageView
                     source={{
                       uri: profile_url
                     }}
                     alt='Image not found'
-                    width={'30px'}
-                    height={'30px'}
+                    width={'24px'}
+                    height={'24px'}
                   />
                 ) : (
                   <IconByName
                     isDisabled
                     name='AccountCircleLineIcon'
                     color='gray.300'
-                    _icon={{ size: '40px' }}
+                    _icon={{ size: '24px' }}
                   />
                 )}
                 <BodyLarge
                   wordWrap='break-word'
-                  width='181px'
+                  width='160px'
                   whiteSpace='nowrap'
                   overflow='hidden'
                   textOverflow='ellipsis'
@@ -308,7 +316,7 @@ export default function AppBar({
               <React.Fragment />
             )}
             {isShow('langBtn') ? (
-              <Stack px='3'>
+              <Stack px='2'>
                 <Menu
                   right='100%'
                   w='190'
@@ -319,8 +327,8 @@ export default function AppBar({
                         accessibilityLabel='More options menu'
                         {...triggerProps}
                       >
-                        <HStack space={2}>
-                          <Text>
+                        <HStack alignItems='start'>
+                          <BodyLarge>
                             {(lang && lang !== '') ||
                             localStorage.getItem('lang')
                               ? languages.find(
@@ -329,13 +337,13 @@ export default function AppBar({
                                     e?.code === localStorage.getItem('lang')
                                 )?.['title']
                               : 'En'}
-                          </Text>
+                          </BodyLarge>
                           <IconByName
-                            size='sm'
                             pr='0'
                             name='ArrowDownSFillIcon'
                             isDisabled={true}
                             color={color ? color : ''}
+                            _text={{ size: 'sm' }}
                           />
                         </HStack>
                       </Pressable>
@@ -357,6 +365,15 @@ export default function AppBar({
             ) : (
               <React.Fragment />
             )}
+            {isShow('notificationBtn') ? (
+              <IconByName
+                color={color ? color : ''}
+                size='20px'
+                name='Notification2LineIcon'
+              />
+            ) : (
+              <React.Fragment />
+            )}
           </HStack>
         </HStack>
       ) : (
diff --git a/lib/common-lib/src/components/layout/Footer.js b/lib/common-lib/src/components/layout/Footer.js
index 896a8cff5..d8a6a92a2 100644
--- a/lib/common-lib/src/components/layout/Footer.js
+++ b/lib/common-lib/src/components/layout/Footer.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react'
-import { Box, Text, HStack, Center, Stack } from 'native-base'
+import { Box, Text, HStack, Center, VStack } from 'native-base'
 import IconByName from '../IconByName'
 import { useTranslation } from 'react-i18next'
 import { Link, generatePath } from 'react-router-dom'
 import { useWindowSize } from '../helper'
 
-export default function Footer({ menues, routeDynamics, ...props }) {
+export default function Footer({ menues, routeDynamics, setRef, ...props }) {
   const [selected, setSelected] = React.useState(0)
   const { t } = useTranslation()
 
@@ -43,30 +43,54 @@ export default function Footer({ menues, routeDynamics, ...props }) {
   }
 
   return (
-    <Stack>
-      <Box width={width} flex={1} safeAreaTop position='fixed' bottom='0'>
-        <Center flex={1}></Center>
-        <HStack bg='white' alignItems='center' safeAreaBottom shadow={6}>
-          {footerMenus?.map((item, index) => (
-            <PressableNew
-              item={item}
-              key={index}
-              cursor='pointer'
-              opacity={selected === index ? 1 : 0.5}
-              py='3'
-              flex={1}
-              onPress={() => setSelected(0)}
+    <Box
+      width={width}
+      flex={1}
+      safeAreaTop
+      position='fixed'
+      bottom='0'
+      ref={(e) => setRef(e)}
+      {...props}
+    >
+      <HStack bg='white' alignItems='center' safeAreaBottom shadow={6}>
+        {footerMenus?.map((item, index) => (
+          <PressableNew
+            item={item}
+            key={index}
+            cursor='pointer'
+            opacity={selected === index ? 1 : 0.5}
+            flex={1}
+            onPress={() => setSelected(0)}
+          >
+            <Text
+              color={
+                selected === index ? 'footer.boxBorder' : 'textGreyColor.100'
+              }
             >
-              <Text color={selected === index ? 'primary.500' : 'coolGray.400'}>
-                <Center>
-                  <IconByName name={item.icon} />
-                  <Text fontSize='12'>{t(item.title)}</Text>
-                </Center>
-              </Text>
-            </PressableNew>
-          ))}
-        </HStack>
-      </Box>
-    </Stack>
+              <Center>
+                <VStack alignItems='center'>
+                  <Box
+                    w='100%'
+                    borderTopColor={
+                      selected === index ? 'footer.boxBorder' : 'white'
+                    }
+                    borderTopWidth={4}
+                    roundedBottom='4px'
+                  />
+                  <VStack py='3' alignItems='center'>
+                    <IconByName
+                      name={item.icon}
+                      isDisabled
+                      _icon={{ size: '21px' }}
+                    />
+                    <Text fontSize='12'>{t(item.title)}</Text>
+                  </VStack>
+                </VStack>
+              </Center>
+            </Text>
+          </PressableNew>
+        ))}
+      </HStack>
+    </Box>
   )
 }
diff --git a/lib/common-lib/src/components/layout/HeaderTags/BlueFillButton.js b/lib/common-lib/src/components/layout/HeaderTags/BlueFillButton.js
new file mode 100644
index 000000000..5b51e5d55
--- /dev/null
+++ b/lib/common-lib/src/components/layout/HeaderTags/BlueFillButton.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button } from 'native-base'
+
+const BlueFillButton = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      color='#ffffff'
+      borderWidth='1px'
+      borderColor='#14242D'
+      background='#14242D'
+      borderRadius='30px'
+    >
+      {children}
+    </Button>
+  )
+}
+export default React.memo(BlueFillButton)
diff --git a/lib/common-lib/src/components/layout/HeaderTags/BlueOutlineButton.js b/lib/common-lib/src/components/layout/HeaderTags/BlueOutlineButton.js
new file mode 100644
index 000000000..e2de8e147
--- /dev/null
+++ b/lib/common-lib/src/components/layout/HeaderTags/BlueOutlineButton.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button } from 'native-base'
+
+const BlueOutlineButton = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      color='#084B82'
+      borderWidth='1px'
+      borderColor='#084B82'
+      background='#fff'
+      borderRadius='30px'
+    >
+      {children}
+    </Button>
+  )
+}
+export default React.memo(BlueOutlineButton)
diff --git a/lib/common-lib/src/components/layout/HeaderTags/ButtonStyle.js b/lib/common-lib/src/components/layout/HeaderTags/ButtonStyle.js
new file mode 100644
index 000000000..d9986fc41
--- /dev/null
+++ b/lib/common-lib/src/components/layout/HeaderTags/ButtonStyle.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button } from 'native-base'
+
+const ButtonStyle = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      color='#fff'
+      fontSize='18px'
+      fontWeight='700'
+      background='#2D142C'
+      borderRadius='100px'
+    >
+      {children}
+    </Button>
+  )
+}
+export default React.memo(ButtonStyle)
diff --git a/lib/common-lib/src/components/layout/HeaderTags/RedOutlineButton.js b/lib/common-lib/src/components/layout/HeaderTags/RedOutlineButton.js
new file mode 100644
index 000000000..2255734c5
--- /dev/null
+++ b/lib/common-lib/src/components/layout/HeaderTags/RedOutlineButton.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Button } from 'native-base'
+
+const RedOutlineButton = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      border='1px solid #790000'
+      borderRadius='10px'
+      padding='50px'
+    >
+      {children}
+    </Button>
+  )
+}
+export default React.memo(RedOutlineButton)
diff --git a/lib/common-lib/src/components/layout/HeaderTags/SelectStyle.js b/lib/common-lib/src/components/layout/HeaderTags/SelectStyle.js
new file mode 100644
index 000000000..f3be36f1c
--- /dev/null
+++ b/lib/common-lib/src/components/layout/HeaderTags/SelectStyle.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Select } from 'native-base'
+
+const SelectStyle = ({ children, ...props }) => {
+  return (
+    <Select
+      {...props}
+      placeholderTextColor='#790000'
+      fontSize='14px'
+      borderColor='#790000'
+      fontWeight='500'
+      background='#FFFFFF'
+      borderWidth='2px'
+      borderRadius='30px'
+      shadow='1px 2px 0px #8B7171'
+    >
+      {children}
+    </Select>
+  )
+}
+export default React.memo(SelectStyle)
diff --git a/lib/common-lib/src/components/layout/HeaderTags/index.js b/lib/common-lib/src/components/layout/HeaderTags/index.js
index 16ef09f6e..fdbd43b82 100644
--- a/lib/common-lib/src/components/layout/HeaderTags/index.js
+++ b/lib/common-lib/src/components/layout/HeaderTags/index.js
@@ -8,6 +8,11 @@ import BodySmall from './BodySmall'
 import Caption from './Caption'
 import Heading from './Heading'
 import Subtitle from './Subtitle'
+import BlueOutlineButton from './BlueOutlineButton'
+import BlueFillButton from './BlueFillButton'
+import ButtonStyle from './ButtonStyle'
+import SelectStyle from './SelectStyle'
+import RedOutlineButton from './RedOutlineButton'
 import BoxBlue from './BoxBlue'
 
 // export
@@ -23,5 +28,10 @@ export {
   Caption,
   Heading,
   Subtitle,
+  BlueFillButton,
+  BlueOutlineButton,
+  ButtonStyle,
+  SelectStyle,
+  RedOutlineButton,
   BoxBlue
 }
diff --git a/lib/common-lib/src/components/layout/Layout.js b/lib/common-lib/src/components/layout/Layout.js
index bb102edec..963e599fd 100644
--- a/lib/common-lib/src/components/layout/Layout.js
+++ b/lib/common-lib/src/components/layout/Layout.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Header from './Header'
 import Footer from './Footer'
 import { Box, Center, Stack } from 'native-base'
 import AppBar from './AppBar'
@@ -51,7 +50,7 @@ export default function Layout({
                     color={imageUrl ? 'white' : ''}
                     languages={[
                       { title: 'En', code: 'en' },
-                      { title: 'Hi', code: 'hi' }
+                      { title: 'हिं', code: 'hi' }
                     ]}
                     {..._appBar}
                   />
@@ -65,25 +64,19 @@ export default function Layout({
 
             {_footer?.menues ? (
               <Box
-                minH={
-                  refFoot?.current?.clientHeight
-                    ? refFoot?.current?.clientHeight
-                    : 0
-                }
+                minH={refFoot?.clientHeight ? `${refFoot?.clientHeight}px` : 0}
               />
             ) : (
               <React.Fragment />
             )}
           </HeightWidth>
-          <Box
-            w={width}
-            ref={(e) => {
+          <Footer
+            setRef={(e) => {
               setRefFoot(e)
               if (getRefFoot) getRefFoot(e)
             }}
-          >
-            <Footer {..._footer} />
-          </Box>{' '}
+            {..._footer}
+          />
         </React.Fragment>
       )}
     </Center>
diff --git a/lib/common-lib/src/components/theme.ts b/lib/common-lib/src/components/theme.ts
index 1809a80a2..5dc162e7e 100644
--- a/lib/common-lib/src/components/theme.ts
+++ b/lib/common-lib/src/components/theme.ts
@@ -1,3 +1,5 @@
+import { BorderColor } from '@mui/icons-material'
+
 const fontFamily = localStorage.getItem('lang') === 'hi' ? "'Baloo 2'" : 'Inter'
 const fontSize = localStorage.getItem('lang') === 'hi' ? '20px' : ''
 
@@ -53,6 +55,14 @@ const DEFAULT_THEME = {
     mono: fontFamily
   },
   components: {
+    Input: {
+      baseStyle: {
+        p: '4',
+        minH: '54px',
+        borderColor: 'secondaryBlue.500',
+        rounded: '10px'
+      }
+    },
     Text: {
       baseStyle: {
         fontFamily: fontFamily,
@@ -172,9 +182,26 @@ const DEFAULT_THEME = {
             bg: `#f9f5f5`
           },
           _text: {
+            fontWeight: '700',
             color: '#790000'
           },
-          rounded: '4px'
+          rounded: '4',
+          shadow: '2px 3px 0px #8B7171'
+        }),
+        statusBtnAdmin: ({ colorScheme }: any) => ({
+          bg: `${colorScheme}.50`,
+          borderWidth: '1',
+          borderColor: `${colorScheme}.500`,
+          _hover: {
+            bg: `${colorScheme}.100`
+          },
+          _pressed: {
+            bg: `${colorScheme}.200`
+          },
+          _text: {
+            color: `${colorScheme}.500`
+          },
+          rounded: '100'
         })
       }
     }
@@ -200,6 +227,46 @@ const DEFAULT_THEME = {
       shadowRadius: 1.0,
       elevation: 1
     },
+    FooterShadow: {
+      shadowColor: '#e0e0e066',
+      shadowOffset: {
+        width: 1,
+        height: 3
+      },
+      shadowOpacity: 1,
+      shadowRadius: 1.0,
+      elevation: 1
+    },
+    RedFillShadow: {
+      shadowColor: '#C92A42',
+      shadowOffset: {
+        width: 1,
+        height: 3
+      },
+      shadowOpacity: 1,
+      shadowRadius: 1.0,
+      elevation: 1
+    },
+    RedOutlineShadow: {
+      shadowColor: '#8B7171',
+      shadowOffset: {
+        width: 1,
+        height: 3
+      },
+      shadowOpacity: 1,
+      shadowRadius: 1.0,
+      elevation: 1
+    },
+    RedBoxShadow: {
+      shadowColor: '#790000',
+      shadowOffset: {
+        width: 1,
+        height: 3
+      },
+      shadowOpacity: 1,
+      shadowRadius: 1.0,
+      elevation: 1
+    },
     BlueBoxShadow: {
       shadowColor: '#CAE9FF',
       shadowOffset: {
@@ -209,9 +276,25 @@ const DEFAULT_THEME = {
       shadowOpacity: 1,
       shadowRadius: 1.0,
       elevation: 1
+    },
+    appBarShadow: {
+      shadowColor: '#d9d9d9',
+      shadowOffset: {
+        width: 0,
+        height: 3
+      },
+      shadowOpacity: 1,
+      shadowRadius: 16,
+      elevation: 1
     }
   },
   colors: {
+    footer: {
+      boxBorder: '#C92A42'
+    },
+    formBg: {
+      500: '#F4F4F7'
+    },
     widgetColor: {
       400: '#7F9DAC',
       500: '#DDD8F3',
@@ -407,6 +490,30 @@ const DEFAULT_THEME = {
     textMaroonColor: {
       400: '#790000'
     },
+    bgPinkColor: {
+      300: '#F9E9DB'
+    },
+    editIcon: {
+      300: '#3F8BF1'
+    },
+    sendMessageBtn: {
+      200: '#14242D'
+    },
+    secondaryBlue: {
+      50: '#e7f3fe',
+      100: '#b7dcfb',
+      200: '#87c5f8',
+      300: '#57aef5',
+      400: '#2796f2',
+      500: '#0d7dd8',
+      600: '#0a61a8',
+      700: '#074578',
+      800: '#042a48',
+      900: '#010e18'
+    },
+    btnGray: {
+      100: '#e0e0e0'
+    },
     blueText: {
       400: '#084B82',
       450: '#3F8BF1'
diff --git a/lib/common-lib/src/index.tsx b/lib/common-lib/src/index.tsx
index 80fabe70f..3459bf649 100644
--- a/lib/common-lib/src/index.tsx
+++ b/lib/common-lib/src/index.tsx
@@ -15,12 +15,14 @@ import Tab from './components/Tab'
 import Loading from './components/Loading'
 import FilterButton from './components/FilterButton'
 import * as facilitatorRegistryService from './services/facilitatorRegistryService'
+import * as authRegistryService from './services/authRegistryService'
 import * as uploadRegistryService from './services/uploadRegistryService'
 import * as StudentEnumService from './services/StudentEnumService'
-import * as authRegistryService from './services/authRegistryService'
 import * as geolocationRegistryService from './services/geolocationRegistryService'
 import { t, changeLanguage } from 'i18next'
 import Camera from './components/Camera'
+import ImageView from './components/ImageView'
+import FloatingInput from './components/FloatingInput'
 
 export {
   AppBar,
@@ -44,10 +46,12 @@ export {
   authRegistryService,
   geolocationRegistryService,
   uploadRegistryService,
+  ImageView,
   StudentEnumService,
   t,
   changeLanguage,
-  Camera
+  Camera,
+  FloatingInput
 }
 
 export * from './services/RestClient'
diff --git a/lib/common-lib/src/services/facilitatorRegistryService.js b/lib/common-lib/src/services/facilitatorRegistryService.js
index e1d50a953..96dc05288 100644
--- a/lib/common-lib/src/services/facilitatorRegistryService.js
+++ b/lib/common-lib/src/services/facilitatorRegistryService.js
@@ -27,9 +27,9 @@ const interfaceData = {
   block_id: 'block_id',
   district_id: 'district_id',
   grampanchayat: 'grampanchayat',
-  qualification: 'qualifications.0.qualification_master_id',
-  degree: 'qualifications.1.qualification_master_id',
-  sourcing_channel: 'sourcing_channel',
+  qualification: 'qualifications.1.qualification_master_id',
+  degree: 'qualifications.0.qualification_master_id',
+  sourcing_channel: 'core_faciltator.sourcing_channel',
   state: 'state',
   district: 'district',
   block: 'block',
@@ -38,6 +38,7 @@ const interfaceData = {
   village_Ward_id: 'village_Ward_id',
   vo_experience: 'vo_experience',
   profile_url: 'profile_url',
+  documents: 'documents',
   defaultValueSet: {
     vo_experience: []
   },
@@ -50,6 +51,12 @@ const interfaceData = {
     program_faciltator_id: 'id',
     device_type: 'device_type',
     device_ownership: 'device_ownership'
+  },
+  format: {
+    mobile: 'number',
+    aadhar_token: 'number',
+    qualification: 'string',
+    degree: 'string'
   }
 }
 let only = Object.keys(interfaceData)
diff --git a/lib/common-lib/src/services/mapInterfaceData.js b/lib/common-lib/src/services/mapInterfaceData.js
index 7f79ba025..228cfaa16 100644
--- a/lib/common-lib/src/services/mapInterfaceData.js
+++ b/lib/common-lib/src/services/mapInterfaceData.js
@@ -16,13 +16,31 @@ export default function interfaceData(
           data[mvKey1] = element[mvValue1]
         }
       } else if (
-        !['reverseValueWithParameter', 'defaultValueSet'].includes(key1)
+        !['reverseValueWithParameter', 'defaultValueSet', 'format'].includes(
+          key1
+        )
       ) {
-        const arr = value1.split('.')
+        const arr = value1?.split('.')
         let value = element
         arr.forEach((item) => {
           if (value[item]) {
-            value = value[item]
+            if (
+              ['number', 'int'].includes(
+                formate?.['format']?.[key1]?.toLowerCase()
+              ) &&
+              typeof value[item] !== 'object'
+            ) {
+              value = parseInt(value[item])
+            } else if (
+              ['string', 'str'].includes(
+                formate?.['format']?.[key1]?.toLowerCase()
+              ) &&
+              typeof value[item] !== 'object'
+            ) {
+              value = `${value[item]}`
+            } else {
+              value = value[item]
+            }
           } else {
             if (formate['defaultValueSet'][item]) {
               value = formate['defaultValueSet'][item]
diff --git a/lib/common-lib/tsconfig.json b/lib/common-lib/tsconfig.json
index 0a197fa71..717cbc16b 100644
--- a/lib/common-lib/tsconfig.json
+++ b/lib/common-lib/tsconfig.json
@@ -16,7 +16,9 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "allowSyntheticDefaultImports": true,
-    "allowJs": true
+    "allowJs": true,
+    "inlineSources": true,
+    "sourceRoot": "/"
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist", "example"]
diff --git a/modules/auth/src/pages/Login.js b/modules/auth/src/pages/Login.js
index 2b4c41c26..791641945 100644
--- a/modules/auth/src/pages/Login.js
+++ b/modules/auth/src/pages/Login.js
@@ -61,12 +61,12 @@ export default function Login() {
 
   const handleLogin = async () => {
     if (validate()) {
-      const { error } = await login(credentials);
-      if (error) {
-        setErrors({ alert: t(error) });
-      } else {
+      const { user, token, error } = await login(credentials);
+      if (!error) {
         navigate("/");
         navigate(0);
+      } else {
+        setErrors({ alert: t(error) });
       }
     } else {
       logout();