diff --git a/apps/expo/package.json b/apps/expo/package.json
index 8f3d4a5..31c4ffb 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -19,6 +19,8 @@
     "@expo-google-fonts/open-sans": "^0.2.3",
     "@expo/metro-config": "^0.10.7",
     "@expo/vector-icons": "^13.0.0",
+    "@hookform/resolvers": "^3.3.2",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@tanstack/react-query": "^5.8.7",
     "@trpc/client": "next",
     "@trpc/react-query": "next",
@@ -39,15 +41,19 @@
     "nativewind": "^4.0.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.49.0",
     "react-native": "0.72.7",
+    "react-native-date-picker": "^4.3.4",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
     "react-native-ui-datepicker": "^1.0.10",
     "superjson": "2.2.0",
     "tailwind-merge": "^2.1.0",
-    "ts-pattern": "^5.0.5"
+    "ts-pattern": "^5.0.5",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
diff --git a/apps/expo/src/app/(auth)/sign-in.tsx b/apps/expo/src/app/(auth)/sign-in.tsx
index 3bf4986..bcef383 100644
--- a/apps/expo/src/app/(auth)/sign-in.tsx
+++ b/apps/expo/src/app/(auth)/sign-in.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
 import { Link, Redirect } from 'expo-router';
 import { Button } from '@/components/atoms/Button';
@@ -7,12 +7,35 @@ import { TextInput } from '@/components/atoms/TextInput';
 import { ScreenView } from '@/components/molecules/ScreenView';
 import { useAuth } from '@/context/AuthContext';
 import { api } from '@/utils/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { type PatientBundle } from '@canvas-challenge/canvas';
 
+const SignInFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+type SignInFormType = z.infer<typeof SignInFormSchema>;
+
 const SignIn = () => {
   const { signIn, patientId } = useAuth();
-  const [email, setEmail] = useState('');
+
+  const {
+    control,
+    formState: { errors, isValid },
+    handleSubmit,
+    watch,
+  } = useForm<SignInFormType>({
+    defaultValues: {
+      email: '',
+    },
+    resolver: zodResolver(SignInFormSchema),
+    mode: 'onChange',
+  });
+
+  const email = watch('email');
 
   const { isLoading: patientSearchLoading, refetch } = api.patient.search.useQuery(
     {
@@ -54,18 +77,31 @@ const SignIn = () => {
               Log in to start owning your health data
             </Text>
             <View className="mt-28">
-              <TextInput
-                autoCapitalize="none"
-                textContentType="emailAddress"
-                keyboardType="email-address"
-                autoComplete="email"
-                value={email}
-                onChangeText={setEmail}
-                placeholder="Enter your email..."
-                onSubmitEditing={searchForPatient}
+              <Text className="mb-2 pl-1 text-xl">Email</Text>
+              <Controller
+                control={control}
+                name="email"
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <TextInput
+                    hasError={!!errors.email}
+                    autoCapitalize="none"
+                    textContentType="emailAddress"
+                    keyboardType="email-address"
+                    autoComplete="email"
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                    placeholder="Enter your email..."
+                  />
+                )}
               />
               <View className="mt-10">
-                <Button isLoading={patientSearchLoading} text="Login" onPress={searchForPatient} />
+                <Button
+                  disabled={!isValid}
+                  isLoading={patientSearchLoading}
+                  text="Login"
+                  onPress={handleSubmit(searchForPatient)}
+                />
               </View>
               <View className="mt-10">
                 <Text className="text-xl">
diff --git a/apps/expo/src/app/(auth)/sign-up.tsx b/apps/expo/src/app/(auth)/sign-up.tsx
index cb5d4a6..ca87257 100644
--- a/apps/expo/src/app/(auth)/sign-up.tsx
+++ b/apps/expo/src/app/(auth)/sign-up.tsx
@@ -1,15 +1,150 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import { Stack } from 'expo-router';
+import { Button } from '@/components/atoms/Button';
 import { Text } from '@/components/atoms/Text';
+import { TextInput } from '@/components/atoms/TextInput';
 import { ScreenView } from '@/components/molecules/ScreenView';
+import { zodResolver } from '@hookform/resolvers/zod';
+import dayjs from 'dayjs';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const SignUpFormSchema = z.object({
+  firstName: z.string().min(1, {
+    message: 'hello??',
+  }),
+  lastName: z.string().min(1),
+  email: z.string().email().min(1),
+  dateOfBirth: z.date(),
+});
+
+type SignUpFormType = z.infer<typeof SignUpFormSchema>;
 
 const SignUp = () => {
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const {
+    control,
+    formState: { errors, isValid },
+    handleSubmit,
+    watch,
+    getFieldState,
+  } = useForm<SignUpFormType>({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      dateOfBirth: undefined,
+    },
+    resolver: zodResolver(SignUpFormSchema),
+    mode: 'onChange',
+  });
+
+  const currentBirthDate = watch('dateOfBirth');
+  const dobState = getFieldState('dateOfBirth');
+
+  const onSubmit = useCallback((form: SignUpFormType) => {
+    Alert.alert(JSON.stringify(form, null, 2));
+  }, []);
+
   return (
-    <ScreenView>
-      <View className="h-full">
-        <Text>TODO: sign up</Text>
-      </View>
-    </ScreenView>
+    <>
+      <Stack.Screen />
+      <ScreenView>
+        <ScrollView showsVerticalScrollIndicator={false} className="h-full">
+          <Text className="text-3xl" weight="bold">
+            Sign Up
+          </Text>
+          <View className="mt-8 flex gap-8">
+            <View>
+              <Text className="mb-2 pl-1 text-xl">First Name</Text>
+              <Controller
+                control={control}
+                name="firstName"
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <TextInput
+                    hasError={!!errors.firstName}
+                    placeholder="Enter first name..."
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </View>
+            <View>
+              <Text className="mb-2 pl-1 text-xl">Last Name</Text>
+              <Controller
+                control={control}
+                name="lastName"
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <TextInput
+                    hasError={!!errors.lastName}
+                    placeholder="Enter last name..."
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </View>
+            <View>
+              <Text className="mb-2 pl-1 text-xl">Email</Text>
+              <Controller
+                control={control}
+                name="email"
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <TextInput
+                    hasError={!!errors.email}
+                    autoCapitalize="none"
+                    textContentType="emailAddress"
+                    keyboardType="email-address"
+                    autoComplete="email"
+                    placeholder="Enter email..."
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </View>
+            <View>
+              <Text className="mb-2 pl-1 text-xl">Date of Birth</Text>
+              <TouchableOpacity onPress={() => setDatePickerOpen((curr) => !curr)}>
+                {!dobState.isDirty ? (
+                  <Text className="bg-coolGray-100 text-coolGray-300 rounded-md p-6">
+                    __ / __ / ____
+                  </Text>
+                ) : (
+                  <Text className="bg-coolGray-100 rounded-md p-6">
+                    {dayjs(currentBirthDate).format('MM/DD/YYYY')}
+                  </Text>
+                )}
+              </TouchableOpacity>
+              <Controller
+                control={control}
+                name="dateOfBirth"
+                render={({ field: { onChange, value } }) => (
+                  <DateTimePickerModal
+                    isVisible={datePickerOpen}
+                    date={value}
+                    mode="date"
+                    onConfirm={(date) => {
+                      onChange(date);
+                      setDatePickerOpen(false);
+                    }}
+                    onCancel={() => setDatePickerOpen(false)}
+                    maximumDate={dayjs().add(-18, 'years').toDate()}
+                  />
+                )}
+              />
+            </View>
+            <Button disabled={!isValid} text="Continue" onPress={handleSubmit(onSubmit)} />
+          </View>
+        </ScrollView>
+      </ScreenView>
+    </>
   );
 };
 
diff --git a/apps/expo/src/components/atoms/Button.tsx b/apps/expo/src/components/atoms/Button.tsx
index 14ce517..3470095 100644
--- a/apps/expo/src/components/atoms/Button.tsx
+++ b/apps/expo/src/components/atoms/Button.tsx
@@ -1,4 +1,5 @@
 import { ActivityIndicator, TouchableOpacity, type TouchableOpacityProps } from 'react-native';
+import { cn } from '@/utils/cn';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { Text } from './Text';
@@ -24,7 +25,7 @@ export const Button = ({ variant, text, isLoading, className, ...props }: Button
   return (
     <TouchableOpacity
       {...props}
-      className={buttonVariants({ variant, className })}
+      className={cn(buttonVariants({ variant, className }), props.disabled && 'bg-coolGray-400/50')}
       disabled={isLoading ?? props.disabled}
     >
       <Text className="text-coolGray-50 text-center" weight="bold">
diff --git a/apps/expo/src/components/atoms/TextInput.tsx b/apps/expo/src/components/atoms/TextInput.tsx
index ebc54a1..22ef0ab 100644
--- a/apps/expo/src/components/atoms/TextInput.tsx
+++ b/apps/expo/src/components/atoms/TextInput.tsx
@@ -3,8 +3,18 @@ import { cn } from '@/utils/cn';
 
 export interface TextInputProps extends RNTextInputProps {
   withClear?: boolean;
+  hasError?: boolean;
 }
 
-export const TextInput = ({ className, ...props }: TextInputProps) => {
-  return <RNTextInput className={cn('bg-coolGray-100 rounded-md p-6', className)} {...props} />;
+export const TextInput = ({ className, hasError, ...props }: TextInputProps) => {
+  return (
+    <RNTextInput
+      className={cn(
+        'text-coolGray-800 bg-coolGray-100 placeholder-coolGray-300 rounded-md p-6',
+        className,
+        hasError && 'border border-red-500',
+      )}
+      {...props}
+    />
+  );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5dce75..72bf020 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,12 @@ importers:
       '@expo/vector-icons':
         specifier: ^13.0.0
         version: 13.0.0
+      '@hookform/resolvers':
+        specifier: ^3.3.2
+        version: 3.3.2(react-hook-form@7.49.0)
+      '@react-native-community/datetimepicker':
+        specifier: 7.2.0
+        version: 7.2.0
       '@tanstack/react-query':
         specifier: ^5.8.7
         version: 5.8.7(react-dom@18.2.0)(react-native@0.72.7)(react@18.2.0)
@@ -104,12 +110,21 @@ importers:
       react-dom:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.49.0
+        version: 7.49.0(react@18.2.0)
       react-native:
         specifier: 0.72.7
         version: 0.72.7(@babel/core@7.23.2)(@babel/preset-env@7.23.2)(react@18.2.0)
+      react-native-date-picker:
+        specifier: ^4.3.4
+        version: 4.3.4(react-native@0.72.7)(react@18.2.0)
       react-native-gesture-handler:
         specifier: ~2.12.0
         version: 2.12.1(react-native@0.72.7)(react@18.2.0)
+      react-native-modal-datetime-picker:
+        specifier: ^17.1.0
+        version: 17.1.0(@react-native-community/datetimepicker@7.2.0)(react-native@0.72.7)
       react-native-reanimated:
         specifier: ~3.3.0
         version: 3.3.0(@babel/core@7.23.2)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.22.5)(@babel/plugin-transform-shorthand-properties@7.22.5)(@babel/plugin-transform-template-literals@7.22.5)(react-native@0.72.7)(react@18.2.0)
@@ -131,6 +146,9 @@ importers:
       ts-pattern:
         specifier: ^5.0.5
         version: 5.0.5
+      zod:
+        specifier: ^3.22.2
+        version: 3.22.2
     devDependencies:
       '@babel/core':
         specifier: ^7.23.2
@@ -2473,6 +2491,14 @@ packages:
       '@hapi/hoek': 9.3.0
     dev: false
 
+  /@hookform/resolvers@3.3.2(react-hook-form@7.49.0):
+    resolution: {integrity: sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.49.0(react@18.2.0)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -3102,6 +3128,12 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@react-native-community/datetimepicker@7.2.0:
+    resolution: {integrity: sha512-dO1sQy83M/EvnHE2egto05iwXZX7EYn5f/VDMp6afZFRFXRiRo7CzB3VFg4B55gJRJMNBv06NYMLPM3SlpnEGQ==}
+    dependencies:
+      invariant: 2.2.4
+    dev: false
+
   /@react-native/assets-registry@0.72.0:
     resolution: {integrity: sha512-Im93xRJuHHxb1wniGhBMsxLwcfzdYreSZVQGDoMJgkd6+Iky61LInGEHnQCTN0fKNYF1Dvcofb4uMmE1RQHXHQ==}
     dev: false
@@ -8262,6 +8294,7 @@ packages:
 
   /loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
     dependencies:
       js-tokens: 4.0.0
     dev: false
@@ -9832,6 +9865,15 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
+  /react-hook-form@7.49.0(react@18.2.0):
+    resolution: {integrity: sha512-gf4qyY4WiqK2hP/E45UUT6wt3Khl49pleEVcIzxhLBrD6m+GMWtLRk0vMrRv45D1ZH8PnpXFwRPv0Pewske2jw==}
+    engines: {node: '>=18', pnpm: '8'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -9874,6 +9916,16 @@ packages:
       - supports-color
     dev: false
 
+  /react-native-date-picker@4.3.4(react-native@0.72.7)(react@18.2.0):
+    resolution: {integrity: sha512-m02Q49mLn3p11CPvXkOBeUDTLrv1Khubd5Tyrs4pUXYr2dXcPDpGWVw5X0zNYrWWvpDuHKKv8cwBwYR3xNqi3Q==}
+    peerDependencies:
+      react: '>= 17.0.1'
+      react-native: '>= 0.64.3'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.72.7(@babel/core@7.23.2)(@babel/preset-env@7.23.2)(react@18.2.0)
+    dev: false
+
   /react-native-gesture-handler@2.12.1(react-native@0.72.7)(react@18.2.0):
     resolution: {integrity: sha512-deqh36bw82CFUV9EC4tTo2PP1i9HfCOORGS3Zmv71UYhEZEHkzZv18IZNPB+2Awzj45vLIidZxGYGFxHlDSQ5A==}
     peerDependencies:
@@ -9889,6 +9941,17 @@ packages:
       react-native: 0.72.7(@babel/core@7.23.2)(@babel/preset-env@7.23.2)(react@18.2.0)
     dev: false
 
+  /react-native-modal-datetime-picker@17.1.0(@react-native-community/datetimepicker@7.2.0)(react-native@0.72.7):
+    resolution: {integrity: sha512-jfTwfaCLtBffYbQ+pOGFLM+J5HmUh3vb9rT0JrrQPjxzecdc8pNYreB1c96+mVuq8bDCvaCdIeuEsslTqLJL0Q==}
+    peerDependencies:
+      '@react-native-community/datetimepicker': '>=6.7.0'
+      react-native: '>=0.65.0'
+    dependencies:
+      '@react-native-community/datetimepicker': 7.2.0
+      prop-types: 15.8.1
+      react-native: 0.72.7(@babel/core@7.23.2)(@babel/preset-env@7.23.2)(react@18.2.0)
+    dev: false
+
   /react-native-reanimated@3.3.0(@babel/core@7.23.2)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.22.5)(@babel/plugin-transform-shorthand-properties@7.22.5)(@babel/plugin-transform-template-literals@7.22.5)(react-native@0.72.7)(react@18.2.0):
     resolution: {integrity: sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==}
     peerDependencies: