diff --git a/veilend-mobile/App.tsx b/veilend-mobile/App.tsx
index 8d938be..afbe5e7 100644
--- a/veilend-mobile/App.tsx
+++ b/veilend-mobile/App.tsx
@@ -25,8 +25,15 @@ export default function App() {
           <StatusBar style="light" />
 
           {anyLoading && (
-            <View style={styles.loadingOverlay} pointerEvents="none">
-              <ActivityIndicator size="large" color="#fff" />
+            <View
+              style={styles.loadingOverlay}
+              pointerEvents="none"
+              accessible={true}
+              accessibilityRole="progressbar"
+              accessibilityLabel="Loading, please wait"
+              accessibilityLiveRegion="polite"
+            >
+              <ActivityIndicator size="large" color="#fff" importantForAccessibility="no" />
             </View>
           )}
 
diff --git a/veilend-mobile/src/components/ProtocolStatusBanners.tsx b/veilend-mobile/src/components/ProtocolStatusBanners.tsx
index b808ac9..85d3711 100644
--- a/veilend-mobile/src/components/ProtocolStatusBanners.tsx
+++ b/veilend-mobile/src/components/ProtocolStatusBanners.tsx
@@ -39,6 +39,7 @@ export default function ProtocolStatusBanners({
         const isWalletBanner = banner.id === 'wallet-disconnected';
         const onPress = isWalletBanner ? onReconnect : onRetrySync;
         const iconName = isWalletBanner ? 'wallet-outline' : 'warning-outline';
+        const actionLabel = isRefreshing && !isWalletBanner ? 'Checking...' : banner.actionLabel;
 
         return (
           <View
@@ -47,22 +48,27 @@ export default function ProtocolStatusBanners({
               styles.banner,
               banner.severity === 'danger' ? styles.danger : styles.warning,
             ]}
+            // Screen readers announce this as an alert when it appears
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={`${banner.title}. ${banner.message}`}
           >
-            <Ionicons name={iconName} size={20} color="#FFFFFF" />
+            <Ionicons name={iconName} size={20} color="#FFFFFF" importantForAccessibility="no" />
             <View style={styles.copy}>
-              <Text style={styles.title}>{banner.title}</Text>
-              <Text style={styles.message}>{banner.message}</Text>
+              {/* Text is included in the parent's accessibilityLabel; hide from individual focus */}
+              <Text style={styles.title} importantForAccessibility="no">{banner.title}</Text>
+              <Text style={styles.message} importantForAccessibility="no">{banner.message}</Text>
             </View>
             <TouchableOpacity
               accessibilityRole="button"
-              accessibilityLabel={banner.actionLabel}
+              accessibilityLabel={actionLabel}
+              accessibilityHint={isWalletBanner ? 'Reconnect your wallet' : 'Retry syncing protocol status'}
               disabled={isRefreshing && !isWalletBanner}
+              accessibilityState={{ disabled: isRefreshing && !isWalletBanner }}
               onPress={onPress}
               style={styles.action}
             >
-              <Text style={styles.actionText}>
-                {isRefreshing && !isWalletBanner ? 'Checking...' : banner.actionLabel}
-              </Text>
+              <Text style={styles.actionText}>{actionLabel}</Text>
             </TouchableOpacity>
           </View>
         );
@@ -113,6 +119,11 @@ const styles = StyleSheet.create({
     borderRadius: 999,
     paddingHorizontal: 10,
     paddingVertical: 7,
+    // Ensure minimum touch target
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   actionText: {
     color: '#FFFFFF',
diff --git a/veilend-mobile/src/hooks/useResponsive.ts b/veilend-mobile/src/hooks/useResponsive.ts
new file mode 100644
index 0000000..4e68f80
--- /dev/null
+++ b/veilend-mobile/src/hooks/useResponsive.ts
@@ -0,0 +1,29 @@
+/**
+ * useResponsive
+ *
+ * Returns responsive helpers derived from the current window dimensions.
+ * Re-renders when the device rotates or the window size changes (e.g. on
+ * foldables or when running in a split-screen context).
+ *
+ * Usage:
+ *   const { isSmallScreen, width } = useResponsive();
+ */
+import { useWindowDimensions } from 'react-native';
+
+export type ResponsiveValues = {
+  /** Current window width in dp */
+  width: number;
+  /** Current window height in dp */
+  height: number;
+  /** True when the screen is narrower than 380 dp */
+  isSmallScreen: boolean;
+};
+
+export function useResponsive(): ResponsiveValues {
+  const { width, height } = useWindowDimensions();
+  return {
+    width,
+    height,
+    isSmallScreen: width < 380,
+  };
+}
diff --git a/veilend-mobile/src/navigation/index.tsx b/veilend-mobile/src/navigation/index.tsx
index f583173..b9834d1 100644
--- a/veilend-mobile/src/navigation/index.tsx
+++ b/veilend-mobile/src/navigation/index.tsx
@@ -31,14 +31,38 @@ function MainTabs() {
           else if (route.name === 'Deposit') iconName = focused ? 'arrow-down' : 'arrow-down-outline';
           else if (route.name === 'Borrow') iconName = focused ? 'cash' : 'cash-outline';
           else if (route.name === 'Repay') iconName = focused ? 'arrow-up' : 'arrow-up-outline';
-          return <Ionicons name={iconName} size={size} color={color} />;
+          return <Ionicons name={iconName} size={size} color={color} importantForAccessibility="no" />;
         },
       })}
     >
-      <Tab.Screen name="Dashboard" component={DashboardScreen} />
-      <Tab.Screen name="Deposit" component={DepositScreen} />
-      <Tab.Screen name="Borrow" component={BorrowScreen} />
-      <Tab.Screen name="Repay" component={RepayScreen} />
+      <Tab.Screen
+        name="Dashboard"
+        component={DashboardScreen}
+        options={{
+          tabBarAccessibilityLabel: 'Dashboard, home overview',
+        }}
+      />
+      <Tab.Screen
+        name="Deposit"
+        component={DepositScreen}
+        options={{
+          tabBarAccessibilityLabel: 'Deposit, supply assets to the market',
+        }}
+      />
+      <Tab.Screen
+        name="Borrow"
+        component={BorrowScreen}
+        options={{
+          tabBarAccessibilityLabel: 'Borrow, take out a loan from the market',
+        }}
+      />
+      <Tab.Screen
+        name="Repay"
+        component={RepayScreen}
+        options={{
+          tabBarAccessibilityLabel: 'Repay, pay back borrowed assets',
+        }}
+      />
     </Tab.Navigator>
   );
 }
@@ -46,8 +70,14 @@ function MainTabs() {
 /** Splash shown while session is being restored from SecureStore */
 function SessionRestoreSplash() {
   return (
-    <View style={styles.splash}>
-      <ActivityIndicator size="large" color="#09cc71" />
+    <View
+      style={styles.splash}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Restoring your session, please wait"
+      accessibilityLiveRegion="polite"
+    >
+      <ActivityIndicator size="large" color="#09cc71" importantForAccessibility="no" />
     </View>
   );
 }
diff --git a/veilend-mobile/src/screens/BorrowScreen.tsx b/veilend-mobile/src/screens/BorrowScreen.tsx
index 4dcbf05..ad0a739 100644
--- a/veilend-mobile/src/screens/BorrowScreen.tsx
+++ b/veilend-mobile/src/screens/BorrowScreen.tsx
@@ -5,11 +5,14 @@ import { MOCK_ASSETS } from '../data/mockData';
 import { useStore } from '../store/store';
 import { ActivityIndicator } from 'react-native';
 import Toast from '../utils/toast';
+import { useResponsive } from '../hooks/useResponsive';
 
 type SelectedAsset = { id: string; name: string; symbol: string } | null;
 
-
 export default function BorrowScreen() {
+  const { isSmallScreen } = useResponsive();
+  const styles = makeStyles(isSmallScreen);
+
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedAsset, setSelectedAsset] = useState<SelectedAsset>(null);
   const [amount, setAmount] = useState<string>('1');
@@ -33,19 +36,25 @@ export default function BorrowScreen() {
       setModalVisible(false);
     }
   };
+
   return (
     <>
     <ScrollView style={styles.container}>
       <Text style={styles.headerTitle}>Borrow Market</Text>
       
       {/* Borrow Stats */}
-      <View style={styles.statsContainer}>
-        <View style={styles.statBox}>
+      <View
+        style={styles.statsContainer}
+        accessible={true}
+        accessibilityRole="summary"
+        accessibilityLabel="Borrow market stats: Total Borrowed $1,250, Borrow Limit $8,500"
+      >
+        <View style={styles.statBox} importantForAccessibility="no">
           <Text style={styles.statLabel}>Total Borrowed</Text>
           <Text style={styles.statValue}>$1,250</Text>
         </View>
-        <View style={styles.statDivider} />
-        <View style={styles.statBox}>
+        <View style={styles.statDivider} importantForAccessibility="no" />
+        <View style={styles.statBox} importantForAccessibility="no">
           <Text style={styles.statLabel}>Borrow Limit</Text>
           <Text style={styles.statValue}>$8,500</Text>
         </View>
@@ -59,10 +68,13 @@ export default function BorrowScreen() {
             key={asset.id}
             style={styles.assetCard}
             onPress={() => openBorrowModal(asset)}
+            accessibilityRole="button"
+            accessibilityLabel={`Borrow ${asset.name} (${asset.symbol}), ${(asset.apy + 2).toFixed(2)}% APR, 10 million available`}
+            accessibilityHint="Double tap to open borrow amount dialog"
           >
             <View style={styles.assetLeft}>
               <View style={styles.iconContainer}>
-                 <Ionicons name={asset.icon as any} size={24} color="#A855F7" />
+                 <Ionicons name={asset.icon as any} size={24} color="#A855F7" importantForAccessibility="no" />
               </View>
               <View>
                 <Text style={styles.assetName}>{asset.name}</Text>
@@ -84,186 +96,210 @@ export default function BorrowScreen() {
       
       <View style={{ height: 100 }} />
     </ScrollView>
+
       {/* Amount Modal */}
-        <Modal
-          visible={modalVisible}
-          transparent
-          animationType="slide"
-          onRequestClose={() => setModalVisible(false)}
-        >
-          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
-            <View style={styles.modalContent}>
-              <Text style={styles.modalTitle}>Borrow {selectedAsset?.symbol}</Text>
-              <TextInput
-                value={amount}
-                onChangeText={setAmount}
-                keyboardType="numeric"
-                style={styles.amountInput}
-                placeholder="Amount"
-                placeholderTextColor="#888"
-              />
-              <View style={styles.modalButtons}>
-                <TouchableOpacity onPress={() => setModalVisible(false)} style={[styles.modalBtn, { backgroundColor: '#333' }]}>
-                  <Text style={styles.buttonText}>Cancel</Text>
-                </TouchableOpacity>
-                <TouchableOpacity onPress={confirmBorrow} style={[styles.modalBtn, { backgroundColor: '#A855F7' }]} disabled={useStore.getState().lendingLoading}>
-                  {useStore.getState().lendingLoading ? <ActivityIndicator color="#fff"/> : <Text style={styles.buttonText}>Confirm</Text>}
-                </TouchableOpacity>
-              </View>
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+        accessibilityViewIsModal={true}
+      >
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Borrow {selectedAsset?.symbol}</Text>
+            <TextInput
+              value={amount}
+              onChangeText={setAmount}
+              keyboardType="numeric"
+              style={styles.amountInput}
+              placeholder="Amount"
+              placeholderTextColor="#888"
+              accessibilityLabel={`Borrow amount in ${selectedAsset?.symbol ?? 'asset'}`}
+              accessibilityHint="Enter the amount you want to borrow"
+            />
+            <View style={styles.modalButtons}>
+              <TouchableOpacity
+                onPress={() => setModalVisible(false)}
+                style={[styles.modalBtn, { backgroundColor: '#333' }]}
+                accessibilityRole="button"
+                accessibilityLabel="Cancel borrow"
+              >
+                <Text style={styles.buttonText}>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={confirmBorrow}
+                style={[styles.modalBtn, { backgroundColor: '#A855F7' }]}
+                disabled={useStore.getState().lendingLoading}
+                accessibilityRole="button"
+                accessibilityLabel={`Confirm borrow of ${amount} ${selectedAsset?.symbol ?? ''}`}
+                accessibilityState={{ disabled: useStore.getState().lendingLoading }}
+              >
+                {useStore.getState().lendingLoading
+                  ? <ActivityIndicator color="#fff"/>
+                  : <Text style={styles.buttonText}>Confirm</Text>}
+              </TouchableOpacity>
             </View>
-          </KeyboardAvoidingView>
-          </Modal>
-          </>
-        );
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0A0A',
-    padding: 24,
-    paddingTop: 60,
-  },
-  headerTitle: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-    marginBottom: 24,
-  },
-  statsContainer: {
-    flexDirection: 'row',
-    backgroundColor: '#121212',
-    borderRadius: 16,
-    padding: 20,
-    marginBottom: 32,
-    borderWidth: 1,
-    borderColor: '#222',
-  },
-  statBox: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  statDivider: {
-    width: 1,
-    backgroundColor: '#333',
-    marginHorizontal: 16,
-  },
-  statLabel: {
-    color: '#A1A1A1',
-    marginBottom: 8,
-    fontSize: 14,
-  },
-  statValue: {
-    color: '#FFFFFF',
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  sectionTitle: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 16,
-  },
-  assetsList: {
-    gap: 16,
-  },
-  assetCard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#121212',
-    padding: 16,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#222',
-  },
-  assetLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16,
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    backgroundColor: '#1A1A1A',
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#333',
-  },
-  assetName: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4,
-  },
-  assetSymbol: {
-    color: '#666',
-    fontSize: 14,
-  },
-  assetRight: {
-    alignItems: 'flex-end',
-  },
-  aprBadge: {
-    backgroundColor: 'rgba(255, 99, 99, 0.15)',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 8,
-    marginBottom: 4,
-  },
-  aprText: {
-    color: '#FF6363',
-    fontWeight: 'bold',
-    fontSize: 12,
-  },
-  available: {
-    color: '#A1A1A1',
-    fontSize: 14,
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: '#121212',
-    padding: 24,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    borderWidth: 1,
-    borderColor: '#222',
-    gap: 16,
-  },
-  modalTitle: {
-    color: '#FFFFFF',
-    fontSize: 22,
-    fontWeight: 'bold',
-  },
-  amountInput: {
-    backgroundColor: '#1A1A1A',
-    borderWidth: 1,
-    borderColor: '#333',
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    color: '#FFFFFF',
-    fontSize: 16,
-  },
-  modalButtons: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  modalBtn: {
-    flex: 1,
-    paddingVertical: 16,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-});
+function makeStyles(isSmallScreen: boolean) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#0A0A0A',
+      padding: isSmallScreen ? 16 : 24,
+      paddingTop: 60,
+    },
+    headerTitle: {
+      fontSize: isSmallScreen ? 22 : 28,
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+      marginBottom: 24,
+    },
+    statsContainer: {
+      flexDirection: 'row',
+      backgroundColor: '#121212',
+      borderRadius: 16,
+      padding: isSmallScreen ? 14 : 20,
+      marginBottom: 32,
+      borderWidth: 1,
+      borderColor: '#222',
+    },
+    statBox: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    statDivider: {
+      width: 1,
+      backgroundColor: '#333',
+      marginHorizontal: 16,
+    },
+    statLabel: {
+      color: '#A1A1A1',
+      marginBottom: 8,
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    statValue: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 18 : 24,
+      fontWeight: 'bold',
+    },
+    sectionTitle: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 16 : 18,
+      fontWeight: 'bold',
+      marginBottom: 16,
+    },
+    assetsList: {
+      gap: 16,
+    },
+    assetCard: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: '#121212',
+      padding: isSmallScreen ? 12 : 16,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: '#222',
+      minHeight: 72,
+    },
+    assetLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: isSmallScreen ? 10 : 16,
+      flexShrink: 1,
+    },
+    iconContainer: {
+      width: isSmallScreen ? 40 : 48,
+      height: isSmallScreen ? 40 : 48,
+      backgroundColor: '#1A1A1A',
+      borderRadius: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: '#333',
+    },
+    assetName: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 14 : 16,
+      fontWeight: '600',
+      marginBottom: 4,
+    },
+    assetSymbol: {
+      color: '#666',
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    assetRight: {
+      alignItems: 'flex-end',
+      flexShrink: 0,
+    },
+    aprBadge: {
+      backgroundColor: 'rgba(255, 99, 99, 0.15)',
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 8,
+      marginBottom: 4,
+    },
+    aprText: {
+      color: '#FF6363',
+      fontWeight: 'bold',
+      fontSize: 12,
+    },
+    available: {
+      color: '#A1A1A1',
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      justifyContent: 'flex-end',
+    },
+    modalContent: {
+      backgroundColor: '#121212',
+      padding: isSmallScreen ? 16 : 24,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderWidth: 1,
+      borderColor: '#222',
+      gap: 16,
+    },
+    modalTitle: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 18 : 22,
+      fontWeight: 'bold',
+    },
+    amountInput: {
+      backgroundColor: '#1A1A1A',
+      borderWidth: 1,
+      borderColor: '#333',
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      color: '#FFFFFF',
+      fontSize: 16,
+    },
+    modalButtons: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    modalBtn: {
+      flex: 1,
+      paddingVertical: isSmallScreen ? 14 : 16,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 48,
+    },
+    buttonText: {
+      color: '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: isSmallScreen ? 14 : 16,
+    },
+  });
+}
diff --git a/veilend-mobile/src/screens/ConnectWalletScreen.tsx b/veilend-mobile/src/screens/ConnectWalletScreen.tsx
index 31245e7..07249b8 100644
--- a/veilend-mobile/src/screens/ConnectWalletScreen.tsx
+++ b/veilend-mobile/src/screens/ConnectWalletScreen.tsx
@@ -112,6 +112,10 @@ export default function ConnectWalletScreen() {
                     activeOpacity={0.8}
                     onPress={generateWallet}
                     disabled={loading}
+                    accessibilityRole="button"
+                    accessibilityLabel="Generate new wallet"
+                    accessibilityHint="Creates a new Stellar wallet and connects to the app"
+                    accessibilityState={{ disabled: loading }}
                   >
                     <LinearGradient
                       colors={['#09cc71', '#059652']}
@@ -130,6 +134,10 @@ export default function ConnectWalletScreen() {
                   style={styles.importLink}
                   onPress={() => setMode('import')}
                   disabled={loading}
+                  accessibilityRole="button"
+                  accessibilityLabel="Import existing wallet using secret key"
+                  accessibilityHint="Switch to the import wallet form"
+                  accessibilityState={{ disabled: loading }}
                 >
                   <Text style={styles.importLinkText}>
                     Already have a wallet?{' '}
@@ -151,17 +159,27 @@ export default function ConnectWalletScreen() {
                     autoCapitalize="characters"
                     autoCorrect={false}
                     secureTextEntry={false}
+                    accessibilityLabel="Stellar secret key"
+                    accessibilityHint="Enter your Stellar secret key starting with S to import your wallet"
                   />
                 </View>
 
                 {error ? (
-                  <Text style={styles.errorText}>{error}</Text>
+                  <Text
+                    style={styles.errorText}
+                    accessibilityRole="alert"
+                    accessibilityLiveRegion="assertive"
+                  >{error}</Text>
                 ) : null}
 
                 <TouchableOpacity
                   activeOpacity={0.8}
                   onPress={() => importWallet(secretKey)}
                   disabled={loading || !secretKey.trim()}
+                  accessibilityRole="button"
+                  accessibilityLabel="Connect wallet"
+                  accessibilityHint="Imports and connects your Stellar wallet using the provided secret key"
+                  accessibilityState={{ disabled: loading || !secretKey.trim() }}
                 >
                   <LinearGradient
                     colors={['#09cc71', '#059652']}
@@ -179,6 +197,10 @@ export default function ConnectWalletScreen() {
                   style={styles.importLink}
                   onPress={() => { setMode('choose'); setSecretKey(''); }}
                   disabled={loading}
+                  accessibilityRole="button"
+                  accessibilityLabel="Back to wallet options"
+                  accessibilityHint="Returns to the generate or import wallet choice"
+                  accessibilityState={{ disabled: loading }}
                 >
                   <Text style={styles.importLinkText}>← Back</Text>
                 </TouchableOpacity>
diff --git a/veilend-mobile/src/screens/DashboardScreen.tsx b/veilend-mobile/src/screens/DashboardScreen.tsx
index 65e3828..5185ca7 100644
--- a/veilend-mobile/src/screens/DashboardScreen.tsx
+++ b/veilend-mobile/src/screens/DashboardScreen.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image, Modal, TextInput, TouchableWithoutFeedback, Keyboard, KeyboardAvoidingView, Platform, Dimensions, FlatList, ActivityIndicator } from 'react-native';
-import api from '../utils/api';
+import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image, Modal, TextInput, TouchableWithoutFeedback, Keyboard, FlatList, ActivityIndicator } from 'react-native';
 import { useStore, TransactionRecord } from '../store/store';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Ionicons } from '@expo/vector-icons';
@@ -17,6 +16,10 @@ const DEFAULT_PROFILE_IMAGE = 'https://i.pravatar.cc/100?img=5';
 
   
 export default function DashboardScreen({ navigation }: any) {
+  const { width, isSmallScreen } = useResponsive();
+  const CARD_WIDTH = width - 48; // Padding 24 * 2
+  const styles = makeStyles(isSmallScreen);
+
   const {
     address,
     authToken,
@@ -68,8 +71,13 @@ export default function DashboardScreen({ navigation }: any) {
   if (portfolioError) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0F172A', padding: 24 }}>
-        <Text style={{ color: '#EF4444', fontSize: 16, textAlign: 'center' }}>{portfolioError}</Text>
-        <TouchableOpacity style={{ marginTop: 16, padding: 12, backgroundColor: '#1E293B', borderRadius: 8 }} onPress={fetchPortfolio}>
+        <Text style={{ color: '#EF4444', fontSize: 16, textAlign: 'center' }} accessibilityRole="alert">{portfolioError}</Text>
+        <TouchableOpacity
+          style={{ marginTop: 16, padding: 12, backgroundColor: '#1E293B', borderRadius: 8 }}
+          onPress={fetchPortfolio}
+          accessibilityRole="button"
+          accessibilityLabel="Retry loading portfolio"
+        >
           <Text style={{ color: '#A855F7' }}>Retry</Text>
         </TouchableOpacity>
       </View>
@@ -141,16 +149,35 @@ export default function DashboardScreen({ navigation }: any) {
   };
 
   const ServiceButton = ({ icon, label, onPress }: any) => (
-    <TouchableOpacity style={styles.serviceBtn} onPress={onPress}>
+    <TouchableOpacity
+      style={styles.serviceBtn}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityHint={`Navigate to ${label} screen`}
+    >
       <View style={styles.serviceIconBox}>
-        <Ionicons name={icon} size={24} color="#A855F7" />
+        <Ionicons name={icon} size={24} color="#A855F7" importantForAccessibility="no" />
       </View>
-      <Text style={styles.serviceLabel}>{label}</Text>
+      <Text style={styles.serviceLabel} importantForAccessibility="no-hide-descendants">{label}</Text>
     </TouchableOpacity>
   );
 
-  const renderCard = ({ item }: { item: any }) => (
-    <View style={{ width: CARD_WIDTH }}>
+  const renderCard = ({ item }: { item: any }) => {
+    const displayValue = isPrivacyMode
+      ? '****'
+      : `$${Number(item.value).toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
+    const cardA11yLabel = isPrivacyMode
+      ? `${item.label}: hidden in privacy mode`
+      : `${item.label}: ${displayValue}`;
+
+    return (
+    <View
+      style={{ width: CARD_WIDTH }}
+      accessible={true}
+      accessibilityRole="text"
+      accessibilityLabel={cardA11yLabel}
+    >
       <LinearGradient
         colors={['#A855F7', '#7C3AED']} // Soft linear gradient (from #A855F7 to #7C3AED)
         start={{ x: 0, y: 0 }}
@@ -170,28 +197,28 @@ export default function DashboardScreen({ navigation }: any) {
 
         <View style={styles.cardHeader}>
           <View>
-            <Text style={styles.cardLabel}>{item.label}</Text>
+            <Text style={styles.cardLabel} importantForAccessibility="no">{item.label}</Text>
             <View style={styles.balanceRow}>
-              <Text style={styles.balanceAmount}>
+              <Text style={styles.balanceAmount} importantForAccessibility="no">
                 {isPrivacyMode 
                   ? '****' 
                   : `$${item.value.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
                 }
               </Text>
-               {/* Masked number eye icon */}
-              <Ionicons name={isPrivacyMode ? "eye-off-outline" : "eye-outline"} size={20} color="rgba(255,255,255,0.6)" style={{marginLeft: 10, marginTop: 12}} />
+               {/* Masked number eye icon - decorative */}
+              <Ionicons name={isPrivacyMode ? "eye-off-outline" : "eye-outline"} size={20} color="rgba(255,255,255,0.6)" style={{marginLeft: 10, marginTop: 12}} importantForAccessibility="no" />
             </View>
           </View>
           
           {/* Added privacy shield top-right */}
-          <View style={styles.privacyBadge}>
-            <Ionicons name={item.icon as string} size={isSmallScreen ? 16 : 20} color="#00D1FF" />
-            <Text style={styles.privacyText}>ZK Shielded</Text>
+          <View style={styles.privacyBadge} importantForAccessibility="no">
+            <Ionicons name={item.icon as string} size={isSmallScreen ? 16 : 20} color="#00D1FF" importantForAccessibility="no" />
+            <Text style={styles.privacyText} importantForAccessibility="no">ZK Shielded</Text>
           </View>
         </View>
         
-        {/* Bottom dots styled as small privacy "veils" with teal glow */}
-         <View style={styles.cardNumberContainer}>
+        {/* Bottom dots styled as small privacy "veils" with teal glow - decorative */}
+         <View style={styles.cardNumberContainer} importantForAccessibility="no">
           <View style={[styles.privacyDot, { opacity: 0.6 }]} />
           <View style={[styles.privacyDot, { opacity: 0.8 }]} />
           <View style={[styles.privacyDot, { opacity: 1.0 }]} />
@@ -199,7 +226,7 @@ export default function DashboardScreen({ navigation }: any) {
         </View>
       </LinearGradient>
     </View>
-  );
+  );};
 
   const getGreeting = () => {
     const hour = new Date().getHours();
@@ -212,15 +239,31 @@ export default function DashboardScreen({ navigation }: any) {
     <ScrollView style={styles.container}>
       {/* Header */}
       <View style={styles.header}>
-        <View>
-          <Text style={styles.greeting}>{getGreeting()}</Text>
-          <Text style={styles.userName}>{username}</Text>
+        <View
+          accessible={true}
+          accessibilityRole="text"
+          accessibilityLabel={`${getGreeting()} ${username}`}
+        >
+          <Text style={styles.greeting} importantForAccessibility="no">{getGreeting()}</Text>
+          <Text style={styles.userName} importantForAccessibility="no">{username}</Text>
         </View>
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-          <TouchableOpacity onPress={togglePrivacyMode} style={styles.iconButton}>
-            <Ionicons name={isPrivacyMode ? "eye-off" : "eye"} size={24} color="#A1A1A1" />
+          <TouchableOpacity
+            onPress={togglePrivacyMode}
+            style={styles.iconButton}
+            accessibilityRole="switch"
+            accessibilityLabel={isPrivacyMode ? 'Privacy mode on, balances hidden' : 'Privacy mode off, balances visible'}
+            accessibilityHint="Double tap to toggle privacy mode"
+            accessibilityState={{ checked: isPrivacyMode }}
+          >
+            <Ionicons name={isPrivacyMode ? "eye-off" : "eye"} size={24} color="#A1A1A1" importantForAccessibility="no" />
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => setProfileVisible(true)}>
+          <TouchableOpacity
+            onPress={() => setProfileVisible(true)}
+            accessibilityRole="button"
+            accessibilityLabel={`Profile menu for ${username}`}
+            accessibilityHint="Opens profile and settings"
+          >
             <Image 
               source={{ uri: avatarUri }} 
               style={styles.avatar} 
@@ -245,22 +288,27 @@ export default function DashboardScreen({ navigation }: any) {
         transparent={true}
         visible={profileVisible}
         onRequestClose={() => setProfileVisible(false)}
+        accessibilityViewIsModal={true}
       >
-        <TouchableWithoutFeedback onPress={() => setProfileVisible(false)}>
+        <TouchableWithoutFeedback onPress={() => setProfileVisible(false)} accessibilityLabel="Close profile menu">
           <View style={styles.modalOverlay}>
             <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
               <View style={styles.modalContent}>
                 <View style={styles.modalHeader}>
                   <Text style={styles.modalTitle}>Profile</Text>
-                  <TouchableOpacity onPress={() => setProfileVisible(false)}>
-                    <Ionicons name="close-circle" size={28} color="#A1A1A1" />
+                  <TouchableOpacity
+                    onPress={() => setProfileVisible(false)}
+                    accessibilityRole="button"
+                    accessibilityLabel="Close profile menu"
+                  >
+                    <Ionicons name="close-circle" size={28} color="#A1A1A1" importantForAccessibility="no" />
                   </TouchableOpacity>
                 </View>
 
                 {/* Profile Setup / Username */}
                 <View style={styles.menuItem}>
                   <View style={styles.menuIconBox}>
-                    <Ionicons name="person" size={20} color="#00D1FF" />
+                    <Ionicons name="person" size={20} color="#00D1FF" importantForAccessibility="no" />
                   </View>
                   <View style={{ flex: 1 }}>
                     <Text style={styles.menuLabel}>Username</Text>
@@ -272,19 +320,32 @@ export default function DashboardScreen({ navigation }: any) {
                           onChangeText={setTempName}
                           autoFocus
                           placeholderTextColor="#555"
+                          accessibilityLabel="Edit username"
+                          accessibilityHint="Enter your new display name"
                         />
-                        <TouchableOpacity onPress={saveUsername} style={styles.saveBtn}>
-                          <Ionicons name="checkmark" size={18} color="#000" />
+                        <TouchableOpacity
+                          onPress={saveUsername}
+                          style={styles.saveBtn}
+                          accessibilityRole="button"
+                          accessibilityLabel="Save username"
+                          accessibilityHint="Confirms and saves your new display name"
+                        >
+                          <Ionicons name="checkmark" size={18} color="#000" importantForAccessibility="no" />
                         </TouchableOpacity>
                       </View>
                     ) : (
                       <View style={styles.nameDisplayRow}>
                         <Text style={styles.menuValue}>{username}</Text>
-                        <TouchableOpacity onPress={() => {
-                          setTempName(username);
-                          setIsEditingName(true);
-                        }}>
-                          <Ionicons name="pencil" size={16} color="#A855F7" style={{ marginLeft: 8 }} />
+                        <TouchableOpacity
+                          onPress={() => {
+                            setTempName(username);
+                            setIsEditingName(true);
+                          }}
+                          accessibilityRole="button"
+                          accessibilityLabel={`Edit username, current name: ${username}`}
+                          accessibilityHint="Opens an editable field to change your display name"
+                        >
+                          <Ionicons name="pencil" size={16} color="#A855F7" style={{ marginLeft: 8 }} importantForAccessibility="no" />
                         </TouchableOpacity>
                       </View>
                     )}
@@ -292,46 +353,46 @@ export default function DashboardScreen({ navigation }: any) {
                 </View>
 
                 {/* Change Profile Picture */}
-                <TouchableOpacity style={styles.menuItem} onPress={pickImage}>
+                <TouchableOpacity style={styles.menuItem} onPress={pickImage} accessibilityRole="button" accessibilityLabel="Change profile picture" accessibilityHint="Opens image library to select a new avatar">
                   <View style={styles.menuIconBox}>
-                    <Ionicons name="camera" size={20} color="#00D1FF" />
+                    <Ionicons name="camera" size={20} color="#00D1FF" importantForAccessibility="no" />
                   </View>
                   <View>
                     <Text style={styles.menuLabel}>Change Profile Picture</Text>
                     <Text style={styles.menuSubLabel}>Update your avatar</Text>
                   </View>
-                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} />
+                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} importantForAccessibility="no" />
                 </TouchableOpacity>
 
                 {/* Account Preference */}
-                <TouchableOpacity style={styles.menuItem}>
+                <TouchableOpacity style={styles.menuItem} accessibilityRole="button" accessibilityLabel="Account preferences" accessibilityHint="Manage currency, notifications, and privacy settings">
                   <View style={styles.menuIconBox}>
-                    <Ionicons name="settings" size={20} color="#A855F7" />
+                    <Ionicons name="settings" size={20} color="#A855F7" importantForAccessibility="no" />
                   </View>
                   <View>
                     <Text style={styles.menuLabel}>Account Preferences</Text>
                     <Text style={styles.menuSubLabel}>Currency, Notifications, Privacy</Text>
                   </View>
-                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} />
+                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} importantForAccessibility="no" />
                 </TouchableOpacity>
 
                 {/* Profile Setup (Generic) */}
-                 <TouchableOpacity style={styles.menuItem}>
+                 <TouchableOpacity style={styles.menuItem} accessibilityRole="button" accessibilityLabel="Profile setup" accessibilityHint="Complete your KYC and verification">
                   <View style={styles.menuIconBox}>
-                    <Ionicons name="build" size={20} color="#A855F7" />
+                    <Ionicons name="build" size={20} color="#A855F7" importantForAccessibility="no" />
                   </View>
                   <View>
                     <Text style={styles.menuLabel}>Profile Setup</Text>
                     <Text style={styles.menuSubLabel}>Complete your KYC/Verification</Text>
                   </View>
-                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} />
+                  <Ionicons name="chevron-forward" size={20} color="#555" style={{ marginLeft: 'auto' }} importantForAccessibility="no" />
                 </TouchableOpacity>
 
                 <View style={styles.divider} />
 
                 {/* Log Out */}
-                <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
-                  <Ionicons name="log-out-outline" size={20} color="#FF4D4D" />
+                <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout} accessibilityRole="button" accessibilityLabel="Log out">
+                  <Ionicons name="log-out-outline" size={20} color="#FF4D4D" importantForAccessibility="no" />
                   <Text style={styles.logoutText}>Log Out</Text>
                 </TouchableOpacity>
               </View>
@@ -352,18 +413,26 @@ export default function DashboardScreen({ navigation }: any) {
           onViewableItemsChanged={onViewableItemsChanged}
           viewabilityConfig={viewabilityConfig}
           extraData={isPrivacyMode}
+          accessibilityLabel="Balance cards carousel"
+          accessibilityHint={`Swipe left or right to view ${CARDS.length} balance cards`}
         />
       </View>
 
       {/* Pagination Dots */}
-      <View style={styles.paginationContainer}>
-        {CARDS.map((_, index) => (
+      <View
+        style={styles.paginationContainer}
+        accessibilityLabel={`Card ${currentIndex + 1} of ${CARDS.length}: ${CARDS[currentIndex]?.label}`}
+        accessible={true}
+        accessibilityRole="adjustable"
+      >
+        {CARDS.map((card, index) => (
           <View 
             key={index} 
             style={[
               styles.dot, 
               currentIndex === index ? styles.activeDot : styles.inactiveDot
-            ]} 
+            ]}
+            importantForAccessibility="no"
           />
         ))}
       </View>
@@ -394,26 +463,54 @@ export default function DashboardScreen({ navigation }: any) {
       </View>
 
       {/* Transactions List */}
-      <Text style={styles.sectionTitle}>Transactions</Text>
+      <Text style={styles.sectionTitle} accessibilityRole="header">Transactions</Text>
       <View style={styles.transactionsList}>
-        {transactions.map((tx: TransactionRecord) => (
-          <View key={tx.id} style={styles.txItem}>
-            <View style={styles.txLeft}>
-              <View style={styles.txIconBox}>
-                <Ionicons
-                  name={(tx.type === 'deposit' ? 'arrow-down' : tx.type === 'withdraw' ? 'arrow-up' : 'swap-horizontal') as any}
-                  size={20}
-                  color="#fff"
-                />
-              </View>
-              <View>
-                <Text style={styles.txTitle}>{tx.type} — {tx.asset}</Text>
-                <Text style={styles.txDate}>{tx.timestamp}</Text>
+        {transactions.length === 0 && (
+          <Text
+            style={[styles.txDate, { textAlign: 'center', paddingVertical: 24 }]}
+            accessibilityRole="text"
+          >
+            No transactions yet.
+          </Text>
+        )}
+        {transactions.map((tx: TransactionRecord) => {
+          const txTypeLabel =
+            tx.type === 'deposit' ? 'Deposited' :
+            tx.type === 'withdraw' ? 'Withdrew' :
+            tx.type === 'borrow' ? 'Borrowed' :
+            tx.type === 'repay' ? 'Repaid' : tx.type;
+          const txA11yLabel = isPrivacyMode
+            ? `${txTypeLabel} ${tx.asset}, amount hidden in privacy mode, ${tx.timestamp}, status: ${tx.status}`
+            : `${txTypeLabel} ${tx.amount} ${tx.asset}, ${tx.timestamp}, status: ${tx.status}`;
+
+          return (
+            <View
+              key={tx.id}
+              style={styles.txItem}
+              accessible={true}
+              accessibilityRole="text"
+              accessibilityLabel={txA11yLabel}
+            >
+              <View style={styles.txLeft}>
+                <View style={styles.txIconBox} importantForAccessibility="no">
+                  <Ionicons
+                    name={(tx.type === 'deposit' ? 'arrow-down' : tx.type === 'withdraw' ? 'arrow-up' : 'swap-horizontal') as any}
+                    size={20}
+                    color="#fff"
+                    importantForAccessibility="no"
+                  />
+                </View>
+                <View importantForAccessibility="no">
+                  <Text style={styles.txTitle} importantForAccessibility="no">{tx.type} — {tx.asset}</Text>
+                  <Text style={styles.txDate} importantForAccessibility="no">{tx.timestamp}</Text>
+                </View>
               </View>
+              <Text style={styles.txValue} importantForAccessibility="no">
+                {isPrivacyMode ? '****' : `${tx.amount} ${tx.asset}`}
+              </Text>
             </View>
-            <Text style={styles.txValue}>{tx.amount} {tx.asset}</Text>
-          </View>
-        ))}
+          );
+        })}
       </View>
       
       {/* Spacer for bottom tab bar */}
@@ -422,7 +519,8 @@ export default function DashboardScreen({ navigation }: any) {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(s: boolean) {
+  return StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#0A0A0A',
@@ -509,8 +607,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    paddingHorizontal: isSmallScreen ? 8 : 10,
-    paddingVertical: isSmallScreen ? 4 : 6,
+    paddingHorizontal: s ? 8 : 10,
+    paddingVertical: s ? 4 : 6,
     borderRadius: 20,
     borderWidth: 1,
     borderColor: 'rgba(0, 209, 255, 0.3)', // Teal border
@@ -521,9 +619,9 @@ const styles = StyleSheet.create({
   },
   privacyText: {
     color: '#D1D1D1',
-    fontSize: isSmallScreen ? 10 : 12,
+    fontSize: s ? 10 : 12,
     fontWeight: '600',
-    marginLeft: isSmallScreen ? 4 : 6,
+    marginLeft: s ? 4 : 6,
   },
   cardNumberContainer: {
     flexDirection: 'row',
@@ -581,10 +679,12 @@ const styles = StyleSheet.create({
   },
   serviceBtn: {
     alignItems: 'center',
+    minWidth: 64,
+    padding: 4,
   },
   serviceIconBox: {
-    width: 56,
-    height: 56,
+    width: s ? 52 : 56,
+    height: s ? 52 : 56,
     backgroundColor: '#1A1A1A',
     borderRadius: 16,
     justifyContent: 'center',
diff --git a/veilend-mobile/src/screens/DepositScreen.tsx b/veilend-mobile/src/screens/DepositScreen.tsx
index a34ef3e..d275e18 100644
--- a/veilend-mobile/src/screens/DepositScreen.tsx
+++ b/veilend-mobile/src/screens/DepositScreen.tsx
@@ -5,10 +5,14 @@ import { MOCK_ASSETS } from '../data/mockData';
 import { useStore } from '../store/store';
 import { ActivityIndicator } from 'react-native';
 import Toast from '../utils/toast';
+import { useResponsive } from '../hooks/useResponsive';
 
 type SelectedAsset = { id: string; name: string; symbol: string; balance?: number } | null;
 
 export default function DepositScreen() {
+  const { isSmallScreen } = useResponsive();
+  const styles = makeStyles(isSmallScreen);
+
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedAsset, setSelectedAsset] = useState<SelectedAsset>(null);
   const [amount, setAmount] = useState<string>('');
@@ -33,19 +37,25 @@ export default function DepositScreen() {
       setModalVisible(false);
     }
   };
+
   return (
     <>
     <ScrollView style={styles.container}>
       <Text style={styles.headerTitle}>Supply Market</Text>
       
       {/* Stats Header */}
-      <View style={styles.statsContainer}>
-        <View style={styles.statBox}>
+      <View
+        style={styles.statsContainer}
+        accessible={true}
+        accessibilityRole="summary"
+        accessibilityLabel="Supply market stats: Net APY 4.25%, Supply Balance $12,450"
+      >
+        <View style={styles.statBox} importantForAccessibility="no">
           <Text style={styles.statLabel}>Net APY</Text>
           <Text style={styles.statValue}>4.25%</Text>
         </View>
-        <View style={styles.statDivider} />
-        <View style={styles.statBox}>
+        <View style={styles.statDivider} importantForAccessibility="no" />
+        <View style={styles.statBox} importantForAccessibility="no">
           <Text style={styles.statLabel}>Supply Balance</Text>
           <Text style={styles.statValue}>$12,450</Text>
         </View>
@@ -59,10 +69,13 @@ export default function DepositScreen() {
             key={asset.id}
             style={styles.assetCard}
             onPress={() => openDepositModal(asset)}
+            accessibilityRole="button"
+            accessibilityLabel={`Deposit ${asset.name} (${asset.symbol}), ${asset.apy}% APY, wallet balance: ${asset.balance} ${asset.symbol}`}
+            accessibilityHint="Double tap to open deposit amount dialog"
           >
             <View style={styles.assetLeft}>
               <View style={styles.iconContainer}>
-                 <Ionicons name={asset.icon as any} size={24} color="#A855F7" />
+                 <Ionicons name={asset.icon as any} size={24} color="#A855F7" importantForAccessibility="no" />
               </View>
               <View>
                 <Text style={styles.assetName}>{asset.name}</Text>
@@ -84,186 +97,210 @@ export default function DepositScreen() {
       
       <View style={{ height: 100 }} />
     </ScrollView>
+
       {/* Amount Modal */}
-        <Modal
-          visible={modalVisible}
-          transparent
-          animationType="slide"
-          onRequestClose={() => setModalVisible(false)}
-        >
-          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
-            <View style={styles.modalContent}>
-              <Text style={styles.modalTitle}>Deposit {selectedAsset?.symbol}</Text>
-              <TextInput
-                value={amount}
-                onChangeText={setAmount}
-                keyboardType="numeric"
-                style={styles.amountInput}
-                placeholder="Amount"
-                placeholderTextColor="#888"
-              />
-              <View style={styles.modalButtons}>
-                <TouchableOpacity onPress={() => setModalVisible(false)} style={[styles.modalBtn, { backgroundColor: '#333' }]}>
-                    <Text style={styles.buttonText}>Cancel</Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity onPress={confirmDeposit} style={[styles.modalBtn, { backgroundColor: '#A855F7' }]} disabled={useStore.getState().lendingLoading}>
-                    {useStore.getState().lendingLoading ? <ActivityIndicator color="#fff"/> : <Text style={styles.buttonText}>Confirm</Text>}
-                  </TouchableOpacity>
-              </View>
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+        accessibilityViewIsModal={true}
+      >
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Deposit {selectedAsset?.symbol}</Text>
+            <TextInput
+              value={amount}
+              onChangeText={setAmount}
+              keyboardType="numeric"
+              style={styles.amountInput}
+              placeholder="Amount"
+              placeholderTextColor="#888"
+              accessibilityLabel={`Deposit amount in ${selectedAsset?.symbol ?? 'asset'}`}
+              accessibilityHint="Enter the amount you want to deposit"
+            />
+            <View style={styles.modalButtons}>
+              <TouchableOpacity
+                onPress={() => setModalVisible(false)}
+                style={[styles.modalBtn, { backgroundColor: '#333' }]}
+                accessibilityRole="button"
+                accessibilityLabel="Cancel deposit"
+              >
+                <Text style={styles.buttonText}>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={confirmDeposit}
+                style={[styles.modalBtn, { backgroundColor: '#A855F7' }]}
+                disabled={useStore.getState().lendingLoading}
+                accessibilityRole="button"
+                accessibilityLabel={`Confirm deposit of ${amount} ${selectedAsset?.symbol ?? ''}`}
+                accessibilityState={{ disabled: useStore.getState().lendingLoading }}
+              >
+                {useStore.getState().lendingLoading
+                  ? <ActivityIndicator color="#fff"/>
+                  : <Text style={styles.buttonText}>Confirm</Text>}
+              </TouchableOpacity>
             </View>
-          </KeyboardAvoidingView>
-          </Modal>
-          </>
-        );
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0A0A',
-    padding: 24,
-    paddingTop: 60,
-  },
-  headerTitle: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-    marginBottom: 24,
-  },
-  statsContainer: {
-    flexDirection: 'row',
-    backgroundColor: '#121212',
-    borderRadius: 16,
-    padding: 20,
-    marginBottom: 32,
-    borderWidth: 1,
-    borderColor: '#222',
-  },
-  statBox: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  statDivider: {
-    width: 1,
-    backgroundColor: '#333',
-    marginHorizontal: 16,
-  },
-  statLabel: {
-    color: '#A1A1A1',
-    marginBottom: 8,
-    fontSize: 14,
-  },
-  statValue: {
-    color: '#FFFFFF',
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  sectionTitle: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 16,
-  },
-  assetsList: {
-    gap: 16,
-  },
-  assetCard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#121212',
-    padding: 16,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#222',
-  },
-  assetLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16,
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    backgroundColor: '#1A1A1A',
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#333',
-  },
-  assetName: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4,
-  },
-  assetSymbol: {
-    color: '#666',
-    fontSize: 14,
-  },
-  assetRight: {
-    alignItems: 'flex-end',
-  },
-  apyBadge: {
-    backgroundColor: 'rgba(168, 85, 247, 0.15)',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 8,
-    marginBottom: 4,
-  },
-  apyText: {
-    color: '#A855F7',
-    fontWeight: 'bold',
-    fontSize: 12,
-  },
-  walletBalance: {
-    color: '#A1A1A1',
-    fontSize: 14,
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: '#121212',
-    padding: 24,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    borderWidth: 1,
-    borderColor: '#222',
-    gap: 16,
-  },
-  modalTitle: {
-    color: '#FFFFFF',
-    fontSize: 22,
-    fontWeight: 'bold',
-  },
-  amountInput: {
-    backgroundColor: '#1A1A1A',
-    borderWidth: 1,
-    borderColor: '#333',
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    color: '#FFFFFF',
-    fontSize: 16,
-  },
-  modalButtons: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  modalBtn: {
-    flex: 1,
-    paddingVertical: 16,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-});
+function makeStyles(isSmallScreen: boolean) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#0A0A0A',
+      padding: isSmallScreen ? 16 : 24,
+      paddingTop: 60,
+    },
+    headerTitle: {
+      fontSize: isSmallScreen ? 22 : 28,
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+      marginBottom: 24,
+    },
+    statsContainer: {
+      flexDirection: 'row',
+      backgroundColor: '#121212',
+      borderRadius: 16,
+      padding: isSmallScreen ? 14 : 20,
+      marginBottom: 32,
+      borderWidth: 1,
+      borderColor: '#222',
+    },
+    statBox: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    statDivider: {
+      width: 1,
+      backgroundColor: '#333',
+      marginHorizontal: 16,
+    },
+    statLabel: {
+      color: '#A1A1A1',
+      marginBottom: 8,
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    statValue: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 18 : 24,
+      fontWeight: 'bold',
+    },
+    sectionTitle: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 16 : 18,
+      fontWeight: 'bold',
+      marginBottom: 16,
+    },
+    assetsList: {
+      gap: 16,
+    },
+    assetCard: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: '#121212',
+      padding: isSmallScreen ? 12 : 16,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: '#222',
+      minHeight: 72,
+    },
+    assetLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: isSmallScreen ? 10 : 16,
+      flexShrink: 1,
+    },
+    iconContainer: {
+      width: isSmallScreen ? 40 : 48,
+      height: isSmallScreen ? 40 : 48,
+      backgroundColor: '#1A1A1A',
+      borderRadius: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: '#333',
+    },
+    assetName: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 14 : 16,
+      fontWeight: '600',
+      marginBottom: 4,
+    },
+    assetSymbol: {
+      color: '#666',
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    assetRight: {
+      alignItems: 'flex-end',
+      flexShrink: 0,
+    },
+    apyBadge: {
+      backgroundColor: 'rgba(168, 85, 247, 0.15)',
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 8,
+      marginBottom: 4,
+    },
+    apyText: {
+      color: '#A855F7',
+      fontWeight: 'bold',
+      fontSize: 12,
+    },
+    walletBalance: {
+      color: '#A1A1A1',
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      justifyContent: 'flex-end',
+    },
+    modalContent: {
+      backgroundColor: '#121212',
+      padding: isSmallScreen ? 16 : 24,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderWidth: 1,
+      borderColor: '#222',
+      gap: 16,
+    },
+    modalTitle: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 18 : 22,
+      fontWeight: 'bold',
+    },
+    amountInput: {
+      backgroundColor: '#1A1A1A',
+      borderWidth: 1,
+      borderColor: '#333',
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      color: '#FFFFFF',
+      fontSize: 16,
+    },
+    modalButtons: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    modalBtn: {
+      flex: 1,
+      paddingVertical: isSmallScreen ? 14 : 16,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 48,
+    },
+    buttonText: {
+      color: '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: isSmallScreen ? 14 : 16,
+    },
+  });
+}
diff --git a/veilend-mobile/src/screens/RepayScreen.tsx b/veilend-mobile/src/screens/RepayScreen.tsx
index bc7359f..936ab68 100644
--- a/veilend-mobile/src/screens/RepayScreen.tsx
+++ b/veilend-mobile/src/screens/RepayScreen.tsx
@@ -5,8 +5,12 @@ import { MOCK_POSITIONS } from '../data/mockData';
 import { useStore } from '../store/store';
 import { ActivityIndicator } from 'react-native';
 import Toast from '../utils/toast';
+import { useResponsive } from '../hooks/useResponsive';
 
 export default function RepayScreen() {
+  const { isSmallScreen } = useResponsive();
+  const styles = makeStyles(isSmallScreen);
+
   const activeLoans = MOCK_POSITIONS.filter(p => p.type === 'Borrowed');
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedLoan, setSelectedLoan] = useState<any>(null);
@@ -44,30 +48,51 @@ export default function RepayScreen() {
               <View style={styles.cardHeader}>
                 <View style={styles.assetInfo}>
                    <View style={styles.iconContainer}>
-                      <Ionicons name="cash-outline" size={24} color="#A855F7" />
+                      <Ionicons name="cash-outline" size={24} color="#A855F7" importantForAccessibility="no" />
                    </View>
                    <View>
                      <Text style={styles.assetName}>{loan.asset}</Text>
                      <Text style={styles.loanLabel}>Debt</Text>
                    </View>
                 </View>
-                <View style={styles.healthBadge}>
-                  <Text style={styles.healthText}>Health: {loan.healthFactor}</Text>
+                <View
+                  style={styles.healthBadge}
+                  accessible={true}
+                  accessibilityLabel={`Health factor: ${loan.healthFactor}`}
+                >
+                  <Text style={styles.healthText} importantForAccessibility="no">
+                    Health: {loan.healthFactor}
+                  </Text>
                 </View>
               </View>
 
               <View style={styles.loanDetails}>
-                <View style={styles.detailRow}>
-                  <Text style={styles.detailLabel}>Amount Owed</Text>
-                  <Text style={styles.detailValue}>{loan.amount} {loan.asset}</Text>
+                <View
+                  style={styles.detailRow}
+                  accessible={true}
+                  accessibilityRole="text"
+                  accessibilityLabel={`Amount owed: ${loan.amount} ${loan.asset}`}
+                >
+                  <Text style={styles.detailLabel} importantForAccessibility="no">Amount Owed</Text>
+                  <Text style={styles.detailValue} importantForAccessibility="no">{loan.amount} {loan.asset}</Text>
                 </View>
-                <View style={styles.detailRow}>
-                  <Text style={styles.detailLabel}>Value</Text>
-                  <Text style={styles.detailValue}>${loan.value.toLocaleString()}</Text>
+                <View
+                  style={styles.detailRow}
+                  accessible={true}
+                  accessibilityRole="text"
+                  accessibilityLabel={`Value: $${loan.value.toLocaleString()}`}
+                >
+                  <Text style={styles.detailLabel} importantForAccessibility="no">Value</Text>
+                  <Text style={styles.detailValue} importantForAccessibility="no">${loan.value.toLocaleString()}</Text>
                 </View>
-                <View style={styles.detailRow}>
-                  <Text style={styles.detailLabel}>Interest Accrued</Text>
-                  <Text style={styles.detailValue}>$12.50</Text>
+                <View
+                  style={styles.detailRow}
+                  accessible={true}
+                  accessibilityRole="text"
+                  accessibilityLabel="Interest accrued: $12.50"
+                >
+                  <Text style={styles.detailLabel} importantForAccessibility="no">Interest Accrued</Text>
+                  <Text style={styles.detailValue} importantForAccessibility="no">$12.50</Text>
                 </View>
               </View>
 
@@ -81,6 +106,9 @@ export default function RepayScreen() {
                   }
                   openRepayModal(loan);
                 }}
+                accessibilityRole="button"
+                accessibilityLabel={`Repay ${loan.amount} ${loan.asset}`}
+                accessibilityHint="Double tap to open repayment amount dialog"
               >
                 <Text style={styles.buttonText}>Repay Now</Text>
               </TouchableOpacity>
@@ -88,194 +116,225 @@ export default function RepayScreen() {
           ))}
         </View>
       ) : (
-        <View style={styles.emptyState}>
-          <Ionicons name="checkmark-circle-outline" size={64} color="#333" />
-          <Text style={styles.emptyText}>No active loans</Text>
-          <Text style={styles.emptySubtext}>You don't have any borrowed assets to repay.</Text>
+        <View
+          style={styles.emptyState}
+          accessible={true}
+          accessibilityRole="text"
+          accessibilityLabel="No active loans. You don't have any borrowed assets to repay."
+        >
+          <Ionicons name="checkmark-circle-outline" size={64} color="#333" importantForAccessibility="no" />
+          <Text style={styles.emptyText} importantForAccessibility="no">No active loans</Text>
+          <Text style={styles.emptySubtext} importantForAccessibility="no">
+            You don't have any borrowed assets to repay.
+          </Text>
         </View>
       )}
     </ScrollView>
+
       {/* Amount Modal */}
-        <Modal
-          visible={modalVisible}
-          transparent
-          animationType="slide"
-          onRequestClose={() => setModalVisible(false)}
-        >
-          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
-            <View style={styles.modalContent}>
-              <Text style={styles.modalTitle}>Repay {selectedLoan?.asset}</Text>
-              <TextInput
-                value={amount}
-                onChangeText={setAmount}
-                keyboardType="numeric"
-                style={styles.amountInput}
-                placeholder="Amount"
-                placeholderTextColor="#888"
-              />
-              <View style={styles.modalButtons}>
-                <TouchableOpacity onPress={() => setModalVisible(false)} style={[styles.modalBtn, { backgroundColor: '#333' }]}>
-                  <Text style={styles.buttonText}>Cancel</Text>
-                </TouchableOpacity>
-                <TouchableOpacity onPress={confirmRepay} style={[styles.modalBtn, { backgroundColor: '#A855F7' }]} disabled={useStore.getState().lendingLoading}>
-                  {useStore.getState().lendingLoading ? <ActivityIndicator color="#fff"/> : <Text style={styles.buttonText}>Confirm</Text>}
-                </TouchableOpacity>
-              </View>
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+        accessibilityViewIsModal={true}
+      >
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Repay {selectedLoan?.asset}</Text>
+            <TextInput
+              value={amount}
+              onChangeText={setAmount}
+              keyboardType="numeric"
+              style={styles.amountInput}
+              placeholder="Amount"
+              placeholderTextColor="#888"
+              accessibilityLabel={`Repay amount in ${selectedLoan?.asset ?? 'asset'}`}
+              accessibilityHint="Enter the amount you want to repay"
+            />
+            <View style={styles.modalButtons}>
+              <TouchableOpacity
+                onPress={() => setModalVisible(false)}
+                style={[styles.modalBtn, { backgroundColor: '#333' }]}
+                accessibilityRole="button"
+                accessibilityLabel="Cancel repayment"
+              >
+                <Text style={styles.buttonText}>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={confirmRepay}
+                style={[styles.modalBtn, { backgroundColor: '#A855F7' }]}
+                disabled={useStore.getState().lendingLoading}
+                accessibilityRole="button"
+                accessibilityLabel={`Confirm repayment of ${amount} ${selectedLoan?.asset ?? ''}`}
+                accessibilityState={{ disabled: useStore.getState().lendingLoading }}
+              >
+                {useStore.getState().lendingLoading
+                  ? <ActivityIndicator color="#fff"/>
+                  : <Text style={styles.buttonText}>Confirm</Text>}
+              </TouchableOpacity>
             </View>
-          </KeyboardAvoidingView>
-          </Modal>
-          </>
-        );
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0A0A0A',
-    padding: 24,
-    paddingTop: 60,
-  },
-  headerTitle: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-    marginBottom: 24,
-  },
-  loansList: {
-    gap: 16,
-  },
-  loanCard: {
-    backgroundColor: '#121212',
-    borderRadius: 24,
-    padding: 20,
-    borderWidth: 1,
-    borderColor: '#222',
-  },
-  cardHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 24,
-  },
-  assetInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    backgroundColor: '#1A1A1A',
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#333',
-  },
-  assetName: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  loanLabel: {
-    color: '#666',
-    fontSize: 12,
-  },
-  healthBadge: {
-    backgroundColor: 'rgba(74, 222, 128, 0.1)',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: 'rgba(74, 222, 128, 0.2)',
-  },
-  healthText: {
-    color: '#4ade80',
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-  loanDetails: {
-    gap: 12,
-    marginBottom: 24,
-  },
-  detailRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  detailLabel: {
-    color: '#A1A1A1',
-    fontSize: 14,
-  },
-  detailValue: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  repayButton: {
-    backgroundColor: '#A855F7',
-    paddingVertical: 16,
-    borderRadius: 16,
-    alignItems: 'center',
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  emptyState: {
-    alignItems: 'center',
-    marginTop: 60,
-  },
-  emptyText: {
-    color: '#FFFFFF',
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginTop: 16,
-  },
-  emptySubtext: {
-    color: '#666',
-    fontSize: 14,
-    marginTop: 8,
-    textAlign: 'center',
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: '#121212',
-    padding: 24,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    borderWidth: 1,
-    borderColor: '#222',
-    gap: 16,
-  },
-  modalTitle: {
-    color: '#FFFFFF',
-    fontSize: 22,
-    fontWeight: 'bold',
-  },
-  amountInput: {
-    backgroundColor: '#1A1A1A',
-    borderWidth: 1,
-    borderColor: '#333',
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    color: '#FFFFFF',
-    fontSize: 16,
-  },
-  modalButtons: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  modalBtn: {
-    flex: 1,
-    paddingVertical: 16,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+function makeStyles(isSmallScreen: boolean) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#0A0A0A',
+      padding: isSmallScreen ? 16 : 24,
+      paddingTop: 60,
+    },
+    headerTitle: {
+      fontSize: isSmallScreen ? 22 : 28,
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+      marginBottom: 24,
+    },
+    loansList: {
+      gap: 16,
+    },
+    loanCard: {
+      backgroundColor: '#121212',
+      borderRadius: 24,
+      padding: isSmallScreen ? 14 : 20,
+      borderWidth: 1,
+      borderColor: '#222',
+    },
+    cardHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 24,
+      flexWrap: 'wrap',
+      gap: 8,
+    },
+    assetInfo: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    iconContainer: {
+      width: isSmallScreen ? 40 : 48,
+      height: isSmallScreen ? 40 : 48,
+      backgroundColor: '#1A1A1A',
+      borderRadius: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: '#333',
+    },
+    assetName: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 15 : 18,
+      fontWeight: 'bold',
+    },
+    loanLabel: {
+      color: '#666',
+      fontSize: 12,
+    },
+    healthBadge: {
+      backgroundColor: 'rgba(74, 222, 128, 0.1)',
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 20,
+      borderWidth: 1,
+      borderColor: 'rgba(74, 222, 128, 0.2)',
+    },
+    healthText: {
+      color: '#4ade80',
+      fontSize: 12,
+      fontWeight: 'bold',
+    },
+    loanDetails: {
+      gap: 12,
+      marginBottom: 24,
+    },
+    detailRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    detailLabel: {
+      color: '#A1A1A1',
+      fontSize: isSmallScreen ? 12 : 14,
+    },
+    detailValue: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 12 : 14,
+      fontWeight: '600',
+    },
+    repayButton: {
+      backgroundColor: '#A855F7',
+      paddingVertical: isSmallScreen ? 14 : 16,
+      borderRadius: 16,
+      alignItems: 'center',
+      minHeight: 48,
+    },
+    buttonText: {
+      color: '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: isSmallScreen ? 14 : 16,
+    },
+    emptyState: {
+      alignItems: 'center',
+      marginTop: 60,
+    },
+    emptyText: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 17 : 20,
+      fontWeight: 'bold',
+      marginTop: 16,
+    },
+    emptySubtext: {
+      color: '#666',
+      fontSize: isSmallScreen ? 12 : 14,
+      marginTop: 8,
+      textAlign: 'center',
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      justifyContent: 'flex-end',
+    },
+    modalContent: {
+      backgroundColor: '#121212',
+      padding: isSmallScreen ? 16 : 24,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderWidth: 1,
+      borderColor: '#222',
+      gap: 16,
+    },
+    modalTitle: {
+      color: '#FFFFFF',
+      fontSize: isSmallScreen ? 18 : 22,
+      fontWeight: 'bold',
+    },
+    amountInput: {
+      backgroundColor: '#1A1A1A',
+      borderWidth: 1,
+      borderColor: '#333',
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      color: '#FFFFFF',
+      fontSize: 16,
+    },
+    modalButtons: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    modalBtn: {
+      flex: 1,
+      paddingVertical: isSmallScreen ? 14 : 16,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 48,
+    },
+  });
+}