diff --git a/app/package.json b/app/package.json
index f39e34aa0..f540fff53 100644
--- a/app/package.json
+++ b/app/package.json
@@ -40,6 +40,7 @@
     "react": "18.2.0",
     "react-native": "0.72.3",
     "react-native-canvas": "^0.1.39",
+    "react-native-date-picker": "^5.0.4",
     "react-native-dialog": "^9.3.0",
     "react-native-fs": "^2.20.0",
     "react-native-get-random-values": "^1.11.0",
@@ -76,4 +77,4 @@
   "engines": {
     "node": ">=16"
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx
index 803114b7b..1d68c9c78 100644
--- a/app/src/screens/MainScreen.tsx
+++ b/app/src/screens/MainScreen.tsx
@@ -5,7 +5,7 @@ import Dialog from "react-native-dialog";
 import { ethers } from 'ethers';
 // import ressources
 import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3 } from 'tamagui'
-import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser } from '@tamagui/lucide-icons';
+import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, CalendarSearch } from '@tamagui/lucide-icons';
 import X from '../images/x.png'
 import Telegram from '../images/telegram.png'
 import Github from '../images/github.png'
@@ -17,7 +17,7 @@ import { ToastMessage } from '../components/ToastMessage';
 import useUserStore from '../stores/userStore';
 import useNavigationStore from '../stores/navigationStore';
 // import utils
-import { bgColor, blueColorLight, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
+import { bgColor, blueColorLight, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors';
 import { ModalProofSteps, Steps } from '../utils/utils';
 import { scan } from '../utils/nfcScanner';
 import { CircuitName, fetchZkey } from '../utils/zkeyDownload';
@@ -40,6 +40,7 @@ import AppScreen from './AppScreen';
 import { RPC_URL, SignatureAlgorithm } from '../../../common/src/constants/constants';
 import { mock_csca_sha256_rsa_4096, mock_dsc_sha256_rsa_4096 } from '../../../common/src/constants/mockCertificates';
 
+import DatePicker from 'react-native-date-picker'
 
 const MainScreen: React.FC = () => {
   const [NFCScanIsOpen, setNFCScanIsOpen] = useState(false);
@@ -50,6 +51,10 @@ const MainScreen: React.FC = () => {
   const [HelpIsOpen, setHelpIsOpen] = useState(false);
   const [sheetIsOpen, setSheetIsOpen] = useState(false);
   const [modalProofStep, setModalProofStep] = useState(0);
+  const [dateOfBirthDatePicker, setDateOfBirthDatePicker] = useState(new Date())
+  const [dateOfExpiryDatePicker, setDateOfExpiryDatePicker] = useState(new Date())
+  const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false)
+  const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false)
 
   const {
     passportNumber,
@@ -120,7 +125,6 @@ const MainScreen: React.FC = () => {
       useUserStore.getState().setDscSecret(secret);
     }
 
-
     const inputs_csca = getCSCAInputs(
       secret,
       dscCert,
@@ -136,6 +140,10 @@ const MainScreen: React.FC = () => {
     toast.show("Using mock passport data!", { type: "info" })
   }
 
+  const castDate = (date: Date) => {
+    return (date.toISOString().slice(2, 4) + date.toISOString().slice(5, 7) + date.toISOString().slice(8, 10)).toString();
+  }
+
   const decrementStep = () => {
     if (selectedTab === "nfc") {
       setStep(Steps.MRZ_SCAN);
@@ -505,7 +513,7 @@ const MainScreen: React.FC = () => {
             <Sheet.Overlay />
             <Sheet.Frame bg={bgColor} borderRadius="$9" pt="$2">
               <YStack p="$4" f={1} gap="$3">
-                <Text fontSize="$6" mb="$4" color={textColor1}>Enter your the information manually</Text>
+                <Text fontSize="$6" mb="$4" color={textColor1}>Please provide the following information</Text>
                 <Fieldset gap="$4" horizontal>
                   <Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
                     Passport Number
@@ -524,11 +532,37 @@ const MainScreen: React.FC = () => {
                     keyboardType="default"
                   />
                 </Fieldset>
+
+
                 <Fieldset gap="$4" horizontal>
                   <Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
-                    Date of birth (yymmdd)
+                    Date of birth
                   </Text>
-                  <Input
+                  <Text color={textColor1}>
+                    {dateOfBirthDatePicker.toISOString().slice(0, 10)}
+                  </Text>
+                  <Button bg="white" onPress={() => setDateOfBirthDatePickerIsOpen(true)}
+                    pressStyle={{
+                      bg: componentBgColor2,
+                      borderColor: componentBgColor2,
+                    }}>
+                    <CalendarSearch />
+                  </Button>
+                  <DatePicker
+                    modal
+                    mode='date'
+                    open={dateOfBirthDatePickerIsOpen}
+                    date={dateOfBirthDatePicker}
+                    onConfirm={(date) => {
+                      setDateOfBirthDatePickerIsOpen(false)
+                      setDateOfBirthDatePicker(date)
+                      update({ dateOfBirth: castDate(date) })
+                    }}
+                    onCancel={() => {
+                      setDateOfBirthDatePickerIsOpen(false)
+                    }}
+                  />
+                  {/* <Input
                     bg={componentBgColor}
                     color={textColor1}
                     h="$3.5"
@@ -540,13 +574,37 @@ const MainScreen: React.FC = () => {
                     }}
                     value={dateOfBirth}
                     keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
-                  />
+                  /> */}
                 </Fieldset>
                 <Fieldset gap="$4" horizontal>
                   <Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
-                    Date of expiry (yymmdd)
+                    Date of expiry
                   </Text>
-                  <Input
+                  <Text color={textColor1}>
+                    {dateOfExpiryDatePicker.toISOString().slice(0, 10)}
+                  </Text>
+                  <Button bg="white" onPress={() => setDateOfExpiryDatePickerIsOpen(true)}
+                    pressStyle={{
+                      bg: componentBgColor2,
+                      borderColor: componentBgColor2,
+                    }}>
+                    <CalendarSearch />
+                  </Button>
+                  <DatePicker
+                    modal
+                    mode='date'
+                    open={dateOfExpiryDatePickerIsOpen}
+                    date={dateOfExpiryDatePicker}
+                    onConfirm={(date) => {
+                      setDateOfExpiryDatePickerIsOpen(false)
+                      setDateOfExpiryDatePicker(date)
+                      update({ dateOfExpiry: castDate(date) })
+                    }}
+                    onCancel={() => {
+                      setDateOfExpiryDatePickerIsOpen(false)
+                    }}
+                  />
+                  {/* <Input
                     bg={componentBgColor}
                     color={textColor1}
                     h="$3.5"
@@ -558,8 +616,43 @@ const MainScreen: React.FC = () => {
                     }}
                     value={dateOfExpiry}
                     keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
-                  />
+                  /> */}
                 </Fieldset>
+                <XStack f={1} />
+                <YStack mb="$6" gap="$2">
+                  <Button
+                    bg={textColor1}
+                    pressStyle={{
+                      bg: componentBgColor2,
+                      borderColor: componentBgColor2,
+                    }}
+                    onPress={() => {
+                      setSheetIsOpen(false)
+                      setStep(Steps.MRZ_SCAN_COMPLETED)
+                    }}
+                  >
+                    <Text
+                      fontSize="$6"
+                      color={bgColor}
+                    >Submit</Text>
+                  </Button>
+                  <Button
+                    bg="gray"
+                    pressStyle={{
+                      bg: componentBgColor2,
+                      borderColor: componentBgColor2,
+                    }}
+                    onPress={() => {
+                      setSheetIsOpen(false)
+                    }}
+                  >
+                    <Text
+                      fontSize="$6"
+                      color={bgColor}
+                    >Cancel</Text>
+                  </Button>
+                </YStack>
+
               </YStack>
             </Sheet.Frame>
           </Sheet>