diff --git a/apps/frontend/app/(tabs)/(profile)/(pay-methods)/index.tsx b/apps/frontend/app/(tabs)/(profile)/(pay-methods)/index.tsx
index f9c4190..e9427d3 100644
--- a/apps/frontend/app/(tabs)/(profile)/(pay-methods)/index.tsx
+++ b/apps/frontend/app/(tabs)/(profile)/(pay-methods)/index.tsx
@@ -18,8 +18,8 @@ const PayMethods = () => {
   const isEmpty = payMethods.length === 0;
   const listStyle = !isEmpty
     ? Platform.select({
-        ios: 'pb-60 px-2 pt-4',
-        android: 'pb-24 px-2 pt-4',
+        ios: 'pb-60',
+        android: 'pb-24',
       })
     : 'flex-1 items-center justify-center pb-48';
 
@@ -31,40 +31,43 @@ const PayMethods = () => {
           right={
             <HeaderActionIcon
               icon={isDark ? icons.dark.addSquare : icons.light.addSquare}
-              onPress={() => setModalVisible(true)} // 👈 opens modal
+              onPress={() => setModalVisible(true)}
             />
           }
         />
       ),
     });
-  });
+  }, []);
 
   return (
-    <SafeAreaView className='screen-wrapper' edges={['bottom']}>
-      <View className='content-wrapper mt-2'>
-        <FlatList
-          data={payMethods}
-          keyExtractor={(item) => item.id}
-          showsVerticalScrollIndicator={false}
-          contentContainerClassName={listStyle}
-          renderItem={({ item, index }) => <PayMethodCard index={index} payMethod={item} />}
-          ItemSeparatorComponent={() => <DividerX style={cn('mt-px mb-2', isDark ? 'opacity-40' : 'opacity-25')} />}
-          ListFooterComponent={() => !isEmpty && <DividerX style={cn('mt-px', isDark ? 'opacity-40' : 'opacity-25')} />}
-          ListEmptyComponent={
-            <ListEmptyState
-              title='No Pay Methods Available'
-              ctaLabel='Add'
-              ctaStyle='py-4 px-8 rounded-lg'
-              ctaOnPresss={() => {
-                setModalVisible(true);
-              }}
-            />
-          }
-        />
-      </View>
-
+    <>
+      <SafeAreaView className='screen-wrapper' edges={['bottom']}>
+        <View className='content-wrapper mt-2'>
+          <FlatList
+            data={payMethods}
+            keyExtractor={(item) => item.id}
+            showsVerticalScrollIndicator={false}
+            contentContainerClassName={listStyle}
+            renderItem={({ item, index }) => <PayMethodCard index={index} payMethod={item} />}
+            ItemSeparatorComponent={() => <DividerX style={cn('mt-px mb-2', isDark ? 'opacity-40' : 'opacity-25')} />}
+            ListFooterComponent={() =>
+              !isEmpty && <DividerX style={cn('mt-px', isDark ? 'opacity-40' : 'opacity-25')} />
+            }
+            ListEmptyComponent={
+              <ListEmptyState
+                title='No Pay Methods Available'
+                ctaLabel='Add'
+                ctaStyle='py-4 px-8 rounded-lg'
+                ctaOnPresss={() => {
+                  setModalVisible(true);
+                }}
+              />
+            }
+          />
+        </View>
+      </SafeAreaView>
       <NewPayMethodModal visible={modalVisible} onClose={() => setModalVisible(false)} />
-    </SafeAreaView>
+    </>
   );
 };
 
diff --git a/apps/frontend/app/_layout.tsx b/apps/frontend/app/_layout.tsx
index 4a8dbcc..ded39ce 100644
--- a/apps/frontend/app/_layout.tsx
+++ b/apps/frontend/app/_layout.tsx
@@ -2,6 +2,7 @@ import toastConfig from '@/components/toasts';
 import { useCustomFonts } from '@/hooks';
 import { Stack } from 'expo-router';
 import { useColorScheme } from 'react-native';
+import { Host } from 'react-native-portalize';
 import Toast from 'react-native-toast-message';
 import './globals.css';
 
@@ -11,7 +12,7 @@ const RootLayout = () => {
   if (!fontsLoaded) return null;
 
   return (
-    <>
+    <Host>
       <Stack
         screenOptions={{
           animation: 'simple_push',
@@ -22,7 +23,7 @@ const RootLayout = () => {
         }}
       />
       <Toast config={toastConfig} />
-    </>
+    </Host>
   );
 };
 
diff --git a/apps/frontend/app/globals.css b/apps/frontend/app/globals.css
index 53ccf29..8a06b71 100644
--- a/apps/frontend/app/globals.css
+++ b/apps/frontend/app/globals.css
@@ -505,7 +505,7 @@
   }
 
   .deposit-form-icon-wrapper {
-    @apply w-14 items-center justify-center rounded-r-lg bg-base dark:bg-base-dark;
+    @apply w-14 items-center justify-center rounded-r-lg bg-base-white dark:bg-base-dark;
   }
 
   .deposit-form-footer {
@@ -565,7 +565,7 @@
   }
 
   .dropdown-icon-wrapper {
-    @apply w-14 items-center justify-center rounded-r-lg bg-base dark:bg-base-dark;
+    @apply w-14 items-center justify-center rounded-r-lg bg-base-white dark:bg-base-dark;
   }
 
   .dropdown-error {
diff --git a/apps/frontend/app/verify/index.tsx b/apps/frontend/app/verify/index.tsx
index d97a48c..7d447fd 100644
--- a/apps/frontend/app/verify/index.tsx
+++ b/apps/frontend/app/verify/index.tsx
@@ -19,7 +19,7 @@ const Verify = () => {
           />
         </View>
 
-        <View className='flex-1 gap-y-4 bg-base px-4 py-8 dark:bg-base-dark'>
+        <View className='flex-1 gap-y-4 bg-base-white px-4 py-8 dark:bg-base-dark'>
           <Text className='font-clashDisplay-medium text-2xl text-title dark:text-title-dark'>
             {Strings.verify.SCREEN_TITLE}
           </Text>
diff --git a/apps/frontend/components/cards/PayMethodCard.tsx b/apps/frontend/components/cards/PayMethodCard.tsx
index a5323ad..00a3f2b 100644
--- a/apps/frontend/components/cards/PayMethodCard.tsx
+++ b/apps/frontend/components/cards/PayMethodCard.tsx
@@ -34,7 +34,7 @@ const PayMethodCard = (props: PayMethodCardProps) => {
   };
 
   return (
-    <View className='gap-y-3 rounded px-2 pb-4 pt-2'>
+    <View className='gap-y-3 rounded pb-4 pt-2'>
       <View className='flex-row items-center justify-between'>
         <Text className='font-clashDisplay-medium text-sm text-label dark:text-label-dark'>{payMethodType?.name}</Text>
         <Image source={payMethodTypeLogoUrl} className='size-12' resizeMode='contain' />
diff --git a/apps/frontend/components/form/FormInputField.tsx b/apps/frontend/components/form/SecondaryInputField.tsx
similarity index 92%
rename from apps/frontend/components/form/FormInputField.tsx
rename to apps/frontend/components/form/SecondaryInputField.tsx
index be101c9..787984f 100644
--- a/apps/frontend/components/form/FormInputField.tsx
+++ b/apps/frontend/components/form/SecondaryInputField.tsx
@@ -2,7 +2,7 @@ import cn from 'clsx';
 import { useState } from 'react';
 import { Platform, Text, TextInput, View } from 'react-native';
 
-const FormInputField = (props: FormInputFieldProps) => {
+const SecondaryInputField = (props: SecondaryInputFieldProps) => {
   const isIOS = Platform.OS === 'ios';
   const value = props.value ?? '';
 
@@ -49,7 +49,7 @@ const FormInputField = (props: FormInputFieldProps) => {
           <View
             className={cn(
               'justify-center rounded-r-lg px-4 py-3',
-              isFocused ? 'bg-primary' : 'bg-base dark:bg-base-dark',
+              isFocused ? 'bg-primary' : 'bg-base-white dark:bg-base-dark',
               props.disabled && 'opacity-45',
             )}
           >
@@ -63,4 +63,4 @@ const FormInputField = (props: FormInputFieldProps) => {
   );
 };
 
-export default FormInputField;
+export default SecondaryInputField;
diff --git a/apps/frontend/components/form/formInputField.tsx b/apps/frontend/components/form/formInputField.tsx
deleted file mode 100644
index be101c9..0000000
--- a/apps/frontend/components/form/formInputField.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import cn from 'clsx';
-import { useState } from 'react';
-import { Platform, Text, TextInput, View } from 'react-native';
-
-const FormInputField = (props: FormInputFieldProps) => {
-  const isIOS = Platform.OS === 'ios';
-  const value = props.value ?? '';
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-
-  return (
-    <View className='gap-y-2'>
-      <Text className='font-clashDisplay text-sm text-label dark:text-label-dark'>{props.label}</Text>
-      <View
-        className={cn(
-          'flex-row items-stretch rounded-lg border',
-          isFocused ? 'border-primary' : 'border-stroke dark:border-stroke-dark',
-        )}
-      >
-        <View
-          className={cn(
-            'relative flex-1 bg-card px-4 font-satoshi text-sm dark:bg-card-dark',
-            props.secondarylabel ? 'rounded-l-lg' : 'rounded-lg',
-          )}
-        >
-          <TextInput
-            className={cn(
-              'px-0 font-satoshi text-sm',
-              isIOS ? 'py-2 pb-3' : 'py-3',
-              props.disabled ? 'text-body/75 dark:text-body-dark/75' : 'text-body dark:text-body-dark',
-            )}
-            value={value}
-            autoCapitalize='none'
-            cursorColor='#54E6B6'
-            editable={!props.disabled}
-            placeholderTextColor='#66708573'
-            placeholder={props.placeholder ?? ''}
-            keyboardType={props.keyboardType}
-            textAlignVertical='center'
-            secureTextEntry={props.secureTextEntry ? !showPassword : false}
-            onChangeText={props.onChangeText}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-          />
-        </View>
-
-        {props.secondarylabel && (
-          <View
-            className={cn(
-              'justify-center rounded-r-lg px-4 py-3',
-              isFocused ? 'bg-primary' : 'bg-base dark:bg-base-dark',
-              props.disabled && 'opacity-45',
-            )}
-          >
-            <Text className={cn('font-satoshi text-sm', isFocused ? 'text-title' : 'text-title dark:text-title-dark')}>
-              {props.secondarylabel}
-            </Text>
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default FormInputField;
diff --git a/apps/frontend/components/form/index.ts b/apps/frontend/components/form/index.ts
index a733cab..947cc3b 100644
--- a/apps/frontend/components/form/index.ts
+++ b/apps/frontend/components/form/index.ts
@@ -1,4 +1,4 @@
 export { default as FileUplaod } from './FileUpload';
-export { default as FormInputField } from './FormInputField';
 export { default as InputField } from './InputField';
+export { default as SecondaryInputField } from './SecondaryInputField';
 export { default as StepperInput } from './StepperInput';
diff --git a/apps/frontend/components/modals/ModalView.tsx b/apps/frontend/components/modals/ModalView.tsx
index e24f2bb..aed6c07 100644
--- a/apps/frontend/components/modals/ModalView.tsx
+++ b/apps/frontend/components/modals/ModalView.tsx
@@ -1,43 +1,41 @@
 import React from 'react';
-import { Dimensions, Pressable, Text } from 'react-native';
+import { Dimensions, Pressable, Text, View } from 'react-native';
 import Animated, { Easing, FadeIn, FadeOut, SlideInDown, SlideOutDown } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const screenHeight = Dimensions.get('window').height;
-
-const ModalView = ({ visible, onClose, title, children, maxHeight = '80%' }: ModalViewProps) => {
-  const insets = useSafeAreaInsets();
 
+const ModalView = ({ visible, onClose, title, children, maxHeight = 0.55 }: ModalViewProps) => {
   if (!visible) return null;
 
   return (
     <Animated.View
-      className='z-100 absolute inset-0 justify-end'
+      className='absolute inset-0 justify-end'
       entering={FadeIn.duration(250).easing(Easing.out(Easing.cubic))}
       exiting={FadeOut.duration(200).easing(Easing.in(Easing.cubic))}
     >
       {/* Backdrop pressable covering entire screen */}
-      <Pressable onPress={onClose} className='absolute inset-0 z-[1] bg-black/50' />
+      <Pressable onPress={onClose} className='absolute inset-0 bg-backdrop dark:bg-backdrop-dark' />
 
       {/* Bottom sheet content above backdrop */}
       <Animated.View
-        className='flex-1 rounded-t-[20px] bg-base dark:bg-base-dark'
+        className='flex-1 gap-y-6 rounded-t-[20px] bg-base-white py-2 dark:bg-base-dark'
         style={{
-          maxHeight: typeof maxHeight === 'string' ? (parseFloat(maxHeight) / 100) * screenHeight : maxHeight,
-          zIndex: 2,
+          maxHeight: Dimensions.get('screen').height * maxHeight,
         }}
         entering={SlideInDown.duration(250).easing(Easing.out(Easing.ease))}
         exiting={SlideOutDown.duration(200).easing(Easing.in(Easing.ease))}
       >
-        <Text className='self-center pb-2 pt-4 font-clashDisplay-medium text-lg text-title dark:text-title-dark'>
-          {title}
-        </Text>
+        <View className='items-center'>
+          <View className='h-1 w-10 rounded-md bg-stroke dark:bg-stroke-dark' />
+        </View>
+
+        <View className='items-center'>
+          <Text className='font-clashDisplay-medium text-lg text-title dark:text-title-dark'>{title}</Text>
+        </View>
 
         {React.cloneElement(children as any, {
           style: [{ flex: 1 }, (children as any).props.style],
           contentContainerStyle: [
             (children as any).props.contentContainerStyle,
-            { paddingBottom: 200 }, // optional extra space
+            { paddingBottom: 16 }, // optional extra space
           ],
         })}
       </Animated.View>
diff --git a/apps/frontend/components/modals/NewPayMethodModal.tsx b/apps/frontend/components/modals/NewPayMethodModal.tsx
index 076fbac..d1cbd57 100644
--- a/apps/frontend/components/modals/NewPayMethodModal.tsx
+++ b/apps/frontend/components/modals/NewPayMethodModal.tsx
@@ -1,5 +1,7 @@
 import { usePayMethodType } from '@/hooks';
-import { FlatList, Image, Text, TouchableHighlight, useColorScheme, View } from 'react-native';
+import { router } from 'expo-router';
+import { Dimensions, FlatList, Image, Text, TouchableHighlight, useColorScheme, View } from 'react-native';
+import { Portal } from 'react-native-portalize';
 import { DividerX } from '../dividers';
 import ModalView from './ModalView';
 
@@ -12,33 +14,49 @@ const NewPayMethodModal = (props: NewPayMethodModalProps) => {
   const isDark = useColorScheme() === 'dark';
   const { payMethodTypes, getPayMethodTypeById, getPayMethodTypeLogoUrlById } = usePayMethodType();
 
+  const modalMaxHeight = 0.55;
+  const listMaxHeight = modalMaxHeight * 0.7;
+
   return (
-    <ModalView title='New Pay Method' visible={props.visible} onClose={props.onClose}>
-      <FlatList
-        data={payMethodTypes}
-        keyExtractor={(item) => item.id}
-        showsVerticalScrollIndicator={false}
-        contentContainerClassName='mt-4'
-        renderItem={({ item, index }) => {
-          const payMethodType = getPayMethodTypeById(item.id);
-          const payMethodTypeLogoUrl = getPayMethodTypeLogoUrlById(item.id);
+    <Portal>
+      <ModalView title='New Pay Method' visible={props.visible} onClose={props.onClose} maxHeight={modalMaxHeight}>
+        <FlatList
+          data={payMethodTypes}
+          keyExtractor={(item, index) => item.id}
+          showsVerticalScrollIndicator={false}
+          style={{ maxHeight: Dimensions.get('screen').height * listMaxHeight }}
+          renderItem={({ item, index }) => {
+            const payMethodType = getPayMethodTypeById(item.id);
+            const payMethodTypeLogoUrl = getPayMethodTypeLogoUrlById(item.id);
 
-          return (
-            <TouchableHighlight
-              className='flex-1'
-              underlayColor={isDark ? '#1C1C1C' : '#F1F1F1'}
-              onPress={() => console.log('Pressed', payMethodType?.name)}
-            >
-              <View className='flex-row items-center justify-between px-6 py-6'>
-                <Text className='font-satoshi text-sm text-title dark:text-title-dark'>{payMethodType?.name}</Text>
-                <Image source={payMethodTypeLogoUrl} className='h-6 w-12' resizeMode='contain' />
-              </View>
-            </TouchableHighlight>
-          );
-        }}
-        ItemSeparatorComponent={() => <DividerX style={isDark ? 'opacity-40' : 'opacity-25'} />}
-      />
-    </ModalView>
+            return (
+              <TouchableHighlight
+                className='flex-1'
+                underlayColor={isDark ? '#1C1C1C' : '#F1F1F1'}
+                onPress={() => {
+                  props.onClose();
+                  router.push({
+                    pathname: '/details',
+                    params: {
+                      payMethodTypeId: item.id,
+                      payMethodTypeName: item.name,
+                      payMethodTypeCategory: item.category,
+                    },
+                  });
+                }}
+              >
+                <View className='flex-row items-center justify-between px-6 py-6'>
+                  <Text className='font-satoshi text-sm text-title dark:text-title-dark'>{payMethodType?.name}</Text>
+                  <Image source={payMethodTypeLogoUrl} className='h-6 w-12' resizeMode='contain' />
+                </View>
+              </TouchableHighlight>
+            );
+          }}
+          ItemSeparatorComponent={() => <DividerX style={isDark ? 'opacity-40' : 'opacity-25'} />}
+          ListFooterComponent={() => <DividerX style={isDark ? 'opacity-40' : 'opacity-25'} />}
+        />
+      </ModalView>
+    </Portal>
   );
 };
 
diff --git a/apps/frontend/components/sections/VerifyEmail.tsx b/apps/frontend/components/sections/VerifyEmail.tsx
index 07cdbb8..d92f499 100644
--- a/apps/frontend/components/sections/VerifyEmail.tsx
+++ b/apps/frontend/components/sections/VerifyEmail.tsx
@@ -1,12 +1,12 @@
 import { Strings } from '@/constants';
 import { useKyc } from '@/hooks';
-import { FormInputField } from '../form';
+import { SecondaryInputField } from '../form';
 
 const VerifyEmail = () => {
   const { kyc } = useKyc();
 
   return (
-    <FormInputField
+    <SecondaryInputField
       label={Strings.info.EMAIL_LABEL}
       placeholder={Strings.info.EMAIL_HINT}
       value={kyc?.email}
diff --git a/apps/frontend/components/sections/VerifyIdentity.tsx b/apps/frontend/components/sections/VerifyIdentity.tsx
index d628fda..450aad9 100644
--- a/apps/frontend/components/sections/VerifyIdentity.tsx
+++ b/apps/frontend/components/sections/VerifyIdentity.tsx
@@ -1,7 +1,7 @@
 import { Strings } from '@/constants';
 import { useCountry, useKyc } from '@/hooks';
 import { Dropdown } from '../filters';
-import { FormInputField } from '../form';
+import { SecondaryInputField } from '../form';
 import FileUpload from '../form/FileUpload';
 
 const VerifyIdentity = () => {
@@ -12,7 +12,12 @@ const VerifyIdentity = () => {
 
   return (
     <>
-      <FormInputField label={Strings.info.NAME_LABEL} placeholder={Strings.info.NAME_HINT} value={kyc?.name} disabled />
+      <SecondaryInputField
+        label={Strings.info.NAME_LABEL}
+        placeholder={Strings.info.NAME_HINT}
+        value={kyc?.name}
+        disabled
+      />
 
       <FileUpload label={Strings.info.UPLOAD_ID_LABEL} />
 
@@ -23,7 +28,7 @@ const VerifyIdentity = () => {
         onSelect={(item) => updateKyc('countryId', item.id)}
       />
 
-      <FormInputField
+      <SecondaryInputField
         label={Strings.info.ADDRESS_LABEL}
         placeholder={Strings.info.ADDRESS_HINT}
         value={kyc?.address}
diff --git a/apps/frontend/components/sections/VerifyPhone.tsx b/apps/frontend/components/sections/VerifyPhone.tsx
index b2148f8..e63a1f0 100644
--- a/apps/frontend/components/sections/VerifyPhone.tsx
+++ b/apps/frontend/components/sections/VerifyPhone.tsx
@@ -1,13 +1,13 @@
 import { Strings } from '@/constants';
 import { useKyc } from '@/hooks';
 import { formatPhoneNumber } from '@/utils';
-import { FormInputField } from '../form';
+import { SecondaryInputField } from '../form';
 
 const VerifyPhone = () => {
   const { kyc } = useKyc();
 
   return (
-    <FormInputField
+    <SecondaryInputField
       label={Strings.info.PHONE_LABEL}
       placeholder={Strings.info.PHONE_HINT}
       value={formatPhoneNumber(kyc?.phone ?? '')}
diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index efa703e..a9e0925 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -39,6 +39,7 @@
         "react-native": "0.79.5",
         "react-native-confirmation-code-field": "^8.0.1",
         "react-native-gesture-handler": "~2.24.0",
+        "react-native-portalize": "^1.0.7",
         "react-native-qrcode-svg": "^6.3.15",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
@@ -10294,6 +10295,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-portalize": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-native-portalize/-/react-native-portalize-1.0.7.tgz",
+      "integrity": "sha512-icqopPh9ZSV+I8C5LlZN9pQJ0OMeBDNqHhP80+qDx0hOGEcsDC09wgjogbEMfJE0GcMDM7PDYtyQkqa9gIqd1g==",
+      "peerDependencies": {
+        "react": "> 15.0.0",
+        "react-native": "> 0.50.0"
+      }
+    },
     "node_modules/react-native-qrcode-svg": {
       "version": "6.3.15",
       "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.3.15.tgz",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index dc3104c..0636e88 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -51,6 +51,7 @@
     "react-native": "0.79.5",
     "react-native-confirmation-code-field": "^8.0.1",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-portalize": "^1.0.7",
     "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
diff --git a/apps/frontend/types/props.d.ts b/apps/frontend/types/props.d.ts
index 7520071..33304c6 100644
--- a/apps/frontend/types/props.d.ts
+++ b/apps/frontend/types/props.d.ts
@@ -71,7 +71,7 @@ interface ModalViewProps {
   onClose: () => void;
   title: string;
   children?: ReactNode;
-  maxHeight?: number | `${number}%`;
+  maxHeight?: number;
 }
 
 // ====================
@@ -277,7 +277,7 @@ interface ListEmptyStateProps {
   ctaOnPresss?: () => void;
 }
 
-interface FormInputFieldProps {
+interface SecondaryInputFieldProps {
   label: string;
   value?: string;
   placeholder?: string;