diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx
index 69efc0c4..06b1ca65 100644
--- a/packages/app/src/components/DonateComponent.tsx
+++ b/packages/app/src/components/DonateComponent.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Image, View } from 'react-native';
-import { Box, HStack, Link, Text, VStack } from 'native-base';
+import { Box, HStack, Link, Text, useBreakpointValue, VStack } from 'native-base';
 import { useAccount, useNetwork } from 'wagmi';
 import { useParams } from 'react-router-native';
 import Decimal from 'decimal.js';
@@ -137,7 +137,7 @@ const WarningBox = ({ content, explanationProps = {} }: any) => {
 };
 
 const DonateComponent = ({ collective }: DonateComponentProps) => {
-  const { isDesktopView } = useScreenSize();
+  const { isDesktopView, isMobileView } = useScreenSize();
   const { id: collectiveId = '0x' } = useParams();
 
   const { address } = useAccount();
@@ -162,12 +162,44 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
   }
 
   const [frequency, setFrequency] = useState<Frequency>(Frequency.OneTime);
-  const [streamRate, setRate] = useState<number | undefined>(undefined);
+  const [streamRate, setRate] = useState<string | number>(1);
   const [duration, setDuration] = useState(12);
   const [decimalDonationAmount, setDecimalDonationAmount] = useState<any | number>(0);
 
   const [inputAmount, setInputAmount] = useState<string | undefined>(undefined);
 
+  const container = useBreakpointValue({
+    base: {
+      width: '343',
+      paddingLeft: 2,
+      paddingRight: 2,
+    },
+    sm: {
+      minWidth: '100%',
+      paddingLeft: 2,
+      paddingRight: 2,
+    },
+    md: {
+      maxWidth: 800,
+      width: '100%',
+      paddingLeft: 4,
+      paddingRight: 4,
+    },
+    xl: {
+      maxWidth: '100%',
+    },
+  });
+
+  const direction = useBreakpointValue({
+    base: {
+      flexDirection: 'column',
+    },
+    lg: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+  });
+
   const tokenList = useTokenList();
   const gdEnvSymbol =
     Object.keys(tokenList).find((key) => {
@@ -337,34 +369,53 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
     onReset();
   };
 
-  const estimateDuration = useCallback((estDuration: number) => {
-    const estimatedEndDate = moment().add(estDuration, 'months').format('DD.MM.YY HH:mm');
+  const estimateDuration = useCallback(
+    (v: string, altDuration?: number) => {
+      const calculateEstDuration = (value: number, rate: number) => value / (rate === 0 ? 1 : rate);
+
+      let estDuration = altDuration ?? 0;
+
+      if (frequency === Frequency.Monthly && !altDuration) {
+        if (currency.includes('G$')) {
+          estDuration = parseFloat(donorCurrencyBalance) / parseFloat(v);
+        } else {
+          estDuration = calculateEstDuration(parseFloat(v), parseFloat(streamRate.toString()));
+        }
+      }
+
+      if (!altDuration && !currency.includes('G$')) {
+        const gdValue = parseFloat(v) / tokenPrice;
+        setSwapValue(gdValue);
+      }
+
+      const estimatedEndDate = moment().add(estDuration, 'months').format('DD.MM.YY HH:mm');
 
-    setEstimatedDuration({ duration: estDuration, endDate: estimatedEndDate });
-    setDuration(estDuration);
-  }, []);
+      setEstimatedDuration({ duration: estDuration, endDate: estimatedEndDate });
+      setDuration(Math.max(1, estDuration));
+    },
+    [currency, donorCurrencyBalance, streamRate, frequency, tokenPrice]
+  );
+
+  const onChangeRate = (value: string) => {
+    setRate(value.endsWith('.') ? value : Number(value));
+
+    if (!Number(value)) return;
+    const estDuration = parseFloat(decimalDonationAmount) / Math.max(parseFloat(value), 1);
+    estimateDuration(value, estDuration);
+  };
 
   const onChangeAmount = useCallback(
     (v: string) => {
       setInputAmount(v);
 
       if (![''].includes(v)) setConfirmNoAmount(false);
-      if (v.substring(v.length - 1) === '.' || v === '0') return;
+      if (v.endsWith('.') || ['0', ''].includes(v)) return;
 
       setDecimalDonationAmount(formatDecimalStringInput(v));
 
-      if (frequency === Frequency.Monthly && currency.includes('G$')) {
-        const estDuration = parseFloat(donorCurrencyBalance) / parseFloat(v);
-        estimateDuration(estDuration);
-      } else if (frequency === Frequency.Monthly) {
-        const estDuration = parseFloat(v) / (streamRate as number);
-        estimateDuration(estDuration);
-
-        const gdValue = parseFloat(v) / tokenPrice;
-        setSwapValue(gdValue);
-      }
+      estimateDuration(v);
     },
-    [currency, donorCurrencyBalance, streamRate, estimateDuration, frequency, tokenPrice]
+    [estimateDuration]
   );
 
   const onChangeFrequency = (value: string) => {
@@ -375,13 +426,6 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
     onReset();
   };
 
-  const onChangeRate = (value: string) => {
-    setRate(Number(value));
-
-    const estDuration = parseFloat(decimalDonationAmount) / parseFloat(value);
-    estimateDuration(estDuration);
-  };
-
   const onCloseErrorModal = () => setErrorMessage(undefined);
   const onCloseThankYouModal = () => {
     setThankYouModalVisible(false);
@@ -391,7 +435,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
   const isWarning = isInsufficientBalance || isInsufficientLiquidity || isUnacceptablePriceImpact || confirmNoAmount;
 
   return (
-    <Box height="100vh">
+    <Box height="100vh" paddingBottom={8}>
       {/* todo: find simpler solution to render different modals */}
       <BaseModal
         type="error"
@@ -452,10 +496,10 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
             <Text>by donating any amount you want either one time or streaming at a monthly rate.</Text>
           </VStack>
         </VStack>
-        <VStack space={8} backgroundColor="white" shadow="1" padding={4} borderRadius={16}>
-          <HStack space={8}>
+        <VStack space={8} backgroundColor="white" shadow="1" paddingY={4} borderRadius={16} {...container}>
+          <HStack space={8} {...direction}>
             {/* Donation frequency */}
-            <VStack space={2} w="320" maxW="320">
+            <VStack space={2} width={isDesktopView ? '320' : 'auto'} maxW="320" mb={8}>
               <VStack space={2}>
                 <Text variant="bold" fontSize="lg">
                   Donation Frequency
@@ -478,8 +522,8 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
               )}
             </VStack>
             {/* Amount and token */}
-            <VStack space={2} maxW="320">
-              <VStack space={2}>
+            <VStack space={2} maxW="320" mb={8}>
+              <VStack space={2} zIndex={1}>
                 <Text variant="bold" fontSize="lg">
                   How much?
                 </Text>
@@ -496,7 +540,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
               />
             </VStack>
 
-            <VStack space={2} minW="343">
+            <VStack space={2} {...(isMobileView ? { maxWidth: '343' } : { minWidth: '343', maxWidth: '10%' })}>
               {frequency !== 'One-Time' && !currency.includes('G$') ? (
                 <>
                   <VStack space={2}>
diff --git a/packages/app/src/components/DonateFrequency.tsx b/packages/app/src/components/DonateFrequency.tsx
index 3e0f4654..82a92ce3 100644
--- a/packages/app/src/components/DonateFrequency.tsx
+++ b/packages/app/src/components/DonateFrequency.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Box, HStack, Radio } from 'native-base';
 
+import { useScreenSize } from '../theme/hooks';
+
 interface DropdownProps {
   onSelect: (value: string) => void;
   options?: string[];
@@ -10,9 +12,10 @@ const WhiteDot = () => <Box color="blue" backgroundColor="white" width={3} heigh
 
 const FrequencySelector = ({ onSelect, options = ['One-Time', 'Monthly'] }: DropdownProps) => {
   const [value, setValue] = useState('One-Time');
+  const { isTabletView } = useScreenSize();
 
   return (
-    <HStack justifyContent={'space-between'} width="100%" flexDir="row">
+    <HStack justifyContent={'space-between'} w={isTabletView ? '100%' : '90%'} m="auto">
       <Radio.Group
         name="donationFrequency"
         value={value}
diff --git a/packages/app/src/components/Layout/Layout.tsx b/packages/app/src/components/Layout/Layout.tsx
index 35c466d7..7ce56d1e 100644
--- a/packages/app/src/components/Layout/Layout.tsx
+++ b/packages/app/src/components/Layout/Layout.tsx
@@ -23,7 +23,7 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
   const scrollViewHeight = safeAreaHeight - 105;
 
   const { address } = useAccount();
-  const { isDesktopView } = useScreenSize();
+  const { isDesktopView, isMobileView, isTabletView } = useScreenSize();
 
   const location = useLocation();
   const { navigate } = useCrossNavigate();
@@ -38,8 +38,9 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
 
   const scrollViewStyles = [
     styles.scrollView,
-    { maxHeight: scrollViewHeight, minHeight: scrollViewHeight },
+    { ...(!isMobileView && { maxHeight: scrollViewHeight, minHeight: scrollViewHeight }) },
     { paddingBottom: isCollectivePage ? 61 : 0 },
+    { paddingHorizontal: isTabletView ? 48 : isMobileView ? 8 : 24 },
   ];
 
   return (
diff --git a/packages/app/src/components/NumberInput.tsx b/packages/app/src/components/NumberInput.tsx
index bd495757..f2d371d6 100644
--- a/packages/app/src/components/NumberInput.tsx
+++ b/packages/app/src/components/NumberInput.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { Box, HStack, Input, Text, VStack } from 'native-base';
 import { noop } from 'lodash';
 
@@ -19,56 +20,72 @@ const NumberInput = ({
   options?: { value: string; label: string }[];
   isWarning?: boolean;
   inputValue?: string | undefined;
-}) => (
-  <VStack>
-    <HStack
-      justifyContent="space-between"
-      flexShrink={1}
-      borderColor={isWarning ? 'goodOrange.300' : 'goodPurple.500'}
-      borderWidth="1"
-      borderRadius="20"
-      padding={2}
-      paddingRight={4}
-      space={4}>
-      {type === 'token' ? <Dropdown value={dropdownValue} onSelect={onSelect} options={options} /> : <Box />}
-      <HStack alignItems="center" flexGrow={1} justifyContent="flex-end">
-        <HStack justifyContent="flex-end">
-          <Input
-            defaultValue=""
-            keyboardType="decimal-pad"
-            multiline={false}
-            placeholder={'0.00'}
-            outlineStyle="none"
-            borderColor="white"
-            width="159"
-            bgColor="blue"
-            color={isWarning ? 'goodOrange.300' : 'goodPurple.400'}
-            fontWeight={isWarning ? '700' : '400'}
-            textAlign="right"
-            paddingLeft={2.5}
-            fontSize="l"
-            _focus={{
-              outlineStyle: 'none',
-              borderColor: 'white',
-              bgColor: 'white',
-            }}
-            value={inputValue ?? ''}
-            maxLength={9}
-            onChangeText={onChangeAmount}
-          />
+}) => {
+  const onChange = useCallback(
+    (v: string) => {
+      if (!/^\d+(\.\d{0,18})?$/.test(v)) {
+        console.error('Invalid input', v);
+        if (v !== '') {
+          return;
+        }
+      }
+
+      onChangeAmount(v);
+    },
+    [onChangeAmount]
+  );
+  return (
+    <VStack>
+      <HStack
+        justifyContent="space-between"
+        flexShrink={1}
+        borderColor={isWarning ? 'goodOrange.300' : 'goodPurple.500'}
+        borderWidth="1"
+        borderRadius="20"
+        padding={2}
+        paddingRight={4}
+        space={4}
+        maxWidth={290}>
+        {type === 'token' ? <Dropdown value={dropdownValue} onSelect={onSelect} options={options} /> : <Box />}
+        <HStack alignItems="center" flexGrow={1} justifyContent="flex-end">
+          <HStack justifyContent="flex-end">
+            <Input
+              defaultValue=""
+              keyboardType="decimal-pad"
+              multiline={false}
+              placeholder={'0.00'}
+              outlineStyle="none"
+              borderColor="white"
+              maxWidth={type === 'duration' ? 100 : 159}
+              bgColor="blue"
+              color={isWarning ? 'goodOrange.300' : 'goodPurple.400'}
+              fontWeight={isWarning ? '700' : '400'}
+              textAlign="right"
+              paddingLeft={2.5}
+              fontSize="l"
+              _focus={{
+                outlineStyle: 'none',
+                borderColor: 'white',
+                bgColor: 'white',
+              }}
+              value={inputValue ?? ''}
+              maxLength={9}
+              onChangeText={onChange}
+            />
+          </HStack>
         </HStack>
+        {type === 'duration' ? (
+          <HStack backgroundColor="goodGrey.100" paddingX={2} paddingY={2.5} borderRadius={12}>
+            <Text variant="bold" fontSize="md">
+              / Month
+            </Text>
+          </HStack>
+        ) : (
+          <></>
+        )}
       </HStack>
-      {type === 'duration' ? (
-        <HStack backgroundColor="goodGrey.100" paddingX={2} paddingY={2.5} borderRadius={12}>
-          <Text variant="bold" fontSize="md">
-            / Month
-          </Text>
-        </HStack>
-      ) : (
-        <></>
-      )}
-    </HStack>
-  </VStack>
-);
+    </VStack>
+  );
+};
 
 export default NumberInput;