Implemented update UI

38 files changed, 1524 insertions, 226 deletions

diff --git a/client/src/App.js b/client/src/App.js
index e7ab247..c39f14e 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,183 +1,10 @@
-import React, { useState } from 'react'
-import Address from './pages/Enrollment/Address/Address'
-import Agreement from './pages/Enrollment/Agreement/Agreement'
-import DocumentScanner from './pages/Enrollment/DocumentScanner/DocumentScanner'
-import FinalSlip from './pages/Enrollment/FinalSlip/FinalSlip'
-import Fingerprint from './pages/Enrollment/Fingerprint/Fingerprint'
-import FormTwo from './pages/Enrollment/FormTwo/FormTwo'
-import IrisScan from './pages/Enrollment/IrisScan/IrisScan'
-import PhotoCapture from './pages/Enrollment/PhotoCapture/PhotoCapture'
-import SubmitButton from './components/SubmitButton/SubmitButton'
-import FormOne from './pages/Enrollment/FormOne/FormOne'
-import { validEmail, validMobileNumber, validPincode } from './components/RegEx/RegEx'
-import Home from './pages/Home/Home'
+import React from 'react'
+import Index from './routes'
 
 const App = () => {
-  const [page, setPage] = useState(9)
-
-  const [formData, setFormData] = useState({
-    indianResident: '',
-    name: '',
-    gender: '',
-    dob: new Date().toISOString().slice(0, 10),
-    mobile: '',
-    email: '',
-    country: '',
-    state: '',
-    district: '',
-    village: '',
-    houseNo: '',
-    street: '',
-    locality: '',
-    postOffice: '',
-    landmark: '',
-    pincode: '',
-    address: ''
-  })
-
-  function handleSubmit () {
-    if (page === 0) {
-      if (formData.indianResident === '') {
-        return alert('Please select your residency')
-      } else if (formData.name === '' || formData.name.length < 1) {
-        return alert('Please enter your name')
-      } else if (formData.gender === '') {
-        return alert('Please select your gender')
-      } else {
-        setPage(page + 1)
-      }
-    } else if (page === 1) {
-      if (formData.mobile === '') {
-        return alert('Please enter your mobile number')
-      } else if (!validMobileNumber.test(formData.mobile)) {
-        return alert('Please enter valid mobile number')
-      } else if (formData.email === '') {
-        return alert('Please enter your email')
-      } else if (!validEmail.test(formData.email)) {
-        return alert('Please enter valid email')
-      } else {
-        setPage(page + 1)
-      }
-    } else if (page === 2) {
-      if (formData.country === '') {
-        return alert('Please select your country')
-      } else if (formData.state === '') {
-        return alert('Please select your state')
-      } else if (formData.district === '') {
-        return alert('Please select your district')
-      } else if (formData.village === '') {
-        return alert('Please enter your village')
-      } else if (formData.houseNo === '') {
-        return alert('Please enter your house number')
-      } else if (formData.street === '') {
-        return alert('Please enter your street')
-      } else if (formData.locality === '') {
-        return alert('Please enter your locality')
-      } else if (formData.postOffice === '') {
-        return alert('Please enter your post office')
-      } else if (formData.landmark === '') {
-        return alert('Please enter your landmark')
-      } else if (formData.pincode === '') {
-        return alert('Please enter your pincode')
-      } else if (!validPincode.test(formData.pincode)) {
-        return alert('Please enter valid pincode')
-      } else {
-        setFormData({
-          ...formData,
-          address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}`
-        })
-        setPage(page + 1)
-      }
-    } else if (page === 3) {
-      setPage(page + 1)
-    } else if (page === 4) {
-      setPage(page + 1)
-    } else if (page === 5) {
-      setPage(page + 1)
-    } else if (page === 6) {
-      setPage(page + 1)
-    } else if (page === 7) {
-      setPage(page + 1)
-    } else if (page === 8) {
-      setPage(page + 1)
-    } else if (page === 9) {
-      setPage(page + 1)
-    } else setPage(page + 1)
-  }
-
-  const conditionalComponent = () => {
-    switch (page) {
-      case 0:
-        return <FormOne formData={formData} setFormData={setFormData} />
-      case 1:
-        return <FormTwo formData={formData} setFormData={setFormData} />
-      case 2:
-        return <Address formData={formData} setFormData={setFormData} />
-      case 3:
-        return <DocumentScanner formData={formData} setFormData={setFormData} />
-      case 4:
-        return <PhotoCapture formData={formData} setFormData={setFormData} />
-      case 5:
-        return <IrisScan formData={formData} setFormData={setFormData} />
-      case 6:
-        return <Fingerprint formData={formData} setFormData={setFormData} />
-      case 7:
-        return <Agreement formData={formData} setFormData={setFormData} />
-      case 8:
-        return <FinalSlip formData={formData} setFormData={setFormData} />
-      default:
-        return <Home page={page} setPage={setPage} />
-    }
-  }
-
-  const conditionalButton = () => {
-    switch (page) {
-      case 0:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 1:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 2:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 3:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 4:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 5:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 6:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-      case 7:
-        return <SubmitButton onClick={handleSubmit}>
-            Submit
-          </SubmitButton>
-      case 8:
-        return <SubmitButton onClick={handleSubmit}>
-            Exit
-          </SubmitButton>
-      default:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
-    }
-  }
   return (
     <>
-      {conditionalComponent()}
-      {conditionalButton()}
+      <Index />
     </>
   )
 }
diff --git a/client/src/components/BiometricCard/BiometricCard.jsx b/client/src/components/BiometricCard/BiometricCard.jsx
new file mode 100644
index 0000000..ff5271f
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import EditButton from '../EditButton/EditButton'
+import styles from './BiometricCard.module.css'
+
+const BiometricCard = ({ label, onclick }) => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.input}>
+        <div className={styles.input__container}>
+          <div className={styles.input__edit}>
+            <div className={styles.input__field}>{label}</div>
+            <EditButton onClick={onclick} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BiometricCard
diff --git a/client/src/components/BiometricCard/BiometricCard.module.css b/client/src/components/BiometricCard/BiometricCard.module.css
new file mode 100644
index 0000000..ca6f46a
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.module.css
@@ -0,0 +1,26 @@
+.input {
+    display: flex;
+    justify-content: center;
+    font-family: 'Barlow';
+    font-size: var(--font-medium-s);
+  }
+  
+  .input__container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .input__edit{
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .input__field {
+    width: 300px;
+    margin: 10px 0px;
+    padding: 18px 10px;
+    border: 3px solid;
+    border-radius: 10px;
+    font-size: 1rem;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/client/src/components/EditButton/EditButton.jsx b/client/src/components/EditButton/EditButton.jsx
new file mode 100644
index 0000000..125ffad
--- /dev/null
+++ b/client/src/components/EditButton/EditButton.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './EditButton.module.css'
+
+const EditButton = ({ onClick, enabled }) => {
+  return (
+    <>
+      <button onClick={onClick} className={styles.submit} type="button">
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/edit.svg`}
+          alt=""
+          style={ { filter: `invert(${enabled}) sepia(1) saturate(100) hue-rotate(1490deg)` } }
+        />
+      </button>
+    </>
+  )
+}
+
+export default EditButton
diff --git a/client/src/components/EditButton/EditButton.module.css b/client/src/components/EditButton/EditButton.module.css
new file mode 100644
index 0000000..5c9a288
--- /dev/null
+++ b/client/src/components/EditButton/EditButton.module.css
@@ -0,0 +1,16 @@
+.submit {
+  background: transparent;
+  border: none;
+  transition: 0.2s all;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.submit:active {
+  transform: scale(0.98);
+}
+
+.submit__image {
+  height: 30px;
+  width: 30px;
+}
diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx
new file mode 100644
index 0000000..97e4d6e
--- /dev/null
+++ b/client/src/components/Gender/Gender.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import EditButton from '../../components/EditButton/EditButton'
+import LabelCard from '../LabelCard/LabelCard'
+import styles from './Gender.module.css'
+
+const Gender = ({ formData, setFormData }) => {
+    const [editable, setEditable] = React.useState(true)
+
+    const handleEdit = () => {
+      setEditable(!editable)
+    }
+  return (
+    <div className={styles.formone__gender}>
+    <LabelCard
+      id="male"
+      name="gender"
+      title="Male"
+      value={formData.gender}
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Male'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} />
+    <LabelCard
+      id="female"
+      name="gender"
+      value={formData.gender}
+      title="Female"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Female'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} />
+    <LabelCard
+      id="trans"
+      name="gender"
+      value={formData.gender}
+      title="Transgender"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Transgender'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} />
+    <EditButton
+    onClick={handleEdit}
+    enabled={!editable ? '1' : '0' } />
+  </div>
+  )
+}
+
+export default Gender
diff --git a/client/src/components/Gender/Gender.module.css b/client/src/components/Gender/Gender.module.css
new file mode 100644
index 0000000..f84ba2a
--- /dev/null
+++ b/client/src/components/Gender/Gender.module.css
@@ -0,0 +1,3 @@
+.formone__gender {
+    display: flex;
+  }
\ No newline at end of file
diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx
index 42ba7bf..dd02050 100644
--- a/client/src/components/LabelCard/LabelCard.jsx
+++ b/client/src/components/LabelCard/LabelCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './LabelCard.module.css'
 
-const LabelCard = ({ id, name, value, title, image, onChange }) => {
+const LabelCard = ({ id, name, value, title, image, onChange, readOnly }) => {
   return (
     <div className={styles.labelcard}>
       <label htmlFor={id} className={styles.card}>
@@ -16,6 +16,7 @@ const LabelCard = ({ id, name, value, title, image, onChange }) => {
         value={value}
         required
         onChange={onChange}
+        disabled={readOnly}
       />
     </div>
   )
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index 4437efa..6098f3c 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 
-const SubmitButton = ({ onClick }) => {
+const SubmitButton = ({ onClick, onChange }) => {
   return (
     <>
-      <button onClick={onClick} className={styles.submit} type="submit">
+      <button onClick={onClick} className={styles.submit} type="submit" onChange={onChange}>
         <img
           className={styles.submit__image}
           src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
diff --git a/client/src/components/UpdateInput/UpdateInput.jsx b/client/src/components/UpdateInput/UpdateInput.jsx
new file mode 100644
index 0000000..8fa3ba1
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import styles from './UpdateInput.module.css'
+import EditButton from '../EditButton/EditButton'
+
+const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid, readOnly }) => {
+  const [editable, setEditable] = React.useState(true)
+
+  const handleEdit = () => {
+    setEditable(!editable)
+  }
+
+  return (
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+        <label htmlFor={id}>{label}</label>
+        <div className={styles.input__edit}>
+        <input
+          className={styles.input__field}
+          type={type}
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          required
+          placeholder={placeholder}
+          pattern={pattern}
+          maxLength={maxLength}
+          minLength={minLength}
+          onInvalid={onInvalid}
+          onValid={onValid}
+          readOnly={editable}
+        />
+        <EditButton
+          onClick={handleEdit}
+          enabled={!editable ? '1' : '0' } />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UpdateInput
diff --git a/client/src/components/UpdateInput/UpdateInput.module.css b/client/src/components/UpdateInput/UpdateInput.module.css
new file mode 100644
index 0000000..52e13a7
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.module.css
@@ -0,0 +1,25 @@
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__edit{
+  display: flex;
+  flex-direction: row;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1rem;
+}
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 49e9c6e..5800a14 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -1,23 +1,182 @@
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import Header from '../../components/Header/Header'
+import React, { useState } from 'react'
+import Address from './Address/Address'
+import Agreement from './Agreement/Agreement'
+import DocumentScanner from './DocumentScanner/DocumentScanner'
+import FinalSlip from './FinalSlip/FinalSlip'
+import Fingerprint from './Fingerprint/Fingerprint'
+import FormTwo from './FormTwo/FormTwo'
+import IrisScan from './IrisScan/IrisScan'
+import PhotoCapture from './PhotoCapture/PhotoCapture'
 import SubmitButton from '../../components/SubmitButton/SubmitButton'
 import FormOne from './FormOne/FormOne'
+import { validEmail, validMobileNumber, validPincode } from '../../components/RegEx/RegEx'
 
 const Enrollment = () => {
-  const navigate = useNavigate()
+  const [page, setPage] = useState(0)
 
-  const handleSubmit = () => {
-    navigate('/enrollment/form2')
+  const [formData, setFormData] = useState({
+    indianResident: '',
+    name: '',
+    gender: '',
+    dob: new Date().toISOString().slice(0, 10),
+    mobile: '',
+    email: '',
+    country: '',
+    state: '',
+    district: '',
+    village: '',
+    houseNo: '',
+    street: '',
+    locality: '',
+    postOffice: '',
+    landmark: '',
+    pincode: '',
+    address: ''
+  })
+
+  function handleSubmit () {
+    if (page === 0) {
+      if (formData.indianResident === '') {
+        return alert('Please select your residency')
+      } else if (formData.name === '' || formData.name.length < 1) {
+        return alert('Please enter your name')
+      } else if (formData.gender === '') {
+        return alert('Please select your gender')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 1) {
+      if (formData.mobile === '') {
+        return alert('Please enter your mobile number')
+      } else if (!validMobileNumber.test(formData.mobile)) {
+        return alert('Please enter valid mobile number')
+      } else if (formData.email === '') {
+        return alert('Please enter your email')
+      } else if (!validEmail.test(formData.email)) {
+        return alert('Please enter valid email')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 2) {
+      if (formData.country === '') {
+        return alert('Please select your country')
+      } else if (formData.state === '') {
+        return alert('Please select your state')
+      } else if (formData.district === '') {
+        return alert('Please select your district')
+      } else if (formData.village === '') {
+        return alert('Please enter your village')
+      } else if (formData.houseNo === '') {
+        return alert('Please enter your house number')
+      } else if (formData.street === '') {
+        return alert('Please enter your street')
+      } else if (formData.locality === '') {
+        return alert('Please enter your locality')
+      } else if (formData.postOffice === '') {
+        return alert('Please enter your post office')
+      } else if (formData.landmark === '') {
+        return alert('Please enter your landmark')
+      } else if (formData.pincode === '') {
+        return alert('Please enter your pincode')
+      } else if (!validPincode.test(formData.pincode)) {
+        return alert('Please enter valid pincode')
+      } else {
+        setFormData({
+          ...formData,
+          address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}`
+        })
+        setPage(page + 1)
+      }
+    } else if (page === 3) {
+      setPage(page + 1)
+    } else if (page === 4) {
+      setPage(page + 1)
+    } else if (page === 5) {
+      setPage(page + 1)
+    } else if (page === 6) {
+      setPage(page + 1)
+    } else if (page === 7) {
+      setPage(page + 1)
+    } else if (page === 8) {
+      setPage(page + 1)
+    } else if (page === 9) {
+      setPage(page + 1)
+    } else setPage(page + 1)
+  }
+
+  const conditionalComponent = () => {
+    switch (page) {
+      case 0:
+        return <FormOne formData={formData} setFormData={setFormData} />
+      case 1:
+        return <FormTwo formData={formData} setFormData={setFormData} />
+      case 2:
+        return <Address formData={formData} setFormData={setFormData} />
+      case 3:
+        return <DocumentScanner formData={formData} setFormData={setFormData} />
+      case 4:
+        return <PhotoCapture formData={formData} setFormData={setFormData} />
+      case 5:
+        return <IrisScan formData={formData} setFormData={setFormData} />
+      case 6:
+        return <Fingerprint formData={formData} setFormData={setFormData} />
+      case 7:
+        return <Agreement formData={formData} setFormData={setFormData} />
+      case 8:
+        return <FinalSlip formData={formData} setFormData={setFormData} />
+      default:
+        return <FormOne formData={formData} setFormData={setFormData} />
+    }
   }
 
+  const conditionalButton = () => {
+    switch (page) {
+      case 0:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 1:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 2:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 3:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 4:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 5:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 6:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 7:
+        return <SubmitButton onClick={handleSubmit}>
+            Submit
+          </SubmitButton>
+      case 8:
+        return <SubmitButton onClick={handleSubmit}>
+            Exit
+          </SubmitButton>
+      default:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+    }
+  }
   return (
     <>
-      <Header subheading="Enrollment" />
-      <form onSubmit={() => handleSubmit()}>
-        <FormOne />
-        <SubmitButton />
-      </form>
+      {conditionalComponent()}
+      {conditionalButton()}
     </>
   )
 }
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 1c638b1..85aee57 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -10,13 +10,12 @@ const Home = ({ page, setPage }) => {
     <>
       <Header subheading="Mera Aadhaar Meri Pehchan" />
       <div className={styles.card__container}>
+      <Link to="/enrollment">
           <Card
             title="Enrollment"
             image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
-            onClick={(e) => {
-              setPage(0)
-            }}
           />
+          </Link>
         <Link to="/update">
           <Card
             title="Update"
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
new file mode 100644
index 0000000..bb9afdd
--- /dev/null
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -0,0 +1,247 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import { Country, State, City } from 'country-state-city'
+import Select from 'react-select'
+
+import styles from './Address.module.css'
+import UpdateInput from '../../../components/UpdateInput/UpdateInput'
+import EditButton from '../../../components/EditButton/EditButton'
+
+const Address = ({ formData, setFormData }) => {
+  const countries = Country.getAllCountries()
+
+  const updatedCountries = countries.map((country) => ({
+    label: country.name,
+    value: country.id,
+    ...country
+  }))
+
+  const updatedStates = (countryId) =>
+  State
+      .getStatesOfCountry(countryId)
+      .map((state) => ({ label: state.name, value: state.id, ...state }))
+  const updatedCities = (countryID, stateId) =>
+    City
+      .getCitiesOfState(countryID, stateId)
+      .map((city) => ({ label: city.name, value: city.id, ...city }))
+
+      const customStyles = {
+        control: (base, state) => ({
+          ...base,
+          width: '330px',
+          height: '60px',
+          margin: '10px 0px',
+          // padding: '20px 10px',
+          border: '3px solid',
+          borderRadius: '10px !important'
+        }),
+        input: (base, state) => ({
+          ...base,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '0px',
+          margin: '0px'
+        })
+      }
+
+      const [editable, setEditable] = React.useState(true)
+      const [editable1, setEditable1] = React.useState(true)
+      const [editable2, setEditable2] = React.useState(true)
+
+      const handleEdit = () => {
+        setEditable(!editable)
+      }
+      const handleEdit1 = () => {
+        setEditable1(!editable1)
+      }
+      const handleEdit2 = () => {
+        setEditable2(!editable2)
+      }
+
+      console.log(formData.country, formData.state, formData.district, formData.village)
+
+  return (
+    <>
+      <Header subheading="Update" />
+      <div className={styles.address}>
+        <div className={styles.address__container}>
+      <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='country'>Country</label>
+      <div className={styles.input__edit}>
+        <Select
+          id="country"
+          name="country"
+          label="country"
+          options={updatedCountries}
+          value={formData.country}
+          isDisabled={editable}
+          isSearchable={!editable}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              country: e
+            })
+          }}
+          styles={customStyles}
+        />
+        <EditButton
+        onClick={handleEdit}
+        enabled={!editable ? '1' : '0' } />
+        </div>
+      </div>
+    </div>
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='state'>State</label>
+      <div className={styles.input__edit}>
+      <Select
+          id="state"
+          name="state"
+          options={updatedStates(formData.country.isoCode)}
+          value={formData.state}
+          isDisabled={editable1}
+          isSearchable={!editable1}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              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'>District</label>
+      <div className={styles.input__edit}>
+      <Select
+          id="city"
+          name="city"
+          options={updatedCities(formData.country.isoCode, formData.state.isoCode)}
+          value={formData.district}
+          isDisabled={editable2}
+          isSearchable={!editable2}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              district: e
+            })
+          }}
+          styles={customStyles}
+        />
+        <EditButton
+        onClick={handleEdit2}
+        enabled={!editable2 ? '1' : '0' } />
+        </div>
+      </div>
+    </div>
+    <UpdateInput
+      id="town"
+      label="Village / Town"
+      value={formData.village}
+      type="text"
+      onChange={(e) => {
+        setFormData({
+          ...formData,
+          village: e.target.value
+        })
+      }}
+      placeholder="Enter your Village / Town"
+      />
+            </div>
+            <div className={styles.address__container}>
+          <UpdateInput
+            id="houseNo"
+            label="House Number/ Apartment"
+            value={formData.houseNo}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                houseNo: e.target.value
+              })
+            }}
+            placeholder="Enter your House Number / Apartment"
+          />
+          <UpdateInput
+            id="street"
+            label="Street / Road"
+            value={formData.street}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                street: e.target.value
+              })
+            }}
+            placeholder="Enter the Street / Road"
+          />
+          <UpdateInput
+            id="locality"
+            label="Area / Locality"
+            value={formData.locality}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                locality: e.target.value
+              })
+            }}
+            placeholder="Enter your Area / Locality"
+          />
+          <UpdateInput
+            id="postOffice"
+            label="Post Office"
+            value={formData.postOffice}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                postOffice: e.target.value
+              })
+            }}
+            placeholder="Enter your Village / Town"
+          />
+          </div>
+        <div className={styles.address__container}>
+          <UpdateInput
+            id="landmark"
+            label="Landmark"
+            value={formData.landmark}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                landmark: e.target.value
+              })
+            }}
+            placeholder="Enter the Landmark"
+          />
+          <UpdateInput
+            id="pincode"
+            label="Pincode"
+            value={formData.pincode}
+            type="text"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                pincode: e.target.value
+              })
+            }}
+            placeholder="Enter your area Pincode"
+            pattern="[0-9]+"
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Address
diff --git a/client/src/pages/Update/Address/Address.module.css b/client/src/pages/Update/Address/Address.module.css
new file mode 100644
index 0000000..41cbf17
--- /dev/null
+++ b/client/src/pages/Update/Address/Address.module.css
@@ -0,0 +1,33 @@
+.address {
+  display: flex;
+  justify-content: center;
+}
+
+.address__container {
+  margin: 0px 20px;
+}
+
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.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
new file mode 100644
index 0000000..95bef8a
--- /dev/null
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -0,0 +1,54 @@
+import React 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'
+
+const Agreement = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardAgreement
+          image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
+        />
+      </div>
+        <Input
+        type="text"
+        id="otp"
+        label="Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15"
+        placeholder="XXXX"
+      />
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Send OTP
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Resend
+          </Button>
+        </Grid>
+      </Grid>
+      <Link to ="/update/final-slip">
+      <SubmitButton />
+      </Link>
+    </>
+  )
+}
+
+export default Agreement
diff --git a/client/src/pages/Update/Agreement/Agreement.module.css b/client/src/pages/Update/Agreement/Agreement.module.css
new file mode 100644
index 0000000..c618a4d
--- /dev/null
+++ b/client/src/pages/Update/Agreement/Agreement.module.css
@@ -0,0 +1,4 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
\ No newline at end of file
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
new file mode 100644
index 0000000..c105ad8
--- /dev/null
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import PhotoCapture from '../PhotoCapture/PhotoCapture'
+import Fingerprint from '../Fingerprint/Fingerprint'
+import IrisScan from '../IrisScan/IrisScan'
+import BiometricSelect from '../BiometricSelect/BiometricSelect'
+
+const Biometric = () => {
+  const [page, setPage] = useState(4)
+
+  const [formData, setFormData] = useState({
+    photo: '',
+    irisScan: '',
+    fingerPrint: ''
+  })
+
+  const conditionalComponent = () => {
+    switch (page) {
+      case 0:
+        return <PhotoCapture formData={formData} setFormData={setFormData} />
+      case 1:
+        return <Fingerprint formData={formData} setFormData={setFormData} />
+      case 2:
+        return <IrisScan formData={formData} setFormData={setFormData} />
+      default:
+        return <BiometricSelect page={page} setPage={setPage} />
+    }
+  }
+
+  const conditionalButton = () => {
+    switch (page) {
+      case 0:
+        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+      case 1:
+        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+      case 2:
+        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+    }
+  }
+  return (
+    <>
+      {conditionalComponent()}
+      {conditionalButton()}
+    </>
+  )
+}
+
+export default Biometric
diff --git a/client/src/pages/Update/Biometric/Biometric.module.css b/client/src/pages/Update/Biometric/Biometric.module.css
new file mode 100644
index 0000000..c2bfd94
--- /dev/null
+++ b/client/src/pages/Update/Biometric/Biometric.module.css
@@ -0,0 +1,28 @@
+.input {
+    display: flex;
+    justify-content: center;
+    font-family: 'Barlow';
+    font-size: var(--font-medium-s);
+    font-weight: bold;
+  }
+  
+  .input__container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .input__edit{
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .input__field {
+    width: 300px;
+    margin: 10px 0px;
+    padding: 18px 10px;
+    border: 3px solid;
+    border-radius: 10px;
+    font-size: 1rem;
+    text-align: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
new file mode 100644
index 0000000..7eab595
--- /dev/null
+++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import BiometricCard from '../../../components/BiometricCard/BiometricCard'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { Link } from 'react-router-dom'
+
+const BiometricSelect = ({ page, setPage }) => {
+  return (
+    <>
+      <Header subheading="Update" />
+      <BiometricCard label="Photograph" onclick={() => setPage(0)} />
+      <BiometricCard label="Fingerprint Scan" onclick={() => setPage(1)} />
+      <BiometricCard label="Iris Scan" onclick={() => setPage(2)} />
+      <Link to="/update/select-update">
+      <SubmitButton />
+      </Link>
+    </>
+  )
+}
+
+export default BiometricSelect
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
new file mode 100644
index 0000000..8ec9e82
--- /dev/null
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+import Address from '../Address/Address'
+import DocumentScanner from '../DocumentScanner/DocumentScanner'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import FormOne from '../FormOne/FormOne'
+import { validEmail, validMobileNumber, validPincode } from '../../../components/RegEx/RegEx'
+import UpdateSelect from '../UpdateSelect/UpdateSelect'
+
+const Demographic = () => {
+  const [page, setPage] = useState(0)
+
+  const [formData, setFormData] = useState({
+    name: '',
+    gender: '',
+    dob: new Date().toISOString().slice(0, 10),
+    mobile: '',
+    email: '',
+    country: '',
+    state: '',
+    district: '',
+    village: '',
+    houseNo: '',
+    street: '',
+    locality: '',
+    postOffice: '',
+    landmark: '',
+    pincode: '',
+    address: ''
+  })
+
+  function handleSubmit () {
+    if (page === 0) {
+        if (formData.name === '' || formData.name.length < 1) {
+        return alert('Please enter your name')
+      } else if (formData.gender === '') {
+        return alert('Please select your gender')
+      } else if (formData.mobile === '') {
+        return alert('Please enter your mobile number')
+      } else if (!validMobileNumber.test(formData.mobile)) {
+        return alert('Please enter valid mobile number')
+      } else if (formData.email === '') {
+        return alert('Please enter your email')
+      } else if (!validEmail.test(formData.email)) {
+        return alert('Please enter valid email')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 1) {
+      if (formData.mobile === '') {
+        return alert('Please enter your mobile number')
+      } else if (!validMobileNumber.test(formData.mobile)) {
+        return alert('Please enter valid mobile number')
+      } else if (formData.email === '') {
+        return alert('Please enter your email')
+      } else if (!validEmail.test(formData.email)) {
+        return alert('Please enter valid email')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 2) {
+      if (formData.country === '') {
+        return alert('Please select your country')
+      } else if (formData.state === '') {
+        return alert('Please select your state')
+      } else if (formData.district === '') {
+        return alert('Please select your district')
+      } else if (formData.village === '') {
+        return alert('Please enter your village')
+      } else if (formData.houseNo === '') {
+        return alert('Please enter your house number')
+      } else if (formData.street === '') {
+        return alert('Please enter your street')
+      } else if (formData.locality === '') {
+        return alert('Please enter your locality')
+      } else if (formData.postOffice === '') {
+        return alert('Please enter your post office')
+      } else if (formData.landmark === '') {
+        return alert('Please enter your landmark')
+      } else if (formData.pincode === '') {
+        return alert('Please enter your pincode')
+      } else if (!validPincode.test(formData.pincode)) {
+        return alert('Please enter valid pincode')
+      } else {
+        setFormData({
+          ...formData,
+          address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}`
+        })
+        setPage(page + 1)
+      }
+    } else if (page === 3) {
+      setPage(page + 1)
+    } else setPage(page + 1)
+  }
+
+  const conditionalComponent = () => {
+    switch (page) {
+      case 0:
+        return <FormOne formData={formData} setFormData={setFormData} />
+      case 1:
+        return <Address formData={formData} setFormData={setFormData} />
+      case 2:
+        return <DocumentScanner formData={formData} setFormData={setFormData} />
+      default:
+        return <UpdateSelect />
+    }
+  }
+
+  const conditionalButton = () => {
+    switch (page) {
+      case 0:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 1:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 2:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      default:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+    }
+  }
+  return (
+    <>
+      {conditionalComponent()}
+      {conditionalButton()}
+    </>
+  )
+}
+
+export default Demographic
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
new file mode 100644
index 0000000..f200497
--- /dev/null
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './DocumentScanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const DocumentScanner = () => {
+  return (
+    <>
+      <Header subheading="Update" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please place your document on the scanner.
+            <br />
+            Close the lid.
+            <br />
+            Wait for prompt to remove your document
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default DocumentScanner
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Update/FinalSlip/FinalSlip.jsx b/client/src/pages/Update/FinalSlip/FinalSlip.jsx
new file mode 100644
index 0000000..9ac568a
--- /dev/null
+++ b/client/src/pages/Update/FinalSlip/FinalSlip.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './FinalSlip.module.css'
+import { Grid, Typography } from '@mui/material'
+
+const FinalSlip = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`}
+        />
+      </div>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center" fontWeight={'Bold'}>
+          Thank you for your time.<br />
+          Please collect your slip before leaving
+          </Typography>
+        </Grid>
+      </div>
+    </>
+  )
+}
+
+export default FinalSlip
diff --git a/client/src/pages/Update/FinalSlip/FinalSlip.module.css b/client/src/pages/Update/FinalSlip/FinalSlip.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Update/FinalSlip/FinalSlip.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.jsx b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
new file mode 100644
index 0000000..bb46556
--- /dev/null
+++ b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardBiometrics from '../../../components/Card/CardBiometrics'
+import styles from './Fingerprint.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const Fingerprint = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
+        />
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please put your eyes inside the iris scanner.
+            <br />
+            Wait for prompt and beep sound to remove your eyes
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default Fingerprint
diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.module.css b/client/src/pages/Update/Fingerprint/Fingerprint.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Update/Fingerprint/Fingerprint.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
new file mode 100644
index 0000000..5861971
--- /dev/null
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import UpdateInput from '../../../components/UpdateInput/UpdateInput'
+import styles from './FormOne.module.css'
+import EditButton from '../../../components/EditButton/EditButton'
+import Gender from '../../../components/Gender/Gender'
+
+const FormOne = ({ formData, setFormData }) => {
+  const handleSubmit = () => {
+  }
+
+  const [editable, setEditable] = React.useState(true)
+
+  const handleEdit = () => {
+    setEditable(!editable)
+  }
+
+  return (
+    <><Header subheading="Update" /><form onSubmit={() => handleSubmit()}>
+      <div className={styles.formone}>
+        <UpdateInput
+          type="text"
+          id="fullName"
+          label="Full Name"
+          value={formData.name}
+          onChange={(e) => {
+            setFormData({
+              ...formData,
+              name: e.target.value
+            })
+          }}
+          placeholder="Enter your full name" />
+
+      <UpdateInput
+        id="mobile"
+        value={formData.mobile}
+        label="Mobile"
+        type="text"
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            mobile: e.target.value
+          })
+        }}
+        placeholder="Enter your Mobile Number" />
+
+        <div className={styles.formone__dob}>
+          <label htmlFor="dob">Date of Birth</label>
+          <div className={styles.input__edit}>
+          <input
+            className={styles.formone__dob_input}
+            type="date"
+            id="dob"
+            name="dob"
+            value={formData.dob}
+            readOnly={editable}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                dob: e.target.value
+              })
+            }}
+            required />
+          <EditButton
+          onClick={handleEdit}
+          enabled={!editable ? '1' : '0' } />
+          </div>
+        </div>
+
+      <UpdateInput
+        id="email"
+        value={formData.email}
+        label="Email"
+        type="email"
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            email: e.target.value
+          })
+        }}
+        placeholder="Enter your Email ID" />
+
+      <Gender
+      formData={formData}
+      setFormData={setFormData} />
+
+      </div>
+    </form></>
+  )
+}
+
+export default FormOne
diff --git a/client/src/pages/Update/FormOne/FormOne.module.css b/client/src/pages/Update/FormOne/FormOne.module.css
new file mode 100644
index 0000000..abde7ef
--- /dev/null
+++ b/client/src/pages/Update/FormOne/FormOne.module.css
@@ -0,0 +1,47 @@
+.formone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.formone__radio {
+  display: flex;
+  align-items: center;
+}
+
+.formone__resident {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+}
+
+.formone__resident input[type='radio'] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.formone__dob {
+  display: flex;
+  flex-direction: column;
+}
+
+.formone__dob input[type='date']::-webkit-calendar-picker-indicator {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.formone__dob_input {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 11px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
+
+.input__edit{
+  display: flex;
+  flex-direction: row;
+}
diff --git a/client/src/pages/Update/IrisScan/IrisScan.jsx b/client/src/pages/Update/IrisScan/IrisScan.jsx
new file mode 100644
index 0000000..c07e9b8
--- /dev/null
+++ b/client/src/pages/Update/IrisScan/IrisScan.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardBiometrics from '../../../components/Card/CardBiometrics'
+import styles from './IrisScan.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const IrisScan = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
+        />
+        <CardBiometrics
+          image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please put your eyes inside the iris scanner.
+            <br />
+            Wait for prompt and beep sound to remove your eyes
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default IrisScan
diff --git a/client/src/pages/Update/IrisScan/IrisScan.module.css b/client/src/pages/Update/IrisScan/IrisScan.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Update/IrisScan/IrisScan.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
new file mode 100644
index 0000000..c4960c2
--- /dev/null
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -0,0 +1,88 @@
+/* eslint-disable multiline-ternary */
+import React, { useState } from 'react'
+import Webcam from 'react-webcam'
+import { useNavigate } from 'react-router-dom'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import styles from './PhotoCapture.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+
+const PhotoCapture = () => {
+  const [photo, setPhoto] = useState()
+
+  const navigate = useNavigate()
+
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    setPhoto(imageSrc)
+  })
+
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        {photo === '' ? (
+          <Webcam
+            audio={false}
+            height={300}
+            ref={webcamRef}
+            screenshotFormat="image/jpeg"
+            width={500}
+            videoConstraints={{
+              height: 300,
+              width: 500,
+              facingMode: 'user'
+            }}
+          />
+        ) : (
+          <img src={photo} />
+        )}
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            onClick={(e) => {
+              e.preventDefault()
+              capture()
+            }}
+          >
+            Capture
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            onClick={(e) => {
+              e.preventDefault()
+              setPhoto('')
+            }}
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please look into the camera<br></br>
+            Click Capture to Capture the photo<br></br>
+            Click Reset the remove the captured photo
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+    </>
+  )
+}
+
+export default PhotoCapture
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css
new file mode 100644
index 0000000..a1ff9c0
--- /dev/null
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css
@@ -0,0 +1,5 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
index 0b448cf..69b9224 100644
--- a/client/src/pages/Update/Update.jsx
+++ b/client/src/pages/Update/Update.jsx
@@ -1,7 +1,56 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import Header from '../../components/Header/Header'
+import styles from './Update.module.css'
+import Input from '../../components/Input/Input'
+import { Grid, Button } from '@mui/material'
 
 const Update = () => {
-  return <div>Update</div>
+  const navigate = useNavigate()
+  return (
+    <><Header
+      subheading='Update' />
+      <div className={styles.subheading__container}>
+      <h3 className={styles.subheading}> Provide Aadhaar Number (UID): </h3>
+      <Input
+          type="text"
+          id="aadhaarNumber"
+          placeholder="Enter your Aadhaar Number" />
+            <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Send OTP
+          </Button>
+        </Grid>
+      </Grid>
+      </div>
+      <div className={styles.subheading__container}>
+      <h3 className={styles.subheading}> Enter OTP </h3>
+      <Input
+          type="text"
+          id="aadhaarNumber"
+          placeholder="Enter One Time Password" />
+            <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            onClick={() => navigate('/update/select-update')}
+          >
+            Verify OTP
+          </Button>
+        </Grid>
+      </Grid>
+      </div>
+      </>
+  )
 }
 
 export default Update
diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css
index e69de29..421dcfd 100644
--- a/client/src/pages/Update/Update.module.css
+++ b/client/src/pages/Update/Update.module.css
@@ -0,0 +1,14 @@
+.subheading__container {
+    font-family: 'Barlow';
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: bolder;
+    margin: 20px;
+    padding: 20px;
+  }
+
+.subheading {
+    font-size: var(--font-medium);
+    font-weight: 400;
+  }
\ No newline at end of file
diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
new file mode 100644
index 0000000..a903704
--- /dev/null
+++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
@@ -0,0 +1,34 @@
+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="Mera Aadhaar Meri Pehchan" />
+      <div className={styles.card__container}>
+      <Link to="/update/demographic">
+          <Card
+            title="Demographic"
+            image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
+          />
+          </Link>
+        <Link to="/update/biometric">
+          <Card
+            title="Biometric"
+            image={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
+          />
+        </Link>
+        <Link to="/update/agreement">
+        <SubmitButton />
+        </Link>
+      </div>
+    </>
+  )
+}
+
+export default UpdateSelect
diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css b/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/routes/index.js b/client/src/routes/index.js
index f5bd89e..41beeca 100644
--- a/client/src/routes/index.js
+++ b/client/src/routes/index.js
@@ -4,14 +4,11 @@ import { Route, Routes } from 'react-router-dom'
 import Home from '../pages/Home/Home'
 import Enrollment from '../pages/Enrollment/Enrollment'
 import Update from '../pages/Update/Update'
-import PhotoCapture from '../pages/Enrollment/PhotoCapture/PhotoCapture'
-import DocumentScanner from '../pages/Enrollment/DocumentScanner/DocumentScanner'
-import FormTwo from '../pages/Enrollment/FormTwo/FormTwo'
-import Address from '../pages/Enrollment/Address/Address'
-import IrisScan from '../pages/Enrollment/IrisScan/IrisScan'
-import Fingerprint from '../pages/Enrollment/Fingerprint/Fingerprint'
-import Agreement from '../pages/Enrollment/Agreement/Agreement'
-import FinalSlip from '../pages/Enrollment/FinalSlip/FinalSlip'
+import Demographic from '../pages/Update/Demographic/Demographic'
+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'
 
 const Index = () => {
   return (
@@ -19,33 +16,14 @@ const Index = () => {
       <Route exact path="/" element={<Home />} />
       <Route path="enrollment">
         <Route index element={<Enrollment />} />
-        <Route path="form2">
-          <Route index element={<FormTwo />} />
-        </Route>
-        <Route path="address">
-          <Route index element={<Address />} />
-        </Route>
-        <Route path="photo">
-          <Route index element={<PhotoCapture />} />
-        </Route>
-        <Route path="documents">
-          <Route index element={<DocumentScanner />} />
-        </Route>
-        <Route path="irisscan">
-          <Route index element={<IrisScan />} />
-        </Route>
-        <Route path="fingerprint">
-          <Route index element={<Fingerprint />} />
-        </Route>
-        <Route path="agreement">
-          <Route index element={<Agreement />} />
-        </Route>
-        <Route path="finalslip">
-          <Route index element={<FinalSlip />} />
-        </Route>
       </Route>
       <Route path="update">
         <Route index element={<Update />} />
+        <Route path="select-update" element={<UpdateSelect />} />
+        <Route path="demographic" element={<Demographic />} />
+        <Route path="biometric" element={<Biometric />} />
+        <Route path="agreement" element={<Agreement />} />
+        <Route path="final-slip" element={<FinalSlip />} />
       </Route>
     </Routes>
   )