diff --git a/mobile/app/(auth)/login.tsx b/mobile/app/(auth)/login.tsx
index a47c0dd..1f6159a 100644
--- a/mobile/app/(auth)/login.tsx
+++ b/mobile/app/(auth)/login.tsx
@@ -1,21 +1,85 @@
-import { Link } from "expo-router"
-import { Text, View } from "react-native"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Link, useRouter } from "expo-router"
+import { Controller, useForm } from "react-hook-form"
+import { View } from "react-native"
+import { Button, Input, Typography } from "../../src/components"
+import { useAuthStore } from "../../src/store/useAuthStore"
+import { colors, spacing } from "../../src/theme/tokens"
+import { type LoginFormValues, loginSchema } from "../../src/validation/auth"
 
 export default function LoginScreen() {
+  const router = useRouter()
+  const setToken = useAuthStore((state) => state.setToken)
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    mode: "onBlur",
+  })
+
+  const onSubmit = async ({ email }: LoginFormValues) => {
+    const token = `session_${email.toLowerCase()}`
+    setToken(token)
+    router.replace("/(tabs)/discover")
+  }
+
   return (
     <View
       style={{
         flex: 1,
-        alignItems: "center",
         justifyContent: "center",
-        backgroundColor: "#FFFFFF",
-        gap: 12,
-        padding: 24,
+        backgroundColor: colors.background,
+        gap: spacing.md,
+        padding: spacing.lg,
       }}
     >
-      <Text style={{ fontSize: 28, fontWeight: "700" }}>Welcome Back</Text>
-      <Text>Phase 1 auth UI scaffold.</Text>
-      <Link href="/(tabs)/discover">Mock Sign In</Link>
+      <Typography variant="h1">Welcome Back</Typography>
+      <Typography variant="body" color={colors.muted}>
+        Sign in to continue matching with dishes around you.
+      </Typography>
+      <Controller
+        control={control}
+        name="email"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Email Address"
+            placeholder="hello@discoverly.app"
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+            textContentType="emailAddress"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.email?.message}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="password"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Password"
+            placeholder="Enter your password"
+            secureTextEntry
+            autoCapitalize="none"
+            autoComplete="password"
+            textContentType="password"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.password?.message}
+          />
+        )}
+      />
+      <Button label="Sign In" loading={isSubmitting} onPress={handleSubmit(onSubmit)} />
       <Link href="/(auth)/register">Go To Register</Link>
     </View>
   )
diff --git a/mobile/app/(auth)/register.tsx b/mobile/app/(auth)/register.tsx
index 62a8764..bd5f5f0 100644
--- a/mobile/app/(auth)/register.tsx
+++ b/mobile/app/(auth)/register.tsx
@@ -1,21 +1,120 @@
-import { Link } from "expo-router"
-import { Text, View } from "react-native"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Link, useRouter } from "expo-router"
+import { Controller, useForm } from "react-hook-form"
+import { ScrollView, View } from "react-native"
+import { Button, Input, Typography } from "../../src/components"
+import { useAuthStore } from "../../src/store/useAuthStore"
+import { colors, spacing } from "../../src/theme/tokens"
+import { type RegisterFormValues, registerSchema } from "../../src/validation/auth"
 
 export default function RegisterScreen() {
+  const router = useRouter()
+  const setToken = useAuthStore((state) => state.setToken)
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<RegisterFormValues>({
+    resolver: zodResolver(registerSchema),
+    defaultValues: {
+      fullName: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+    mode: "onBlur",
+  })
+
+  const onSubmit = async ({ email }: RegisterFormValues) => {
+    const token = `session_${email.toLowerCase()}`
+    setToken(token)
+    router.replace("/(tabs)/discover")
+  }
+
   return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: "center",
+    <ScrollView
+      contentContainerStyle={{
+        flexGrow: 1,
         justifyContent: "center",
-        backgroundColor: "#FFFFFF",
-        gap: 12,
-        padding: 24,
+        backgroundColor: colors.background,
+        gap: spacing.md,
+        padding: spacing.lg,
       }}
+      keyboardShouldPersistTaps="handled"
     >
-      <Text style={{ fontSize: 28, fontWeight: "700" }}>Create Account</Text>
-      <Text>Phase 1 registration UI scaffold.</Text>
+      <Typography variant="h1">Create Account</Typography>
+      <Typography variant="body" color={colors.muted}>
+        Create your account to start discovering meals instantly.
+      </Typography>
+      <Controller
+        control={control}
+        name="fullName"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Full Name"
+            placeholder="Alex Carter"
+            autoCapitalize="words"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.fullName?.message}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="email"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Email Address"
+            placeholder="hello@discoverly.app"
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+            textContentType="emailAddress"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.email?.message}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="password"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Password"
+            placeholder="Minimum 8 characters"
+            secureTextEntry
+            autoCapitalize="none"
+            autoComplete="password-new"
+            textContentType="newPassword"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.password?.message}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="confirmPassword"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <Input
+            label="Confirm Password"
+            placeholder="Re-enter password"
+            secureTextEntry
+            autoCapitalize="none"
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            error={errors.confirmPassword?.message}
+          />
+        )}
+      />
+      <Button label="Sign Up" loading={isSubmitting} onPress={handleSubmit(onSubmit)} />
       <Link href="/(auth)/login">Back To Login</Link>
-    </View>
+    </ScrollView>
   )
 }
diff --git a/mobile/package.json b/mobile/package.json
index 4f012af..bf43c44 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -13,15 +13,18 @@
     "export:check": "expo export --platform web --output-dir dist-export --clear"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "expo": "^51.0.0",
-    "expo-image": "^1.12.15",
     "expo-haptics": "^13.0.1",
+    "expo-image": "^1.12.15",
     "expo-router": "^3.5.18",
     "expo-secure-store": "^13.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.71.2",
     "react-native": "0.74.5",
     "react-native-web": "~0.19.10",
+    "zod": "^4.3.6",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
diff --git a/mobile/src/components/Button.tsx b/mobile/src/components/Button.tsx
new file mode 100644
index 0000000..5c6f1dc
--- /dev/null
+++ b/mobile/src/components/Button.tsx
@@ -0,0 +1,98 @@
+import type { ReactNode } from "react"
+import { ActivityIndicator, Pressable, type ViewStyle } from "react-native"
+import { colors, radius, spacing } from "../theme/tokens"
+import { Typography } from "./Typography"
+
+type ButtonVariant = "primary" | "secondary" | "outlined"
+
+type ButtonProps = {
+  label: string
+  onPress?: () => void
+  variant?: ButtonVariant
+  loading?: boolean
+  disabled?: boolean
+  leftIcon?: ReactNode
+  style?: ViewStyle
+}
+
+function getContainerStyle(variant: ButtonVariant, disabled: boolean): ViewStyle {
+  if (variant === "outlined") {
+    return {
+      backgroundColor: colors.surface,
+      borderColor: disabled ? colors.disabled : colors.crypto,
+      borderWidth: 1.5,
+    }
+  }
+
+  if (variant === "secondary") {
+    return {
+      backgroundColor: disabled ? colors.disabled : colors.crypto,
+    }
+  }
+
+  return {
+    backgroundColor: disabled ? colors.disabled : colors.primary,
+  }
+}
+
+function getLabelColor(variant: ButtonVariant, disabled: boolean): string {
+  if (disabled) {
+    return variant === "outlined" ? colors.muted : colors.surface
+  }
+
+  if (variant === "outlined") {
+    return colors.crypto
+  }
+
+  if (variant === "secondary") {
+    return colors.onCrypto
+  }
+
+  return colors.onPrimary
+}
+
+export function Button({
+  label,
+  onPress,
+  variant = "primary",
+  loading = false,
+  disabled = false,
+  leftIcon,
+  style,
+}: ButtonProps) {
+  const isDisabled = disabled || loading
+  const labelColor = getLabelColor(variant, isDisabled)
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        {
+          minHeight: 52,
+          borderRadius: radius.md,
+          paddingHorizontal: spacing.lg,
+          paddingVertical: spacing.md,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          gap: spacing.sm,
+          opacity: pressed ? 0.9 : 1,
+        },
+        getContainerStyle(variant, isDisabled),
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={labelColor} />
+      ) : (
+        <>
+          {leftIcon}
+          <Typography variant="body" color={labelColor} style={{ fontWeight: "700" }}>
+            {label}
+          </Typography>
+        </>
+      )}
+    </Pressable>
+  )
+}
diff --git a/mobile/src/components/Card.tsx b/mobile/src/components/Card.tsx
new file mode 100644
index 0000000..c6230a7
--- /dev/null
+++ b/mobile/src/components/Card.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from "react"
+import { View, type ViewStyle } from "react-native"
+import { colors, radius, shadows, spacing } from "../theme/tokens"
+
+type CardProps = {
+  children: ReactNode
+  style?: ViewStyle
+}
+
+export function Card({ children, style }: CardProps) {
+  return (
+    <View
+      style={[
+        {
+          borderRadius: radius.md,
+          backgroundColor: colors.surface,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: spacing.md,
+          ...shadows.soft,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  )
+}
diff --git a/mobile/src/components/Input.tsx b/mobile/src/components/Input.tsx
new file mode 100644
index 0000000..079875d
--- /dev/null
+++ b/mobile/src/components/Input.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react"
+import { Pressable, TextInput, View, type TextInputProps, type ViewStyle } from "react-native"
+import { colors, radius, spacing } from "../theme/tokens"
+import { Typography } from "./Typography"
+
+type InputProps = TextInputProps & {
+  label?: string
+  error?: string
+  forceFocused?: boolean
+  containerStyle?: ViewStyle
+  rightLabel?: string
+  onRightPress?: () => void
+}
+
+export function Input({
+  label,
+  error,
+  forceFocused = false,
+  containerStyle,
+  rightLabel,
+  onRightPress,
+  onFocus,
+  onBlur,
+  ...props
+}: InputProps) {
+  const [isFocused, setIsFocused] = useState(false)
+  const focused = forceFocused || isFocused
+
+  return (
+    <View style={[{ width: "100%", gap: spacing.xs }, containerStyle]}>
+      {label ? <Typography variant="caption">{label}</Typography> : null}
+      <View
+        style={{
+          minHeight: 52,
+          borderRadius: radius.md,
+          borderWidth: 1.5,
+          borderColor: error ? colors.error : focused ? colors.crypto : colors.border,
+          backgroundColor: colors.surface,
+          paddingHorizontal: spacing.md,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: spacing.sm,
+        }}
+      >
+        <TextInput
+          placeholderTextColor={colors.muted}
+          onFocus={(event) => {
+            setIsFocused(true)
+            onFocus?.(event)
+          }}
+          onBlur={(event) => {
+            setIsFocused(false)
+            onBlur?.(event)
+          }}
+          style={{
+            color: colors.text,
+            flex: 1,
+            paddingVertical: spacing.sm,
+          }}
+          {...props}
+        />
+        {rightLabel ? (
+          <Pressable onPress={onRightPress} hitSlop={8}>
+            <Typography variant="caption" color={colors.crypto}>
+              {rightLabel}
+            </Typography>
+          </Pressable>
+        ) : null}
+      </View>
+      {error ? (
+        <Typography variant="caption" color={colors.error}>
+          {error}
+        </Typography>
+      ) : null}
+    </View>
+  )
+}
diff --git a/mobile/src/components/Typography.tsx b/mobile/src/components/Typography.tsx
new file mode 100644
index 0000000..55dd035
--- /dev/null
+++ b/mobile/src/components/Typography.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react"
+import { Text, type TextStyle } from "react-native"
+import { colors, typography } from "../theme/tokens"
+
+type Variant = keyof typeof typography
+
+type TypographyProps = {
+  children: ReactNode
+  variant?: Variant
+  color?: string
+  style?: TextStyle
+}
+
+export function Typography({ children, variant = "body", color = colors.text, style }: TypographyProps) {
+  return <Text style={[typography[variant], { color }, style]}>{children}</Text>
+}
diff --git a/mobile/src/components/index.ts b/mobile/src/components/index.ts
new file mode 100644
index 0000000..eb577a9
--- /dev/null
+++ b/mobile/src/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./Button"
+export * from "./Card"
+export * from "./Input"
+export * from "./Typography"
diff --git a/mobile/src/theme/tokens.ts b/mobile/src/theme/tokens.ts
index 259cae3..4d1df4d 100644
--- a/mobile/src/theme/tokens.ts
+++ b/mobile/src/theme/tokens.ts
@@ -5,10 +5,15 @@ export const colors = {
   surface: "#FFFFFF",
   text: "#1D1D1F",
   muted: "#6B7280",
+  border: "#E5E7EB",
   error: "#D92D20",
+  disabled: "#C9CDD4",
+  onPrimary: "#FFFFFF",
+  onCrypto: "#FFFFFF",
 }
 
 export const radius = {
+  xs: 10,
   sm: 12,
   md: 16,
   lg: 24,
@@ -21,3 +26,41 @@ export const spacing = {
   lg: 24,
   xl: 32,
 }
+
+export const typography = {
+  h1: {
+    fontSize: 34,
+    lineHeight: 40,
+    fontWeight: "700" as const,
+  },
+  h2: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: "700" as const,
+  },
+  h3: {
+    fontSize: 22,
+    lineHeight: 28,
+    fontWeight: "600" as const,
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: "400" as const,
+  },
+  caption: {
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: "500" as const,
+  },
+}
+
+export const shadows = {
+  soft: {
+    shadowColor: "#101828",
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 4,
+  },
+}
diff --git a/mobile/src/validation/auth.ts b/mobile/src/validation/auth.ts
new file mode 100644
index 0000000..c5dbe4d
--- /dev/null
+++ b/mobile/src/validation/auth.ts
@@ -0,0 +1,22 @@
+import { z } from "zod/v3"
+
+export const loginSchema = z.object({
+  email: z.string().email("Enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+})
+
+export type LoginFormValues = z.infer<typeof loginSchema>
+
+export const registerSchema = z
+  .object({
+    fullName: z.string().min(2, "Full name must be at least 2 characters"),
+    email: z.string().email("Enter a valid email address"),
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string().min(8, "Confirm password must be at least 8 characters"),
+  })
+  .refine((value) => value.password === value.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  })
+
+export type RegisterFormValues = z.infer<typeof registerSchema>
diff --git a/package-lock.json b/package-lock.json
index d296145..860092b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
       "name": "@discoverly/mobile",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "expo": "^51.0.0",
         "expo-haptics": "^13.0.1",
         "expo-image": "^1.12.15",
@@ -60,8 +61,10 @@
         "expo-secure-store": "^13.0.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.71.2",
         "react-native": "0.74.5",
         "react-native-web": "~0.19.10",
+        "zod": "^4.3.6",
         "zustand": "^4.5.5"
       },
       "devDependencies": {
@@ -114,6 +117,15 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
       }
     },
+    "mobile/node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@aws-crypto/crc32": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
@@ -4552,6 +4564,18 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -7574,6 +7598,12 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@types/bcryptjs": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
@@ -17117,6 +17147,22 @@
         "react": ">=17.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.71.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
+      "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",