diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index f534b150..937b7fa0 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -1,12 +1,14 @@
+import { Button } from '@/components/ui/button'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { theme } from '@/lib/theme'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { Tabs } from 'expo-router'
+import { Link, Tabs } from 'expo-router'
 import {
+  // BarChartBigIcon,
   CogIcon,
   LandPlotIcon,
-  ScanTextIcon,
+  PlusIcon,
   WalletIcon,
 } from 'lucide-react-native'
 
@@ -47,16 +49,23 @@ export default function TabLayout() {
           headerTitle: t(i18n)`Budgets`,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <LandPlotIcon color={color} />,
+          headerRight: () => (
+            <Link href="/budget/new-budget" asChild>
+              <Button size="icon" variant="ghost" className="mr-4">
+                <PlusIcon className="size-6 text-primary" />
+              </Button>
+            </Link>
+          ),
         }}
       />
-      <Tabs.Screen
-        name="scanner"
+      {/* <Tabs.Screen
+        name="reports"
         options={{
-          headerTitle: t(i18n)`Scanner`,
+          headerTitle: t(i18n)`Reports`,
           tabBarShowLabel: false,
-          tabBarIcon: ({ color }) => <ScanTextIcon color={color} />,
+          tabBarIcon: ({ color }) => <BarChartBigIcon color={color} />,
         }}
-      />
+      /> */}
       <Tabs.Screen
         name="settings"
         options={{
diff --git a/apps/mobile/app/(app)/transaction/[transactionId].tsx b/apps/mobile/app/(app)/transaction/[transactionId].tsx
index ec93aa76..fc3e4c35 100644
--- a/apps/mobile/app/(app)/transaction/[transactionId].tsx
+++ b/apps/mobile/app/(app)/transaction/[transactionId].tsx
@@ -2,12 +2,18 @@ import { TransactionForm } from '@/components/transaction/transaction-form'
 import { deleteTransaction, updateTransaction } from '@/mutations/transaction'
 import { transactionQueries, useTransactionDetail } from '@/queries/transaction'
 import { walletQueries } from '@/queries/wallet'
+import {
+  type TransactionFormValues,
+  zTransactionFormValues,
+} from '@6pm/validation'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import * as Haptics from 'expo-haptics'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { LoaderIcon } from 'lucide-react-native'
+import { useForm } from 'react-hook-form'
 import { Alert, View } from 'react-native'
 
 export default function EditRecordScreen() {
@@ -16,6 +22,20 @@ export default function EditRecordScreen() {
   const { data: transaction } = useTransactionDetail(transactionId!)
   const router = useRouter()
   const queryClient = useQueryClient()
+
+  const transactionForm = useForm<TransactionFormValues>({
+    resolver: zodResolver(zTransactionFormValues),
+    defaultValues: {
+      walletAccountId: transaction?.walletAccountId,
+      currency: transaction?.currency,
+      amount: Math.abs(transaction?.amount ?? 0),
+      date: transaction?.date,
+      note: transaction?.note ?? '',
+      budgetId: transaction?.budgetId ?? undefined,
+      categoryId: transaction?.categoryId ?? undefined,
+    },
+  })
+
   const { mutateAsync } = useMutation({
     mutationFn: updateTransaction,
     onError(error) {
@@ -89,17 +109,9 @@ export default function EditRecordScreen() {
 
   return (
     <TransactionForm
+      form={transactionForm}
       onSubmit={(values) => mutateAsync({ id: transaction.id, data: values })}
       onCancel={router.back}
-      defaultValues={{
-        walletAccountId: transaction.walletAccountId,
-        currency: transaction.currency,
-        amount: Math.abs(transaction.amount),
-        date: transaction.date,
-        note: transaction.note ?? '',
-        budgetId: transaction.budgetId ?? undefined,
-        categoryId: transaction.categoryId ?? undefined,
-      }}
       onDelete={handleDelete}
     />
   )
diff --git a/apps/mobile/app/(app)/transaction/new-record.tsx b/apps/mobile/app/(app)/transaction/new-record.tsx
index ab3e1861..641a13f9 100644
--- a/apps/mobile/app/(app)/transaction/new-record.tsx
+++ b/apps/mobile/app/(app)/transaction/new-record.tsx
@@ -1,24 +1,50 @@
 import { toast } from '@/components/common/toast'
+import { Scanner } from '@/components/transaction/scanner'
 import { TransactionForm } from '@/components/transaction/transaction-form'
 import { createTransaction } from '@/mutations/transaction'
 import { transactionQueries } from '@/queries/transaction'
 import { useWallets, walletQueries } from '@/queries/wallet'
-import { zUpdateTransaction } from '@6pm/validation'
+import {
+  type TransactionFormValues,
+  zTransactionFormValues,
+  zUpdateTransaction,
+} from '@6pm/validation'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import * as Haptics from 'expo-haptics'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { LoaderIcon } from 'lucide-react-native'
+import { useRef } from 'react'
+import { useForm } from 'react-hook-form'
 import { Alert, View } from 'react-native'
+import PagerView from 'react-native-pager-view'
 
 export default function NewRecordScreen() {
-  const router = useRouter()
-  const params = useLocalSearchParams()
-  const defaultValues = zUpdateTransaction.parse(params)
-  const { data: walletAccounts } = useWallets()
   const { i18n } = useLingui()
+  const ref = useRef<PagerView>(null)
   const queryClient = useQueryClient()
+  const router = useRouter()
+  const { data: walletAccounts } = useWallets()
+  const defaultWallet = walletAccounts?.[0]
+
+  const params = useLocalSearchParams()
+  const parsedParams = zUpdateTransaction.parse(params)
+  const defaultValues = {
+    date: new Date(),
+    amount: 0,
+    currency: 'USD',
+    note: '',
+    walletAccountId: defaultWallet?.id,
+    ...parsedParams,
+  }
+
+  const transactionForm = useForm<TransactionFormValues>({
+    resolver: zodResolver(zTransactionFormValues),
+    defaultValues,
+  })
+
   const { mutateAsync } = useMutation({
     mutationFn: createTransaction,
     onError(error) {
@@ -42,8 +68,6 @@ export default function NewRecordScreen() {
     },
   })
 
-  const defaultWallet = walletAccounts?.[0]
-
   if (!defaultWallet) {
     return (
       <View className="flex-1 items-center bg-muted justify-center">
@@ -53,14 +77,39 @@ export default function NewRecordScreen() {
   }
 
   return (
-    <TransactionForm
-      onSubmit={mutateAsync}
-      onCancel={router.back}
-      defaultValues={{
-        walletAccountId: defaultWallet.id,
-        currency: defaultWallet.preferredCurrency ?? 'USD',
-        ...defaultValues,
-      }}
-    />
+    <View className="flex-1 bg-card">
+      <PagerView
+        ref={ref}
+        overdrag={false}
+        orientation="vertical"
+        initialPage={0}
+        style={{ flex: 1 }}
+      >
+        <TransactionForm
+          form={transactionForm}
+          onSubmit={mutateAsync}
+          onCancel={router.back}
+          onOpenScanner={() => {
+            ref.current?.setPage(1)
+          }}
+        />
+        <Scanner
+          onScanStart={() => ref.current?.setScrollEnabled(false)}
+          onScanResult={(result) => {
+            transactionForm.reset(
+              {
+                ...defaultValues,
+                ...result,
+              },
+              {
+                keepDefaultValues: false,
+              },
+            )
+            ref.current?.setScrollEnabled(true)
+            ref.current?.setPage(0)
+          }}
+        />
+      </PagerView>
+    </View>
   )
 }
diff --git a/apps/mobile/app/(app)/(tabs)/scanner.tsx b/apps/mobile/components/transaction/scanner.tsx
similarity index 88%
rename from apps/mobile/app/(app)/(tabs)/scanner.tsx
rename to apps/mobile/components/transaction/scanner.tsx
index 1a150481..7a4a66b3 100644
--- a/apps/mobile/app/(app)/(tabs)/scanner.tsx
+++ b/apps/mobile/components/transaction/scanner.tsx
@@ -4,6 +4,7 @@ import { ScanningOverlay } from '@/components/scanner/scanning-overlay'
 import { Button } from '@/components/ui/button'
 import { Text } from '@/components/ui/text'
 import { getAITransactionData } from '@/mutations/transaction'
+import type { UpdateTransaction } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useMutation } from '@tanstack/react-query'
@@ -11,7 +12,6 @@ import { type CameraType, CameraView, useCameraPermissions } from 'expo-camera'
 import * as Haptics from 'expo-haptics'
 import { SaveFormat, manipulateAsync } from 'expo-image-manipulator'
 import * as ImagePicker from 'expo-image-picker'
-import { useRouter } from 'expo-router'
 import {
   CameraIcon,
   ImagesIcon,
@@ -22,6 +22,7 @@ import { cssInterop } from 'nativewind'
 import { useRef, useState } from 'react'
 import { Alert } from 'react-native'
 import { ImageBackground, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 cssInterop(CameraView, {
   className: {
@@ -29,16 +30,24 @@ cssInterop(CameraView, {
   },
 })
 
-export default function ScannerScreen() {
+type ScannerProps = {
+  onScanStart?: () => void
+  onScanResult: (result: UpdateTransaction) => void
+}
+
+export function Scanner({ onScanStart, onScanResult }: ScannerProps) {
   const camera = useRef<CameraView>(null)
-  const router = useRouter()
   const [facing, setFacing] = useState<CameraType>('back')
   const [permission, requestPermission] = useCameraPermissions()
   const [imageUri, setImageUri] = useState<string | null>(null)
   const { i18n } = useLingui()
+  const { bottom } = useSafeAreaInsets()
 
   const { mutateAsync } = useMutation({
     mutationFn: getAITransactionData,
+    onMutate() {
+      onScanStart?.()
+    },
     onError(error) {
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
       Alert.alert(error.message ?? t(i18n)`Cannot extract transaction data`)
@@ -46,11 +55,7 @@ export default function ScannerScreen() {
     },
     onSuccess(result) {
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
-      router.push({
-        pathname: '/transaction/new-record',
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        params: result as any,
-      })
+      onScanResult(result)
       setImageUri(null)
     },
   })
@@ -131,6 +136,7 @@ export default function ScannerScreen() {
         <ImageBackground
           source={{ uri: imageUri }}
           className="flex-1 items-center"
+          style={{ paddingBottom: bottom }}
         >
           <ScanningOverlay />
           {/* <ScanningIndicator /> */}
@@ -140,7 +146,7 @@ export default function ScannerScreen() {
           <Button
             variant="secondary"
             size="icon"
-            className="w-auto !opacity-100 h-auto p-1 absolute bottom-6 rounded-full bg-primary-foreground"
+            className="w-auto !opacity-100 h-auto p-1 absolute bottom-8 rounded-full bg-primary-foreground"
             disabled
           >
             <AnimatedRing />
@@ -152,11 +158,16 @@ export default function ScannerScreen() {
 
   return (
     <View className="flex-1 bg-card">
-      <CameraView ref={camera} className="flex-1 items-center" facing={facing}>
+      <CameraView
+        ref={camera}
+        className="flex-1 items-center"
+        facing={facing}
+        style={{ paddingBottom: bottom }}
+      >
         <View className="top-6 bg-background/50 p-2 px-4 rounded-md">
           <Text>{t(i18n)`Take a picture of your transaction`}</Text>
         </View>
-        <View className="absolute bottom-6 left-6 right-6 flex-row items-center justify-between gap-4">
+        <View className="absolute bottom-8 left-6 right-6 flex-row items-center justify-between gap-4">
           <Button
             variant="secondary"
             size="icon"
diff --git a/apps/mobile/components/transaction/transaction-form.tsx b/apps/mobile/components/transaction/transaction-form.tsx
index d2816b1c..940c9e28 100644
--- a/apps/mobile/components/transaction/transaction-form.tsx
+++ b/apps/mobile/components/transaction/transaction-form.tsx
@@ -1,13 +1,14 @@
-import {
-  type TransactionFormValues,
-  zTransactionFormValues,
-} from '@6pm/validation'
-import { zodResolver } from '@hookform/resolvers/zod'
+import type { TransactionFormValues } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import * as Haptics from 'expo-haptics'
-import { LandPlot, Trash2Icon, XIcon } from 'lucide-react-native'
-import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { LandPlot, ScanTextIcon, Trash2Icon, XIcon } from 'lucide-react-native'
+import {
+  Controller,
+  FormProvider,
+  type UseFormReturn,
+  useWatch,
+} from 'react-hook-form'
 import { ScrollView, View } from 'react-native'
 import Animated, {
   useAnimatedKeyboard,
@@ -25,16 +26,51 @@ import { SelectDateField } from './select-date-field'
 
 type TransactionFormProps = {
   onSubmit: (data: TransactionFormValues) => void
-  defaultValues?: Partial<TransactionFormValues>
   onCancel?: () => void
   onDelete?: () => void
+  onOpenScanner?: () => void
+  form: UseFormReturn<TransactionFormValues>
+}
+
+function TransactionAmount() {
+  const [amount, currency] = useWatch({ name: ['amount', 'currency'] })
+  return (
+    <TextTicker
+      value={amount}
+      className="font-semibold text-6xl text-foreground leading-tight text-center"
+      suffix={currency}
+      suffixClassName="font-semibold ml-2 text-muted-foreground overflow-visible"
+    />
+  )
+}
+
+function FormSubmitButton({
+  form,
+  onSubmit,
+}: {
+  form: UseFormReturn<TransactionFormValues>
+  onSubmit: (data: TransactionFormValues) => void
+}) {
+  const { i18n } = useLingui()
+  const amount = useWatch({ name: 'amount' })
+
+  return (
+    <SubmitButton
+      onPress={form.handleSubmit(onSubmit)}
+      onPressIn={Haptics.selectionAsync}
+      disabled={form.formState.isLoading || !amount}
+    >
+      <Text>{t(i18n)`Save`}</Text>
+    </SubmitButton>
+  )
 }
 
 export const TransactionForm = ({
+  form,
   onSubmit,
-  defaultValues,
   onCancel,
   onDelete,
+  onOpenScanner,
 }: TransactionFormProps) => {
   const { i18n } = useLingui()
 
@@ -45,48 +81,34 @@ export const TransactionForm = ({
     }
   })
 
-  const transactionForm = useForm<TransactionFormValues>({
-    resolver: zodResolver(zTransactionFormValues),
-    defaultValues: {
-      date: new Date(),
-      amount: 0,
-      currency: 'USD',
-      note: '',
-      ...defaultValues,
-    },
-  })
-
-  const amount = transactionForm.watch('amount')
-  const currency = transactionForm.watch('currency')
-
   return (
-    <FormProvider {...transactionForm}>
+    <FormProvider {...form}>
       <ScrollView
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
         automaticallyAdjustKeyboardInsets
         contentContainerClassName="flex-1 justify-between bg-muted"
       >
-        <View className="flex-row justify-between items-center p-6 pb-0">
+        <View className="flex-row justify-between items-center p-4 pb-0">
+          <Button size="icon" variant="secondary" onPress={onCancel}>
+            <XIcon className="size-6 text-primary" />
+          </Button>
           <SelectDateField />
           <View className="flex-row items-center gap-4">
-            {onDelete && (
+            {onDelete ? (
               <Button size="icon" variant="secondary" onPress={onDelete}>
                 <Trash2Icon className="size-6 text-primary" />
               </Button>
+            ) : (
+              <Button size="icon" variant="ghost" onPress={onOpenScanner}>
+                <ScanTextIcon className="size-6 text-primary" />
+              </Button>
             )}
-            <Button size="icon" variant="secondary" onPress={onCancel}>
-              <XIcon className="size-6 text-primary" />
-            </Button>
           </View>
         </View>
         <View className="flex-1 items-center justify-center pb-12">
           <View className="w-full h-24 justify-end mb-4">
-            <TextTicker
-              value={amount}
-              className="font-semibold text-6xl text-foreground leading-tight text-center"
-              suffix={currency}
-              suffixClassName="font-semibold ml-2 text-muted-foreground overflow-visible"
-            />
+            <TransactionAmount />
           </View>
           <Button variant="outline" size="sm" className="rounded-full">
             <LandPlot className="w-5 h-5 text-primary" />
@@ -110,25 +132,16 @@ export const TransactionForm = ({
             <View className="flex-row items-center gap-2">
               <SelectAccountField
                 onSelect={(walletAccount) => {
-                  transactionForm.setValue(
-                    'currency',
-                    walletAccount.preferredCurrency,
-                  )
+                  form.setValue('currency', walletAccount.preferredCurrency)
                 }}
               />
               <SelectCategoryField />
             </View>
-            <SubmitButton
-              onPress={transactionForm.handleSubmit(onSubmit)}
-              onPressIn={Haptics.selectionAsync}
-              disabled={transactionForm.formState.isLoading || !amount}
-            >
-              <Text>{t(i18n)`Save`}</Text>
-            </SubmitButton>
+            <FormSubmitButton form={form} onSubmit={onSubmit} />
           </View>
           <Controller
             name="amount"
-            control={transactionForm.control}
+            control={form.control}
             render={({ field: { onChange, value } }) => (
               <NumericPad value={value} onValueChange={onChange} />
             )}
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index be329431..a27667b6 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -72,6 +72,7 @@
     "react-hook-form": "^7.51.5",
     "react-native": "0.74.2",
     "react-native-gesture-handler": "~2.16.1",
+    "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4a4af09..861dde9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -264,6 +264,9 @@ importers:
       react-native-gesture-handler:
         specifier: ~2.16.1
         version: 2.16.2(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)
+      react-native-pager-view:
+        specifier: 6.3.0
+        version: 6.3.0(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)
       react-native-reanimated:
         specifier: ~3.10.1
         version: 3.10.1(@babel/core@7.24.7)(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)
@@ -5448,6 +5451,12 @@ packages:
     peerDependencies:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
 
+  react-native-pager-view@6.3.0:
+    resolution: {integrity: sha512-ufJOoVa9pFL1J/yb4hpsCqp8n1qTlcF5VvwqvCacHX//D7hSeRscsiIXg1u1pXNWwllvACb+mqxec/3Uj2mxrA==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-reanimated@3.10.1:
     resolution: {integrity: sha512-sfxg6vYphrDc/g4jf/7iJ7NRi+26z2+BszPmvmk0Vnrz6FL7HYljJqTf531F1x6tFmsf+FEAmuCtTUIXFLVo9w==}
     peerDependencies:
@@ -12992,6 +13001,11 @@ snapshots:
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
+  react-native-pager-view@6.3.0(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1)
+
   react-native-reanimated@3.10.1(@babel/core@7.24.7)(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/core': 7.24.7