fixed update components

20 files changed, 607 insertions, 325 deletions

diff --git a/client/public/assets/images/biometrics.svg b/client/public/assets/images/biometrics.svg
new file mode 100644
index 0000000..2d7a06a
--- /dev/null
+++ b/client/public/assets/images/biometrics.svg
@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="192px" height="192px">
+    <g id="Layer_1">
+        <polygon fill="#efefef" points="213.9,49.87 213.9,250.02 42.1,250.02 42.1,5.98 170.01,5.98" />
+        <circle cx="93.5" cy="198.623" r="30.5" fill="#72c1e8" />
+        <path fill="#7c7b7a" d="M213.893,49.873h-40.89c-1.657,0-3-1.343-3-3V5.983L213.893,49.873z" />
+        <path fill="#ffb69f"
+            d="M83.625,27.069c-12.889,0-23.375,10.486-23.375,23.375V83H107V50.444 C107,37.555,96.515,27.069,83.625,27.069z" />
+        <path fill="#fff"
+            d="M151.59,108.631c-14.514,0-28.602,8.594-36.65,14.577c-3.775,2.806-3.775,8.483,0,11.289 c8.049,5.983,22.136,14.577,36.65,14.577c14.514,0,28.602-8.594,36.65-14.577c3.775-2.806,3.775-8.483,0-11.289 C180.192,117.225,166.105,108.631,151.59,108.631z" />
+        <circle cx="151.591" cy="128.852" r="20.222" fill="#fc5d3d" />
+        <path fill="#ffcbc2"
+            d="M134.848,128.852c0-1.47,0.199-2.932,0.591-4.345c0.37-1.331,1.748-2.111,3.078-1.74 c1.33,0.369,2.109,1.747,1.74,3.078c-0.271,0.977-0.409,1.989-0.409,3.007c0,10.01,12.124,14.906,19.114,7.917 c0.976-0.977,2.56-0.977,3.535,0c0.977,0.976,0.977,2.559,0,3.535C152.398,150.405,134.848,143.348,134.848,128.852z" />
+        <circle cx="151.591" cy="128.852" r="7.404" fill="#4c4945" />
+        <path fill="#fff"
+            d="M203,241.75H72.836c-1.381,0-2.5-1.119-2.5-2.5s1.119-2.5,2.5-2.5H200.5V66.414c0-1.381,1.119-2.5,2.5-2.5 s2.5,1.119,2.5,2.5V239.25C205.5,240.631,204.381,241.75,203,241.75z M62.836,241.75h-7.983c-1.381,0-2.5-1.119-2.5-2.5 s1.119-2.5,2.5-2.5h7.983c1.381,0,2.5,1.119,2.5,2.5S64.217,241.75,62.836,241.75z" />
+        <path
+            d="M216.4,250.02v-60.15c0-1.38-1.12-2.5-2.5-2.5s-2.5,1.12-2.5,2.5v57.65H44.6V51.97c0-1.38-1.12-2.5-2.5-2.5 c-1.38,0-2.5,1.12-2.5,2.5v198.05c0,1.367,1.112,2.5,2.5,2.5h171.8C215.285,252.52,216.4,251.409,216.4,250.02z" />
+        <circle cx="213.9" cy="179.87" r="2.5" />
+        <path
+            d="M39.6,5.98v25.99c0,1.38,1.12,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5V8.48h122.903v38.394c0,3.033,2.467,5.5,5.5,5.5H211.4 V169.87c0,1.38,1.12,2.5,2.5,2.5s2.5-1.12,2.5-2.5v-120c0-0.699-0.341-1.38-0.73-1.77L171.78,4.21 c-0.404-0.395-1.094-0.73-1.77-0.73H42.1C40.734,3.48,39.6,4.591,39.6,5.98z M173.003,47.374c-0.276,0-0.5-0.224-0.5-0.5V12.019 l35.354,35.355H173.003z" />
+        <circle cx="42.1" cy="41.97" r="2.5" />
+        <path
+            d="M54.48,204.48h6.544c2.731,15.341,16.137,27.14,32.476,27.14c16.495,0,29.773-11.959,32.476-27.14h6.544 c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-6.041c0.217-8.551-2.824-16.436-7.989-22.41c-0.87-1-2.52-1.13-3.52-0.26 c-1.05,0.9-1.16,2.48-0.26,3.53c4.45,5.162,7,11.943,6.767,19.14h-5.987l-3.48-10.86c-0.738-2.325-4.029-2.304-4.76,0l-5.27,16.45 l-5.93-26.25c-0.571-2.581-4.274-2.586-4.87-0.02l-6.13,26.38l-5.3-16.56c-0.733-2.307-4.023-2.322-4.76,0l-3.48,10.86h-5.986 c-0.506-15.618,12.15-28.829,27.977-28.86c1.91,0,3.81,0.2,5.67,0.58c1.33,0.27,2.68-0.63,2.95-1.95c0.28-1.35-0.6-2.67-1.95-2.95 c-2.18-0.45-4.42-0.68-6.67-0.68c-18.323,0-33.456,15.024-32.979,33.86H54.48c-1.38,0-2.5,1.12-2.5,2.5S53.1,204.48,54.48,204.48z M73.33,204.48c1.09,0,2.05-0.7,2.38-1.74l1.66-5.16l5.68,17.76c0.803,2.458,4.265,2.219,4.82-0.2l5.71-24.58l5.55,24.56 c0.557,2.452,4.019,2.666,4.82,0.22l5.68-17.76l1.66,5.16c0.33,1.04,1.29,1.74,2.38,1.74h7.196 c-2.725,12.611-13.966,22.114-27.366,22.14c-13.401-0.026-24.641-9.529-27.366-22.14H73.33z" />
+        <path
+            d="M124,65.8h46c1.38,0,2.5-1.13,2.5-2.5c0-1.38-1.12-2.5-2.5-2.5h-46c-1.38,0-2.5,1.12-2.5,2.5 C121.5,64.67,122.62,65.8,124,65.8z" />
+        <path
+            d="M124,78.82h58.78c1.38,0,2.5-1.13,2.5-2.5c0-1.38-1.12-2.5-2.5-2.5H124c-1.38,0-2.5,1.12-2.5,2.5 C121.5,77.69,122.62,78.82,124,78.82z" />
+        <path
+            d="M153,194.48h34.08c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5H153c-1.38,0-2.5,1.12-2.5,2.5S151.62,194.48,153,194.48z" />
+        <path
+            d="M153,207.5h41.5c1.38,0,2.5-1.12,2.5-2.5c0-1.38-1.12-2.5-2.5-2.5H153c-1.38,0-2.5,1.12-2.5,2.5 C150.5,206.38,151.62,207.5,153,207.5z" />
+        <path
+            d="M74.05,123.32c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h21.28c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5H74.05z" />
+        <path
+            d="M52.35,138.84c0,1.38,1.12,2.5,2.5,2.5h40.48c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5H54.85 C53.47,136.34,52.35,137.46,52.35,138.84z" />
+        <path
+            d="M83.63,24.57c-14.27,0-25.88,11.61-25.88,25.87V83c0,1.38,1.12,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5V50.44 c0.02-11.49,9.39-20.85,20.88-20.87c11.49,0.02,20.85,9.38,20.87,20.87V83c0,1.38,1.12,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5V50.44 C109.5,36.18,97.89,24.57,83.63,24.57z" />
+        <path
+            d="M98.79,72.29V50.44c0-8.36-6.8-15.16-15.16-15.16s-15.17,6.8-15.17,15.16v21.85c0,1.38,1.12,2.5,2.5,2.5 c1.38,0,2.5-1.12,2.5-2.5V50.44c0.01-5.59,4.57-10.15,10.17-10.16c5.59,0.01,10.15,4.57,10.16,10.16v19.35h-8V57.67 c0-1.38-1.12-2.5-2.5-2.5c-1.38,0-2.5,1.12-2.5,2.5v14.62c0,1.395,1.164,2.602,2.697,2.48c0.538,0.031,12.265,0.02,12.803,0.02 C97.675,74.79,98.79,73.679,98.79,72.29z" />
+        <path
+            d="M83.29,52.25c1.38,0,2.5-1.12,2.5-2.49V48.3c0-1.38-1.12-2.5-2.5-2.5c-1.38,0-2.5,1.12-2.5,2.5v1.46 C80.79,51.13,81.91,52.25,83.29,52.25z" />
+        <path
+            d="M106.8,171.06c-0.7,1.18-0.3,2.72,0.89,3.42c1.108,0.671,2.708,0.339,3.42-0.89c0.713-1.195,0.299-2.717-0.88-3.42 C109.08,169.49,107.48,169.91,106.8,171.06z" />
+        <path
+            d="M113.448,136.503c10.87,8.08,24.603,15.068,38.14,15.07c0,0,0.001,0,0.001,0c0,0,0,0,0,0c0,0,0,0,0,0 c13.54,0,27.278-6.995,38.142-15.07c5.124-3.809,5.124-11.493,0-15.302c-10.868-8.079-24.605-15.07-38.142-15.07c0,0,0,0,0,0 c0,0,0,0,0,0c0,0-0.001,0-0.001,0c-13.541,0.002-27.275,6.994-38.141,15.07C108.326,125.009,108.323,132.694,113.448,136.503z M151.59,111.131c0.001,0,0.001,0,0.002,0c9.771,0.001,17.72,7.95,17.72,17.721c0,9.771-7.949,17.721-17.72,17.722 c-0.001,0-0.001,0-0.002,0c-9.772,0-17.721-7.95-17.721-17.722C133.869,119.081,141.818,111.131,151.59,111.131z M186.749,132.491 c-3.91,2.907-9.933,6.897-16.915,9.89c2.812-3.782,4.479-8.464,4.479-13.528c0-5.064-1.667-9.746-4.479-13.528 c6.983,2.993,13.005,6.983,16.915,9.89C189.181,127.021,189.182,130.683,186.749,132.491z M116.431,125.214 c3.911-2.907,9.934-6.897,16.917-9.89c-2.812,3.782-4.479,8.464-4.479,13.528c0,5.064,1.667,9.746,4.479,13.528 c-6.983-2.993-13.006-6.983-16.916-9.89C114,130.684,113.999,127.022,116.431,125.214z" />
+        <path
+            d="M151.591,138.756c5.461,0,9.904-4.443,9.904-9.904s-4.443-9.903-9.904-9.903s-9.903,4.442-9.903,9.903 S146.13,138.756,151.591,138.756z M151.591,123.949c2.704,0,4.904,2.2,4.904,4.903c0,2.704-2.2,4.904-4.904,4.904 c-2.704,0-4.903-2.2-4.903-4.904C146.687,126.148,148.887,123.949,151.591,123.949z" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/images/demographic.svg b/client/public/assets/images/demographic.svg
new file mode 100644
index 0000000..522a2ff
--- /dev/null
+++ b/client/public/assets/images/demographic.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="192px" height="192px">
+    <g id="Layer_1">
+        <rect width="29.451" height="70.162" x="28.875" y="30.345" fill="#d6c0b4" />
+        <path fill="#f2e1d6"
+            d="M179.809,54.018V6.687H58.326v23.658v70.162h9.753c2.882,0,5.527,1.64,6.812,4.226l8.852,17.733 c1.286,2.586,3.931,4.226,6.812,4.226h136.571V54.018H179.809z" />
+        <polygon fill="#d6c0b4" points="179.809,6.687 179.809,54.018 227.126,54.018" />
+        <path fill="#f0c020"
+            d="M237.943,126.692h-10.817H90.555c-2.881,0-5.527-1.64-6.812-4.226l-8.852-17.733 c-1.286-2.586-3.931-4.226-6.812-4.226h-9.753H28.875H18.058c-2.527,0-4.566,2.054-4.566,4.581v139.644 c0,2.527,2.039,4.581,4.566,4.581h219.885c2.527,0,4.566-2.054,4.566-4.581V131.258 C242.509,128.732,240.469,126.692,237.943,126.692z" />
+        <path fill="#f9e5af"
+            d="M28.723,237.187c-1.381,0-2.5-1.119-2.5-2.5v-118.94c0-1.381,1.119-2.5,2.5-2.5h16.06 c1.381,0,2.5,1.119,2.5,2.5s-1.119,2.5-2.5,2.5h-13.56v116.44C31.223,236.067,30.104,237.187,28.723,237.187z M58.326,118.246 h-3.543c-1.381,0-2.5-1.119-2.5-2.5s1.119-2.5,2.5-2.5h3.543c1.381,0,2.5,1.119,2.5,2.5S59.707,118.246,58.326,118.246z" />
+        <path fill="#f9e5af"
+            d="M229,237.187h-12.944c-1.381,0-2.5-1.119-2.5-2.5s1.119-2.5,2.5-2.5H226.5V140.63 c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5v94.056C231.5,236.067,230.381,237.187,229,237.187z M206.056,237.187h-4.927 c-1.381,0-2.5-1.119-2.5-2.5s1.119-2.5,2.5-2.5h4.927c1.381,0,2.5,1.119,2.5,2.5S207.437,237.187,206.056,237.187z" />
+        <path fill="#fff"
+            d="M71.667,89.854c-1.381,0-2.5-1.119-2.5-2.5v-5.167c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5v5.167 C74.167,88.734,73.048,89.854,71.667,89.854z M71.667,73.687c-1.381,0-2.5-1.119-2.5-2.5V19.02c0-1.381,1.119-2.5,2.5-2.5 H169.5c1.381,0,2.5,1.119,2.5,2.5s-1.119,2.5-2.5,2.5H74.167v49.667C74.167,72.567,73.048,73.687,71.667,73.687z" />
+        <path fill="#f2e1d6"
+            d="M170.178,188.632c0,13.141-6.007,24.873-15.44,32.615c-7.286,5.963-16.59,9.564-26.738,9.564 s-19.452-3.6-26.738-9.564c-9.433-7.741-15.44-19.473-15.44-32.615c0-23.312,18.888-42.199,42.178-42.199 S170.178,165.32,170.178,188.632z" />
+        <path fill="#fc5d3d"
+            d="M154.738,218.71v2.537c-7.286,5.963-16.59,9.564-26.738,9.564s-19.452-3.6-26.738-9.564v-2.537 c0-11.97,9.694-21.685,21.685-21.685h10.106C145.045,197.024,154.738,206.739,154.738,218.71z" />
+        <path fill="#ffcbc2"
+            d="M143.841,217.828c-0.412-5.617-5.15-10.018-10.788-10.018c-1.381,0-2.5-1.119-2.5-2.5s1.119-2.5,2.5-2.5 c8.243,0,15.172,6.436,15.774,14.652c0.101,1.377-0.933,2.575-2.311,2.676C145.165,220.245,143.943,219.222,143.841,217.828z" />
+        <path fill="#7c7b7a"
+            d="M142.069,160.19l-5.161,2.693c-1.326,0.692-2.799,1.053-4.295,1.053h-10.342 c-3.837,0-6.233,3.232-6.233,7.223v3.92h23.937l0,0C143.497,171.327,144.709,165.63,142.069,160.19z" />
+        <path fill="#ffb69f"
+            d="M128.013,197.024L128.013,197.024c-6.607,0-11.975-5.356-11.975-11.962v-9.983h23.937v9.983 C139.975,191.669,134.62,197.024,128.013,197.024z" />
+        <path
+            d="M229.63,54.02c0-0.652-0.303-1.308-0.705-1.727c-0.012-0.013-0.018-0.03-0.031-0.042l-47.305-47.32 c-0.003-0.003-0.005-0.008-0.009-0.011c-0.415-0.415-1.102-0.73-1.77-0.73h-89.8c-1.38,0-2.5,1.12-2.5,2.5 c0,1.37,1.12,2.5,2.5,2.5h87.299v44.828c0,1.356,1.105,2.502,2.501,2.502h44.82v8.7c0,1.38,1.12,2.5,2.5,2.5 c1.37,0,2.5-1.12,2.5-2.5V54.02z M182.31,51.518V12.725l38.781,38.793H182.31z" />
+        <circle cx="227.13" cy="75.22" r="2.5" />
+        <circle cx="80.01" cy="6.69" r="2.5" />
+        <path
+            d="M96.385,62.257h53.323c1.381,0,2.5-1.119,2.5-2.5s-1.119-2.5-2.5-2.5H96.385c-1.381,0-2.5,1.119-2.5,2.5 S95.004,62.257,96.385,62.257z" />
+        <path
+            d="M189.066,79.348H96.385c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h92.681c1.381,0,2.5-1.119,2.5-2.5 S190.447,79.348,189.066,79.348z" />
+        <path
+            d="M189.066,99.281H96.385c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h92.681c1.381,0,2.5-1.119,2.5-2.5 S190.447,99.281,189.066,99.281z" />
+        <circle cx="13.49" cy="203.79" r="2.5" />
+        <path
+            d="M245.01,244.73V131.26c-0.01-3.89-3.18-7.06-7.07-7.07h-8.31V85.22c0-1.38-1.13-2.5-2.5-2.5c-1.38,0-2.5,1.12-2.5,2.5 v38.97c-5.057,0-128.036,0-134.08,0c-1.92,0-3.71-1.11-4.57-2.84l-8.85-17.73c-1.72-3.46-5.19-5.61-9.05-5.61h-7.25V9.19h9.18 c1.37,0,2.5-1.13,2.5-2.5c0-1.38-1.12-2.49-2.49-2.5h-0.01H58.33c-1.392,0-2.5,1.114-2.5,2.5v21.16H28.87 c-1.41,0-2.5,1.158-2.5,2.5v67.66h-8.31c-3.89,0-7.06,3.18-7.07,7.08v88.7c0,1.37,1.12,2.5,2.5,2.5s2.5-1.13,2.5-2.5v-88.7 c0-1.15,0.93-2.08,2.07-2.08c14.888,0,25.276,0,40.27,0h9.75c1.92,0,3.72,1.11,4.57,2.84l8.85,17.73 c1.73,3.46,5.19,5.61,9.06,5.61c7.041,0,132.264,0,136.57,0h10.81c1.16,0,2.07,0.91,2.07,2.07v113.47c0,1.15-0.93,2.08-2.07,2.08 H18.06c-1.14,0-2.07-0.93-2.07-2.08v-30.94c0-1.38-1.12-2.5-2.5-2.5s-2.5,1.12-2.5,2.5v30.94c0.01,3.91,3.18,7.08,7.07,7.08 h219.88C241.83,251.81,245,248.64,245.01,244.73z M31.37,98.01V32.84h24.46v65.17C52.406,98.01,33.55,98.01,31.37,98.01z" />
+        <path
+            d="M128,233.31c24.501,0,44.68-19.86,44.68-44.68c0-24.79-20.106-44.7-44.68-44.7c-24.607,0-44.68,19.947-44.68,44.7 C83.32,213.452,103.49,233.31,128,233.31z M138.81,172.58h-20.272v-1.42c0-2.351,1.154-4.723,3.733-4.723h10.342 c1.891,0,3.776-0.462,5.452-1.337l2.65-1.383C141.427,166.777,140.742,170.059,138.81,172.58z M118.551,177.58h18.924v7.482 c0,5.218-4.245,9.462-9.462,9.462c-5.217,0-9.462-4.245-9.462-9.462V177.58z M122.948,199.524h10.105 c10.579,0,19.186,8.606,19.186,19.186v1.315c-6.856,5.306-15.423,8.285-24.238,8.285c-8.661,0-17.229-2.872-24.238-8.284v-1.316 C103.762,208.131,112.368,199.524,122.948,199.524z M88.32,188.63c0-21.931,17.745-39.7,39.68-39.7 c21.93,0,39.68,17.765,39.68,39.7c0,10.125-3.835,19.706-10.643,27.011c-1.288-10.12-8.851-18.304-18.656-20.518 c2.529-2.606,4.095-6.152,4.095-10.061v-9.066c3.621-4.434,4.763-10.866,1.843-16.895c-0.615-1.272-2.159-1.776-3.407-1.127 l-5.161,2.693c-0.964,0.503-2.05,0.77-3.138,0.77h-10.342c-5.06,0-8.72,4.089-8.72,9.723v13.903c0,3.907,1.564,7.451,4.09,10.056 c-9.816,2.207-17.388,10.395-18.678,20.523C92.155,208.337,88.32,198.755,88.32,188.63z" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json
index 3b4383b..bf73d43 100644
--- a/client/src/components/LanguageSelect/locales/en/translation.json
+++ b/client/src/components/LanguageSelect/locales/en/translation.json
@@ -89,10 +89,12 @@
   "SCAN_YOUR_DOCUMENT": "Scan your document",
   "INCORRECT_OTP": "Incorrect OTP!",
   "OTP_VERIFIED!": "OTP verified!",
-  "PROVIDE_AADHAAR_NUMBER": "Provide Aadhaar Number",
+  "PROVIDE_YOUR_AADHAAR_NUMBER": "Provide your Aadhaar Number",
   "SUBMIT": "Submit",
   "ENTER_YOUR_AADHAAR_NUMBER": "Enter your Aadhaar Number",
+  "PLEASE_ENTER_VALID_AADHAAR_NUMBER": "Please enter a valid aadhaar number",
   "ENTER_OTP": "Enter OTP",
+  "SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER": "Sent to your registered mobile number",
   "PLEASE_VERIFY_OTP": "Please verify OTP",
-  "USER_ALREADY_EXISTS": "User already exists"
+  "USER_ALREADY_EXISTS": "USER ALREADY EXISTS"
 }
diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json
index 801d46c..eedee10 100644
--- a/client/src/components/LanguageSelect/locales/hi/translation.json
+++ b/client/src/components/LanguageSelect/locales/hi/translation.json
@@ -89,10 +89,12 @@
   "SCAN_YOUR_DOCUMENT": "अपना दस्तावेज़ स्कैन करें",
   "INCORRECT_OTP": "गलत ऑट्पी!",
   "OTP_VERIFIED!": "ऑट्पी सत्यापित कर दिया गया है!",
-  "PROVIDE_AADHAAR_NUMBER": "आधार नंबर प्रदान करें",
-  "ENTER_YOUR_AADHAAR_NUMBER": "आधार नंबर दर्ज करें",
+  "PROVIDE_YOUR_AADHAAR_NUMBER": "अपना आधार नंबर प्रदान करें",
+  "ENTER_YOUR_AADHAAR_NUMBER": "अपना आधार नंबर दर्ज करें",
+  "PLEASE_ENTER_VALID_AADHAAR_NUMBER": "कृपया वैध आधार संख्या दर्ज करें",
   "SUBMIT": "प्रस्तुत करें",
   "ENTER_OTP": "ओटीपी दर्ज करें",
+  "SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER": "आपके पंजीकृत मोबाइल नंबर पर भेजा गया",
   "PLEASE_VERIFY_OTP": "कृपया ओटीपी सत्यापित करें",
   "USER_ALREADY_EXISTS": "उपयोगकर्ता पहले से मौजूद है"
 }
diff --git a/client/src/components/UpdateInput/UpdateInput.module.css b/client/src/components/UpdateInput/UpdateInput.module.css
index 52e13a7..d4d7ee5 100644
--- a/client/src/components/UpdateInput/UpdateInput.module.css
+++ b/client/src/components/UpdateInput/UpdateInput.module.css
@@ -10,13 +10,13 @@
   flex-direction: column;
 }
 
-.input__edit{
+.input__edit {
   display: flex;
   flex-direction: row;
 }
 
 .input__field {
-  width: 300px;
+  width: 330px;
   margin: 10px 0px;
   padding: 18px 10px;
   border: 3px solid;
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index 86f53f4..d61f16f 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -37,7 +37,7 @@ const DocumentScanner = () => {
       DOB: doccu.DOB
     })
   })
-  console.log(activeStep)
+
   const handleNext = () => {
     if (activeStep === steps.length - 1) {
       setUserData({ ...userData, documents: documents })
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 9159508..20a97f7 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -27,7 +27,7 @@ const Address = () => {
     }))
 
   const customStyles = {
-    control: (base, state) => ({
+    control: (base) => ({
       ...base,
       width: '330px',
       height: '60px',
@@ -35,7 +35,7 @@ const Address = () => {
       border: '3px solid',
       borderRadius: '10px !important'
     }),
-    input: (base, state) => ({
+    input: (base) => ({
       ...base,
       display: 'flex',
       justifyContent: 'center',
@@ -55,89 +55,11 @@ const Address = () => {
     setEditable2(!editable2)
   }
 
-  console.log(userData.address.village)
-
   return (
     <>
-      <Header subheading={t('ENROLLMENT')} />
+      <Header subheading={t('UPDATE')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="state">{t('STATE')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="state"
-                  name="state"
-                  options={updatedStates('IN')}
-                  defaultValue={userData.address.state}
-                  isDisabled={editable1}
-                  isSearchable={!editable1}
-                  onChange={(e) => {
-                    setUserData({
-                      ...userData,
-                      address: {
-                        ...userData.address,
-                        state: e
-                      }
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit1}
-                  enabled={!editable1 ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="city">{t('DISTRICT')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="city"
-                  name="city"
-                  options={updatedCities('IN', userData.address.state.isoCode)}
-                  defaultValue={userData.address.district}
-                  isDisabled={editable2}
-                  isSearchable={!editable2}
-                  onChange={(e) => {
-                    setUserData({
-                      ...userData,
-                      address: {
-                        ...userData.address,
-                        district: e
-                      }
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit2}
-                  enabled={!editable2 ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <UpdateInput
-            id="town"
-            label={t('VILLAGE_TOWN')}
-            defaultValue={userData.address.village}
-            type="text"
-            onChange={(e) => {
-              setUserData({
-                ...userData,
-                address: {
-                  ...userData.address,
-                  village: e.target.value
-                }
-              })
-            }}
-            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
-          />
-        </div>
-        <div className={styles.address__container}>
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
@@ -155,36 +77,65 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
           />
           <UpdateInput
-            id="street"
-            label={t('STREET_ROAD')}
-            defaultValue={userData.address.street}
+            id="town"
+            label={t('VILLAGE_TOWN')}
+            defaultValue={userData.address.village}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  street: e.target.value
+                  village: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_STREET_ROAD')}
+            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="state">{t('STATE')}</label>
+            <div className={styles.input__edit}>
+              <Select
+                id="state"
+                name="state"
+                options={updatedStates('IN')}
+                defaultValue={userData.address.state}
+                isDisabled={editable1}
+                isSearchable={!editable1}
+                onChange={(e) => {
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      state: e
+                    }
+                  })
+                }}
+                styles={customStyles}
+              />
+              <EditButton
+                onClick={handleEdit1}
+                enabled={!editable1 ? '1' : '0'}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={styles.address__container}>
           <UpdateInput
-            id="locality"
-            label={t('AREA_LOCALITY')}
-            defaultValue={userData.address.locality}
+            id="street"
+            label={t('STREET_ROAD')}
+            defaultValue={userData.address.street}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  locality: e.target.value
+                  street: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
+            placeholder={t('ENTER_YOUR_STREET_ROAD')}
           />
           <UpdateInput
             id="postOffice"
@@ -202,23 +153,50 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="city">{t('DISTRICT')}</label>
+            <div className={styles.input__edit}>
+              <Select
+                id="city"
+                name="city"
+                options={updatedCities('IN', userData.address.state.isoCode)}
+                defaultValue={userData.address.district}
+                isDisabled={editable2}
+                isSearchable={!editable2}
+                onChange={(e) => {
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      district: e
+                    }
+                  })
+                }}
+                styles={customStyles}
+              />
+              <EditButton
+                onClick={handleEdit2}
+                enabled={!editable2 ? '1' : '0'}
+              />
+            </div>
+          </div>
         </div>
         <div className={styles.address__container}>
           <UpdateInput
-            id="landmark"
-            label={t('LANDMARK')}
-            defaultValue={userData.address.landmark}
+            id="locality"
+            label={t('AREA_LOCALITY')}
+            defaultValue={userData.address.locality}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  landmark: e.target.value
+                  locality: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
           />
           <UpdateInput
             id="pincode"
@@ -236,6 +214,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
           />
+          <UpdateInput
+            id="landmark"
+            label={t('LANDMARK')}
+            defaultValue={userData.address.landmark}
+            type="text"
+            onChange={(e) => {
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
+              })
+            }}
+            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+          />
         </div>
       </div>
     </>
diff --git a/client/src/pages/Update/Address/Address.module.css b/client/src/pages/Update/Address/Address.module.css
index 41cbf17..ccaca08 100644
--- a/client/src/pages/Update/Address/Address.module.css
+++ b/client/src/pages/Update/Address/Address.module.css
@@ -1,33 +1,22 @@
 .address {
   display: flex;
   justify-content: center;
+  margin: 40px 0px 0px;
 }
 
 .address__container {
   margin: 0px 20px;
 }
 
-.input {
+.input__container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   font-family: 'Barlow';
   font-size: var(--font-medium-s);
 }
 
-.input__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.input__edit{
+.input__edit {
   display: flex;
   flex-direction: row;
 }
-
-.input__field {
-  width: 300px;
-  margin: 10px 0px;
-  padding: 20px 10px;
-  border: 3px solid;
-  border-radius: 10px;
-}
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 804561b..2d1361d 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -1,57 +1,111 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Header from '../../../components/Header/Header'
 import CardAgreement from '../../../components/Card/CardAgreement'
 import styles from './Agreement.module.css'
 import Input from '../../../components/Input/Input'
-import { Grid, Button } from '@mui/material'
 import { Link } from 'react-router-dom'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { Button, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import { sendOTP, updateUser } from '../../../services/apiservice'
 import { userContext } from '../../../context/User'
 import { useMutation } from 'react-query'
-import { updateUser } from '../../../services/apiservice'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
-const Agreement = () => {
+const Agreement = ({ unverified, setUnverified }) => {
+  const { t } = useTranslation()
+  const [otp, setOtp] = useState()
+  const [disabled, setDisabled] = useState(false)
+  const [finalDisable, setFinalDisable] = useState(false)
+  const [show, setShow] = useState(false)
   const { userData } = userContext()
+
   const updateUse = useMutation(() => updateUser(userData._id, { ...userData }))
 
-  const { t } = useTranslation()
+  const { data, mutate } = useMutation(() =>
+    sendOTP({ mobile: `+91${userData?.mobile}` })
+  )
+
+  console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+
+  const verifyOTP = () => {
+    if (data?.data?.otpCode === Number(otp)) {
+      console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+      setFinalDisable(true)
+      setDisabled(true)
+      setShow(false)
+      setUnverified(false)
+      toast.success(t('OTP_VERIFIED!'))
+    } else {
+      toast.error(t('INCORRECT_OTP!'))
+    }
+  }
+
+  const sendResendOTP = () => {
+    setTimeout(() => {
+      if (finalDisable === false) {
+        console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+        setDisabled(false)
+      }
+    }, 30000)
+  }
+
   return (
     <>
-      <Header subheading={t('UPDATE')} />
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
+      <Header subheading={t('ENROLLMENT')} />
       <div className={styles.card__container}>
         <CardAgreement
           image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         />
       </div>
-      <Input
-        type="text"
-        id="otp"
-        label={t('PLEASE_VERIFY_YOUR_IDENTITY')}
-        placeholder="XXXX"
-      />
-      <Grid container columnSpacing={10} justifyContent="center">
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('SEND_OTP')}
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('RESEND')}
-          </Button>
-        </Grid>
-      </Grid>
+      <div className={styles.card__elements}>
+        <Typography>{t('PLEASE_VERIFY_YOUR_IDENTITY')}</Typography>
+        <Button
+          color="primary"
+          size="large"
+          type="submit"
+          variant="contained"
+          disabled={disabled}
+          sx={{ marginTop: '1rem' }}
+          onClick={() => {
+            mutate()
+            setDisabled(true)
+            setShow(true)
+            sendResendOTP()
+          }}
+        >
+          {show ? t('RESEND') : t('SEND_OTP')}
+        </Button>
+        {show && (
+          <>
+            <Input
+              type="text"
+              id="otp"
+              value={otp}
+              onChange={(e) => setOtp(e.target.value)}
+              maxLength="6"
+              placeholder="XXXXXX"
+            />
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={() => {
+                verifyOTP()
+              }}
+            >
+              {t('VERIFY_OTP')}
+            </Button>
+          </>
+        )}
+      </div>
       <Link to="/update/final-slip">
         <SubmitButton onClick={() => updateUse.mutate()} />
       </Link>
diff --git a/client/src/pages/Update/Agreement/Agreement.module.css b/client/src/pages/Update/Agreement/Agreement.module.css
index c618a4d..2580d47 100644
--- a/client/src/pages/Update/Agreement/Agreement.module.css
+++ b/client/src/pages/Update/Agreement/Agreement.module.css
@@ -1,4 +1,11 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+}
+
+.card__elements {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index 72aa1b7..6737ed9 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -11,20 +11,14 @@ const Biometric = () => {
   const [page, setPage] = useState(4)
   const { userData, oriUserData, setUserData } = userContext()
 
-  const [formData, setFormData] = useState({
-    photo: '',
-    irisScan: '',
-    fingerPrint: ''
-  })
-
   const conditionalComponent = () => {
     switch (page) {
       case 0:
-        return <PhotoCapture formData={formData} setFormData={setFormData} />
+        return <PhotoCapture />
       case 1:
-        return <Fingerprint formData={formData} setFormData={setFormData} />
+        return <Fingerprint />
       case 2:
-        return <IrisScan formData={formData} setFormData={setFormData} />
+        return <IrisScan />
       default:
         return <BiometricSelect page={page} setPage={setPage} />
     }
@@ -49,21 +43,21 @@ const Biometric = () => {
       case 0:
         return (
           <>
-            <SubmitButton onClick={() => handleSubmit()}> Next</SubmitButton>
+            <SubmitButton onClick={() => handleSubmit()} />
             <BackButton onClick={() => handleBack()} />
           </>
         )
       case 1:
         return (
           <>
-            <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+            <SubmitButton onClick={() => setPage(4)} />
             <BackButton onClick={() => setPage(page - 1)} />
           </>
         )
       case 2:
         return (
           <>
-            <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+            <SubmitButton onClick={() => setPage(4)} />
             <BackButton onClick={() => setPage(page - 1)} />
           </>
         )
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 61fe972..0f89fe2 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -13,6 +13,7 @@ import UpdateSelect from '../UpdateSelect/UpdateSelect'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 import { ToastContainer, toast } from 'react-toastify'
+import BackButton from '../../../components/BackButton/BackButton'
 import 'react-toastify/dist/ReactToastify.css'
 
 const Demographic = () => {
@@ -87,13 +88,26 @@ const Demographic = () => {
   const conditionalButton = () => {
     switch (page) {
       case 0:
-        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={handleSubmit} />
+            <BackButton onClick={() => setPage(page - 1)} />
+          </>
+        )
       case 1:
-        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={handleSubmit} />
+            <BackButton onClick={() => setPage(page - 1)} />
+          </>
+        )
       case 2:
-        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
-      default:
-        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={handleSubmit} />
+            <BackButton onClick={() => setPage(page - 1)} />
+          </>
+        )
     }
   }
   return (
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index f6fe0b5..0fe8d42 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -3,34 +3,18 @@ import React, { useState } from 'react'
 import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
 import styles from './DocumentScanner.module.css'
-import {
-  Button,
-  Grid,
-  Typography,
-  StepLabel,
-  Step,
-  Stepper,
-  Box
-} from '@mui/material'
+import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import { toast } from 'react-toastify'
+import { useStyles } from './styles'
 
 const DocumentScanner = () => {
   const { userData, oriUserData, setUserData } = userContext()
   const { t } = useTranslation()
-
-  // JSON.stringify(oriUserData?.address) ===
   let steps
 
-  // use conditional statements to compare userData and oriUserData to determine the steps
-  // 1st case: if only address is changed, then step=['POA']
-  // 2nd case: if only either name or gender is changed, then step=['POI']
-  // 3rd case: if only dob is changed, then step=['DOB']
-  // 4th case: If only address and name or gender is changed, then step=['POA', 'POI']
-  // 5th case: If only address and dob is changed, then step=['POA', 'DOB']
-  // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB']
-  // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB']
   if (
     (userData.address !== oriUserData.address &&
       userData.dob !== oriUserData.dob &&
@@ -71,7 +55,7 @@ const DocumentScanner = () => {
 
   const [doccu] = useState({ POI: '', POA: '', DOB: '' })
 
-  console.log(documents)
+  const classes = useStyles()
 
   const webcamRef = React.useRef(null)
 
@@ -90,7 +74,15 @@ const DocumentScanner = () => {
     if (activeStep === steps.length - 1) {
       setUserData({ ...userData, documents: documents })
     }
-    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+    if (
+      (!documents.POI && activeStep === 0) ||
+      (!documents.POA && activeStep === 1) ||
+      (!documents.DOB && activeStep === 2)
+    ) {
+      toast.error(t('SCAN_YOUR_DOCUMENT'))
+    } else {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1)
+    }
   }
 
   const handleBack = () => {
@@ -100,67 +92,85 @@ const DocumentScanner = () => {
   const WebcamComponent = ({ doc }) => {
     return (
       <>
-        <div className={styles.card__container}>
-          {documents[doc] === '' ? (
-            <Webcam
-              audio={false}
-              height={400}
-              ref={webcamRef}
-              screenshotFormat="image/jpeg"
-              width={600}
-              videoConstraints={{
-                height: 400,
-                width: 600,
-                facingMode: 'user'
-              }}
+        <div className={styles.container}>
+          <button
+            className={styles.button}
+            disabled={activeStep === 0}
+            onClick={handleBack}
+          >
+            <img
+              src={`${process.env.PUBLIC_URL}/assets/images/back_inverse.svg`}
+              alt=""
+              className={styles.image}
             />
-          ) : (
-            <img src={documents[doc]} />
-          )}
+          </button>
+          <div className={styles.card__container}>
+            {documents[doc] === '' ? (
+              <Webcam
+                audio={false}
+                height={400}
+                ref={webcamRef}
+                screenshotFormat="image/jpeg"
+                width={600}
+                videoConstraints={{
+                  height: 400,
+                  width: 600,
+                  facingMode: 'user'
+                }}
+              />
+            ) : (
+              <img src={documents[doc]} />
+            )}
+          </div>
+          <button onClick={handleNext} className={styles.button}>
+            <img
+              src={`${process.env.PUBLIC_URL}/assets/images/next_inverse.svg`}
+              alt=""
+              className={styles.image}
+            />
+          </button>
+        </div>
+        <div className={styles.button__container}>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ margin: '0px 20px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              capture(doc)
+            }}
+          >
+            {t('SCAN')}
+          </Button>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ margin: '0px 20px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              doccu[doc] = ''
+              setDocuments({
+                ...documents,
+                POI: doccu.POI,
+                POA: doccu.POA,
+                DOB: doccu.DOB
+              })
+            }}
+          >
+            {t('RESET')}
+          </Button>
         </div>
-        <Grid container columnSpacing={10} justifyContent="center">
-          <Grid item>
-            <Button
-              color="primary"
-              size="large"
-              type="submit"
-              variant="contained"
-              onClick={(e) => {
-                e.preventDefault()
-                capture(doc)
-              }}
-            >
-              {t('SCAN')}
-            </Button>
-          </Grid>
-          <Grid item>
-            <Button
-              color="primary"
-              size="large"
-              type="submit"
-              variant="contained"
-              onClick={(e) => {
-                e.preventDefault()
-                doccu[doc] = ''
-                setDocuments({
-                  ...documents,
-                  POI: doccu.POI,
-                  POA: doccu.POA,
-                  DOB: doccu.DOB
-                })
-              }}
-            >
-              {t('RESET')}
-            </Button>
-          </Grid>
-        </Grid>
         <br></br>
         <div>
-          <Grid container justifyContent="center">
+          <div>
             <Typography align="center">
               {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
             </Typography>
-          </Grid>
+          </div>
         </div>
       </>
     )
@@ -168,55 +178,43 @@ const DocumentScanner = () => {
 
   return (
     <>
-      <Header subheading={t('ENROLLMENT')} />
+      <Header subheading={t('UPDATE')} />
       <SubmitButton />
-      <Box sx={{ width: '100%' }}>
-        <Stepper activeStep={activeStep}>
-          {steps.map((label, index) => {
-            const stepProps = {}
-            const labelProps = {}
-            return (
-              <Step key={label} {...stepProps}>
-                <StepLabel {...labelProps}>{label}</StepLabel>
-              </Step>
-            )
-          })}
-        </Stepper>
-        {activeStep === steps.length ? (
-          <React.Fragment>
-            <Typography sx={{ mt: 2, mb: 1 }}>
+      <div className={styles.stepper__container}>
+        <div className={styles.box}>
+          <Stepper activeStep={activeStep} sx={{ width: '60%' }}>
+            {steps.map((label, index) => {
+              const stepProps = {}
+              const labelProps = {}
+              return (
+                <Step key={label} {...stepProps}>
+                  <StepLabel
+                    {...labelProps}
+                    classes={{ label: classes.stepLabel }}
+                  >
+                    {label}
+                  </StepLabel>
+                </Step>
+              )
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <Typography variant="h3" sx={{ mt: 8, mb: 1 }}>
               {t('ALL_STEPS_COMPLETED')}
             </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-              <Box sx={{ flex: '1 1 auto' }} />
-            </Box>
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            {activeStep === 0 ? (
-              <WebcamComponent doc="POI" />
-            ) : activeStep === 1 ? (
-              <WebcamComponent doc="POA" />
-            ) : (
-              activeStep === 2 && <WebcamComponent doc="DOB" />
-            )}
-            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-              <Button
-                color="inherit"
-                disabled={activeStep === 0}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                {t('BACK')}
-              </Button>
-              <Box sx={{ flex: '1 1 auto' }} />
-              <Button onClick={handleNext}>
-                {activeStep === steps.length - 1 ? t('FINISH') : t('NEXT')}
-              </Button>
-            </Box>
-          </React.Fragment>
-        )}
-      </Box>
+          ) : (
+            <React.Fragment>
+              {activeStep === 0 ? (
+                <WebcamComponent doc="POI" />
+              ) : activeStep === 1 ? (
+                <WebcamComponent doc="POA" />
+              ) : (
+                activeStep === 2 && <WebcamComponent doc="DOB" />
+              )}
+            </React.Fragment>
+          )}
+        </div>
+      </div>
     </>
   )
 }
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
index ec59f61..f73d192 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
@@ -1,5 +1,50 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
-  
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+}
+
+.stepper__container {
+  display: flex;
+  justify-content: center;
+}
+
+.button__container {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.button {
+  background: transparent;
+  border: none;
+}
+
+.image {
+  height: 50px;
+  width: 50px;
+}
+
+.image:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+}
+
+.image:active {
+  transform: scale(0.98);
+}
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+}
diff --git a/client/src/pages/Update/DocumentScanner/styles.js b/client/src/pages/Update/DocumentScanner/styles.js
new file mode 100644
index 0000000..0b7e915
--- /dev/null
+++ b/client/src/pages/Update/DocumentScanner/styles.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@mui/styles'
+
+export const useStyles = makeStyles({
+  stepLabel: {
+    fontSize: '20px'
+  }
+})
diff --git a/client/src/pages/Update/FormOne/FormOne.module.css b/client/src/pages/Update/FormOne/FormOne.module.css
index abde7ef..e0cff0e 100644
--- a/client/src/pages/Update/FormOne/FormOne.module.css
+++ b/client/src/pages/Update/FormOne/FormOne.module.css
@@ -34,14 +34,14 @@
 }
 
 .formone__dob_input {
-  width: 300px;
+  width: 330px;
   margin: 10px 0px;
   padding: 11px 10px;
   border: 3px solid;
   border-radius: 10px;
 }
 
-.input__edit{
+.input__edit {
   display: flex;
   flex-direction: row;
 }
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index 31d8096..bce6ef7 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -1,19 +1,26 @@
-import React, { useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import { Button, Grid } from '@mui/material'
+import { Button } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
-import { useQuery } from 'react-query'
-import { getUserByAadhaar } from '../../../services/apiservice'
-import styles from './Otp.module.css'
+import { useQuery, useMutation } from 'react-query'
+import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { toast, ToastContainer } from 'react-toastify'
+
+import styles from './Otp.module.css'
 
 const Otp = () => {
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const { aadhaarNumber, setUserData, oriUserData, setOriUserData } =
+  const [otp, setOtp] = useState()
+  const [disabled, setDisabled] = useState(false)
+  const [finalDisable, setFinalDisable] = useState(false)
+  const [unverified, setUnverified] = useState(true)
+  const [show, setShow] = useState(false)
+  const { aadhaarNumber, userData, setUserData, oriUserData, setOriUserData } =
     userContext()
 
   useEffect(() => {
@@ -22,7 +29,6 @@ const Otp = () => {
 
   const isLongEnough = aadhaarNumber?.toString().length > 11
 
-  // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
   const { isLoading, isError, data } = useQuery('user', async () => {
     if (isLongEnough) {
       const response = await getUserByAadhaar(aadhaarNumber)
@@ -30,6 +36,31 @@ const Otp = () => {
     }
   })
 
+  const mutateOTP = useMutation(() =>
+    sendOTP({ mobile: `+91${userData?.mobile}` })
+  )
+
+  const verifyOTP = () => {
+    if (mutateOTP?.data?.data?.otpCode === Number(otp)) {
+      setFinalDisable(true)
+      setDisabled(true)
+      setShow(false)
+      setUnverified(false)
+      toast.success(t('OTP_VERIFIED!'))
+    } else {
+      toast.error(t('INCORRECT_OTP'))
+    }
+  }
+
+  const sendResendOTP = () => {
+    setTimeout(() => {
+      if (finalDisable === false) {
+        console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+        setDisabled(false)
+      }
+    }, 30000)
+  }
+
   if (isLoading) {
     return <div>{t('loading')}</div>
   }
@@ -43,29 +74,66 @@ const Otp = () => {
   }
   return (
     <>
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       <Header subheading={`${t('UPDATE')}`} />
       <div className={styles.subheading__container}>
-        <h3 className={styles.subheading}> {t('ENTER_OTP')} </h3>
-        <Input
-          type="text"
-          id="aadhaarNumber"
-          placeholder={`${t('ENTER_OTP')}`}
-        />
-        <Grid container columnSpacing={10} justifyContent="center">
-          <Grid item>
+        <h3 className={styles.subheading}>{t('ENTER_OTP')}</h3>
+        <p className={styles.subsubheading}>
+          {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')}
+        </p>
+        <Button
+          color="primary"
+          size="large"
+          type="submit"
+          variant="contained"
+          disabled={disabled}
+          sx={{ marginTop: '1rem' }}
+          onClick={() => {
+            mutateOTP.mutate()
+            setDisabled(true)
+            setShow(true)
+            sendResendOTP()
+          }}
+        >
+          {show ? t('RESEND') : t('SEND_OTP')}
+        </Button>
+        {show && (
+          <>
+            <Input
+              type="text"
+              id="otp"
+              value={otp}
+              onChange={(e) => setOtp(e.target.value)}
+              maxLength="6"
+              placeholder={t('ENTER_OTP')}
+            />
             <Button
               color="primary"
               size="large"
               type="submit"
               variant="contained"
-              onClick={() => {}}
+              onClick={() => {
+                verifyOTP()
+              }}
             >
               {t('VERIFY_OTP')}
             </Button>
-          </Grid>
-        </Grid>
+          </>
+        )}
       </div>
-      <SubmitButton onClick={() => navigate('/update/select-update')} />
+      <SubmitButton
+        onClick={() => {
+          if (unverified) {
+            toast.error(t('PLEASE_VERIFY_OTP'))
+          } else {
+            navigate('/update/select-update')
+          }
+        }}
+      />
     </>
   )
 }
diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css
index 261d7aa..b88d5d4 100644
--- a/client/src/pages/Update/Otp/Otp.module.css
+++ b/client/src/pages/Update/Otp/Otp.module.css
@@ -12,3 +12,8 @@
   font-size: var(--font-medium);
   font-weight: 400;
 }
+
+.subsubheading {
+  font-size: var(--font-medium-s);
+  margin: 10px 0px;
+}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
index 2ef98ec..ecf1677 100644
--- a/client/src/pages/Update/Update.jsx
+++ b/client/src/pages/Update/Update.jsx
@@ -6,6 +6,8 @@ import { Grid, Button } from '@mui/material'
 import { userContext } from '../../context/User'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { ToastContainer, toast } from 'react-toastify'
+import { validAadhaar } from '../../constants/RegEx'
 
 const Update = () => {
   const { aadhaarNumber, setAadhaarNumber } = userContext()
@@ -15,11 +17,18 @@ const Update = () => {
 
   return (
     <>
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       <Header subheading={`${t('UPDATE')}`} />
       <div className={styles.subheading__container}>
-        <h3 className={styles.subheading}> {t('PROVIDE_AADHAAR_NUMBER')} </h3>
+        <h3 className={styles.subheading}>
+          {t('PROVIDE_YOUR_AADHAAR_NUMBER')}
+        </h3>
         <Input
-          type="text"
+          type="number"
           id="aadhaarNumber"
           value={aadhaarNumber}
           onChange={(e) => setAadhaarNumber(e.target.value)}
@@ -34,7 +43,11 @@ const Update = () => {
               type="submit"
               variant="contained"
               onClick={() => {
-                navigate('/update/otp')
+                if (!validAadhaar.test(aadhaarNumber)) {
+                  toast.error(t('Please enter a valid aadhaar number'))
+                } else {
+                  navigate('/update/otp')
+                }
               }}
             >
               {t('SUBMIT')}
diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
index e57587a..3c2edb3 100644
--- a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
+++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
@@ -1,27 +1,27 @@
 import { t } from 'i18next'
 import React from 'react'
 import { Link } from 'react-router-dom'
-
 import Card from '../../../components/Card/Card'
 import Header from '../../../components/Header/Header'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
 import styles from './UpdateSelect.module.css'
 
 const UpdateSelect = () => {
   return (
     <>
-      <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
+      <Header subheading={t('UPDATE')} />
       <div className={styles.card__container}>
         <Link to="/update/demographic">
           <Card
             title={t('DEMOGRAPHIC')}
-            image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
+            image={`${process.env.PUBLIC_URL}/assets/images/demographic.svg`}
           />
         </Link>
         <Link to="/update/biometric">
           <Card
             title={t('BIOMETRIC')}
-            image={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
+            image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
           />
         </Link>
         <Link to="/update/agreement">