Merge pull request #20 from Blaster4385/develop

Fix Stuff

62 files changed, 407 insertions, 42 deletions

diff --git a/client/public/assets/audios/please-capture-clear-photo-english.mp3 b/client/public/assets/audios/please-capture-clear-photo-english.mp3
new file mode 100644
index 0000000..9782676
--- /dev/null
+++ b/client/public/assets/audios/please-capture-clear-photo-english.mp3
diff --git a/client/public/assets/audios/please-capture-clear-photo-hindi.mp3 b/client/public/assets/audios/please-capture-clear-photo-hindi.mp3
new file mode 100644
index 0000000..d9de5d5
--- /dev/null
+++ b/client/public/assets/audios/please-capture-clear-photo-hindi.mp3
diff --git a/client/public/assets/audios/please-capture-photo-english.mp3 b/client/public/assets/audios/please-capture-photo-english.mp3
new file mode 100644
index 0000000..f48c834
--- /dev/null
+++ b/client/public/assets/audios/please-capture-photo-english.mp3
diff --git a/client/public/assets/audios/please-capture-photo-hindi.mp3 b/client/public/assets/audios/please-capture-photo-hindi.mp3
new file mode 100644
index 0000000..aba61c9
--- /dev/null
+++ b/client/public/assets/audios/please-capture-photo-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-area-pin-english.mp3 b/client/public/assets/audios/please-enter-area-pin-english.mp3
new file mode 100644
index 0000000..0e27ab1
--- /dev/null
+++ b/client/public/assets/audios/please-enter-area-pin-english.mp3
diff --git a/client/public/assets/audios/please-enter-email-english.mp3 b/client/public/assets/audios/please-enter-email-english.mp3
new file mode 100644
index 0000000..7ffd86f
--- /dev/null
+++ b/client/public/assets/audios/please-enter-email-english.mp3
diff --git a/client/public/assets/audios/please-enter-email-hindi.mp3 b/client/public/assets/audios/please-enter-email-hindi.mp3
new file mode 100644
index 0000000..cb9ddda
--- /dev/null
+++ b/client/public/assets/audios/please-enter-email-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-house-no-english.mp3 b/client/public/assets/audios/please-enter-house-no-english.mp3
new file mode 100644
index 0000000..f616f7d
--- /dev/null
+++ b/client/public/assets/audios/please-enter-house-no-english.mp3
diff --git a/client/public/assets/audios/please-enter-house-no-hindi.mp3 b/client/public/assets/audios/please-enter-house-no-hindi.mp3
new file mode 100644
index 0000000..a6852a7
--- /dev/null
+++ b/client/public/assets/audios/please-enter-house-no-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-landmark-english.mp3 b/client/public/assets/audios/please-enter-landmark-english.mp3
new file mode 100644
index 0000000..1e72bc1
--- /dev/null
+++ b/client/public/assets/audios/please-enter-landmark-english.mp3
diff --git a/client/public/assets/audios/please-enter-locality-english.mp3 b/client/public/assets/audios/please-enter-locality-english.mp3
new file mode 100644
index 0000000..7aca22c
--- /dev/null
+++ b/client/public/assets/audios/please-enter-locality-english.mp3
diff --git a/client/public/assets/audios/please-enter-locality-hindi.mp3 b/client/public/assets/audios/please-enter-locality-hindi.mp3
new file mode 100644
index 0000000..25c36d9
--- /dev/null
+++ b/client/public/assets/audios/please-enter-locality-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-mobile-english.mp3 b/client/public/assets/audios/please-enter-mobile-english.mp3
new file mode 100644
index 0000000..3672caa
--- /dev/null
+++ b/client/public/assets/audios/please-enter-mobile-english.mp3
diff --git a/client/public/assets/audios/please-enter-name-english.mp3 b/client/public/assets/audios/please-enter-name-english.mp3
new file mode 100644
index 0000000..6b80ffd
--- /dev/null
+++ b/client/public/assets/audios/please-enter-name-english.mp3
diff --git a/client/public/assets/audios/please-enter-name-hindi.mp3 b/client/public/assets/audios/please-enter-name-hindi.mp3
new file mode 100644
index 0000000..9c52a92
--- /dev/null
+++ b/client/public/assets/audios/please-enter-name-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-pin-hindi.mp3 b/client/public/assets/audios/please-enter-pin-hindi.mp3
new file mode 100644
index 0000000..af56073
--- /dev/null
+++ b/client/public/assets/audios/please-enter-pin-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-post-english.mp3 b/client/public/assets/audios/please-enter-post-english.mp3
new file mode 100644
index 0000000..aac27bd
--- /dev/null
+++ b/client/public/assets/audios/please-enter-post-english.mp3
diff --git a/client/public/assets/audios/please-enter-post-hindi.mp3 b/client/public/assets/audios/please-enter-post-hindi.mp3
new file mode 100644
index 0000000..7afe720
--- /dev/null
+++ b/client/public/assets/audios/please-enter-post-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-street-english.mp3 b/client/public/assets/audios/please-enter-street-english.mp3
new file mode 100644
index 0000000..cd8ba95
--- /dev/null
+++ b/client/public/assets/audios/please-enter-street-english.mp3
diff --git a/client/public/assets/audios/please-enter-street-hindi.mp3 b/client/public/assets/audios/please-enter-street-hindi.mp3
new file mode 100644
index 0000000..f899a11
--- /dev/null
+++ b/client/public/assets/audios/please-enter-street-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-valid-email-english.mp3 b/client/public/assets/audios/please-enter-valid-email-english.mp3
new file mode 100644
index 0000000..fed4a30
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-email-english.mp3
diff --git a/client/public/assets/audios/please-enter-valid-email-hindi.mp3 b/client/public/assets/audios/please-enter-valid-email-hindi.mp3
new file mode 100644
index 0000000..a5efae0
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-email-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-valid-mobile-english.mp3 b/client/public/assets/audios/please-enter-valid-mobile-english.mp3
new file mode 100644
index 0000000..25c6f4c
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-mobile-english.mp3
diff --git a/client/public/assets/audios/please-enter-valid-name-english.mp3 b/client/public/assets/audios/please-enter-valid-name-english.mp3
new file mode 100644
index 0000000..f0413aa
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-name-english.mp3
diff --git a/client/public/assets/audios/please-enter-valid-name-hindi.mp3 b/client/public/assets/audios/please-enter-valid-name-hindi.mp3
new file mode 100644
index 0000000..ce293bf
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-name-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-valid-pin-english.mp3 b/client/public/assets/audios/please-enter-valid-pin-english.mp3
new file mode 100644
index 0000000..01508b1
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-pin-english.mp3
diff --git a/client/public/assets/audios/please-enter-valid-pin-hindi.mp3 b/client/public/assets/audios/please-enter-valid-pin-hindi.mp3
new file mode 100644
index 0000000..09f2184
--- /dev/null
+++ b/client/public/assets/audios/please-enter-valid-pin-hindi.mp3
diff --git a/client/public/assets/audios/please-enter-village-english.mp3 b/client/public/assets/audios/please-enter-village-english.mp3
new file mode 100644
index 0000000..2669b4a
--- /dev/null
+++ b/client/public/assets/audios/please-enter-village-english.mp3
diff --git a/client/public/assets/audios/please-enter-village-hindi.mp3 b/client/public/assets/audios/please-enter-village-hindi.mp3
new file mode 100644
index 0000000..ff3ec09
--- /dev/null
+++ b/client/public/assets/audios/please-enter-village-hindi.mp3
diff --git a/client/public/assets/audios/please-select-district-english.mp3 b/client/public/assets/audios/please-select-district-english.mp3
new file mode 100644
index 0000000..9d2918b
--- /dev/null
+++ b/client/public/assets/audios/please-select-district-english.mp3
diff --git a/client/public/assets/audios/please-select-district-hindi.mp3 b/client/public/assets/audios/please-select-district-hindi.mp3
new file mode 100644
index 0000000..dd874c5
--- /dev/null
+++ b/client/public/assets/audios/please-select-district-hindi.mp3
diff --git a/client/public/assets/audios/please-select-dob-english.mp3 b/client/public/assets/audios/please-select-dob-english.mp3
new file mode 100644
index 0000000..4d57dd0
--- /dev/null
+++ b/client/public/assets/audios/please-select-dob-english.mp3
diff --git a/client/public/assets/audios/please-select-dob-hindi.mp3 b/client/public/assets/audios/please-select-dob-hindi.mp3
new file mode 100644
index 0000000..9c7d8c3
--- /dev/null
+++ b/client/public/assets/audios/please-select-dob-hindi.mp3
diff --git a/client/public/assets/audios/please-select-landmark-hindi.mp3 b/client/public/assets/audios/please-select-landmark-hindi.mp3
new file mode 100644
index 0000000..56d96a3
--- /dev/null
+++ b/client/public/assets/audios/please-select-landmark-hindi.mp3
diff --git a/client/public/assets/audios/please-select-mobile-hindi.mp3 b/client/public/assets/audios/please-select-mobile-hindi.mp3
new file mode 100644
index 0000000..6cd4f36
--- /dev/null
+++ b/client/public/assets/audios/please-select-mobile-hindi.mp3
diff --git a/client/public/assets/audios/please-select-state-english.mp3 b/client/public/assets/audios/please-select-state-english.mp3
new file mode 100644
index 0000000..4f46236
--- /dev/null
+++ b/client/public/assets/audios/please-select-state-english.mp3
diff --git a/client/public/assets/audios/please-select-state-hindi.mp3 b/client/public/assets/audios/please-select-state-hindi.mp3
new file mode 100644
index 0000000..a680a0e
--- /dev/null
+++ b/client/public/assets/audios/please-select-state-hindi.mp3
diff --git a/client/public/assets/audios/please-select-valid-mobile-hindi.mp3 b/client/public/assets/audios/please-select-valid-mobile-hindi.mp3
new file mode 100644
index 0000000..9f33713
--- /dev/null
+++ b/client/public/assets/audios/please-select-valid-mobile-hindi.mp3
diff --git a/client/public/assets/audios/please-select-your-gender-english.mp3 b/client/public/assets/audios/please-select-your-gender-english.mp3
new file mode 100644
index 0000000..64b9b1b
--- /dev/null
+++ b/client/public/assets/audios/please-select-your-gender-english.mp3
diff --git a/client/public/assets/audios/please-select-your-gender-hindi.mp3 b/client/public/assets/audios/please-select-your-gender-hindi.mp3
new file mode 100644
index 0000000..a4bce38
--- /dev/null
+++ b/client/public/assets/audios/please-select-your-gender-hindi.mp3
diff --git a/client/public/assets/audios/please-verify-otp-english.mp3 b/client/public/assets/audios/please-verify-otp-english.mp3
new file mode 100644
index 0000000..6877ae2
--- /dev/null
+++ b/client/public/assets/audios/please-verify-otp-english.mp3
diff --git a/client/public/assets/audios/please-verify-otp-hindi.mp3 b/client/public/assets/audios/please-verify-otp-hindi.mp3
new file mode 100644
index 0000000..7fcd6b0
--- /dev/null
+++ b/client/public/assets/audios/please-verify-otp-hindi.mp3
diff --git a/client/public/assets/audios/scan-documents-english.mp3 b/client/public/assets/audios/scan-documents-english.mp3
new file mode 100644
index 0000000..df1ea24
--- /dev/null
+++ b/client/public/assets/audios/scan-documents-english.mp3
diff --git a/client/public/assets/audios/scan-documents-hindi.mp3 b/client/public/assets/audios/scan-documents-hindi.mp3
new file mode 100644
index 0000000..e3ab9c6
--- /dev/null
+++ b/client/public/assets/audios/scan-documents-hindi.mp3
diff --git a/client/public/assets/audios/select-residency-english.mp3 b/client/public/assets/audios/select-residency-english.mp3
new file mode 100644
index 0000000..6aa3b4b
--- /dev/null
+++ b/client/public/assets/audios/select-residency-english.mp3
diff --git a/client/public/assets/audios/select-residency-hindi.mp3 b/client/public/assets/audios/select-residency-hindi.mp3
new file mode 100644
index 0000000..b420df6
--- /dev/null
+++ b/client/public/assets/audios/select-residency-hindi.mp3
diff --git a/client/public/assets/images/back.svg b/client/public/assets/images/back.svg
index 16b658a..23a27ad 100644
--- a/client/public/assets/images/back.svg
+++ b/client/public/assets/images/back.svg
@@ -1 +1 @@
-<?xml version="1.0"?><svg fill="#609db3" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" viewBox="0 0 24 24" width="192px" height="192px">    <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file
+<?xml version="1.0"?><svg fill="#323c7a" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" viewBox="0 0 24 24" width="192px" height="192px">    <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file
diff --git a/client/public/assets/images/help.svg b/client/public/assets/images/help.svg
index 76f7223..1fdf451 100644
--- a/client/public/assets/images/help.svg
+++ b/client/public/assets/images/help.svg
@@ -1,6 +1,6 @@
 <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"
+    <path fill="#323c7a"
         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"
diff --git a/client/public/assets/images/language.svg b/client/public/assets/images/language.svg
index 866056b..5d281f4 100644
--- a/client/public/assets/images/language.svg
+++ b/client/public/assets/images/language.svg
@@ -2,7 +2,7 @@
     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="#323c7a" 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>
diff --git a/client/public/assets/images/next_icon.svg b/client/public/assets/images/next_icon.svg
index 4e5714a..4b24a62 100644
--- a/client/public/assets/images/next_icon.svg
+++ b/client/public/assets/images/next_icon.svg
@@ -1 +1 @@
-<?xml version="1.0"?><svg fill="#609db3" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="192px" height="192px">    <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file
+<?xml version="1.0"?><svg fill="#323c7a" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="192px" height="192px">    <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file
diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx
index ff99eb6..fdb85f1 100644
--- a/client/src/components/BackButton/BackButton.jsx
+++ b/client/src/components/BackButton/BackButton.jsx
@@ -1,3 +1,4 @@
+import { Typography } from '@mui/material'
 import React from 'react'
 import styles from './BackButton.module.css'
 
@@ -10,11 +11,14 @@ const BackButton = ({ onClick, onChange }) => {
         type="submit"
         onChange={onChange}
       >
-        <img
-          className={styles.submit__image}
-          src={`${process.env.PUBLIC_URL}/assets/images/back.svg`}
-          alt=""
-        />
+        <div className={styles.submit__content}>
+          <img
+            className={styles.submit__image}
+            src={`${process.env.PUBLIC_URL}/assets/images/back.svg`}
+            alt=""
+          />
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Back</Typography>
+        </div>
       </button>
     </>
   )
diff --git a/client/src/components/BackButton/BackButton.module.css b/client/src/components/BackButton/BackButton.module.css
index cc9b51c..40b6fcc 100644
--- a/client/src/components/BackButton/BackButton.module.css
+++ b/client/src/components/BackButton/BackButton.module.css
@@ -18,3 +18,9 @@
   height: 75px;
   width: 75px;
 }
+
+.submit__content {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json
index fbdf254..3adcc12 100644
--- a/client/src/components/LanguageSelect/locales/hi/translation.json
+++ b/client/src/components/LanguageSelect/locales/hi/translation.json
@@ -52,7 +52,7 @@
   "ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE": "कृपया सुनिश्चित करें कि आपको जाने से पहले एक पुष्टिकरण संदेश प्राप्त हुआ है",
   "PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER": "कृपया अपनी उंगलियों को एक-एक करके फ़िंगरप्रिंट स्कैनर पर रखें",
   "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS": "अपनी उंगलियों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें",
-  "PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर xxxxxxxx15 पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें",
+  "PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें",
   "SEND_OTP": "ओटीपी भेजें",
   "RESEND": "फिर से भेजें",
   "VERIFY_OTP": "ओटीपी की पुष्टि करें",
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index ed796d9..df1269f 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
+import { Typography } from '@mui/material'
 
 const SubmitButton = ({ onClick, onChange, disabled }) => {
   return (
@@ -11,11 +12,14 @@ const SubmitButton = ({ onClick, onChange, disabled }) => {
         onChange={onChange}
         disabled={disabled}
       >
+        <div className={styles.submit__content}>
+        <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Save & Next</Typography>
         <img
           className={styles.submit__image}
           src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
           alt=""
         />
+        </div>
       </button>
     </>
   )
diff --git a/client/src/components/SubmitButton/SubmitButton.module.css b/client/src/components/SubmitButton/SubmitButton.module.css
index bb1b015..0105bbf 100644
--- a/client/src/components/SubmitButton/SubmitButton.module.css
+++ b/client/src/components/SubmitButton/SubmitButton.module.css
@@ -18,3 +18,9 @@
   height: 75px;
   width: 75px;
 }
+
+.submit__content {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index 598b8b7..1d7fdc0 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -21,6 +21,7 @@ const DocumentScanner = () => {
   ]
   const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
   const [activeStep, setActiveStep] = React.useState(0)
+  const language = localStorage.getItem('i18nextLng')
 
   const [doccu] = useState({ POI: '', POA: '', DOB: '' })
 
@@ -49,6 +50,13 @@ const DocumentScanner = () => {
       (!documents.DOB && activeStep === 2)
     ) {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      let audio
+      if (language === 'en') {
+        audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-english.mp3`)
+      } else if (language === 'hi') {
+        audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`)
+      }
+      audio.play()
     } else {
       setActiveStep((prevActiveStep) => prevActiveStep + 1)
     }
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 4d8fad2..f3b4c88 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -36,6 +36,7 @@ const Enrollment = () => {
   const { userData, setUserData } = userContext()
   const navigate = useNavigate()
   const [unverified, setUnverified] = useState(true)
+  const language = localStorage.getItem('i18nextLng')
 
   const [model, setModel] = useState()
 
@@ -92,54 +93,170 @@ const Enrollment = () => {
     sendMessage(payload)
   })
 
+  let audio
+
   const handleSubmit = () => {
     if (page === 0) {
       if (userData.indianResident === '') {
         toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/select-residency-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/select-residency-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.name === '' || userData.name.length < 1) {
         toast.error(t('PLEASE_ENTER_YOUR_NAME'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validString.test(userData.name)) {
         toast.error(t('PLEASE_ENTER_VALID_NAME'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.gender === '') {
         toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.dob === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DOB'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-dob-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-dob-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
     } else if (page === 1) {
       if (userData.mobile === '') {
         toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validMobileNumber.test(userData.mobile)) {
         toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.email === '') {
         toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validEmail.test(userData.email)) {
         toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
     } else if (page === 2) {
       if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-hindi.mp3`)
+        }
+        audio.play()
       } else if (!userData.address.state.name) {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-hindi.mp3`)
+        }
+        audio.play()
       } else if (!userData.address.district.name) {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
@@ -154,21 +271,45 @@ const Enrollment = () => {
         if (predictions.length > 0) {
           if (!userData.photo) {
             toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH'))
+            if (language === 'en') {
+              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-english.mp3`)
+            } else if (language === 'hi') {
+              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-hindi.mp3`)
+            }
+            audio.play()
           } else if (
             predictions[0].class === 'person' &&
-            predictions[0].score > 0.7
+            predictions[0].score > 0.5
           ) {
             setPage(page + 1)
           } else {
             toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+            if (language === 'en') {
+              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`)
+            } else if (language === 'hi') {
+              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`)
+            }
+            audio.play()
           }
         } else {
           toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+          if (language === 'en') {
+            audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`)
+          } else if (language === 'hi') {
+            audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`)
+          }
+          audio.play()
         }
       }, 1000)
     } else if (page === 4) {
       if (!userData.documents.POI) {
         toast.error(t('SCAN_YOUR_DOCUMENT'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
@@ -179,6 +320,12 @@ const Enrollment = () => {
     } else if (page === 7) {
       if (unverified) {
         toast.error(t('PLEASE_VERIFY_OTP'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-hindi.mp3`)
+        }
+        audio.play()
       } else {
         mutate({
           indianResident: userData.indianResident,
@@ -272,9 +419,11 @@ const Enrollment = () => {
   return (
     <>
       <ToastContainer
-        autoClose={1000}
+        autoClose={5000}
         hideProgressBar={true}
         theme={'colored'}
+        position="top-center"
+        style={{ fontSize: '1.5rem' }}
       />
       {conditionalComponent()}
       {conditionalButton()}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
index ddd656c..7643f76 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -27,6 +27,25 @@ const PhotoCapture = () => {
     'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
   ]
 
+  const svgIcon = () => (
+    <svg
+      width="100%"
+      height="100%"
+      className="svg"
+      viewBox="0 0 300 200"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+          <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+          <circle cx="50%" cy="50%" r="70" />
+        </mask>
+      </defs>
+      <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+    </svg>
+  )
+
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
@@ -50,18 +69,24 @@ const PhotoCapture = () => {
       />
       <div className={styles.card__container}>
         {!userData.photo ? (
-          <Webcam
-            audio={false}
-            height={400}
-            ref={webcamRef}
-            screenshotFormat="image/jpeg"
-            width={600}
-            videoConstraints={{
-              height: 400,
-              width: 600,
-              facingMode: 'user'
-            }}
-          />
+          <div className={styles.webcam__container}>
+            <Webcam
+              audio={false}
+              height={400}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={600}
+              videoConstraints={{
+                height: 400,
+                width: 600,
+                facingMode: 'user'
+              }}
+            />
+            <div className={styles.overlay__container}>
+              {svgIcon()}
+            </div>
+          </div>
+
         ) : (
           <img id="img" src={userData.photo} />
         )}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
index ad193e1..4a82e8e 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
@@ -2,4 +2,17 @@
   display: flex;
   justify-content: center;
   margin: 10px;
+}
+
+.webcam__container {
+  position: relative;
+}
+
+.overlay__container {
+  position: absolute ;
+  width: 100%;
+  top: 0 ;
+  right: 0 ;
+  bottom: 0 ;
+  left: 0;
 }
\ No newline at end of file
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 03f107a..9037028 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -24,25 +24,70 @@ const Demographic = () => {
     userContext()
 
   const navigate = useNavigate()
+  const language = localStorage.getItem('i18nextLng')
 
   const [page, setPage] = useState(0)
 
+  let audio
+
   const handleSubmit = () => {
     if (page === 0) {
       if (userData.name === '' || userData.name.length < 1) {
         toast.error(t('PLEASE_ENTER_YOUR_NAME'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validString.test(userData.name)) {
         toast.error(t('PLEASE_ENTER_VALID_NAME'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.gender === '') {
         toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.mobile === '') {
         toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validMobileNumber.test(userData.mobile)) {
         toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.email === '') {
         toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validEmail.test(userData.email)) {
         toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
@@ -51,24 +96,84 @@ const Demographic = () => {
         toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
       } else if (userData.address.state.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.district.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-hindi.mp3`)
+        }
+        audio.play()
       } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-hindi.mp3`)
+        }
+        audio.play()
       } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
+        if (language === 'en') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-english.mp3`)
+        } else if (language === 'hi') {
+          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-hindi.mp3`)
+        }
+        audio.play()
       } else {
         setPage(page + 1)
       }
@@ -125,9 +230,11 @@ const Demographic = () => {
   return (
     <>
       <ToastContainer
-        autoClose={1000}
+        autoClose={3000}
         hideProgressBar={true}
         theme={'colored'}
+        position="top-center"
+        style={{ fontSize: '1.5rem' }}
       />
       {conditionalComponent()}
       {conditionalButton()}
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index 86674af..4fa07fb 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -71,6 +71,18 @@ const DocumentScanner = () => {
     })
   })
 
+  const language = localStorage.getItem('i18nextLng')
+
+  let audio
+const playAudio = () => {
+  if (language === 'en') {
+    audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-english.mp3`)
+  } else if (language === 'hi') {
+    audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`)
+  }
+  audio.play()
+}
+
   const handleNext = () => {
     if (
       activeStep === steps.length - 1 &&
@@ -81,18 +93,25 @@ const DocumentScanner = () => {
       setUserData({ ...userData, documents: documents })
     } else if (documents.POI !== '' && documents.POA !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else if (documents.POI !== '' && documents.DOB !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else if (documents.POA !== '' && documents.DOB !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else if (documents.POI !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else if (documents.POA !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else if (documents.DOB !== '') {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     } else {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
+      playAudio()
     }
 
     if (
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index b53752c..0b8b4cb 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -37,6 +37,25 @@ const PhotoCapture = () => {
     'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
   ]
 
+  const svgIcon = () => (
+    <svg
+      width="100%"
+      height="100%"
+      className="svg"
+      viewBox="0 0 300 200"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+          <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+          <circle cx="50%" cy="50%" r="70" />
+        </mask>
+      </defs>
+      <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+    </svg>
+  )
+
   return (
     <>
       <Header subheading={t('UPDATE')} />
@@ -58,23 +77,28 @@ const PhotoCapture = () => {
           </>
         }
       />
-      <div className={styles.card__container}>
-        {userData?.photo === '' ? (
-          <Webcam
-            audio={false}
-            height={300}
-            ref={webcamRef}
-            screenshotFormat="image/jpeg"
-            width={500}
-            videoConstraints={{
-              height: 300,
-              width: 500,
-              facingMode: 'user'
-            }}
-          />
-        ) : (
-          <img id="img" src={userData?.photo} />
-        )}
+      <div className={styles.webcam__container}>
+        <div className={styles.card__container}>
+          {userData?.photo === '' ? (
+            <Webcam
+              audio={false}
+              height={300}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={500}
+              videoConstraints={{
+                height: 300,
+                width: 500,
+                facingMode: 'user'
+              }}
+            />
+          ) : (
+            <img id="img" src={userData?.photo} />
+          )}
+        </div>
+        <div className={styles.overlay__container}>
+          {svgIcon()}
+        </div>
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
         <Grid item>