diff --git a/package.json b/package.json
index 5331031d..6cbda4ff 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,7 @@
     "@tanstack/react-query": "^5.64.1",
     "axios": "^1.7.9",
     "core-js": "^3.37.1",
+    "dayjs": "^1.11.13",
     "expo": "52.0.27",
     "expo-apple-authentication": "~7.1.3",
     "expo-application": "~6.0.2",
@@ -163,6 +164,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
+    "react-native-ui-datepicker": "2.0.4",
     "react-native-web": "~0.19.6",
     "reactotron-react-native": "^5.1.7",
     "sass": "^1.77.2",
diff --git a/src/components/molecules/Field/Field.tsx b/src/components/molecules/Field/Field.tsx
index 580ef547..07caf432 100644
--- a/src/components/molecules/Field/Field.tsx
+++ b/src/components/molecules/Field/Field.tsx
@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { FieldCheckbox } from './FieldCheckbox'
 import { FieldCheckboxGroup } from './FieldCheckboxGroup'
+import { FieldDatePicker } from './FieldDatePicker'
 import { FieldInput } from './FieldInput'
 import { FieldRadioGroup } from './FieldRadioGroup'
 import { FieldSelect } from './FieldSelect'
@@ -12,6 +13,7 @@ type FieldComposition = React.FC<PropsWithChildren> & {
   Checkbox: typeof FieldCheckbox
   RadioGroup: typeof FieldRadioGroup
   Select: typeof FieldSelect
+  DatePicker: typeof FieldDatePicker
 }
 
 const Field: FieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ Field.CheckboxGroup = FieldCheckboxGroup
 Field.Checkbox = FieldCheckbox
 Field.RadioGroup = FieldRadioGroup
 Field.Select = FieldSelect
+Field.DatePicker = FieldDatePicker
 
 export { Field }
 export * from './types'
diff --git a/src/components/molecules/Field/FieldDatePicker.tsx b/src/components/molecules/Field/FieldDatePicker.tsx
new file mode 100644
index 00000000..eb1e61a5
--- /dev/null
+++ b/src/components/molecules/Field/FieldDatePicker.tsx
@@ -0,0 +1,78 @@
+import { forwardRef, useCallback, useImperativeHandle, useRef, useMemo } from 'react'
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+
+import type { FieldDatePickerProps } from './types'
+
+import {
+  FormErrorMessage,
+  FormLabel,
+  Box,
+  DatePicker,
+  DatePickerRef,
+} from '@/design-system/components'
+import { getLayoutProps } from '@/design-system/utils/getLayoutProps'
+
+export const FieldDatePicker = forwardRef<DatePickerRef, FieldDatePickerProps>(
+  (
+    {
+      errorMessage,
+      isInvalid,
+      isRequired,
+      label,
+      labelStyle,
+      onBlur,
+      onFocus,
+      testID,
+      onChangeDate,
+      ...props
+    },
+    ref
+  ) => {
+    const _datePickerRef = useRef<DatePickerRef>(null)
+
+    const { layoutProps, restProps: datePickerProps } = useMemo(
+      () => getLayoutProps(props),
+      [props]
+    )
+
+    const handleFocus = useCallback(() => {
+      _datePickerRef?.current?.focus()
+    }, [onFocus])
+
+    const handleBlur = useCallback(
+      (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        onBlur && e && onBlur(e)
+        _datePickerRef.current?.blur()
+      },
+      [onBlur]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: handleFocus,
+        blur: handleBlur,
+        ..._datePickerRef.current,
+      }),
+      [handleBlur, handleFocus]
+    )
+
+    return (
+      <Box width="100%" gap={1} mb={2} {...layoutProps}>
+        <FormLabel
+          {...{ isRequired, label, labelStyle }}
+          testID={testID + ':label'}
+          onLabelPress={handleFocus}
+        />
+        <DatePicker
+          isInvalid={isInvalid || Boolean(errorMessage)}
+          onChangeDate={onChangeDate}
+          {...datePickerProps}
+          ref={_datePickerRef}
+          testID={testID + ':input'}
+        />
+        <FormErrorMessage {...{ errorMessage }} testId={testID + ':error_message'} />
+      </Box>
+    )
+  }
+)
diff --git a/src/components/molecules/Field/types.ts b/src/components/molecules/Field/types.ts
index acde71ce..7f3f2a05 100644
--- a/src/components/molecules/Field/types.ts
+++ b/src/components/molecules/Field/types.ts
@@ -7,6 +7,7 @@ import {
   SelectProps,
   StyledProps,
   TouchableRef,
+  DatePickerProps,
 } from '@/design-system'
 
 // -----------------------
@@ -92,3 +93,12 @@ export type FieldCheckboxProps = FormLabelProps &
   CheckboxProps & {
     errorMessage?: string
   }
+
+// -----------------------
+// ----- DATEPICKER ------
+// -----------------------
+
+export type FieldDatePickerProps = FormLabelProps &
+  DatePickerProps & {
+    errorMessage?: string
+  }
diff --git a/src/components/organisms/ControlledField/ControlledDatePicker.tsx b/src/components/organisms/ControlledField/ControlledDatePicker.tsx
new file mode 100644
index 00000000..da6aa995
--- /dev/null
+++ b/src/components/organisms/ControlledField/ControlledDatePicker.tsx
@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { Controller, ControllerProps, FieldValues, get } from 'react-hook-form'
+
+import type { ControlledDatePickerProps } from './types'
+import { Field } from '../../molecules'
+
+export const ControlledDatePicker = <TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  errors,
+  rules,
+  children,
+  ...props
+}: ControlledDatePickerProps<TFieldValues>) => {
+  const errorMessage = get(errors, name)?.message
+
+  const renderDatePicker = useCallback(
+    ({
+      field: { onChange, name, ref, value, ...fieldProps },
+    }: Parameters<ControllerProps['render']>[0]) => {
+      return (
+        <Field.DatePicker
+          {...props}
+          {...fieldProps}
+          date={value}
+          ref={ref}
+          errorMessage={errorMessage}
+          onChangeDate={onChange}
+        />
+      )
+    },
+    [errorMessage, props]
+  )
+
+  return (
+    <Controller
+      name={name}
+      // @ts-expect-error: For some reason, the type of render is not being inferred correctly
+      control={control}
+      rules={rules}
+      render={renderDatePicker}
+    />
+  )
+}
diff --git a/src/components/organisms/ControlledField/ControlledField.tsx b/src/components/organisms/ControlledField/ControlledField.tsx
index 64a21940..d59b8a51 100644
--- a/src/components/organisms/ControlledField/ControlledField.tsx
+++ b/src/components/organisms/ControlledField/ControlledField.tsx
@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { ControlledCheckbox } from './ControlledCheckbox'
 import { ControlledCheckboxGroup } from './ControlledCheckboxGroup'
+import { ControlledDatePicker } from './ControlledDatePicker'
 import { ControlledInput } from './ControlledInput'
 import { ControlledRadioGroup } from './ControlledRadioGroup'
 import { ControlledSelect } from './ControlledSelect'
@@ -12,6 +13,7 @@ type ControlledFieldComposition = React.FC<PropsWithChildren> & {
   RadioGroup: typeof ControlledRadioGroup
   Checkbox: typeof ControlledCheckbox
   Select: typeof ControlledSelect
+  DatePicker: typeof ControlledDatePicker
 }
 
 const ControlledField: ControlledFieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ ControlledField.CheckboxGroup = ControlledCheckboxGroup
 ControlledField.Checkbox = ControlledCheckbox
 ControlledField.RadioGroup = ControlledRadioGroup
 ControlledField.Select = ControlledSelect
+ControlledField.DatePicker = ControlledDatePicker
 
 export { ControlledField }
 export * from './types'
diff --git a/src/components/organisms/ControlledField/types.ts b/src/components/organisms/ControlledField/types.ts
index 1050d955..296c7871 100644
--- a/src/components/organisms/ControlledField/types.ts
+++ b/src/components/organisms/ControlledField/types.ts
@@ -6,6 +6,7 @@ import {
   FieldRadioGroupProps,
   FieldSelectProps,
   FieldCheckboxProps,
+  FieldDatePickerProps,
 } from '@/components/molecules'
 
 // -----------------------
@@ -68,3 +69,13 @@ export type ControlledCheckboxProps<TFieldValues extends FieldValues = FieldValu
   'onChange' | 'isChecked'
 > &
   ControlledFieldProps<TFieldValues>
+
+// -----------------------
+// ----- DATEPICKER ------
+// -----------------------
+
+export type ControlledDatePickerProps<TFieldValues extends FieldValues = FieldValues> = Omit<
+  FieldDatePickerProps,
+  'onChangeDate' | 'date'
+> &
+  ControlledFieldProps<TFieldValues>
diff --git a/src/design-system/components/DatePicker.tsx b/src/design-system/components/DatePicker.tsx
new file mode 100644
index 00000000..dbbfaf28
--- /dev/null
+++ b/src/design-system/components/DatePicker.tsx
@@ -0,0 +1,193 @@
+import dayjs from 'dayjs'
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import DateTimePicker from 'react-native-ui-datepicker'
+import { DatePickerSingleProps } from 'react-native-ui-datepicker/lib/typescript/src/DateTimePicker'
+
+import { Box } from './Box'
+import { BoxWithShadow } from './BoxWithShadow'
+import { Button } from './Button'
+import { Column } from './Column'
+import { Icon } from './Icon'
+import { Row } from './Row'
+import { Spacer } from './Spacer'
+import { Text } from './Text'
+import { Touchable } from './Touchables'
+import { DatePickerProps, DatePickerRef } from './types'
+import { useBottomSheet } from '../bottomSheets'
+
+import { useTheme, useTranslation } from '@/hooks'
+
+export type DateTypes = 'protected' | 'email' | 'light' | undefined
+
+type DatePickerModalProps = {
+  date?: Date
+  setDate(date: Date): void
+  onChangeDate: ((date: Date) => void) | undefined
+  maximumDate?: Date
+  minimumDate?: Date
+  onSave?: () => void
+}
+
+const DatePickerModal = ({ date, setDate, onChangeDate, onSave }: DatePickerModalProps) => {
+  const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
+  const { t } = useTranslation()
+
+  const [tempDate, setTempDate] = useState<Date>(date || new Date())
+
+  const onChange: NonNullable<DatePickerSingleProps['onChange']> = useCallback((params) => {
+    if (!params.date) return
+
+    const newDate = dayjs(params.date).toDate()
+
+    setTempDate(newDate)
+  }, [])
+
+  const handleSave = useCallback(() => {
+    setDate(tempDate)
+    onChangeDate?.(tempDate)
+    onSave?.()
+  }, [tempDate, setDate, onChangeDate])
+
+  const handleCancel = useCallback(() => {
+    setTempDate(date ?? new Date())
+    onSave?.()
+  }, [date])
+
+  return (
+    <Box bg="bg.primary" px={4} pt={4} pb={`${bottom + 16}px`}>
+      <DateTimePicker
+        mode="single"
+        date={tempDate}
+        locale={'en'}
+        displayFullDays
+        timePicker={false}
+        onChange={onChange}
+        headerButtonColor={colors.button.primary.bg}
+        selectedItemColor={colors.button.primary.bg}
+        selectedTextStyle={{
+          color: colors.button.primary.fg,
+        }}
+        todayContainerStyle={styles.todayContainerStyle}
+        calendarTextStyle={{
+          color: colors.text.primary,
+        }}
+        headerTextStyle={{
+          color: colors.text.primary,
+        }}
+        weekDaysTextStyle={{
+          color: colors.text.primary,
+        }}
+      />
+      <Spacer y={4} />
+      <Button title={t('common.save')} onPress={handleSave} />
+      <Spacer y={2} />
+      <Button.TertiaryColor title={t('common.cancel')} onPress={handleCancel} />
+    </Box>
+  )
+}
+
+const styles = StyleSheet.create({
+  todayContainerStyle: {
+    borderWidth: 1,
+  },
+})
+
+export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
+  ({ children, style, isDisabled, isInvalid, date, onChangeDate, placeholder, ...props }, ref) => {
+    const _datePickerRef = useRef<DatePickerRef>(null)
+
+    const { bottomSheetComponentRenderFunction, closeBottomSheet, presentBottomSheet } =
+      useBottomSheet({
+        title: placeholder,
+        isDivider: false,
+      })
+
+    const handleClear = useCallback(() => {
+      if (!onChangeDate) {
+        return
+      }
+      if (isDisabled) {
+        return
+      }
+
+      onChangeDate(undefined)
+    }, [isDisabled, onChangeDate])
+
+    const bottomSheet = bottomSheetComponentRenderFunction(
+      <DatePickerModal
+        date={date}
+        setDate={onChangeDate}
+        onChangeDate={onChangeDate}
+        onSave={closeBottomSheet}
+      />
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: presentBottomSheet,
+        blur: closeBottomSheet,
+        ..._datePickerRef.current,
+      }),
+      [closeBottomSheet, presentBottomSheet]
+    )
+
+    return (
+      <>
+        <BoxWithShadow isInvalid={isInvalid}>
+          <Touchable
+            onPress={presentBottomSheet}
+            width="100%"
+            minW={48}
+            px={2}
+            disabled={isDisabled}
+            alignItems="center"
+            borderColor={
+              isDisabled ? 'border.disabled' : isInvalid ? 'border.error' : 'border.primary'
+            }
+            bg={isDisabled ? 'bg.disabled_subtle' : 'bg.primary'}
+            borderRadius={8}
+            borderWidth={1}
+            flexDirection="row"
+            overflow="hidden"
+            {...props}
+          >
+            <Row alignItems="center" gap={2} width="100%">
+              <Icon
+                name="calendar-2-line"
+                size={24}
+                color={isInvalid ? 'Error.600' : 'text.primary'}
+              />
+
+              <Column py={2} justifyContent="center" gap={2} flexGrow={1}>
+                <Text.MdRegular
+                  color={date ? 'text.primary' : isDisabled ? 'text.disabled' : 'text.placeholder'}
+                >
+                  {date ? dayjs(date).format('DD/MM/YYYY') : placeholder}
+                </Text.MdRegular>
+              </Column>
+              {date && (
+                <Touchable
+                  onPress={handleClear}
+                  disabled={isDisabled}
+                  hitSlop={12}
+                  borderRadius={8}
+                >
+                  <Icon
+                    name="close-line"
+                    size={24}
+                    color={isInvalid ? 'Error.600' : 'text.primary'}
+                  />
+                </Touchable>
+              )}
+            </Row>
+          </Touchable>
+        </BoxWithShadow>
+        {bottomSheet}
+      </>
+    )
+  }
+)
diff --git a/src/design-system/components/index.ts b/src/design-system/components/index.ts
index 245103eb..3f538a70 100644
--- a/src/design-system/components/index.ts
+++ b/src/design-system/components/index.ts
@@ -5,6 +5,7 @@ export * from './BoxWithShadow'
 export * from './Button'
 export * from './Center'
 export * from './Column'
+export * from './DatePicker'
 export * from './GradientBox'
 export * from './Row'
 export * from './Spacer'
diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts
index 4f0d0897..25a51152 100644
--- a/src/design-system/components/types.ts
+++ b/src/design-system/components/types.ts
@@ -269,3 +269,22 @@ export type CheckboxProps = TouchableProps & {
   size?: 'sm' | 'md'
   pb?: SizingValue
 }
+
+// -----------------------
+// ----- DATEPICKER ------
+// -----------------------
+
+export type DatePickerRef = { focus: () => void; blur: () => void }
+
+export type DatePickerProps = TouchableProps & {
+  // Logic
+  onChangeDate: (newValue?: Date) => void
+  date?: Date
+
+  // UI
+  placeholder?: string
+  isDisabled?: boolean
+  isInvalid?: boolean
+  rightElement?: JSX.Element
+  leftElement?: JSX.Element
+}
diff --git a/src/hooks/forms/useTestForm.ts b/src/hooks/forms/useTestForm.ts
index a3f16ed1..cd9b4c30 100644
--- a/src/hooks/forms/useTestForm.ts
+++ b/src/hooks/forms/useTestForm.ts
@@ -9,6 +9,7 @@ const defaultValues: TestFormValues = {
   surname: '',
   email: '',
   city: '',
+  birthDate: '',
   phone: '',
   postalCode: '',
   sex: '',
@@ -52,6 +53,7 @@ export const useTestForm = () => {
     music: { required: t('test_form.errors.music') },
     interests: { required: t('test_form.errors.interests') },
     sex: { required: t('test_form.errors.sex') },
+    birthDate: { required: t('test_form.errors.birth_date') },
   }
 
   const {
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 00e55679..ce2c6b7d 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -289,6 +289,8 @@
     "dancing": "Dancing",
     "education": "Education",
     "email_placeholder": "E-mail",
+    "birth_date": "Birth date",
+    "birth_date_placeholder": "Birth date",
     "errors": {
       "age": "Age is required",
       "city": "City is required",
@@ -301,6 +303,7 @@
       "phone": "Phone is required",
       "postalCode_format": "Postal code must be in form 00-000",
       "postalCode": "Postal code is required",
+      "birth_date": "Birth date is required",
       "sex": "Sex is is required",
       "shoeSize": "Shoe size is required",
       "surname": "Surname is required"
diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json
index 6cb1495a..648efd6f 100644
--- a/src/i18n/translations/pl.json
+++ b/src/i18n/translations/pl.json
@@ -288,6 +288,8 @@
     "dancing": "Taniec",
     "education": "Wykształcenie",
     "email_placeholder": "E-mail",
+    "birth_date": "Data urodzenia",
+    "birth_date_placeholder": "Data urodzenia",
     "errors": {
       "age": "Wiek jest wymagany",
       "city": "Miasto jest wymagane",
@@ -296,6 +298,7 @@
       "interests": "Zaznacz przynajmniej 1 zainteresowanie",
       "music": "Zaznacz przynajmniej 1 rodzaj muzyki",
       "name": "Imie jest wymagane",
+      "birth_date": "Data urodzenia jest wymagana",
       "phone_format": "Numer telefonu musi być w formacie 000-000-000",
       "phone": "Number telefonu jest wymagany",
       "postalCode_format": "Kod pocztowy musi być w formacie 00-000",
diff --git a/src/screens/TestFormScreen.tsx b/src/screens/TestFormScreen.tsx
index 69d61094..d6be4f4c 100644
--- a/src/screens/TestFormScreen.tsx
+++ b/src/screens/TestFormScreen.tsx
@@ -121,6 +121,15 @@ export const TestFormScreen = (): JSX.Element => {
         placeholder={t('test_form.phone_placeholder')}
         rules={VALIDATION.phone}
       />
+      <ControlledField.DatePicker
+        {...{ control, errors }}
+        isRequired
+        label={t('test_form.birth_date')}
+        mt={2}
+        name="birthDate"
+        placeholder={t('test_form.birth_date_placeholder')}
+        rules={VALIDATION.birthDate}
+      />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
diff --git a/src/types/testForm.ts b/src/types/testForm.ts
index 7f7ec8da..41959388 100644
--- a/src/types/testForm.ts
+++ b/src/types/testForm.ts
@@ -5,6 +5,7 @@ export type TestFormValues = {
   phone: string
   postalCode: string
   city: string
+  birthDate: string
   sex: string
   music: string[]
   comment: string
diff --git a/yarn.lock b/yarn.lock
index 140e6fd8..6b118e2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1273,6 +1273,7 @@ __metadata:
     commander: "npm:^12.1.0"
     core-js: "npm:^3.37.1"
     cross-env: "npm:^7.0.3"
+    dayjs: "npm:^1.11.13"
     dotenv: "npm:^16.4.7"
     enquirer: "npm:^2.4.1"
     eslint: "npm:^9.9.1"
@@ -1340,6 +1341,7 @@ __metadata:
     react-native-safe-area-context: "npm:4.12.0"
     react-native-screens: "npm:~4.4.0"
     react-native-svg: "npm:15.8.0"
+    react-native-ui-datepicker: "npm:2.0.4"
     react-native-url-polyfill: "npm:^2.0.0"
     react-native-web: "npm:~0.19.6"
     react-test-renderer: "npm:^18.3.1"
@@ -6309,6 +6311,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.13":
+  version: 1.11.13
+  resolution: "dayjs@npm:1.11.13"
+  checksum: 10/7374d63ab179b8d909a95e74790def25c8986e329ae989840bacb8b1888be116d20e1c4eee75a69ea0dfbae13172efc50ef85619d304ee7ca3c01d5878b704f5
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -13317,6 +13326,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-ui-datepicker@npm:2.0.4":
+  version: 2.0.4
+  resolution: "react-native-ui-datepicker@npm:2.0.4"
+  dependencies:
+    dayjs: "npm:^1.11.13"
+    lodash: "npm:^4.17.21"
+    react-native-wheely: "npm:^0.6.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/39da674809a855713cf97edfb2da1bfea24b9e7ea1ab76facc76fac6679efb69b94cb78f5f42589131408c1887981f273c4f4a0e7a925891571d1ef8274c0a1b
+  languageName: node
+  linkType: hard
+
 "react-native-url-polyfill@npm:^2.0.0":
   version: 2.0.0
   resolution: "react-native-url-polyfill@npm:2.0.0"
@@ -13347,6 +13370,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-wheely@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "react-native-wheely@npm:0.6.0"
+  checksum: 10/c945e78f262f739da233f4348963c9fde976ec1a7cb2fd557e273db4d57dfa65e1e1b42f444d42158b940184ceb8c2fcd985001df57d9aedc238aec1ca4ba13c
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.76.6":
   version: 0.76.6
   resolution: "react-native@npm:0.76.6"