enrollment improvements

21 files changed, 337 insertions, 192 deletions

diff --git a/client/public/assets/images/error.svg b/client/public/assets/images/error.svg
new file mode 100644
index 0000000..d77b45f
--- /dev/null
+++ b/client/public/assets/images/error.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="256" height="256" viewBox="0 0 64 64"
+    style=" fill:#000000;">
+    <path fill="#FAB400" d="M44,14v41c0,0.55-0.44,1-1,1H9c-0.55,0-1-0.45-1-1V5c0-0.55,0.45-1,1-1h25L44,14z"></path>
+    <path fill="#DC9600"
+        d="M44,46.307v8.28l-7.526-7.557c-0.361-0.351-0.403-0.919-0.103-1.342l-2.282-2.271 c-2.416,1.807-5.42,2.891-8.673,2.891c-7.981,0-14.454-6.484-14.454-14.454c0-7.991,6.473-14.454,14.454-14.454 S39.87,23.861,39.87,31.852c0,3.232-1.063,6.215-2.87,8.631v0.01l2.292,2.271c0.413-0.258,0.96-0.207,1.311,0.134L44,46.307z">
+    </path>
+    <rect width="3.999" height="4.487" x="34.998" y="38.757" fill="#F0F0F0" transform="rotate(-45.001 36.997 41)">
+    </rect>
+    <path fill="#0A5078"
+        d="M27.557,16.102c6.095,0.751,11.09,5.56,12.045,11.626c0.627,3.985-0.436,7.741-2.602,10.624v0.01 c-0.8,1.07-1.75,2.02-2.82,2.83c-2.893,2.163-6.657,3.257-10.669,2.62c-6.087-0.967-10.905-5.99-11.63-12.111 C10.804,22.609,18.458,14.981,27.557,16.102z">
+    </path>
+    <path fill="#DC9600" d="M44.02,16H34c-1.105,0-2-0.895-2-2V4h2.003L44,13.98L44.02,16z"></path>
+    <path fill="#FAB400" d="M44,14h-9c-0.552,0-1-0.448-1-1V4L44,14z"></path>
+    <path fill="#00143C"
+        d="M25.009,10h-12c-0.552,0-1,0.448-1,1s0.448,1,1,1h12c0.552,0,1-0.448,1-1S25.561,10,25.009,10z"></path>
+    <path fill="#00143C"
+        d="M31.009,50h-18c-0.552,0-1,0.448-1,1s0.448,1,1,1h18c0.552,0,1-0.448,1-1S31.561,50,31.009,50z"></path>
+    <path fill="#00143C" d="M18.009,46h-5c-0.552,0-1,0.448-1,1s0.448,1,1,1h5c0.552,0,1-0.448,1-1S18.561,46,18.009,46z">
+    </path>
+    <circle cx="26" cy="30" r="10" fill="#FAB400"></circle>
+    <path fill="#C80A50"
+        d="M29.009,29.993l2.293-2.293c0.391-0.391,0.391-1.024,0-1.414L29.716,24.7 c-0.391-0.391-1.024-0.391-1.414,0l-2.293,2.293L23.716,24.7c-0.391-0.391-1.024-0.391-1.414,0l-1.586,1.586 c-0.391,0.391-0.391,1.024,0,1.414l2.293,2.293l-2.293,2.293c-0.391,0.391-0.391,1.024,0,1.414l1.586,1.586 c0.391,0.391,1.024,0.391,1.414,0l2.293-2.293l2.293,2.293c0.391,0.391,1.024,0.391,1.414,0l1.586-1.586 c0.391-0.391,0.391-1.024,0-1.414L29.009,29.993z">
+    </path>
+    <path fill="#0A5078"
+        d="M55.159,59.183c-1.1,1.1-2.89,1.1-4,0l-14.44-14.48c-0.35-0.35-0.39-0.9-0.1-1.3 c0.03-0.04,0.06-0.08,0.1-0.12l2.58-2.58c0.05-0.05,0.1-0.09,0.15-0.13c0.4-0.25,0.93-0.21,1.27,0.13l14.44,14.48 C56.249,56.253,56.289,58.063,55.159,59.183z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/images/help.svg b/client/public/assets/images/help.svg
index 26594dc..76f7223 100644
--- a/client/public/assets/images/help.svg
+++ b/client/public/assets/images/help.svg
@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="256px" height="256px"><radialGradient id="6_od5wc_Cvf9hx9Sl8ZGya" cx="32.5" cy="31.5" r="30.516" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#afeeff"/><stop offset=".193" stop-color="#bbf1ff"/><stop offset=".703" stop-color="#d7f8ff"/><stop offset="1" stop-color="#e1faff"/></radialGradient><path fill="url(#6_od5wc_Cvf9hx9Sl8ZGya)" d="M59,20h1.5c2.168,0,3.892-1.998,3.422-4.243C63.58,14.122,62.056,13,60.385,13L53,13 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h3.385c1.67,0,3.195-1.122,3.537-2.757C60.392,3.998,58.668,2,56.5,2H34.006H32.5h-24 C6.575,2,5,3.575,5,5.5S6.575,9,8.5,9H10c1.105,0,2,0.895,2,2c0,1.105-0.895,2-2,2l-5.385,0c-1.67,0-3.195,1.122-3.537,2.757 C0.608,18.002,2.332,20,4.5,20H18v12L4.615,32c-1.67,0-3.195,1.122-3.537,2.757C0.608,37.002,2.332,39,4.5,39H5c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2H4.5c-2.168,0-3.892,1.998-3.422,4.243C1.42,48.878,2.945,50,4.615,50H10c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2l-1.385,0c-1.67,0-3.195,1.122-3.537,2.757C4.608,59.002,6.332,61,8.5,61h22.494H32.5h23 c1.925,0,3.5-1.575,3.5-3.5S57.425,54,55.5,54H55c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h4.385c1.67,0,3.195-1.122,3.537-2.757 C63.392,44.998,61.668,43,59.5,43H47V31h12.385c1.67,0,3.195-1.122,3.537-2.757C63.392,25.998,61.668,24,59.5,24H59 c-1.105,0-2-0.895-2-2C57,20.895,57.895,20,59,20z"/><linearGradient id="6_od5wc_Cvf9hx9Sl8ZGyb" x1="32" x2="32" y1="64.025" y2="14.025" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#155cde"/><stop offset=".278" stop-color="#1f7fe5"/><stop offset=".569" stop-color="#279ceb"/><stop offset=".82" stop-color="#2cafef"/><stop offset="1" stop-color="#2eb5f0"/></linearGradient><path fill="url(#6_od5wc_Cvf9hx9Sl8ZGyb)" d="M57,31c0,13.805-11.195,25-25,25S7,44.805,7,31S18.195,6,32,6S57,17.195,57,31z"/><path fill="#fff" d="M29 42c0-1.658 1.342-3 3-3 1.658 0 3 1.342 3 3 0 1.658-1.342 3-3 3C30.342 45 29 43.658 29 42zM35 35c0-3 6-4.803 6-10.416-.008-2.411-.785-4.276-2.342-5.6C37.097 17.66 34.908 17 32.086 17c-2.797 0-5.006.7-6.621 2.091-1.531 1.319-2.344 3.13-2.444 5.41H23v.361C23 26.043 23.957 27 25.138 27h1.735c1.177 0 2.132-.951 2.138-2.127v0C29.036 23.842 30 22 32 22c1.952 0 3 1.118 3 3 0 .722-.195 1.411-.598 2.06-.397.65-1.2 1.494-2.405 2.534-1.205 1.035-2.033 2.09-2.486 3.159-.267.625-.449 1.287-.51 2.128C28.918 36.027 29.85 37 31 37l2 0C34.105 37 35 36.105 35 35L35 35z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="200" height="200" viewBox="0 0 512 512"
+    style=" fill:#000000;">
+    <path fill="#609db3"
+        d="M504.1,256C504.1,119,393,7.9,256,7.9C119,7.9,7.9,119,7.9,256C7.9,393,119,504.1,256,504.1C393,504.1,504.1,393,504.1,256z">
+    </path>
+    <path fill="#FFF"
+        d="M146.1,181.5c0-13.9,4.5-28,13.4-42.3c8.9-14.3,22-26.1,39.1-35.5c17.1-9.4,37.1-14.1,60-14.1c21.2,0,40,3.9,56.2,11.8c16.3,7.8,28.8,18.5,37.7,32c8.9,13.5,13.3,28.1,13.3,43.9c0,12.5-2.5,23.4-7.6,32.7c-5.1,9.4-11.1,17.5-18,24.3c-7,6.8-19.4,18.3-37.5,34.4c-5,4.5-9,8.5-12,12c-3,3.4-5.2,6.6-6.7,9.4c-1.5,2.9-2.6,5.7-3.4,8.6c-0.8,2.9-2,7.9-3.6,15.1c-2.8,15.2-11.5,22.9-26.1,22.9c-7.6,0-14-2.5-19.2-7.5c-5.2-5-7.8-12.4-7.8-22.2c0-12.3,1.9-23,5.7-32c3.8-9,8.9-16.9,15.2-23.7c6.3-6.8,14.8-14.9,25.5-24.3c9.4-8.2,16.1-14.4,20.3-18.6s7.7-8.8,10.5-14c2.9-5.1,4.3-10.7,4.3-16.7c0-11.7-4.4-21.6-13.1-29.7c-8.7-8.1-20-12.1-33.7-12.1c-16.1,0-28,4.1-35.6,12.2c-7.6,8.1-14.1,20.1-19.3,35.9c-5,16.6-14.4,24.8-28.3,24.8c-8.2,0-15.1-2.9-20.8-8.7C149,194.5,146.1,188.3,146.1,181.5z M253.4,422.3c-8.9,0-16.7-2.9-23.4-8.7c-6.7-5.8-10-13.9-10-24.3c0-9.2,3.2-17,9.7-23.3c6.4-6.3,14.4-9.4,23.7-9.4c9.2,0,17,3.2,23.3,9.4c6.3,6.3,9.4,14.1,9.4,23.3c0,10.3-3.3,18.3-9.9,24.2S262,422.3,253.4,422.3z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/images/language.svg b/client/public/assets/images/language.svg
index 4091986..866056b 100644
--- a/client/public/assets/images/language.svg
+++ b/client/public/assets/images/language.svg
@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="256px" height="256px"><radialGradient id="o7fJfcGgzfdoTroUffx1Ia" cx="32" cy="31.5" r="31.751" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#c5f1ff"/><stop offset=".35" stop-color="#cdf3ff"/><stop offset=".907" stop-color="#e4faff"/><stop offset="1" stop-color="#e9fbff"/></radialGradient><path fill="url(#o7fJfcGgzfdoTroUffx1Ia)" d="M60.5,32c2.168,0,3.892-1.998,3.422-4.243C63.58,26.122,62.056,25,60.385,25L43,25v-7 l14.386,0c1.67,0,3.195-1.122,3.537-2.757C61.392,12.997,59.668,11,57.5,11H46c-1.105,0-2-0.895-2-2v0c0-1.105,0.895-2,2-2l4.385,0 c1.67,0,3.195-1.122,3.537-2.757C54.392,1.998,52.668,0,50.5,0L10.615,0C8.944,0,7.42,1.122,7.078,2.757C6.608,5.002,8.332,7,10.5,7 H13c1.105,0,2,0.895,2,2v0c0,1.105-0.895,2-2,2l-6.385,0c-1.67,0-3.195,1.122-3.537,2.757C2.608,16.002,4.332,18,6.5,18H22l0,15 L3.614,33c-1.67,0-3.195,1.122-3.537,2.757C-0.392,38.002,1.332,40,3.5,40H4c1.105,0,2,0.895,2,2v0c0,1.105-0.895,2-2,2H3.615 c-1.67,0-3.195,1.122-3.537,2.757C-0.392,49.002,1.332,51,3.5,51h21.115C25.932,51,27,52.068,27,53.385v0.229 C27,54.932,25.932,56,24.615,56l-5,0c-1.67,0-3.195,1.122-3.537,2.757C15.608,61.002,17.332,63,19.5,63l38.885,0 c1.67,0,3.195-1.122,3.537-2.757C62.392,57.998,60.668,56,58.5,56h-3.115C54.068,56,53,54.932,53,53.615v-0.229 C53,52.068,54.068,51,55.385,51h0c1.67,0,3.195-1.122,3.537-2.757C59.392,45.998,57.668,44,55.5,44H43l0-12H60.5z"/><linearGradient id="o7fJfcGgzfdoTroUffx1Ib" x1="27.5" x2="27.5" y1="63.167" y2="13.167" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#155cde"/><stop offset=".278" stop-color="#1f7fe5"/><stop offset=".569" stop-color="#279ceb"/><stop offset=".82" stop-color="#2cafef"/><stop offset="1" stop-color="#2eb5f0"/></linearGradient><path fill="url(#o7fJfcGgzfdoTroUffx1Ib)" d="M48,9H12c-2.761,0-5,2.239-5,5v30v12.35C7,57.814,8.186,59,9.65,59h0.007 c0.844,0,1.638-0.402,2.137-1.083l5.041-6.874C17.777,49.759,19.274,49,20.867,49H48V9z"/><linearGradient id="o7fJfcGgzfdoTroUffx1Ic" x1="41.5" x2="41.5" y1="9" y2="49" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#dbdddd"/><stop offset="1" stop-color="#cccecf"/></linearGradient><path fill="url(#o7fJfcGgzfdoTroUffx1Ic)" d="M57,44V14c0-2.761-2.239-5-5-5H26l10,40h16C54.761,49,57,46.761,57,44z"/><path fill="#fff" d="M15.416 32H24.416V35H15.416z"/><path fill="#fff" d="M24.25,37.056L19.289,23L20,21h0.169c0.848,0,1.604,0.535,1.886,1.334l4.864,13.78 C27.243,37.035,26.56,38,25.584,38h0C24.985,38,24.45,37.622,24.25,37.056z"/><path fill="#fff" d="M15.75,37.056L20.711,23L20,21h-0.169c-0.848,0-1.604,0.535-1.886,1.334l-4.864,13.78 C12.757,37.035,13.44,38,14.416,38h0C15.015,38,15.55,37.622,15.75,37.056z"/><linearGradient id="o7fJfcGgzfdoTroUffx1Id" x1="43.5" x2="43.5" y1="13.35" y2="31.35" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#a4a4a4"/><stop offset=".63" stop-color="#7f7f7f"/><stop offset="1" stop-color="#6f6f6f"/><stop offset="1" stop-color="#6f6f6f"/></linearGradient><path fill="url(#o7fJfcGgzfdoTroUffx1Id)" d="M50.5,23H45v-1.5c0-0.828-0.672-1.5-1.5-1.5S42,20.672,42,21.5V23h-5.5 c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.49,1.5,1.49L45,26h1.029c-0.834,1.465-1.801,2.847-2.877,4.145 c-0.491-0.712-0.926-1.466-1.285-2.26c-0.342-0.756-1.232-1.09-1.984-0.748c-0.755,0.341-1.09,1.229-0.748,1.984 c0.527,1.166,1.184,2.261,1.944,3.276c-1.073,1.042-2.22,2.011-3.445,2.878c-0.676,0.479-0.836,1.415-0.357,2.092 C37.568,37.779,38.031,38,38.501,38c0.3,0,0.603-0.09,0.866-0.275c1.318-0.934,2.554-1.975,3.713-3.094 c1.401,1.315,3.024,2.42,4.794,3.232C48.077,37.956,48.289,38,48.499,38c0.568,0,1.111-0.324,1.364-0.874 c0.346-0.753,0.016-1.644-0.737-1.989c-1.497-0.687-2.83-1.591-3.99-2.684c1.687-1.967,3.119-4.135,4.283-6.453H50.5 c0.828,0,1.5-0.672,1.5-1.5S51.328,23,50.5,23z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="240" height="240" viewBox="0 0 48 48"
+    style=" fill:#000000;">
+    <path fill="#cfd8dc" d="M39,6H9C7.343,6,6,7.344,6,9v33l8.556-8H39c1.656,0,3-1.344,3-3V9C42,7.344,40.656,6,39,6z">
+    </path>
+    <path fill="#609db3" d="M20,6H9C7.343,6,6,7.344,6,9v33l8.556-8H27L20,6z"></path>
+    <path fill="#546e7a"
+        d="M28.064,24.223c0.061-0.031,4.994-3.219,7.936-9.115L37.79,16c-3.082,6.25-7.457,9.292-8.509,10L28.064,24.223z">
+    </path>
+    <path fill="#546e7a"
+        d="M37 26c0 0-5-2.583-7.769-6.998L31 18c2.333 3.833 6.981 6.26 6.981 6.26L37 26zM27 15H39V17H27z"></path>
+    <path fill="#546e7a" d="M32 13H34V17H32z"></path>
+    <path fill="#fff" d="M12 22H18V24H12z"></path>
+    <path fill="#fff" d="M12.109 26L15 17 17.906 26 20.016 26 16 14 14 14 10 26z"></path>
+</svg>
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index c39f14e..0d6d904 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,9 +1,11 @@
 import React from 'react'
+import LanguageSelect from './components/LanguageSelect/LanguageSelect'
 import Index from './routes'
 
 const App = () => {
   return (
     <>
+      <LanguageSelect />
       <Index />
     </>
   )
diff --git a/client/src/components/Input/Input.module.css b/client/src/components/Input/Input.module.css
index b02591c..59867e9 100644
--- a/client/src/components/Input/Input.module.css
+++ b/client/src/components/Input/Input.module.css
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   font-family: 'Barlow';
+  margin: 15px 0px;
   font-size: var(--font-medium-s);
 }
 
@@ -11,7 +12,7 @@
 }
 
 .input__field {
-  width: 300px;
+  width: 330px;
   margin: 10px 0px;
   padding: 18px 10px;
   border: 3px solid;
diff --git a/client/src/components/LanguageSelect/LanguageSelect.js b/client/src/components/LanguageSelect/LanguageSelect.jsx
index ac455b8..dd2997f 100644
--- a/client/src/components/LanguageSelect/LanguageSelect.js
+++ b/client/src/components/LanguageSelect/LanguageSelect.jsx
@@ -1,13 +1,9 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import i18next from 'i18next'
+import { Button, Popover, List, ListItem, ListSubheader } from '@mui/material'
 
-import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
-import Button from '@mui/material/Button'
-import Popover from '@mui/material/Popover'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListSubheader from '@mui/material/ListSubheader'
+import styles from './LanguageSelect.module.css'
 
 const languageMap = {
   en: { label: 'English', dir: 'ltr', active: true },
@@ -18,16 +14,22 @@ const LanguageSelect = () => {
   const selected = localStorage.getItem('i18nextLng') || 'en'
   const { t } = useTranslation()
 
-  const [menuAnchor, setMenuAnchor] = React.useState(null)
-  React.useEffect(() => {
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  useEffect(() => {
     document.body.dir = languageMap[selected]?.dir
   }, [menuAnchor, selected])
 
   return (
-    <div className="d-flex justify-content-end align-items-center language-select-root">
-      <Button onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}>
-        {languageMap[selected]?.label}
-        <ArrowDropDown fontSize="small" />
+    <div className={styles.language}>
+      <Button
+        onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}
+        sx={{ margin: '0px 15px', padding: '0px' }}
+      >
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/language.svg`}
+          height="80px"
+          width="80px"
+        />
       </Button>
       <Popover
         open={!!menuAnchor}
@@ -44,7 +46,7 @@ const LanguageSelect = () => {
       >
         <div>
           <List>
-            <ListSubheader>{t('select_language')}</ListSubheader>
+            <ListSubheader>{t('SELECT_LANGUAGE')}</ListSubheader>
             {Object.keys(languageMap)?.map((item) => (
               <ListItem
                 button
diff --git a/client/src/components/LanguageSelect/LanguageSelect.module.css b/client/src/components/LanguageSelect/LanguageSelect.module.css
new file mode 100644
index 0000000..9a4029c
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.module.css
@@ -0,0 +1,5 @@
+.language {
+  position: absolute;
+  top: 100px;
+  right: 150px;
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 312d01e..57cb9bb 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -1,7 +1,9 @@
 import React from 'react'
-import { Modal, Typography, Box, Button } from '@mui/material'
+import { Modal, Box, Button } from '@mui/material'
+import styles from './Modal.module.css'
+import { Container } from '@mui/system'
 
-const PopUpModal = () => {
+const PopUpModal = ({ title, description, image }) => {
   const style = {
     position: 'absolute',
     top: '50%',
@@ -18,8 +20,14 @@ const PopUpModal = () => {
   const handleClose = () => setOpen(false)
 
   return (
-    <>
-      <Button onClick={handleOpen}>Open modal</Button>
+    <div className={styles.modal}>
+      <Button onClick={handleOpen} sx={{ borderRadius: '50%' }}>
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/help.svg`}
+          height="65px"
+          width="65px"
+        />
+      </Button>
       <Modal
         open={open}
         onClose={handleClose}
@@ -27,15 +35,21 @@ const PopUpModal = () => {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Text in a modal
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </Typography>
+          <h1 id="modal-modal-title" className={styles.modal__title}>
+            {title}
+          </h1>
+          <Container sx={{ display: 'flex' }}>
+            <img
+              src={image}
+              height="200px"
+              width="200px"
+              className={styles.modal__image}
+            />
+            <p className={styles.modal__content}>{description}</p>
+          </Container>
         </Box>
       </Modal>
-    </>
+    </div>
   )
 }
 
diff --git a/client/src/components/Modal/Modal.module.css b/client/src/components/Modal/Modal.module.css
new file mode 100644
index 0000000..547445b
--- /dev/null
+++ b/client/src/components/Modal/Modal.module.css
@@ -0,0 +1,16 @@
+.modal {
+  margin: 0px 15px;
+}
+
+.modal__title {
+  text-align: center;
+  margin: 20px 0px 40px;
+}
+
+.modal__image {
+  width: 40%;
+}
+
+.modal__content {
+  width: 60%;
+}
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 9ae1857..3d1c520 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -4,9 +4,9 @@ import Input from '../../../components/Input/Input'
 import { State, City } from 'country-state-city'
 import Select from 'react-select'
 import { userContext } from '../../../context/User'
+import { useTranslation } from 'react-i18next'
 
 import styles from './Address.module.css'
-import { useTranslation } from 'react-i18next'
 
 const Address = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const Address = () => {
     }))
 
   const customStyles = {
-    control: (base, state) => ({
+    control: (base) => ({
       ...base,
       width: '330px',
       height: '60px',
@@ -34,7 +34,7 @@ const Address = () => {
       border: '3px solid',
       borderRadius: '10px !important'
     }),
-    input: (base, state) => ({
+    input: (base) => ({
       ...base,
       display: 'flex',
       justifyContent: 'center',
@@ -49,66 +49,6 @@ const Address = () => {
       <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="state">{t('STATE')}</label>
-              <Select
-                id="state"
-                name="state"
-                options={updatedStates('IN')}
-                value={userData.address?.state}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      state: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="city">{t('DISTRICT')}</label>
-              <Select
-                id="city"
-                name="city"
-                options={updatedCities('IN', userData.address?.state?.isoCode)}
-                value={userData.address?.district}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      district: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <Input
-            id="town"
-            label={t('VILLAGE_TOWN')}
-            value={userData.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}>
           <Input
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
@@ -126,36 +66,57 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
           />
           <Input
-            id="street"
-            label={t('STREET_ROAD')}
-            value={userData.street}
+            id="town"
+            label={t('VILLAGE_TOWN')}
+            value={userData.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>
+            <Select
+              id="state"
+              name="state"
+              options={updatedStates('IN')}
+              value={userData.address?.state}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    state: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
+        </div>
+        <div className={styles.address__container}>
           <Input
-            id="locality"
-            label={t('AREA_LOCALITY')}
-            value={userData.locality}
+            id="street"
+            label={t('STREET_ROAD')}
+            value={userData.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')}
           />
           <Input
             id="postOffice"
@@ -173,23 +134,42 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="city">{t('DISTRICT')}</label>
+            <Select
+              id="city"
+              name="city"
+              options={updatedCities('IN', userData.address?.state?.isoCode)}
+              value={userData.address?.district}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    district: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
         </div>
         <div className={styles.address__container}>
           <Input
-            id="landmark"
-            label={t('LANDMARK')}
-            value={userData.landmark}
+            id="locality"
+            label={t('AREA_LOCALITY')}
+            value={userData.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')}
           />
           <Input
             id="pincode"
@@ -207,6 +187,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
           />
+          <Input
+            id="landmark"
+            label={t('LANDMARK')}
+            value={userData.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/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
index 26ca909..eafa781 100644
--- a/client/src/pages/Enrollment/Address/Address.module.css
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -1,28 +1,17 @@
 .address {
   display: flex;
   justify-content: center;
+  margin: 40px 0px 0px;
 }
 
 .address__container {
   margin: 0px 20px;
 }
 
-.input {
+.input__container {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   font-family: 'Barlow';
   font-size: var(--font-medium-s);
 }
-
-.input__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.input__field {
-  width: 300px;
-  margin: 10px 0px;
-  padding: 20px 10px;
-  border: 3px solid;
-  border-radius: 10px;
-}
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index d3a5b90..7b1b9c6 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -81,10 +81,11 @@ const Agreement = ({ unverified, setUnverified }) => {
         {show && (
           <>
             <Input
-              type="number"
+              type="text"
               id="otp"
               value={otp}
               onChange={(e) => setOtp(e.target.value)}
+              maxLength="6"
               placeholder="XXXXXX"
             />
             <Button
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 8b62b3c..88bdf47 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -33,19 +33,28 @@ const Enrollment = () => {
   const navigate = useNavigate()
   const [unverified, setUnverified] = useState(true)
 
-  const pushUser = useMutation((payload) => createUser(payload), {
-    onSuccess: () => {
-      console.log('Before mutate')
+  const { mutate } = useMutation((payload) => createUser(payload), {
+    onSuccess: (data) => {
       setConfirm.mutate({
         mobile: `+91${userData.mobile}`,
-        id: pushUser.data._id
+        id: data?.data?.result?._id
       })
-      console.log('After mutate')
       setPage(page + 1)
+    },
+    onError: (error) => {
+      console.log(error)
+      if (error?.response?.data?.message === 'User already exists.') {
+        setUserData(initialUserData)
+        navigate('/error')
+      } else {
+        toast.error(t('SOMETHING_WENT_WRONG'))
+      }
     }
   })
 
-  const setConfirm = useMutation((payload) => sendMessage(payload))
+  const setConfirm = useMutation((payload) => {
+    sendMessage(payload)
+  })
 
   const handleSubmit = () => {
     if (page === 0) {
@@ -75,26 +84,26 @@ const Enrollment = () => {
         setPage(page + 1)
       }
     } else if (page === 2) {
-      if (!userData.address.state.name) {
-        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (!userData.address.district.name) {
-        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (userData.address.village === '') {
-        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (userData.address.houseNo === '') {
+      if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
       } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
       } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
+      } else if (userData.address.village === '') {
+        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
       } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (userData.address.landmark === '') {
-        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
       } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
+      } else if (!userData.address.state.name) {
+        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
+      } else if (!userData.address.district.name) {
+        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
+      } else if (userData.address.landmark === '') {
+        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else {
         setPage(page + 1)
       }
@@ -106,11 +115,7 @@ const Enrollment = () => {
       }
     } else if (page === 4) {
       if (!userData.documents.POI) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY'))
-      } else if (!userData.documents.POA) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS'))
-      } else if (!userData.documents.DOB) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH'))
+        toast.error(t('SCAN_YOUR_DOCUMENT'))
       } else {
         setPage(page + 1)
       }
@@ -119,21 +124,25 @@ const Enrollment = () => {
     } else if (page === 6) {
       setPage(page + 1)
     } else if (page === 7) {
-      pushUser.mutate({
-        indianResident: userData.indianResident,
-        name: userData.name,
-        gender: userData.gender,
-        dob: userData.dob,
-        mobile: userData.mobile,
-        email: userData.email,
-        address: userData.address,
-        photo: userData.photo,
-        documents: {
-          POI: userData.documents.POI,
-          POA: userData.documents.POA,
-          DOB: userData.documents.DOB
-        }
-      })
+      if (unverified) {
+        toast.error(t('PLEASE_VERIFY_OTP'))
+      } else {
+        mutate({
+          indianResident: userData.indianResident,
+          name: userData.name,
+          gender: userData.gender,
+          dob: userData.dob,
+          mobile: userData.mobile,
+          email: userData.email,
+          address: userData.address,
+          photo: userData.photo,
+          documents: {
+            POI: userData.documents.POI,
+            POA: userData.documents.POA,
+            DOB: userData.documents.DOB
+          }
+        })
+      }
     } else if (page === 8) {
       setUserData(initialUserData)
       navigate('/')
@@ -198,7 +207,7 @@ const Enrollment = () => {
       case 7:
         return (
           <>
-            <SubmitButton onClick={handleSubmit} disabled={unverified} />
+            <SubmitButton onClick={handleSubmit} />
             <BackButton onClick={() => setPage(page - 1)} />
           </>
         )
diff --git a/client/src/pages/Enrollment/Enrollment.module.css b/client/src/pages/Enrollment/Enrollment.module.css
deleted file mode 100644
index e69de29..0000000
--- a/client/src/pages/Enrollment/Enrollment.module.css
+++ /dev/null
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css
index 35d1e49..fae8e9f 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.module.css
+++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -15,15 +15,22 @@
   display: flex;
   align-items: center;
   margin: 15px;
+  cursor: pointer;
 }
 
 .formone__resident input[type='radio'] {
   width: 1.5rem;
   height: 1.5rem;
+  cursor: pointer;
+}
+
+.formone__resident label {
+  margin-left: 10px;
 }
 
 .formone__gender {
   display: flex;
+  margin-bottom: 10px;
 }
 
 .formone__dob {
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 05ad075..0bce4bc 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,44 +1,46 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
-import SubmitButton from '../../../components/SubmitButton/SubmitButton'
-import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 
+import styles from './FormTwo.module.css'
+
 const FormTwo = () => {
   const { t } = useTranslation()
   const { userData, setUserData } = userContext()
   return (
-    <div className="formtwo">
+    <>
       <Header subheading={t('ENROLLMENT')} />
-      <Input
-        id="mobile"
-        value={userData.mobile}
-        label={t('MOBILE')}
-        type="text"
-        onChange={(e) => {
-          setUserData({
-            ...userData,
-            mobile: e.target.value
-          })
-        }}
-        placeholder={t('ENTER_YOUR_MOBILE_NUMBER')}
-      />
-      <Input
-        id="email"
-        value={userData.email}
-        label={t('EMAIL')}
-        type="email"
-        onChange={(e) => {
-          setUserData({
-            ...userData,
-            email: e.target.value
-          })
-        }}
-        placeholder={t('ENTER_YOUR_EMAIL_ID')}
-      />
-      <SubmitButton />
-    </div>
+      <div className={styles.formtwo__input}>
+        <Input
+          id="mobile"
+          value={userData.mobile}
+          label={t('MOBILE')}
+          type="text"
+          onChange={(e) => {
+            setUserData({
+              ...userData,
+              mobile: e.target.value
+            })
+          }}
+          placeholder={t('ENTER_YOUR_MOBILE_NUMBER')}
+        />
+        <Input
+          id="email"
+          value={userData.email}
+          label={t('EMAIL')}
+          type="email"
+          onChange={(e) => {
+            setUserData({
+              ...userData,
+              email: e.target.value
+            })
+          }}
+          placeholder={t('ENTER_YOUR_EMAIL_ID')}
+        />
+      </div>
+    </>
   )
 }
 
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
index 8b13789..d135f8f 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
@@ -1 +1,3 @@
-
+.formtwo__input {
+  margin: 60px;
+}
diff --git a/client/src/pages/Error/Error.jsx b/client/src/pages/Error/Error.jsx
new file mode 100644
index 0000000..5d06226
--- /dev/null
+++ b/client/src/pages/Error/Error.jsx
@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import styles from './Error.module.css'
+
+const Error = ({ message }) => {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    setTimeout(() => {
+      navigate('/')
+    }, 3000)
+  }, [])
+
+  return (
+    <>
+      <div className={styles.error}>
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/error.svg`}
+          className={styles.error__image}
+        />
+        <h1 className={styles.error__title}>{message}</h1>
+      </div>
+    </>
+  )
+}
+
+export default Error
diff --git a/client/src/pages/Error/Error.module.css b/client/src/pages/Error/Error.module.css
new file mode 100644
index 0000000..d66c6b7
--- /dev/null
+++ b/client/src/pages/Error/Error.module.css
@@ -0,0 +1,18 @@
+.error {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.error__title {
+  font-family: 'Barlow', sans-serif;
+  font-weight: 400;
+  font-size: var(--font-large);
+}
+
+.error__image {
+  margin-left: 40px;
+}
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 4539120..7f1fe04 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import Card from '../../components/Card/Card'
 import Header from '../../components/Header/Header'
-import LanguageSelect from '../../components/LanguageSelect/LanguageSelect'
 import PopUpModal from '../../components/Modal/Modal'
 import styles from './Home.module.css'
 
@@ -12,8 +11,7 @@ const Home = ({ page, setPage }) => {
   return (
     <>
       <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
-      <PopUpModal />
-      <LanguageSelect />
+      <PopUpModal title={t('FORM_ONE')} />
       <div className={styles.card__container}>
         <Link to="/enrollment">
           <Card
diff --git a/client/src/routes/index.js b/client/src/routes/index.js
index 6bc2342..ad8b500 100644
--- a/client/src/routes/index.js
+++ b/client/src/routes/index.js
@@ -9,15 +9,22 @@ import UpdateSelect from '../pages/Update/UpdateSelect/UpdateSelect'
 import Biometric from '../pages/Update/Biometric/Biometric'
 import Agreement from '../pages/Update/Agreement/Agreement'
 import FinalSlip from '../pages/Update/FinalSlip/FinalSlip'
+import Error from '../pages/Error/Error'
 import Otp from '../pages/Update/Otp/Otp'
+import { useTranslation } from 'react-i18next'
 
 const Index = () => {
+  const { t } = useTranslation()
   return (
     <Routes>
       <Route exact path="/" element={<Home />} />
       <Route path="enrollment">
         <Route index element={<Enrollment />} />
       </Route>
+      <Route
+        path="error"
+        element={<Error message={t('USER_ALREADY_EXISTS')} />}
+      />
       <Route path="update">
         <Route index element={<Update />} />
         <Route path="otp" element={<Otp />} />