diff --git a/.eslintrc.js b/.eslintrc.js
index e0c8250..ccd54fb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -46,7 +46,6 @@ module.exports = {
     ],
     "@typescript-eslint/no-non-null-assertion": "off",
     "react/no-unescaped-entities": "off",
-    "no-console": "warn",
   },
   globals: {
     fetch: "readonly",
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index d1e823d..9253b52 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,7 +1,9 @@
 ## Summary of the problem
+
 <!-- Why these changes are being made? What problem does it solve? Link any related issues to provide more details. -->
 
 ## Describe your changes
+
 <!-- Explain your thought process to the solution and provide a quick summary of the changes. -->
 
 ## Checklist
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1b2cd7c..c219ede 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,11 +1,11 @@
 name: CI
 on:
   push:
-      branches:
-        - '**'
+    branches:
+      - "**"
   pull_request:
     branches:
-      - '**'
+      - "**"
 jobs:
   eslint:
     name: ESLint
diff --git a/App.tsx b/App.tsx
index aead0f3..27d4720 100644
--- a/App.tsx
+++ b/App.tsx
@@ -53,20 +53,20 @@ const linking: LinkingOptions<TabParamList> = {
 
 export default function App() {
   const [fontsLoaded] = useFonts({
-    'JetBrainsMono-Regular': require('./assets/fonts/JetBrainsMono-Regular.ttf'),
-    'JetBrainsMono-Bold': require('./assets/fonts/JetBrainsMono-Bold.ttf'),
-    'Consolas-Bold': require('./assets/fonts/CONSOLAB.ttf'),
-    'Damion': require('./assets/fonts/Damion-Regular.ttf'),
+    "JetBrainsMono-Regular": require("./assets/fonts/JetBrainsMono-Regular.ttf"),
+    "JetBrainsMono-Bold": require("./assets/fonts/JetBrainsMono-Bold.ttf"),
+    "Consolas-Bold": require("./assets/fonts/CONSOLAB.ttf"),
+    Damion: require("./assets/fonts/Damion-Regular.ttf"),
   });
 
   const [isLoading, setIsLoading] = useState(true);
   const [token, setToken] = useState<string | null>(null);
   const hcb = useClient(token);
   const scheme = useColorScheme();
-  useStripeTerminal()
-  
+  useStripeTerminal();
+
   const fetcher = useCallback(
-    async (url: string, options: any) => {
+    async (url: string, options: RequestInit) => {
       try {
         return await hcb(url, options).json();
       } catch (error) {
@@ -114,7 +114,8 @@ export default function App() {
 
       <SWRConfig
         value={{
-          provider: asyncStorageProvider, fetcher
+          provider: asyncStorageProvider,
+          fetcher,
         }}
       >
         <SafeAreaProvider>
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1dc6db9..1debcd1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,5 @@
 # Contributing
+
 Thank you for choosing to contribute to HCB Mobile! Please follow the guidelines before on how to contribute.
 
 - Use the PR template
diff --git a/README.md b/README.md
index 3806275..c2efaa9 100644
--- a/README.md
+++ b/README.md
@@ -58,4 +58,5 @@ EXPO_PUBLIC_CLIENT_ID=<uid field from the Doorkeeper app>
    - Bonus task: painfully watch Gradle attempt to work
 
 ## Contributing
-Please see [CONTRIBUTING.md](CONTRIBUTING.md).
\ No newline at end of file
+
+Please see [CONTRIBUTING.md](CONTRIBUTING.md).
diff --git a/app.config.js b/app.config.js
index d9272e7..0acfdac 100644
--- a/app.config.js
+++ b/app.config.js
@@ -65,24 +65,24 @@ export default {
       [
         "@stripe/stripe-terminal-react-native",
         {
-          "bluetoothBackgroundMode": true,
-          "locationWhenInUsePermission": "Location access is required in order to accept payments.",
-          "bluetoothPeripheralPermission": "Bluetooth access is required in order to connect to supported bluetooth card readers.",
-          "bluetoothAlwaysUsagePermission": "This app uses Bluetooth to connect to supported card readers."
-        }
+          bluetoothBackgroundMode: true,
+          locationWhenInUsePermission:
+            "Location access is required in order to accept payments.",
+          bluetoothPeripheralPermission:
+            "Bluetooth access is required in order to connect to supported bluetooth card readers.",
+          bluetoothAlwaysUsagePermission:
+            "This app uses Bluetooth to connect to supported card readers.",
+        },
       ],
       [
         "expo-build-properties",
         {
           android: {
-            minSdkVersion: 26
-          }
+            minSdkVersion: 26,
+          },
         },
       ],
-      [
-        "expo-alternate-app-icons",
-        appIcons
-      ]
+      ["expo-alternate-app-icons", appIcons],
     ],
   },
-};
\ No newline at end of file
+};
diff --git a/env.d.ts b/env.d.ts
index db1b78f..ce808f7 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,7 +1,7 @@
 declare namespace NodeJS {
-    interface ProcessEnv {
-        EXPO_PUBLIC_API_BASE: string;
-        EXPO_PUBLIC_CLIENT_ID: string;
-        EXPO_PUBLIC_STRIPE_API_KEY: string;
-    }
-}
\ No newline at end of file
+  interface ProcessEnv {
+    EXPO_PUBLIC_API_BASE: string;
+    EXPO_PUBLIC_CLIENT_ID: string;
+    EXPO_PUBLIC_STRIPE_API_KEY: string;
+  }
+}
diff --git a/src/Navigator.tsx b/src/Navigator.tsx
index 24fd1be..ed3b4c4 100644
--- a/src/Navigator.tsx
+++ b/src/Navigator.tsx
@@ -22,6 +22,8 @@ import Home from "./pages/index";
 import InvitationPage from "./pages/Invitation";
 import OrganizationPage from "./pages/organization";
 import AccountNumberPage from "./pages/organization/AccountNumber";
+import OrganizationDonationPage from "./pages/organization/Donation";
+import ProcessDonationPage from "./pages/organization/ProcessDonation";
 import OrganizationSettingsPage from "./pages/organization/Settings";
 import TransferPage from "./pages/organization/transfer";
 import ReceiptsPage from "./pages/Receipts";
@@ -29,8 +31,6 @@ import RenameTransactionPage from "./pages/RenameTransaction";
 import SettingsPage from "./pages/Settings";
 import TransactionPage from "./pages/Transaction";
 import { palette } from "./theme";
-import OrganizationDonationPage from "./pages/organization/Donation";
-import ProcessDonationPage from "./pages/organization/ProcessDonation";
 
 const Stack = createNativeStackNavigator<StackParamList>();
 const CardsStack = createNativeStackNavigator<CardsStackParamList>();
@@ -202,7 +202,7 @@ export default function Navigator() {
             <CardsStack.Screen
               name="Card"
               component={CardPage}
-              options={({ route }) => ({
+              options={() => ({
                 title: "Card",
               })}
             />
diff --git a/src/cacheProvider.ts b/src/cacheProvider.ts
index fd6f456..be4c7e3 100644
--- a/src/cacheProvider.ts
+++ b/src/cacheProvider.ts
@@ -1,34 +1,34 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { AppState } from 'react-native';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AppState } from "react-native";
 
 export default function asyncStorageProvider() {
   const map = new Map();
   // Initialize the map with data from AsyncStorage
   (async () => {
     try {
-      const appCache = await AsyncStorage.getItem('app-cache');
+      const appCache = await AsyncStorage.getItem("app-cache");
       if (appCache) {
-        JSON.parse(appCache).forEach(([key, value]) => {
+        JSON.parse(appCache).forEach(([key, value]: [string, unknown]) => {
           map.set(key, value);
         });
       }
     } catch (error) {
-      console.error('Error initializing asyncStorageProvider:', error);
+      console.error("Error initializing asyncStorageProvider:", error);
     }
   })();
   // Save the map to AsyncStorage before the app goes to the background
   const saveAppCache = async () => {
     try {
       const appCache = JSON.stringify(Array.from(map.entries()));
-      await AsyncStorage.setItem('app-cache', appCache);
+      await AsyncStorage.setItem("app-cache", appCache);
     } catch (error) {
-      console.error('Error saving asyncStorageProvider cache:', error);
+      console.error("Error saving asyncStorageProvider cache:", error);
     }
   };
-  AppState.addEventListener('change', (nextAppState) => {
-    if (nextAppState === 'background' || nextAppState === 'inactive') {
+  AppState.addEventListener("change", (nextAppState) => {
+    if (nextAppState === "background" || nextAppState === "inactive") {
       saveAppCache();
     }
   });
   return map;
-}
\ No newline at end of file
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9a256fc..fda1af8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -46,11 +46,17 @@ export default function Button(
 ) {
   return (
     <Pressable
-      style={{ ...styles.button, ...(props.style as object), ...(props.disabled ? {
-        backgroundColor: palette.muted,
-        borderColor: palette.muted,
-        opacity: 0.6
-      } : {}) }}
+      style={{
+        ...styles.button,
+        ...(props.style as object),
+        ...(props.disabled
+          ? {
+              backgroundColor: palette.muted,
+              borderColor: palette.muted,
+              opacity: 0.6,
+            }
+          : {}),
+      }}
       onPress={() => props.onPress && props.onPress()}
       disabled={props.loading || props.disabled}
     >
diff --git a/src/components/PaymentCard.tsx b/src/components/PaymentCard.tsx
index 7ff2af5..531b2dc 100644
--- a/src/components/PaymentCard.tsx
+++ b/src/components/PaymentCard.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from "@react-navigation/native";
 import Constants from "expo-constants";
+// @ts-expect-error will be removed later
 import * as Geopattern from "geopattern";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -38,12 +39,13 @@ export default function PaymentCard({
 }: ViewProps & {
   card: Card;
   details?: CardDetails;
-  onCardLoad?: (cardId: string, dimensions: { width: number; height: number }) => void;
+  onCardLoad?: (
+    cardId: string,
+    dimensions: { width: number; height: number },
+  ) => void;
 }) {
   const { colors: themeColors, dark } = useTheme();
 
-  console.log("PaymentCard", card);
-
   const patternForMeasurements = Geopattern.generate(card.id, {
     scalePattern: 1.1,
     grayscale: card.status != "active",
@@ -51,8 +53,7 @@ export default function PaymentCard({
 
   const pattern = Geopattern.generate(card.id, {
     scalePattern: 1.1,
-    grayscale:
-      card.status == "active" ? false : true,
+    grayscale: card.status == "active" ? false : true,
   }).toDataUri();
 
   const extractDimensions = (svg: string) => {
@@ -74,12 +75,11 @@ export default function PaymentCard({
     card.type = "virtual";
   }
 
-
   useEffect(() => {
     if (onCardLoad) {
       onCardLoad(card.id, { width: svgWidth, height: svgHeight });
     }
-  }, []);
+  }, [card.id, onCardLoad, svgHeight, svgWidth]);
 
   useEffect(() => {
     const subscription = AppState.addEventListener(
@@ -122,11 +122,14 @@ export default function PaymentCard({
           }}
         >
           {Constants.platform?.android ? (
-            <SvgXml xml={patternForMeasurements} width={svgWidth} height={svgHeight} />
+            <SvgXml
+              xml={patternForMeasurements}
+              width={svgWidth}
+              height={svgHeight}
+            />
           ) : (
             <SvgUri uri={pattern} width={svgWidth} height={svgHeight} />
-          )
-          }
+          )}
         </View>
       )}
 
@@ -158,7 +161,7 @@ export default function PaymentCard({
         <View>
           <Text
             style={{
-              color: 'white',
+              color: "white",
               fontFamily: "Consolas-Bold",
               fontSize: 18,
               width: 180,
diff --git a/src/components/Stripe.tsx b/src/components/Stripe.tsx
index 98b440a..d11c9c8 100644
--- a/src/components/Stripe.tsx
+++ b/src/components/Stripe.tsx
@@ -1,52 +1,50 @@
-import { useEffect, useState } from 'react'
+import {
+  Reader,
+  useStripeTerminal,
+} from "@stripe/stripe-terminal-react-native";
+import { useEffect, useState } from "react";
 import {
   Alert,
-  ImageBackground,
   Linking,
   SafeAreaView,
   Text,
   TextInput,
   View,
-} from 'react-native'
-import { useStripeTerminal } from '@stripe/stripe-terminal-react-native'
-
-
+} from "react-native";
 
 import Button from "../components/Button";
-import { useLocation } from '../lib/useLocation';
+import { useLocation } from "../lib/useLocation";
 
 export default function Stripe() {
-  const { initialize, connectLocalMobileReader } = useStripeTerminal();
+  const { initialize } = useStripeTerminal();
   useEffect(() => {
     initialize();
   }, [initialize]);
-  return (
-    <PageStripe />
-  );
+  return <PageStripe />;
 }
 
-
 interface PaymentIntent {
-  id: string
-  amount: number
-  created: string
-  currency: string
-  sdkUuid: string
-  paymentMethodId: string
+  id: string;
+  amount: number;
+  created: string;
+  currency: string;
+  sdkUuid: string;
+  paymentMethodId: string;
 }
 
 export function PageStripe() {
-  const { location, accessDenied } = useLocation()
+  const { accessDenied } = useLocation();
+  // const { location, accessDenied } = useLocation();
 
-  const [value, setValue] = useState(0)
-  const [reader, setReader] = useState()
-  const [payment, setPayment] = useState<PaymentIntent>()
-  const [loadingCreatePayment, setLoadingCreatePayment] = useState(false)
-  const [loadingCollectPayment, setLoadingCollectPayment] = useState(false)
-  const [loadingConfirmPayment, setLoadingConfirmPayment] = useState(false)
-  const [loadingConnectingReader, setLoadingConnectingReader] = useState(false)
+  const [value, setValue] = useState(0);
+  const [reader, setReader] = useState<Reader.Type | undefined>(undefined);
+  const [payment, setPayment] = useState<PaymentIntent>();
+  const [loadingCreatePayment, setLoadingCreatePayment] = useState(false);
+  const [loadingCollectPayment, setLoadingCollectPayment] = useState(false);
+  const [loadingConfirmPayment, setLoadingConfirmPayment] = useState(false);
+  const [loadingConnectingReader, setLoadingConnectingReader] = useState(false);
 
-  const locationIdStripeMock = 'tml_FrcFgksbiIZZ2V'
+  const locationIdStripeMock = "tml_FrcFgksbiIZZ2V";
 
   const {
     discoverReaders,
@@ -56,142 +54,140 @@ export function PageStripe() {
     confirmPaymentIntent,
     connectedReader,
   } = useStripeTerminal({
-    onUpdateDiscoveredReaders: (readers: any) => {
-      setReader(readers[0])
+    onUpdateDiscoveredReaders: (readers: Reader.Type[]) => {
+      setReader(readers[0]);
     },
-  })
+  });
 
   useEffect(() => {
     discoverReaders({
-      discoveryMethod: 'localMobile',
+      discoveryMethod: "localMobile",
       simulated: false,
-    })
-  }, [discoverReaders])
+    });
+  }, [discoverReaders]);
 
-  async function connectReader(selectedReader: any) {
-    setLoadingConnectingReader(true)
+  async function connectReader(selectedReader: Reader.Type) {
+    setLoadingConnectingReader(true);
     try {
-      const { reader, error } = await connectLocalMobileReader({
+      const { error } = await connectLocalMobileReader({
         reader: selectedReader,
         locationId: locationIdStripeMock,
-      })
+      });
 
       if (error) {
-        console.log('connectLocalMobileReader error:', error)
-        return
+        console.log("connectLocalMobileReader error:", error);
+        return;
       }
 
-      Alert.alert('Reader connected successfully')
-
-      console.log('Reader connected successfully', reader)
+      Alert.alert("Reader connected successfully");
     } catch (error) {
-      console.log(error)
+      console.log(error);
     } finally {
-      setLoadingConnectingReader(false)
+      setLoadingConnectingReader(false);
     }
   }
 
   async function paymentIntent() {
-    setLoadingCreatePayment(true)
+    setLoadingCreatePayment(true);
     try {
       const { error, paymentIntent } = await createPaymentIntent({
         amount: Number((value * 100).toFixed()),
-        currency: 'usd',
-        paymentMethodTypes: ['card_present'],
-        offlineBehavior: 'prefer_online',
-      })
+        currency: "usd",
+        paymentMethodTypes: ["card_present"],
+        offlineBehavior: "prefer_online",
+      });
 
       if (error) {
-        console.log('Error creating payment intent', error)
-        return
+        console.log("Error creating payment intent", error);
+        return;
       }
 
-      setPayment(paymentIntent)
+      setPayment(paymentIntent);
 
-      Alert.alert('Payment intent created successfully')
+      Alert.alert("Payment intent created successfully");
     } catch (error) {
-      console.log(error)
+      console.log(error);
     } finally {
-      setLoadingCreatePayment(false)
+      setLoadingCreatePayment(false);
     }
   }
 
   async function collectPayment() {
-    setLoadingCollectPayment(true)
+    setLoadingCollectPayment(true);
     try {
-      const { error, paymentIntent } = await collectPaymentMethod({
+      const { error } = await collectPaymentMethod({
+        // @ts-expect-error works without extra PaymentIntent props
         paymentIntent: payment,
-      } as any)
+      });
 
       if (error) {
-        console.log('Error collecting payment', error)
-        Alert.alert('Error collecting payment', error.message)
-        return
+        console.log("Error collecting payment", error);
+        Alert.alert("Error collecting payment", error.message);
+        return;
       }
 
-      Alert.alert('Payment successfully collected', '', [
+      Alert.alert("Payment successfully collected", "", [
         {
-          text: 'Ok',
+          text: "Ok",
           onPress: async () => {
-            console.log(paymentIntent);
-            await confirmPayment()
+            await confirmPayment();
           },
         },
-      ])
+      ]);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     } finally {
-      setLoadingCollectPayment(false)
+      setLoadingCollectPayment(false);
     }
   }
 
   async function confirmPayment() {
-    setLoadingConfirmPayment(true)
-    console.log("foo", { payment })
+    setLoadingConfirmPayment(true);
+    console.log("foo", { payment });
     try {
-      const { error, paymentIntent } = await confirmPaymentIntent({
-        paymentIntent: payment as any
-      })
+      const { error } = await confirmPaymentIntent({
+        // @ts-expect-error works without extra PaymentIntent props
+        paymentIntent: payment,
+      });
 
       if (error) {
-        console.log('Error confirm payment', error)
-        return
+        console.log("Error confirm payment", error);
+        return;
       }
 
-      Alert.alert('Payment successfully confirmed!', 'Congratulations')
-      console.log('Payment confirmed', paymentIntent)
+      Alert.alert("Payment successfully confirmed!", "Congratulations");
     } catch (error) {
-      console.log(error)
+      console.log(error);
     } finally {
-      setLoadingConfirmPayment(false)
+      setLoadingConfirmPayment(false);
     }
   }
 
   async function handleRequestLocation() {
-    await Linking.openSettings()
+    await Linking.openSettings();
   }
 
   useEffect(() => {
     if (accessDenied) {
       Alert.alert(
-        'Access to location',
-        'To use the app, you need to allow the use of your device location.',
+        "Access to location",
+        "To use the app, you need to allow the use of your device location.",
         [
           {
-            text: 'Activate',
+            text: "Activate",
             onPress: handleRequestLocation,
           },
-        ]
-      )
+        ],
+      );
     }
-  }, [accessDenied])
+  }, [accessDenied]);
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View
         style={{
-          justifyContent: 'space-between',
-          alignItems: 'center',
+          justifyContent: "space-between",
+          alignItems: "center",
           flex: 1,
         }}
       >
@@ -199,8 +195,8 @@ export function PageStripe() {
           <Text
             style={{
               fontSize: 20,
-              fontWeight: 'bold',
-              textAlign: 'center',
+              fontWeight: "bold",
+              textAlign: "center",
             }}
           >
             Stripe
@@ -211,15 +207,15 @@ export function PageStripe() {
             <Text
               style={{
                 fontSize: 18,
-                fontWeight: 'bold',
-                color: '#635AFF',
+                fontWeight: "bold",
+                color: "#635AFF",
               }}
             >
               Amount to be charged
             </Text>
             <TextInput
               style={{
-                borderColor: '#635AFF',
+                borderColor: "#635AFF",
                 borderWidth: 1,
                 borderRadius: 8,
                 padding: 15,
@@ -231,27 +227,32 @@ export function PageStripe() {
           </View>
 
           <Button
-            onPress={() => connectReader(reader)}
+            onPress={() => {
+              if (reader) {
+                connectReader(reader);
+              } else {
+                Alert.alert("No reader available");
+              }
+            }}
             loading={loadingConnectingReader}
-          >Connecting with the reader{'disabled' + !!connectedReader}</Button>
+          >
+            Connecting with the reader{"disabled" + !!connectedReader}
+          </Button>
 
-          <Button
-            onPress={paymentIntent}
-            loading={loadingCreatePayment}
-          >Create payment intent{'disabled' + !connectedReader}</Button>
+          <Button onPress={paymentIntent} loading={loadingCreatePayment}>
+            Create payment intent{"disabled" + !connectedReader}
+          </Button>
 
-          <Button
-            onPress={collectPayment}
-            loading={loadingCollectPayment}
-          >Collect payment{'disabled' + !connectedReader}</Button>
+          <Button onPress={collectPayment} loading={loadingCollectPayment}>
+            Collect payment{"disabled" + !connectedReader}
+          </Button>
 
-          <Button
-            onPress={confirmPayment as any}
-            loading={loadingConfirmPayment}
-          >Confirm payment</Button>
+          <Button onPress={confirmPayment} loading={loadingConfirmPayment}>
+            Confirm payment
+          </Button>
         </View>
         <View></View>
       </View>
     </SafeAreaView>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/Transaction.tsx b/src/components/Transaction.tsx
index 2fe9d02..f72b7ad 100644
--- a/src/components/Transaction.tsx
+++ b/src/components/Transaction.tsx
@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
-import { faPaypal } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faPaypal } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+import Icon from "@hackclub/hackclub-icons-rn";
 import { useTheme } from "@react-navigation/native";
 import { LinearGradient } from "expo-linear-gradient";
-import Icon from "@hackclub/hackclub-icons-rn";
 import { memo } from "react";
 import { View, Text, ViewProps, StyleSheet } from "react-native";
 import { match } from "ts-pattern";
@@ -18,10 +18,7 @@ import { renderMoney } from "../util";
 
 import UserAvatar from "./UserAvatar";
 
-function transactionIcon({
-  code,
-  ...transaction
-}: TransactionWithoutId) {
+function transactionIcon({ code, ...transaction }: TransactionWithoutId) {
   switch (code) {
     case TransactionType.Donation:
     case TransactionType.PartnerDonation:
@@ -87,11 +84,13 @@ function TransactionIcon({
     );
   } else {
     if (transactionIcon(transaction) == "paypal") {
-      return <FontAwesomeIcon color={palette.muted} icon={faPaypal} size={20} />
-    }
-    else {
+      return (
+        <FontAwesomeIcon color={palette.muted} icon={faPaypal} size={20} />
+      );
+    } else {
       return (
         <Icon
+          // @ts-expect-error it is checked above
           glyph={transactionIcon(transaction)}
           color={
             transaction.appearance == "hackathon_grant"
@@ -107,7 +106,7 @@ function TransactionIcon({
 
 function Transaction({
   transaction,
-  orgId,
+  // orgId,
   top = false,
   bottom = false,
   hideAvatar,
@@ -224,4 +223,4 @@ function Transaction({
   );
 }
 
-export default memo(Transaction);
\ No newline at end of file
+export default memo(Transaction);
diff --git a/src/components/organizations/PlaygroundBanner.tsx b/src/components/organizations/PlaygroundBanner.tsx
index 94e1343..721c39a 100644
--- a/src/components/organizations/PlaygroundBanner.tsx
+++ b/src/components/organizations/PlaygroundBanner.tsx
@@ -1,14 +1,8 @@
 import { Text, useColorScheme, View } from "react-native";
 
-import Organization from "../../lib/types/Organization";
 import { palette } from "../../theme";
 
-export default function PlaygroundBanner({
-  organization,
-}: {
-  organization: Organization;
-}) {
-
+export default function PlaygroundBanner() {
   const scheme = useColorScheme();
   const isDark = scheme === "dark";
 
@@ -16,7 +10,7 @@ export default function PlaygroundBanner({
     <View
       style={{
         backgroundColor: isDark ? "rgb(43, 65, 95)" : "rgb(52, 152, 219)",
-        borderColor: isDark ? "rgb(52, 152, 219)" : "rgb(52, 152, 219)", 
+        borderColor: isDark ? "rgb(52, 152, 219)" : "rgb(52, 152, 219)",
         borderWidth: 2,
         borderStyle: "dotted",
         padding: 10,
@@ -30,11 +24,14 @@ export default function PlaygroundBanner({
           justifyContent: "center",
         }}
       >
-        <Text style={{ color: palette.smoke, fontWeight: "bold", marginBottom: 5 }}>
+        <Text
+          style={{ color: palette.smoke, fontWeight: "bold", marginBottom: 5 }}
+        >
           Playground Mode
         </Text>
         <Text style={{ color: palette.smoke, flex: 1, textAlign: "center" }}>
-          To raise & spend money, wait for your organization&apos;s account to be activated by a staff member.
+          To raise & spend money, wait for your organization&apos;s account to
+          be activated by a staff member.
         </Text>
         {/* <Button
           title="Activate"
diff --git a/src/components/organizations/transfer/Disbursement.tsx b/src/components/organizations/transfer/Disbursement.tsx
index f8c02cc..761ac22 100644
--- a/src/components/organizations/transfer/Disbursement.tsx
+++ b/src/components/organizations/transfer/Disbursement.tsx
@@ -1,44 +1,51 @@
-import { Picker } from '@react-native-picker/picker';
-import { useTheme } from '@react-navigation/native';
-import { useContext, useEffect, useState } from 'react';
-import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
-import RNPickerSelect from 'react-native-picker-select';
-import useSWR from 'swr';
+import { useTheme } from "@react-navigation/native";
+import { useContext, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import RNPickerSelect from "react-native-picker-select";
+import useSWR from "swr";
 
-import AuthContext from '../../../auth';
-import { OrganizationExpanded } from '../../../lib/types/Organization';
-import { palette } from '../../../theme';
-import { renderMoney } from '../../../util';
+import AuthContext from "../../../auth";
+import { OrganizationExpanded } from "../../../lib/types/Organization";
+import { palette } from "../../../theme";
+import { renderMoney } from "../../../util";
 
 type DisbursementScreenProps = {
   organization: OrganizationExpanded;
 };
 
 const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
-  const [amount, setAmount] = useState('$0.00');
-  const [chosenOrg, setOrganization] = useState('');
-  const [reason, setReason] = useState('');
+  const [amount, setAmount] = useState("$0.00");
+  const [chosenOrg, setOrganization] = useState("");
+  const [reason, setReason] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { colors: themeColors } = useTheme();
-  const { data: organizations } = useSWR<OrganizationExpanded[]>('user/organizations');
+  const { data: organizations } =
+    useSWR<OrganizationExpanded[]>("user/organizations");
   const { token } = useContext(AuthContext);
 
   const validateInputs = () => {
-    const numericAmount = Number(amount.replace('$', '').replace(',', ''));
+    const numericAmount = Number(amount.replace("$", "").replace(",", ""));
     if (!chosenOrg) {
-      Alert.alert('Error', 'Please select an organization to transfer to.');
+      Alert.alert("Error", "Please select an organization to transfer to.");
       return false;
     }
     if (numericAmount <= 0 || isNaN(numericAmount)) {
-      Alert.alert('Error', 'Please enter a valid amount greater than $0.');
+      Alert.alert("Error", "Please enter a valid amount greater than $0.");
       return false;
     }
     if (numericAmount * 100 > organization.balance_cents) {
-      Alert.alert('Error', 'Insufficient balance for this transfer.');
+      Alert.alert("Error", "Insufficient balance for this transfer.");
       return false;
     }
     if (!reason.trim()) {
-      Alert.alert('Error', 'Please provide a reason for the transfer.');
+      Alert.alert("Error", "Please provide a reason for the transfer.");
       return false;
     }
     return true;
@@ -49,45 +56,54 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
 
     setIsLoading(true);
     try {
-      const response = await fetch(process.env.EXPO_PUBLIC_API_BASE + `/organizations/${organization.id}/transfers`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
+      const response = await fetch(
+        process.env.EXPO_PUBLIC_API_BASE +
+          `/organizations/${organization.id}/transfers`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            event_id: organization.id,
+            to_organization_id: chosenOrg,
+            amount_cents:
+              Number(amount.replace("$", "").replace(",", "")) * 100,
+            name: reason,
+          }),
         },
-        body: JSON.stringify({
-          event_id: organization.id,
-          to_organization_id: chosenOrg,
-          amount_cents: Number(amount.replace('$', '').replace(',', '')) * 100,
-          name: reason,
-        }),
-      });
+      );
 
       if (!response.ok) {
         const errorData = await response.json();
-        Alert.alert('Error', errorData.message || 'Failed to complete the transfer. Please try again.');
+        Alert.alert(
+          "Error",
+          errorData.message ||
+            "Failed to complete the transfer. Please try again.",
+        );
       } else {
-        Alert.alert('Success', 'Transfer completed successfully!');
-        setOrganization('');
-        setAmount('$0.00');
-        setReason('');
+        Alert.alert("Success", "Transfer completed successfully!");
+        setOrganization("");
+        setAmount("$0.00");
+        setReason("");
       }
     } catch (error) {
-      Alert.alert('Error', 'An unexpected error occurred. Please try again.');
+      Alert.alert("Error", "An unexpected error occurred. Please try again.");
     } finally {
       setIsLoading(false);
     }
   };
 
   useEffect(() => {
-    if (chosenOrg === '') {
-      setAmount('$0.00');
+    if (chosenOrg === "") {
+      setAmount("$0.00");
     }
   }, [chosenOrg]);
 
   if (!organizations) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
         <ActivityIndicator size="large" color={themeColors.primary} />
       </View>
     );
@@ -96,22 +112,62 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
   return (
     <View style={{ flex: 1, backgroundColor: themeColors.background }}>
       {/* From Section */}
-      <Text style={{ color: themeColors.text, fontSize: 18, marginVertical: 12, fontWeight: 'bold' }}>From</Text>
-      <View style={{ backgroundColor: themeColors.card, borderRadius: 8, padding: 15, marginBottom: 15 }}>
+      <Text
+        style={{
+          color: themeColors.text,
+          fontSize: 18,
+          marginVertical: 12,
+          fontWeight: "bold",
+        }}
+      >
+        From
+      </Text>
+      <View
+        style={{
+          backgroundColor: themeColors.card,
+          borderRadius: 8,
+          padding: 15,
+          marginBottom: 15,
+        }}
+      >
         <Text style={{ color: themeColors.text, fontSize: 16 }}>
           {organization.name} ({renderMoney(organization.balance_cents)})
         </Text>
       </View>
 
       {/* To Section */}
-      <Text style={{ color: themeColors.text, fontSize: 18, marginVertical: 12, fontWeight: 'bold' }}>To</Text>
-      <View style={{ backgroundColor: themeColors.card, borderRadius: 8, marginBottom: 15 }}>
+      <Text
+        style={{
+          color: themeColors.text,
+          fontSize: 18,
+          marginVertical: 12,
+          fontWeight: "bold",
+        }}
+      >
+        To
+      </Text>
+      <View
+        style={{
+          backgroundColor: themeColors.card,
+          borderRadius: 8,
+          marginBottom: 15,
+        }}
+      >
         <RNPickerSelect
-          placeholder={{ label: 'Select an organization', value: '' }}
+          placeholder={{ label: "Select an organization", value: "" }}
           onValueChange={(itemValue: string) => setOrganization(itemValue)}
-          style={{ inputIOS: { color: themeColors.text, padding: 15, fontSize: 16 }, inputAndroid: { color: themeColors.text, padding: 15, fontSize: 16 } }}
+          style={{
+            inputIOS: { color: themeColors.text, padding: 15, fontSize: 16 },
+            inputAndroid: {
+              color: themeColors.text,
+              padding: 15,
+              fontSize: 16,
+            },
+          }}
           items={[
-            ...organizations.filter((org) => org.id !== organization.id).map((org) => ({ label: org.name, value: org.id })),
+            ...organizations
+              .filter((org) => org.id !== organization.id)
+              .map((org) => ({ label: org.name, value: org.id })),
           ]}
         />
       </View>
@@ -120,7 +176,16 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
       </Text>
 
       {/* Amount Section */}
-      <Text style={{ color: themeColors.text, fontSize: 18, marginVertical: 12, fontWeight: 'bold' }}>Amount</Text>
+      <Text
+        style={{
+          color: themeColors.text,
+          fontSize: 18,
+          marginVertical: 12,
+          fontWeight: "bold",
+        }}
+      >
+        Amount
+      </Text>
       <TextInput
         style={{
           backgroundColor: themeColors.card,
@@ -132,13 +197,13 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
         }}
         value={amount}
         onChangeText={(text) => {
-          const sanitizedText = text.replace(/[^\d.]/g, '');
+          const sanitizedText = text.replace(/[^\d.]/g, "");
           // remove 0.00 if user enters a new number
-          if (sanitizedText.startsWith('0.00')) {
-            setAmount(text.replace('0.00', ''));
+          if (sanitizedText.startsWith("0.00")) {
+            setAmount(text.replace("0.00", ""));
             return;
           }
-          setAmount(sanitizedText ? `$${sanitizedText}` : '$0.00');
+          setAmount(sanitizedText ? `$${sanitizedText}` : "$0.00");
         }}
         placeholder="$0.00"
         placeholderTextColor={themeColors.text}
@@ -146,7 +211,16 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
       />
 
       {/* Purpose Section */}
-      <Text style={{ color: themeColors.text, fontSize: 18, marginVertical: 12, fontWeight: 'bold' }}>What is the transfer for?</Text>
+      <Text
+        style={{
+          color: themeColors.text,
+          fontSize: 18,
+          marginVertical: 12,
+          fontWeight: "bold",
+        }}
+      >
+        What is the transfer for?
+      </Text>
       <TextInput
         style={{
           backgroundColor: themeColors.card,
@@ -172,7 +246,7 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
           padding: 15,
           borderRadius: 8,
           marginTop: 20,
-          alignItems: 'center',
+          alignItems: "center",
           opacity: isLoading ? 0.7 : 1,
         }}
         onPress={handleTransfer}
@@ -181,7 +255,15 @@ const DisbursementScreen = ({ organization }: DisbursementScreenProps) => {
         {isLoading ? (
           <ActivityIndicator size="small" color={themeColors.text} />
         ) : (
-          <Text style={{ color: themeColors.text, fontSize: 16, fontWeight: 'bold' }}>Make Transfer</Text>
+          <Text
+            style={{
+              color: themeColors.text,
+              fontSize: 16,
+              fontWeight: "bold",
+            }}
+          >
+            Make Transfer
+          </Text>
         )}
       </TouchableOpacity>
     </View>
diff --git a/src/components/transaction/Check.tsx b/src/components/transaction/Check.tsx
index 9d6145a..9ea8ea9 100644
--- a/src/components/transaction/Check.tsx
+++ b/src/components/transaction/Check.tsx
@@ -1,13 +1,20 @@
-import { View, Text, Image, StyleSheet, Dimensions, useColorScheme } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  useColorScheme,
+} from "react-native";
 import useSWR from "swr";
-import { ToWords } from 'to-words';
+import { ToWords } from "to-words";
 
 import { OrganizationExpanded } from "../../lib/types/Organization";
 import palette from "../../palette";
 
 const screenWidth = Dimensions.get("window").width;
-const checkRatio = 3.2 / 6; 
-const checkWidth = screenWidth * 0.9; 
+const checkRatio = 3.2 / 6;
+const checkWidth = screenWidth * 0.9;
 const checkHeight = checkWidth * checkRatio;
 
 interface CheckComponentProps {
@@ -38,12 +45,12 @@ export default function CheckComponent({
   const { data: organization } = useSWR<OrganizationExpanded>(
     `organizations/${orgId}`,
   );
-  
-  const scheme = useColorScheme(); // Detects the color scheme (light or dark)
-  
+
+  const scheme = useColorScheme() || "light"; // Detects the color scheme (light or dark)
+
   const renderMoneyAmount = (amount: number): string => `$${amount.toFixed(2)}`;
   const toWords = new ToWords({
-    localeCode: 'en-US',
+    localeCode: "en-US",
     converterOptions: {
       ignoreDecimal: false,
       ignoreZeroCurrency: false,
@@ -59,21 +66,36 @@ export default function CheckComponent({
       {/* Check Number and Date */}
       <View style={styles.headerContainer}>
         <Text style={styles.checkNumber}>{checkNumber || "----"}</Text>
-        <View style={{flexDirection: "row", alignItems: "center"}}>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text style={styles.label}>Date:</Text>
-            <View style={{borderBottomWidth: 2, borderBottomColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400]}}>
-             <Text style={[styles.dateText, styles.handwriting]}>{date}</Text>
-            </View>
+          <View
+            style={{
+              borderBottomWidth: 2,
+              borderBottomColor:
+                scheme === "dark" ? palette.slate[500] : palette.slate[400],
+            }}
+          >
+            <Text style={[styles.dateText, styles.handwriting]}>{date}</Text>
+          </View>
         </View>
       </View>
 
       {/* Pay to the Order Of */}
       <View style={[styles.row, { gap: 10 }]}>
-        <Text style={[styles.label, {fontSize: 10, marginRight: 0}]}>Pay to the{"\n"}order of</Text>
-        <View style={[styles.flexGrow, {borderBottomWidth: 2, borderBottomColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400]}]}>
-          <Text style={styles.handwriting}>
-            {recipientName}
-          </Text>
+        <Text style={[styles.label, { fontSize: 10, marginRight: 0 }]}>
+          Pay to the{"\n"}order of
+        </Text>
+        <View
+          style={[
+            styles.flexGrow,
+            {
+              borderBottomWidth: 2,
+              borderBottomColor:
+                scheme === "dark" ? palette.slate[500] : palette.slate[400],
+            },
+          ]}
+        >
+          <Text style={styles.handwriting}>{recipientName}</Text>
         </View>
         <Text style={styles.amountInput}>$</Text>
         <Text style={styles.amount}>
@@ -82,9 +104,20 @@ export default function CheckComponent({
       </View>
 
       {/* Amount in Words */}
-      <View style={[styles.row, {gap: 12}]}>
-        <View style={[styles.flexGrow, {borderBottomWidth: 2, borderBottomColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400]}]}>
-          <Text numberOfLines={1} style={styles.handwriting}>{amountInWords}</Text>
+      <View style={[styles.row, { gap: 12 }]}>
+        <View
+          style={[
+            styles.flexGrow,
+            {
+              borderBottomWidth: 2,
+              borderBottomColor:
+                scheme === "dark" ? palette.slate[500] : palette.slate[400],
+            },
+          ]}
+        >
+          <Text numberOfLines={1} style={styles.handwriting}>
+            {amountInWords}
+          </Text>
         </View>
         <Text style={styles.label}>Dollars</Text>
       </View>
@@ -92,19 +125,26 @@ export default function CheckComponent({
       {/* Memo */}
       <View style={[styles.row, styles.memoContainer, { marginBottom: 0 }]}>
         <Text style={styles.label}>Memo</Text>
-        <View style={[styles.flexGrow, {borderBottomWidth: 2, borderBottomColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400]}]}>
-          <Text style={styles.handwriting}>
-            {memo}
-          </Text>
+        <View
+          style={[
+            styles.flexGrow,
+            {
+              borderBottomWidth: 2,
+              borderBottomColor:
+                scheme === "dark" ? palette.slate[500] : palette.slate[400],
+            },
+          ]}
+        >
+          <Text style={styles.handwriting}>{memo}</Text>
         </View>
         <Image
-            source={require("../../../assets/zach-signature.png")}
-            style={styles.signature}
-          />
+          source={require("../../../assets/zach-signature.png")}
+          style={styles.signature}
+        />
       </View>
 
       {/* Signature and Account Details */}
-      <View style={{flexDirection: "row"}}>
+      <View style={{ flexDirection: "row" }}>
         <Text style={styles.accountDetails}>
           &#9286;
           {checkNumber?.padStart(10, "0") || "0000000000"} &#9286;
@@ -116,97 +156,100 @@ export default function CheckComponent({
   );
 }
 
-const getStyles = (scheme: 'light' | 'dark') => StyleSheet.create({
-  container: {
-    width: checkWidth,
-    height: checkHeight,
-    backgroundColor: scheme === 'dark' ? "#193046" : "#E2ECF5", 
-    padding: 12,
-    marginVertical: 12,
-    shadowColor: scheme === 'dark' ? "#000" : "#888",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 6,
-    borderWidth: 1,
-    borderColor: scheme === 'dark' ? "#ccc" : "#bbb", 
-    overflow: "visible",
-  },
-  headerContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 12,
-  },
-  checkNumber: {
-    fontFamily: "check-font",
-    fontSize: 14,
-    textAlign: "right",
-    marginBottom: 8,
-    color: scheme === 'dark' ? palette.slate[300] : palette.slate[700], 
-  },
-  dateText: {
-    fontSize: 16,
-    color: scheme === 'dark' ? palette.slate[300] : palette.slate[700],
-    fontFamily: "Damion",
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8,
-  },
-  label: {
-    fontSize: 12,
-    fontWeight: "bold",
-    textTransform: "uppercase",
-    marginRight: 4,
-    color: scheme === 'dark' ? palette.slate[300] : palette.slate[700], 
-  },
-  handwriting: {
-    fontFamily: "Damion",
-    fontSize: 16,
-    borderBottomWidth: 2,
-    borderBottomColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400],
-    paddingRight: 8,
-    color: scheme === 'dark' ? "#fff" : "#000",
-    textDecorationColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400],
-  },
-  amountInput: {
-    fontFamily: "Damion",
-    fontSize: 18,
-    maxWidth: 120,
-    color: scheme === 'dark' ? "#fff" : "#000", 
-    textAlign: "right",
-  },
-  amount: {
-    fontFamily: "Damion",
-    fontSize: 18,
-    maxWidth: 120,
-    color: scheme === 'dark' ? "#fff" : "#000",
-    textAlign: "right",
-    borderWidth: 1,
-    borderColor: scheme === 'dark' ? palette.slate[500] : palette.slate[400], 
-    paddingHorizontal: 4,
-  },
-  memoContainer: {
-    gap: 8,
-    alignItems: "center",
-  },
-  flexGrow: {
-    flexGrow: 1,
-    maxWidth: "75%",
-  },
-  signature: {
-    height: 40,
-    width: 60,
-    tintColor: scheme === 'dark' ? palette.slate[100] : palette.slate[500], 
-  },
-  accountDetails: {
-    fontFamily: "check-font",
-    fontSize: 12,
-    color: scheme === 'dark' ? palette.slate[300] : palette.slate[700], 
-    textAlign: "left",
-    flex: 1,
-  },
-});
+const getStyles = (scheme: "light" | "dark") =>
+  StyleSheet.create({
+    container: {
+      width: checkWidth,
+      height: checkHeight,
+      backgroundColor: scheme === "dark" ? "#193046" : "#E2ECF5",
+      padding: 12,
+      marginVertical: 12,
+      shadowColor: scheme === "dark" ? "#000" : "#888",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.25,
+      shadowRadius: 4,
+      elevation: 6,
+      borderWidth: 1,
+      borderColor: scheme === "dark" ? "#ccc" : "#bbb",
+      overflow: "visible",
+    },
+    headerContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 12,
+    },
+    checkNumber: {
+      fontFamily: "check-font",
+      fontSize: 14,
+      textAlign: "right",
+      marginBottom: 8,
+      color: scheme === "dark" ? palette.slate[300] : palette.slate[700],
+    },
+    dateText: {
+      fontSize: 16,
+      color: scheme === "dark" ? palette.slate[300] : palette.slate[700],
+      fontFamily: "Damion",
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 8,
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      marginRight: 4,
+      color: scheme === "dark" ? palette.slate[300] : palette.slate[700],
+    },
+    handwriting: {
+      fontFamily: "Damion",
+      fontSize: 16,
+      borderBottomWidth: 2,
+      borderBottomColor:
+        scheme === "dark" ? palette.slate[500] : palette.slate[400],
+      paddingRight: 8,
+      color: scheme === "dark" ? "#fff" : "#000",
+      textDecorationColor:
+        scheme === "dark" ? palette.slate[500] : palette.slate[400],
+    },
+    amountInput: {
+      fontFamily: "Damion",
+      fontSize: 18,
+      maxWidth: 120,
+      color: scheme === "dark" ? "#fff" : "#000",
+      textAlign: "right",
+    },
+    amount: {
+      fontFamily: "Damion",
+      fontSize: 18,
+      maxWidth: 120,
+      color: scheme === "dark" ? "#fff" : "#000",
+      textAlign: "right",
+      borderWidth: 1,
+      borderColor: scheme === "dark" ? palette.slate[500] : palette.slate[400],
+      paddingHorizontal: 4,
+    },
+    memoContainer: {
+      gap: 8,
+      alignItems: "center",
+    },
+    flexGrow: {
+      flexGrow: 1,
+      maxWidth: "75%",
+    },
+    signature: {
+      height: 40,
+      width: 60,
+      tintColor: scheme === "dark" ? palette.slate[100] : palette.slate[500],
+    },
+    accountDetails: {
+      fontFamily: "check-font",
+      fontSize: 12,
+      color: scheme === "dark" ? palette.slate[300] : palette.slate[700],
+      textAlign: "left",
+      flex: 1,
+    },
+  });
diff --git a/src/components/transaction/types/CheckTransaction.tsx b/src/components/transaction/types/CheckTransaction.tsx
index 313faf4..e722b5f 100644
--- a/src/components/transaction/types/CheckTransaction.tsx
+++ b/src/components/transaction/types/CheckTransaction.tsx
@@ -16,7 +16,6 @@ export default function CheckTransaction({
   navigation,
   ...props
 }: TransactionViewProps<TransactionCheck>) {
-
   return (
     <View>
       <TransactionTitle
@@ -31,23 +30,36 @@ export default function CheckTransaction({
         {renderMoney(Math.abs(transaction.amount_cents))}{" "}
         <Muted>check to</Muted> {check.recipient_name}
       </TransactionTitle>
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginBottom: 20 }}>
-          <CheckComponent 
-            date={transaction.date}
-            recipientName={check.recipient_name}
-            amount={transaction.amount_cents / 100}
-            memo={check.memo}
-            orgId={props.orgId}
-          />
-        </View>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: 20,
+        }}
+      >
+        <CheckComponent
+          date={transaction.date}
+          recipientName={check.recipient_name}
+          amount={transaction.amount_cents / 100}
+          memo={check.memo}
+          orgId={props.orgId}
+        />
+      </View>
       <TransactionDetails
         details={[
           descriptionDetail(props.orgId, transaction, navigation),
           ...(check.sender
             ? [
-                { label: "Sent by", value: <UserMention user={check.sender} /> },
+                {
+                  label: "Sent by",
+                  value: <UserMention user={check.sender} />,
+                },
                 { label: "Sent to", value: check.recipient_name },
-                { label: "Recipient email", value: check.recipient_email ?? "" },
+                {
+                  label: "Recipient email",
+                  value: check.recipient_email ?? "",
+                },
                 ...(check.check_number
                   ? [{ label: "Check number", value: check.check_number }]
                   : []),
@@ -67,7 +79,6 @@ export default function CheckTransaction({
             : []),
         ]}
       />
-
     </View>
   );
 }
diff --git a/src/lib/AppIconList.js b/src/lib/AppIconList.js
index 2aa9174..a655fff 100644
--- a/src/lib/AppIconList.js
+++ b/src/lib/AppIconList.js
@@ -1,54 +1,54 @@
 /* eslint-env commonjs */
 
 const appIcons = [
-    {
-      name: "Default",
-      ios: "./assets/app-icon.png",
-      android: {
-        foregroundImage: "./assets/app-icon-foreground.png",
-        backgroundColor: "#EC3750",
-      },
+  {
+    name: "Default",
+    ios: "./assets/app-icon.png",
+    android: {
+      foregroundImage: "./assets/app-icon-foreground.png",
+      backgroundColor: "#EC3750",
     },
-    {
-      name: "Artskillz",
-      ios: "./assets/icons/art-skillz.png",
-      android: {
-        foregroundImage: "./assets/icons/art-skillz-foreground.png",
-        backgroundColor: "#FF2500",
-      },
+  },
+  {
+    name: "Artskillz",
+    ios: "./assets/icons/art-skillz.png",
+    android: {
+      foregroundImage: "./assets/icons/art-skillz-foreground.png",
+      backgroundColor: "#FF2500",
     },
-    {
-      name: "Dev",
-      ios: "./assets/icons/dev.png",
-      android: {
-        foregroundImage: "./assets/icons/dev-foreground.png",
-        backgroundColor: "#33D6A6",
-      },
+  },
+  {
+    name: "Dev",
+    ios: "./assets/icons/dev.png",
+    android: {
+      foregroundImage: "./assets/icons/dev-foreground.png",
+      backgroundColor: "#33D6A6",
     },
-    {
-      name: "Cashmoney",
-      ios: "./assets/icons/cash-money.png",
-      android: {
-        foregroundImage: "./assets/icons/cash-money-foreground.png",
-        backgroundColor: "#fff",
-      },
+  },
+  {
+    name: "Cashmoney",
+    ios: "./assets/icons/cash-money.png",
+    android: {
+      foregroundImage: "./assets/icons/cash-money-foreground.png",
+      backgroundColor: "#fff",
     },
-    {
-      name: "Hacknight",
-      ios: "./assets/icons/hack-night.png",
-      android: {
-        foregroundImage: "./assets/icons/hack-night.png",
-        backgroundColor: "#FFD700",
-      },
+  },
+  {
+    name: "Hacknight",
+    ios: "./assets/icons/hack-night.png",
+    android: {
+      foregroundImage: "./assets/icons/hack-night.png",
+      backgroundColor: "#FFD700",
     },
-    {
-      name: "Testflight",
-      ios: "./assets/icons/testflight.png",
-      android: {
-        foregroundImage: "./assets/icons/testflight.png",
-        backgroundColor: "#FFD700",
-      },
+  },
+  {
+    name: "Testflight",
+    ios: "./assets/icons/testflight.png",
+    android: {
+      foregroundImage: "./assets/icons/testflight.png",
+      backgroundColor: "#FFD700",
     },
+  },
 ];
-  
-module.exports = appIcons;
\ No newline at end of file
+
+module.exports = appIcons;
diff --git a/src/lib/NavigatorParamList.ts b/src/lib/NavigatorParamList.ts
index f84d2db..2aa8acf 100644
--- a/src/lib/NavigatorParamList.ts
+++ b/src/lib/NavigatorParamList.ts
@@ -10,7 +10,13 @@ export type StackParamList = {
   Invitation: { inviteId: Invitation["id"]; invitation?: Invitation };
   Event: { orgId: Organization["id"]; organization?: Organization };
   AccountNumber: { orgId: Organization["id"] };
-  ProcessDonation: { orgId: Organization["id"], payment: any, collectPayment: () => any, name: string, email: string };
+  ProcessDonation: {
+    orgId: Organization["id"];
+    payment: { amount: number };
+    collectPayment: () => Promise<boolean>;
+    name: string;
+    email: string;
+  };
   OrganizationSettings: { orgId: Organization["id"] };
   OrganizationDonation: { orgId: Organization["id"] };
   Transaction: {
diff --git a/src/lib/types/Card.ts b/src/lib/types/Card.ts
index 182c706..d4e309a 100644
--- a/src/lib/types/Card.ts
+++ b/src/lib/types/Card.ts
@@ -7,7 +7,7 @@ export default interface Card extends HcbApiObject<"crd"> {
   exp_month?: number;
   exp_year?: number;
   type: "virtual" | "physical";
-  status: "inactive" | "frozen" | "active" | "canceled";
+  status: "inactive" | "frozen" | "active" | "canceled" | "expired";
   name?: string;
   organization: Organization;
   total_spent_cents?: number;
diff --git a/src/lib/types/GrantCard.ts b/src/lib/types/GrantCard.ts
index 881862f..733ea50 100644
--- a/src/lib/types/GrantCard.ts
+++ b/src/lib/types/GrantCard.ts
@@ -1,7 +1,7 @@
 import Card from "./Card";
 
 export default interface GrantCard extends Card {
-    grant_id: string;
-    card_id: string;
-    amount_cents: number;
-}
\ No newline at end of file
+  grant_id: string;
+  card_id: string;
+  amount_cents: number;
+}
diff --git a/src/lib/useLocation.ts b/src/lib/useLocation.ts
index 89e2cba..a601ed0 100644
--- a/src/lib/useLocation.ts
+++ b/src/lib/useLocation.ts
@@ -1,90 +1,96 @@
-import { useCallback, useState } from 'react'
-import * as Location from 'expo-location'
-import { useFocusEffect } from '@react-navigation/native'
-import { PermissionsAndroid, Platform } from 'react-native'
-import Geolocation from '@react-native-community/geolocation'
+import Geolocation, {
+  GeolocationError,
+  GeolocationResponse,
+} from "@react-native-community/geolocation";
+import { useFocusEffect } from "@react-navigation/native";
+import * as Location from "expo-location";
+import { useCallback, useState } from "react";
+import { PermissionsAndroid, Platform } from "react-native";
 
 export function useLocation() {
-  const [accessDenied, setAccessDenied] = useState<boolean>(false)
-  const [location, setLocation] = useState<any | null>(null)
+  const [accessDenied, setAccessDenied] = useState<boolean>(false);
+  const [location, setLocation] = useState<{
+    latitude: string;
+    longitude: string;
+  } | null>(null);
 
   async function requestLocationPermission() {
     try {
       const granted = await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
-          title: 'Localização',
-          message: 'Permitir que o aplicativo utilize a sua localização.',
-          buttonPositive: 'OK',
-        }
-      )
+          title: "Localização",
+          message: "Permitir que o aplicativo utilize a sua localização.",
+          buttonPositive: "OK",
+        },
+      );
 
-      return granted === PermissionsAndroid.RESULTS.GRANTED
+      return granted === PermissionsAndroid.RESULTS.GRANTED;
     } catch (err) {
-      console.error(err)
+      console.error(err);
     }
   }
 
   const getAndroidLocation = useCallback(async () => {
-    const granted = await requestLocationPermission()
+    const granted = await requestLocationPermission();
 
     if (!granted) {
-      setAccessDenied(true)
-      return
+      setAccessDenied(true);
+      return;
     }
 
     Geolocation.getCurrentPosition(
-      (position: any) => {
+      (position: GeolocationResponse) => {
         const coordinates = {
           latitude: position.coords.latitude.toString(),
           longitude: position.coords.longitude.toString(),
-        }
+        };
 
-        setLocation(coordinates)
+        setLocation(coordinates);
       },
-      (error: any) => {
-        console.error('Error getting location:', error)
+      (error: GeolocationError) => {
+        console.error("Error getting location:", error);
       },
-      { enableHighAccuracy: true }
-    )
-  }, [])
+      { enableHighAccuracy: true },
+    );
+  }, []);
 
   const getIosLocation = useCallback(async () => {
-    const { status } = await Location.requestForegroundPermissionsAsync()
+    const { status } = await Location.requestForegroundPermissionsAsync();
 
-    if (status !== 'granted') {
-      setAccessDenied(true)
-      return
+    if (status !== "granted") {
+      setAccessDenied(true);
+      return;
     }
-    const location = await Location.getCurrentPositionAsync()
+    const location = await Location.getCurrentPositionAsync();
 
     const coordinates = {
       latitude: location.coords.latitude.toString(),
       longitude: location.coords.longitude.toString(),
-    }
+    };
 
-    setLocation(coordinates)
-  }, [])
+    setLocation(coordinates);
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
       const getLocation = async () => {
-        if (Platform.OS === 'android') {
-          await getAndroidLocation()
-          return
+        if (Platform.OS === "android") {
+          await getAndroidLocation();
+          return;
         }
 
-        await getIosLocation()
-      }
+        await getIosLocation();
+      };
 
       getLocation().catch((err) => {
-        console.error(err)
-      })
-    }, [getAndroidLocation, getIosLocation])
-  )
+        console.error(err);
+      });
+    }, [getAndroidLocation, getIosLocation]),
+  );
 
   return {
     accessDenied,
     location,
-  }
-}
\ No newline at end of file
+  };
+}
diff --git a/src/pages/Invitation.tsx b/src/pages/Invitation.tsx
index f5cef76..49555d3 100644
--- a/src/pages/Invitation.tsx
+++ b/src/pages/Invitation.tsx
@@ -43,7 +43,7 @@ export default function InvitationPage({
         organization: invitation.organization,
       });
     }
-  }, [invitation]);
+  }, [invitation, navigation]);
 
   const { mutate } = useSWRConfig();
 
diff --git a/src/pages/Receipts.tsx b/src/pages/Receipts.tsx
index 4f6162f..1e2489b 100644
--- a/src/pages/Receipts.tsx
+++ b/src/pages/Receipts.tsx
@@ -38,8 +38,8 @@ function Transaction({
 
   const { showActionSheetWithOptions } = useActionSheet();
   const [selectedImage, setSelectedImage] = useState<{
-      uri: string;
-      fileName?: string;
+    uri: string;
+    fileName?: string;
   } | null>(null);
 
   const uploadReceipt = async () => {
@@ -76,52 +76,51 @@ function Transaction({
     }
   };
 
-    const handleActionSheet = () => {
-      const options = ["Camera", "Photo Library", "Cancel"];
-      const cancelButtonIndex = 2;
-  
-      showActionSheetWithOptions(
-        {
-          options,
-          cancelButtonIndex,
-        },
-        async (buttonIndex) => {
-          if (buttonIndex === 0) {
-            // Take a photo
-            ImagePicker.requestCameraPermissionsAsync();
-            const result = await ImagePicker.launchCameraAsync({
-              mediaTypes: "images",
-              allowsEditing: true,
-              quality: 1,
+  const handleActionSheet = () => {
+    const options = ["Camera", "Photo Library", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (buttonIndex) => {
+        if (buttonIndex === 0) {
+          // Take a photo
+          ImagePicker.requestCameraPermissionsAsync();
+          const result = await ImagePicker.launchCameraAsync({
+            mediaTypes: "images",
+            allowsEditing: true,
+            quality: 1,
+          });
+          if (!result.canceled) {
+            setSelectedImage({
+              uri: result.assets[0].uri,
+              fileName: result.assets[0].fileName || "",
             });
-            if (!result.canceled) {
-              setSelectedImage({
-                uri: result.assets[0].uri,
-                fileName: result.assets[0].fileName || "",
-              });
-              setLoading(true);
-              await uploadReceipt();
-            }
-          } else if (buttonIndex === 1) {
-            // Pick from photo library
-            ImagePicker.requestMediaLibraryPermissionsAsync();
-            const result = await ImagePicker.launchImageLibraryAsync({
-              allowsEditing: true,
-              quality: 1,
+            setLoading(true);
+            await uploadReceipt();
+          }
+        } else if (buttonIndex === 1) {
+          // Pick from photo library
+          ImagePicker.requestMediaLibraryPermissionsAsync();
+          const result = await ImagePicker.launchImageLibraryAsync({
+            allowsEditing: true,
+            quality: 1,
+          });
+          if (!result.canceled) {
+            setSelectedImage({
+              uri: result.assets[0].uri,
+              fileName: result.assets[0].fileName || "",
             });
-            if (!result.canceled) {
-              setSelectedImage({
-                uri: result.assets[0].uri,
-                fileName: result.assets[0].fileName || "",
-              });
-              setLoading(true);
-              await uploadReceipt();
-            }
+            setLoading(true);
+            await uploadReceipt();
           }
-        },
-      );
-    };
-  
+        }
+      },
+    );
+  };
 
   return (
     <TouchableHighlight
@@ -194,7 +193,7 @@ export default function ReceiptsPage({ navigation: _navigation }: Props) {
 
   const onRefresh = async () => {
     mutate();
-  }
+  };
 
   if (isLoading) {
     return (
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ec5129e..7fbbdd5 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -168,7 +168,7 @@ export default function SettingsPage(
 
   useEffect(() => {
     let iconName = getAppIconName() || "default";
-    iconName = iconName.toLowerCase()
+    iconName = iconName.toLowerCase();
     setIcon(iconName);
   }, []);
 
@@ -188,53 +188,53 @@ export default function SettingsPage(
     >
       <View style={{ padding: 20, flex: 1, justifyContent: "center" }}>
         <SectionHeader title="App Icon" />
-          <ListSection>
-            <IconComponent
-              onPress={handleClick}
-              currentIcon={appIcon}
-              name="default"
-              displayName="Classic"
-            />
-            <IconComponent
-              onPress={handleClick}
-              currentIcon={appIcon}
-              name="cashmoney"
-              displayName="Cash Money"
-            />
-            <IconComponent
-              onPress={handleClick}
-              currentIcon={appIcon}
-              name="dev"
-              displayName="Dev"
-              last
-            />
-          </ListSection>
-          <ListHeader title="Shiny- catchem all!" />
-          <ListSection>
-            {Constants.platform?.ios && (
-              <>
-                <IconComponent
-                  onPress={handleClick}
-                  currentIcon={appIcon}
-                  name="hacknight"
-                  displayName="Open Late"
-                />
-                <IconComponent
-                  onPress={handleClick}
-                  currentIcon={appIcon}
-                  name="testflight"
-                  displayName="Early Adopter"
-                />
-              </>
-            )}
-            <IconComponent
-              onPress={handleClick}
-              currentIcon={appIcon}
-              name="artskillz"
-              displayName="Graphic Design Is My Passion"
-              last
-            />
-          </ListSection>
+        <ListSection>
+          <IconComponent
+            onPress={handleClick}
+            currentIcon={appIcon}
+            name="default"
+            displayName="Classic"
+          />
+          <IconComponent
+            onPress={handleClick}
+            currentIcon={appIcon}
+            name="cashmoney"
+            displayName="Cash Money"
+          />
+          <IconComponent
+            onPress={handleClick}
+            currentIcon={appIcon}
+            name="dev"
+            displayName="Dev"
+            last
+          />
+        </ListSection>
+        <ListHeader title="Shiny- catchem all!" />
+        <ListSection>
+          {Constants.platform?.ios && (
+            <>
+              <IconComponent
+                onPress={handleClick}
+                currentIcon={appIcon}
+                name="hacknight"
+                displayName="Open Late"
+              />
+              <IconComponent
+                onPress={handleClick}
+                currentIcon={appIcon}
+                name="testflight"
+                displayName="Early Adopter"
+              />
+            </>
+          )}
+          <IconComponent
+            onPress={handleClick}
+            currentIcon={appIcon}
+            name="artskillz"
+            displayName="Graphic Design Is My Passion"
+            last
+          />
+        </ListSection>
         <View style={{ paddingTop: 12 }}>
           <SectionHeader title="Connected Account" />
           <View
diff --git a/src/pages/card.tsx b/src/pages/card.tsx
index b824d06..82f7d37 100644
--- a/src/pages/card.tsx
+++ b/src/pages/card.tsx
@@ -45,7 +45,7 @@ export default function CardPage({
     loading: detailsLoading,
   } = useStripeCardDetails(_card.id);
 
-  const { data: card } = useSWR<Card>(`cards/${_card.id}`, {
+  const { data: card = _card } = useSWR<Card>(`cards/${_card.id}`, {
     fallbackData: _card,
   });
   const [cardName, setCardName] = useState(_card.name);
@@ -62,7 +62,7 @@ export default function CardPage({
     navigation.setOptions({
       title: cardName,
     });
-  }, [cardName]);
+  }, [cardName, navigation]);
 
   const { data: transactions, isLoading: transactionsLoading } = useSWR<{
     data: ITransaction[];
@@ -117,7 +117,7 @@ export default function CardPage({
         />
       </View>
 
-      {card.status != "canceled"  && (
+      {card.status != "canceled" && (
         <View
           style={{
             flexDirection: "row",
@@ -126,21 +126,21 @@ export default function CardPage({
             gap: 20,
           }}
         >
-          {(!card.status == "expired" || !isGrantCard) && (
-          <Button
-            style={{
-              flexBasis: 0,
-              flexGrow: 1,
-              // marginR: 10,
-              backgroundColor: "#5bc0de",
-              borderTopWidth: 0,
-            }}
-            color="#186177"
-            onPress={() => toggleCardFrozen()}
-            loading={isMutating}
-          >
-            {card.status == "active" ? "Freeze" : "Unfreeze"} card
-          </Button>
+          {(card.status !== "expired" || !isGrantCard) && (
+            <Button
+              style={{
+                flexBasis: 0,
+                flexGrow: 1,
+                // marginR: 10,
+                backgroundColor: "#5bc0de",
+                borderTopWidth: 0,
+              }}
+              color="#186177"
+              onPress={() => toggleCardFrozen()}
+              loading={isMutating}
+            >
+              {card.status == "active" ? "Freeze" : "Unfreeze"} card
+            </Button>
           )}
           {card.type == "virtual" && _card.status != "canceled" && (
             <Button
@@ -200,7 +200,9 @@ export default function CardPage({
           >
             <Text style={{ color: themeColors.text }}>Expires</Text>
             <Text style={{ color: palette.muted }}>
-              {detailsRevealed && details ? `${String(details.exp_month).padStart(2, '0')}/${details.exp_year}` : "••/••"}
+              {detailsRevealed && details
+                ? `${String(details.exp_month).padStart(2, "0")}/${details.exp_year}`
+                : "••/••"}
             </Text>
           </View>
           <View
@@ -223,8 +225,20 @@ export default function CardPage({
             marginBottom: 10,
           }}
         >
-          <Text style={{ color: themeColors.text, fontSize: 18, textAlign: "center" }}>
-            Amount: {_card?.status == "expired" || _card?.status == "canceled" ? "$0" : renderMoney((card as GrantCard).amount_cents - (card?.total_spent_cents ?? 0))}
+          <Text
+            style={{
+              color: themeColors.text,
+              fontSize: 18,
+              textAlign: "center",
+            }}
+          >
+            Amount:{" "}
+            {_card?.status == "expired" || _card?.status == "canceled"
+              ? "$0"
+              : renderMoney(
+                  (card as GrantCard).amount_cents -
+                    (card?.total_spent_cents ?? 0),
+                )}
           </Text>
         </View>
       )}
@@ -297,6 +311,7 @@ export default function CardPage({
                 top={index == 0}
                 bottom={index == transactions.data.length - 1}
                 hideAvatar
+                orgId={card.organization.id}
               />
             </TouchableHighlight>
           ))}
diff --git a/src/pages/cards.tsx b/src/pages/cards.tsx
index 4c9f0f9..b7f478e 100644
--- a/src/pages/cards.tsx
+++ b/src/pages/cards.tsx
@@ -4,7 +4,7 @@ import { MenuView } from "@react-native-menu/menu";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import { useFocusEffect } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   ActivityIndicator,
   FlatList,
@@ -25,9 +25,8 @@ type Props = NativeStackScreenProps<CardsStackParamList, "CardList">;
 export default function CardsPage({ navigation }: Props) {
   const { data: cards, mutate: reloadCards } =
     useSWR<(Card & Required<Pick<Card, "last4">>)[]>("user/cards");
-  const { data: grantCards, mutate: reloadGrantCards } = useSWR<GrantCard[]>(
-    "user/card_grants"
-  );
+  const { data: grantCards, mutate: reloadGrantCards } =
+    useSWR<GrantCard[]>("user/card_grants");
   const tabBarHeight = useBottomTabBarHeight();
   const scheme = useColorScheme();
 
@@ -37,7 +36,8 @@ export default function CardsPage({ navigation }: Props) {
   });
 
   const [frozenCardsShown, setFrozenCardsShown] = useState(true);
-  const [allCards, setAllCards] = useState<((Card & Required<Pick<Card, "last4">>) | GrantCard)[]>();
+  const [allCards, setAllCards] =
+    useState<((Card & Required<Pick<Card, "last4">>) | GrantCard)[]>();
   const [refreshing] = useState(false);
 
   useEffect(() => {
@@ -54,7 +54,10 @@ export default function CardsPage({ navigation }: Props) {
           onPressAction={({ nativeEvent: { event } }) => {
             if (event == "showFrozenCards") {
               setFrozenCardsShown(!frozenCardsShown);
-              AsyncStorage.setItem("frozenCardsShown", (!frozenCardsShown).toString());
+              AsyncStorage.setItem(
+                "frozenCardsShown",
+                (!frozenCardsShown).toString(),
+              );
             }
           }}
           themeVariant={scheme || undefined}
@@ -71,65 +74,73 @@ export default function CardsPage({ navigation }: Props) {
     });
   }, [navigation, frozenCardsShown, scheme]);
 
+  const combineCards = useCallback(() => {
+    // Transform grantCards
+    const transformedGrantCards = grantCards?.map((grantCard) => ({
+      ...grantCard,
+      grant_id: grantCard.id, // Move original id to grant_id
+      id: grantCard.card_id, // Replace id with card_id
+    }));
+
+    // Filter out cards that are also grantCards
+    const filteredCards = cards?.filter(
+      (card) =>
+        !transformedGrantCards?.some((grantCard) => grantCard.id === card.id),
+    );
+
+    // Combine filtered cards and transformed grantCards
+    const combinedCards = [
+      ...(filteredCards || []),
+      ...(transformedGrantCards || []),
+    ];
+
+    // Sort cards by status
+    combinedCards.sort((a, b) => {
+      if (a.status == "active" && b.status != "active") {
+        return -1;
+      } else if (a.status != "active" && b.status == "active") {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    // Update state
+    // @ts-expect-error both types have the same properties that are used
+    setAllCards(combinedCards);
+  }, [cards, grantCards]);
+
   useEffect(() => {
-      const fetchFrozenCardsShown = async () => {
-        const isFrozenCardsShown = await AsyncStorage.getItem("frozenCardsShown");
-        if (isFrozenCardsShown) {
-          setFrozenCardsShown(isFrozenCardsShown === "true");
-          await AsyncStorage.setItem("frozenCardsShown", (isFrozenCardsShown === "true").toString());
-        }
-      };
-  
-      fetchFrozenCardsShown();
-  
-      if (cards && grantCards) {
-        combineCards();
+    const fetchFrozenCardsShown = async () => {
+      const isFrozenCardsShown = await AsyncStorage.getItem("frozenCardsShown");
+      if (isFrozenCardsShown) {
+        setFrozenCardsShown(isFrozenCardsShown === "true");
+        await AsyncStorage.setItem(
+          "frozenCardsShown",
+          (isFrozenCardsShown === "true").toString(),
+        );
       }
-    }, [cards, grantCards]);
-
-    const combineCards = () => {
-      // Transform grantCards
-      const transformedGrantCards = grantCards?.map((grantCard) => ({
-        ...grantCard,
-        grant_id: grantCard.id, // Move original id to grant_id
-        id: grantCard.card_id, // Replace id with card_id
-      }));
-  
-      // Filter out cards that are also grantCards
-      const filteredCards = cards?.filter(
-        (card) => !transformedGrantCards?.some((grantCard) => grantCard.id === card.id)
-      );
-  
-      // Combine filtered cards and transformed grantCards
-      const combinedCards = [...(filteredCards || []), ...(transformedGrantCards || [])];
-
-      // Sort cards by status
-      combinedCards.sort((a, b) => {
-        if (a.status == "active" && b.status != "active") {
-          return -1;
-        } else if (a.status != "active" && b.status == "active") {
-          return 1;
-        } else {
-          return 0;
-        }
-      });
-  
-      // Update state
-      setAllCards(combinedCards);
-    }
+    };
+
+    fetchFrozenCardsShown();
 
-    const onRefresh = async () => {
-      await reloadCards();
-      await reloadGrantCards();
+    if (cards && grantCards) {
+      combineCards();
     }
-  
-  
+  }, [cards, grantCards, combineCards]);
+
+  const onRefresh = async () => {
+    await reloadCards();
+    await reloadGrantCards();
+  };
 
   if (allCards) {
     return (
       <FlatList
         data={
-          frozenCardsShown ? allCards : allCards.filter((c) => c.status == "active")
+          frozenCardsShown
+            ? allCards
+            : allCards.filter((c) => c.status == "active")
         }
         contentContainerStyle={{
           paddingBottom: tabBarHeight + 20,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 035ef8b..006bd75 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -164,10 +164,27 @@ function Event({
             >
               {event.name}
             </Text>
-            { data?.playground_mode && (
-                <View style={{backgroundColor: scheme == "dark" ? "#283140" : "#348EDA", paddingVertical: 4, paddingHorizontal: 12, borderRadius: 20, alignSelf: "flex-start", marginVertical: 4}}>
-                  <Text style={{color: scheme == "dark" ? "#248EDA" : "white", fontSize: 12, fontWeight: "bold"}}>Playground Mode</Text>
-                </View>
+            {data?.playground_mode && (
+              <View
+                style={{
+                  backgroundColor: scheme == "dark" ? "#283140" : "#348EDA",
+                  paddingVertical: 4,
+                  paddingHorizontal: 12,
+                  borderRadius: 20,
+                  alignSelf: "flex-start",
+                  marginVertical: 4,
+                }}
+              >
+                <Text
+                  style={{
+                    color: scheme == "dark" ? "#248EDA" : "white",
+                    fontSize: 12,
+                    fontWeight: "bold",
+                  }}
+                >
+                  Playground Mode
+                </Text>
+              </View>
             )}
             {!hideBalance && (
               <EventBalance balance_cents={data?.balance_cents} />
@@ -242,14 +259,14 @@ export default function App({ navigation }: Props) {
     for (const org of organizations || []) {
       preload(`organizations/${org.id}`, fetcher!);
     }
-  }), [];
-
+  }),
+    [];
 
   const onRefresh = () => {
     reloadOrganizations();
     reloadInvitations();
     mutate((k) => typeof k === "string" && k.startsWith("organizations"));
-  }
+  };
 
   useFocusEffect(() => {
     reloadOrganizations();
@@ -257,7 +274,6 @@ export default function App({ navigation }: Props) {
     mutate((k) => typeof k === "string" && k.startsWith("organizations"));
   });
 
-
   if (error) {
     return (
       <View>
@@ -284,8 +300,14 @@ export default function App({ navigation }: Props) {
   }
 
   return (
-    <ScrollView style={{ flex: 1, flexGrow: 1, }} contentInsetAdjustmentBehavior="automatic" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}> 
-     {organizations && (
+    <ScrollView
+      style={{ flex: 1, flexGrow: 1 }}
+      contentInsetAdjustmentBehavior="automatic"
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }
+    >
+      {organizations && (
         <FlatList
           scrollIndicatorInsets={{ bottom: tabBarHeight }}
           contentContainerStyle={{
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index cad6598..41fa6a9 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -66,7 +66,7 @@ export default function Login() {
         })
         .catch(() => setLoading(false));
     }
-  }, [response]);
+  }, [response, request, setToken]);
 
   const animation = useRef(new Animated.Value(0)).current;
 
diff --git a/src/pages/organization/AccountNumber.tsx b/src/pages/organization/AccountNumber.tsx
index 334dc83..ebaa052 100644
--- a/src/pages/organization/AccountNumber.tsx
+++ b/src/pages/organization/AccountNumber.tsx
@@ -85,7 +85,7 @@ export default function AccountNumberPage({
         </View>
       ),
     });
-  }, []);
+  }, [navigation]);
 
   return (
     <View
diff --git a/src/pages/organization/Donation.tsx b/src/pages/organization/Donation.tsx
index 3ddc4b0..59ca94c 100644
--- a/src/pages/organization/Donation.tsx
+++ b/src/pages/organization/Donation.tsx
@@ -1,32 +1,37 @@
-import { Ionicons } from '@expo/vector-icons';
-import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
-import { useTheme } from "@react-navigation/native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme, NavigationProp } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
-import { StripeTerminalProvider , useStripeTerminal } from '@stripe/stripe-terminal-react-native';
-import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Linking, Text, View ,
-  Alert, TextInput
+import {
+  PaymentIntent,
+  Reader,
+  StripeTerminalProvider,
+  useStripeTerminal,
+} from "@stripe/stripe-terminal-react-native";
+import { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Linking,
+  Text,
+  View,
+  Alert,
+  TextInput,
 } from "react-native";
-import * as Progress from 'react-native-progress';
-import useSWR, { useSWRConfig } from "swr";
+import * as Progress from "react-native-progress";
+import { useSWRConfig } from "swr";
 
-import StyledButton from "../../components/Button";
 import Button from "../../components/Button";
 import { StackParamList } from "../../lib/NavigatorParamList";
-import User from "../../lib/types/User";
 import { useLocation } from "../../lib/useLocation";
-import { palette, theme } from "../../theme";
+import { palette } from "../../theme";
 
-
-
-interface PaymentIntent {
-  id: string
-  amount: number
-  created: string
-  currency: string
-  sdkUuid: string
-  paymentMethodId: string
-}
+// interface PaymentIntent {
+//   id: string;
+//   amount: number;
+//   created: string;
+//   currency: string;
+//   sdkUuid: string;
+//   paymentMethodId: string;
+// }
 
 type Props = NativeStackScreenProps<StackParamList, "OrganizationDonation">;
 
@@ -34,19 +39,14 @@ export default function OrganizationDonationPage({
   route: {
     params: { orgId },
   },
-  navigation
+  navigation,
 }: Props) {
   const { fetcher } = useSWRConfig();
 
   const fetchTokenProvider = async () => {
-    console.log("Fetching stripe token")
     const result = await fetcher!("stripe_terminal_connection_token");
-
-    console.log(result);
-
-    const token = (result as any).terminal_connection_token;
-    console.log(token)
-
+    const token = (result as { terminal_connection_token: { secret: string } })
+      .terminal_connection_token;
     return token.secret;
   };
 
@@ -60,34 +60,54 @@ export default function OrganizationDonationPage({
   );
 }
 
-function PageWrapper({ orgId, orgName, navigation }: any) {
-
-  const { initialize, isInitialized } = useStripeTerminal({
-
-  });
+function PageWrapper({
+  orgId,
+  orgName,
+  navigation,
+}: {
+  orgId: `org_${string}`;
+  orgName?: string;
+  navigation: NavigationProp<StackParamList>;
+}) {
+  const { initialize, isInitialized } = useStripeTerminal({});
   useEffect(() => {
     initialize();
   }, [initialize]);
 
-  if (!isInitialized) return (
-    <View style={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flex: 1
-    }}>
-      <Text style={{
-        marginBottom: 20,
-        fontSize: 20,
-      }}>Connecting...</Text>
-      <ActivityIndicator size="large" />
-    </View>
-  );
+  if (!isInitialized)
+    return (
+      <View
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 1,
+        }}
+      >
+        <Text
+          style={{
+            marginBottom: 20,
+            fontSize: 20,
+          }}
+        >
+          Connecting...
+        </Text>
+        <ActivityIndicator size="large" />
+      </View>
+    );
 
-  return <PageContent orgId={orgId} orgName={orgName} navigation={navigation} />;
+  return (
+    <PageContent orgId={orgId} orgName={orgName} navigation={navigation} />
+  );
 }
 
-const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }) => {
+const SectionHeader = ({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle?: string;
+}) => {
   const { colors } = useTheme();
 
   return (
@@ -103,24 +123,34 @@ const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }
         {title}
       </Text>
       {subtitle && (
-        <Text style={{ color: palette.muted, fontSize: 16, marginBottom: 16 }}>{subtitle}</Text>
+        <Text style={{ color: palette.muted, fontSize: 16, marginBottom: 16 }}>
+          {subtitle}
+        </Text>
       )}
     </>
   );
 };
 
-function PageContent({ orgId, orgName, navigation }: any) {
+function PageContent({
+  orgId,
+  orgName,
+  navigation,
+}: {
+  orgId: `org_${string}`;
+  orgName?: string;
+  navigation: NavigationProp<StackParamList>;
+}) {
   const { colors } = useTheme();
 
   // const { data: organization } = useSWR<OrganizationExpanded>(
-  //   `organizations/${orgId}?avatar_size=50`, 
+  //   `organizations/${orgId}?avatar_size=50`,
   //   { fallbackData: cache.get(`organizations/${orgId}`)?.data },
   // );
 
-
   // if (!organization) return null;
 
-  const { location, accessDenied } = useLocation()
+  const { accessDenied } = useLocation();
+  // const { location, accessDenied } = useLocation();
 
   const [amount, setAmount] = useState("$");
 
@@ -128,16 +158,16 @@ function PageContent({ orgId, orgName, navigation }: any) {
 
   const value = parseFloat(amount.replace("$", "0"));
 
-  const [reader, setReader] = useState()
-  const [payment, setPayment] = useState<PaymentIntent>()
-  const [loadingCreatePayment, setLoadingCreatePayment] = useState(false)
-  const [loadingCollectPayment, setLoadingCollectPayment] = useState(false)
-  const [loadingConfirmPayment, setLoadingConfirmPayment] = useState(false)
-  const [loadingConnectingReader, setLoadingConnectingReader] = useState(false)
-  const [currentProgress, setCurrentProgress] = useState(null)
-  const [donation, setDonation] = useState<string>()
+  const [reader, setReader] = useState<Reader.Type | undefined>(undefined);
+  // const [payment, setPayment] = useState<PaymentIntent | undefined>(undefined);
+  // const [loadingCreatePayment, setLoadingCreatePayment] = useState(false);
+  // const [loadingCollectPayment, setLoadingCollectPayment] = useState(false);
+  // const [loadingConfirmPayment, setLoadingConfirmPayment] = useState(false);
+  const [loadingConnectingReader, setLoadingConnectingReader] = useState(false);
+  const [currentProgress, setCurrentProgress] = useState<string | null>(null);
+  // const [donation, setDonation] = useState<string | undefined>(undefined);
 
-  const locationIdStripeMock = 'tml_FWRkngENcVS5Pd'
+  const locationIdStripeMock = "tml_FWRkngENcVS5Pd";
 
   const {
     discoverReaders,
@@ -147,22 +177,21 @@ function PageContent({ orgId, orgName, navigation }: any) {
     confirmPaymentIntent,
     connectedReader,
   } = useStripeTerminal({
-    onUpdateDiscoveredReaders: (readers: any, ...stuff) => {
-      console.log("DISCOVERED READERSS", readers, stuff)
-      setReader(readers[0])
+    onUpdateDiscoveredReaders: (readers: Reader.Type[], ...stuff) => {
+      console.log("DISCOVERED READERSS", readers, stuff);
+      setReader(readers[0]);
     },
-    onDidReportReaderSoftwareUpdateProgress: (progress: any) => {
+    onDidReportReaderSoftwareUpdateProgress: (progress: string) => {
       setCurrentProgress(progress);
-    }
-  })
+    },
+  });
 
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const emailRef = useRef<TextInput>(null);
 
-
   const createDonation = async () => {
-    const { id } = await fetcher!(`organizations/${orgId}/donations`, {
+    const { id } = (await fetcher!(`organizations/${orgId}/donations`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -170,27 +199,27 @@ function PageContent({ orgId, orgName, navigation }: any) {
       body: JSON.stringify({
         amount_cents: value * 100,
         name,
-        email
-      })
-    }) as { id: string };
+        email,
+      }),
+    })) as { id: string };
 
-    setDonation(id);
+    // setDonation(id);
     return id;
-  }
+  };
 
-  console.log("discovery", discoverReaders)
+  console.log("discovery", discoverReaders);
 
   useEffect(() => {
     discoverReaders({
-      discoveryMethod: 'localMobile',
-      simulated: false
+      discoveryMethod: "localMobile",
+      simulated: false,
     });
-  }, [discoverReaders])
+  }, [discoverReaders]);
 
-  async function connectReader(selectedReader: any) {
-    setLoadingConnectingReader(true)
+  async function connectReader(selectedReader: Reader.Type) {
+    setLoadingConnectingReader(true);
     try {
-      const { reader, error } = await connectLocalMobileReader({
+      const { error } = await connectLocalMobileReader({
         reader: selectedReader,
         locationId: locationIdStripeMock,
       });
@@ -198,141 +227,140 @@ function PageContent({ orgId, orgName, navigation }: any) {
       setCurrentProgress(null);
 
       if (error) {
-        console.log('connectLocalMobileReader error:', error)
+        console.log("connectLocalMobileReader error:", error);
         if (error.message == "You must provide a reader object") {
           discoverReaders({
             discoveryMethod: "localMobile",
             simulated: false,
           });
         }
-        Alert.alert('There wass an error connecting, please try again')
-        return
+        Alert.alert("There wass an error connecting, please try again");
+        return false;
       }
 
       setCurrentProgress(null);
-
-      console.log('Reader connected successfully', reader)
     } catch (error) {
-      console.log(error)
+      console.log(error);
     } finally {
-      setLoadingConnectingReader(false)
+      setLoadingConnectingReader(false);
     }
   }
 
-  async function paymentIntent({ donation_id }: { donation_id: any }) {
-    setLoadingCreatePayment(true)
+  async function paymentIntent({ donation_id }: { donation_id: string }) {
+    // setLoadingCreatePayment(true);
     try {
       const { error, paymentIntent } = await createPaymentIntent({
         amount: Number((value * 100).toFixed()),
-        currency: 'usd',
-        paymentMethodTypes: ['card_present'],
-        offlineBehavior: 'prefer_online',
+        currency: "usd",
+        paymentMethodTypes: ["card_present"],
+        offlineBehavior: "prefer_online",
         captureMethod: "automatic",
         metadata: {
           donation_id,
-          donation: "true"
+          donation: "true",
         },
         statementDescriptor: `HCB* ${orgName || "DONATION"}`.substring(0, 22),
-        receiptEmail: email,
-      })
+      });
 
       if (error) {
-        console.log('Error creating payment intent', error)
-        return
+        console.log("Error creating payment intent", error);
+        return false;
       }
 
-      setPayment(paymentIntent)
+      // setPayment(paymentIntent);
 
       navigation.navigate("ProcessDonation", {
         orgId,
         payment: paymentIntent,
-        collectPayment: () => collectPayment(paymentIntent),
+        collectPayment: async () => {
+          return await collectPayment(paymentIntent);
+        },
         name,
-        email
+        email,
       });
 
-      return paymentIntent
+      return paymentIntent;
     } catch (error) {
-      console.log(error)
-      Alert.alert('Error creating payment intent', error.message)
+      console.log(error);
+      Alert.alert("Error creating payment intent", error.message);
     } finally {
-      setLoadingCreatePayment(false)
+      // setLoadingCreatePayment(false);
     }
   }
 
-  async function collectPayment(localPayment: any) {
-    setLoadingCollectPayment(true)
-    console.log(localPayment)
-    let output;
+  async function collectPayment(
+    localPayment: PaymentIntent.Type,
+  ): Promise<boolean> {
+    // setLoadingCollectPayment(true);
+    console.log(localPayment);
+    let output: boolean;
     try {
-      const { error, paymentIntent } = await collectPaymentMethod({
+      const { error } = await collectPaymentMethod({
         paymentIntent: localPayment,
-      } as any)
+      });
 
       if (error) {
-        console.log('Error collecting payment', error)
-        Alert.alert('Error collecting payment', error.message)
-        return
+        console.log("Error collecting payment", error);
+        if (error.code != "Canceled") {
+          Alert.alert("Error collecting payment", error.message);
+        }
+        return false;
       }
-      output = await confirmPayment(localPayment)
+      output = (await confirmPayment(localPayment)) ?? false;
     } catch (error) {
-      console.log(error)
-      output = false
+      console.log(error);
+      output = false;
     } finally {
-      setLoadingCollectPayment(false)
+      // setLoadingCollectPayment(false);
     }
 
-    return output
+    return output;
   }
 
-  async function confirmPayment(localPayment: any) {
-    setLoadingConfirmPayment(true)
-    let success
+  async function confirmPayment(localPayment: PaymentIntent.Type) {
+    // setLoadingConfirmPayment(true);
+    let success;
     try {
-      const { error, paymentIntent } = await confirmPaymentIntent({
-        paymentIntent: localPayment as any
-      })
+      const { error } = await confirmPaymentIntent({
+        paymentIntent: localPayment,
+      });
       if (error) {
-        console.log('Error confirm payment', error)
-        return
+        console.log("Error confirm payment", error);
+        return;
       }
-      console.log('Payment confirmed', paymentIntent)
-      setPayment(undefined)
-      success = true
+      // setPayment(undefined);
+      success = true;
     } catch (error) {
-      console.log(error)
-      success = false
+      console.log(error);
+      success = false;
     } finally {
-      setLoadingConfirmPayment(false)
+      // setLoadingConfirmPayment(false);
     }
-    return success
+    return success;
   }
 
   async function handleRequestLocation() {
-    await Linking.openSettings()
+    await Linking.openSettings();
   }
 
-
-
   useEffect(() => {
     if (accessDenied) {
       Alert.alert(
-        'Access to location',
-        'To use the app, you need to allow the use of your device location.',
+        "Access to location",
+        "To use the app, you need to allow the use of your device location.",
         [
           {
-            text: 'Activate',
+            text: "Activate",
             onPress: handleRequestLocation,
           },
-        ]
-      )
+        ],
+      );
     }
-  }, [accessDenied])
+  }, [accessDenied]);
 
   if (!connectedReader) {
     // centered view that says "connect reader"
     return (
-
       <View
         style={{
           padding: 20,
@@ -342,82 +370,79 @@ function PageContent({ orgId, orgName, navigation }: any) {
           flex: 1,
         }}
       >
+        <View
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
 
-
-
-        <View style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          flex: 1,
-
-          paddingBottom: 100
-        }}>
+            paddingBottom: 100,
+          }}
+        >
           <Ionicons name="card-outline" size={100} color={palette.primary} />
-          <Text style={{
-            fontSize: 20,
-            fontWeight: "600",
-            marginBottom: 10,
-            marginTop: 10,
-            color: colors.text
-          }}>Collect Donations</Text>
-          <Text style={{
-            fontSize: 16,
-            color: colors.text,
-            marginBottom: 20
-          }}>Receive donations using Tap to Pay</Text>
-
-          {currentProgress ? <View style={{
-            marginTop: 8,
-            marginBottom: 8
-          }}>
-            <Progress.Bar progress={currentProgress} width={200} height={20} />
-          </View> : loadingConnectingReader ? <ActivityIndicator size="large" /> : <View style={{ width: 36, height: 36 }} />}
-
-
-          <StyledButton onPress={async () => {
-            if (!connectedReader) {
-              return await connectReader(reader)
-            }
-
-          }} style={{
-            marginBottom: 10,
-            position: 'absolute',
-            bottom: 72,
-
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: "600",
+              marginBottom: 10,
+              marginTop: 10,
+              color: colors.text,
+            }}
+          >
+            Collect Donations
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: colors.text,
+              marginBottom: 20,
+            }}
+          >
+            Receive donations using Tap to Pay
+          </Text>
+
+          {currentProgress ? (
+            <View
+              style={{
+                marginTop: 8,
+                marginBottom: 8,
+              }}
+            >
+              <Progress.Bar
+                progress={parseFloat(currentProgress)}
+                width={200}
+                height={20}
+              />
+            </View>
+          ) : loadingConnectingReader ? (
+            <ActivityIndicator size="large" />
+          ) : (
+            <View style={{ width: 36, height: 36 }} />
+          )}
+
+          <Button
+            onPress={async () => {
+              if (!connectedReader) {
+                if (reader) {
+                  return await connectReader(reader);
+                }
+              }
+            }}
+            style={{
+              marginBottom: 10,
+              position: "absolute",
+              bottom: 72,
 
-            width: '100%'
-          }} loading={!reader}>
+              width: "100%",
+            }}
+            loading={!reader}
+          >
             Collect donations
-          </StyledButton>
+          </Button>
         </View>
       </View>
-    )
-    return (
-      <View style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flex: 1
-      }}>
-        <Text style={{
-          marginBottom: 20,
-          fontSize: 20,
-          color: theme.colors.text
-        }}>Collect donations</Text>
-        <Button onPress={async () => {
-          if (!connectedReader) {
-            return await connectReader(reader)
-          }
-        }} style={{
-          marginBottom: 10
-        }}>
-          Get started!
-        </Button>
-        {loadingConnectingReader && !currentProgress && <ActivityIndicator size="large" />}
-        {currentProgress && <Progress.Bar progress={currentProgress} width={200} />}
-      </View>
-    )
+    );
   }
   return (
     <View
@@ -427,27 +452,32 @@ function PageContent({ orgId, orgName, navigation }: any) {
         alignItems: "flex-start",
         justifyContent: "space-between",
         flex: 1,
-        width: '100%',
-        height: '100%',
+        width: "100%",
+        height: "100%",
       }}
     >
-      <SectionHeader title="Capture Donation" subtitle="Collect donations for your organization right from your mobile device." />
-
-      <View style={{
-        flexDirection: "column",
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "flex-start",
-        marginBottom: 10,
-
-      }}>
+      <SectionHeader
+        title="Capture Donation"
+        subtitle="Collect donations for your organization right from your mobile device."
+      />
 
-        <View style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          gap: 20
-        }}>
+      <View
+        style={{
+          flexDirection: "column",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          marginBottom: 10,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: 20,
+          }}
+        >
           <View style={{ flexBasis: 55 }}>
             <Text style={{ color: colors.text, fontSize: 20 }}>Name</Text>
           </View>
@@ -458,19 +488,16 @@ function PageContent({ orgId, orgName, navigation }: any) {
               padding: 12,
               borderRadius: 8,
               fontSize: 16,
-              flex: 1
+              flex: 1,
             }}
             selectTextOnFocus
             autoFocus
-
             clearButtonMode="while-editing"
             value={name}
             autoCapitalize="words"
             onChangeText={setName}
             autoComplete="off"
             autoCorrect={false}
-
-
             placeholder={"Full name"}
             returnKeyType="next"
             onSubmitEditing={() => {
@@ -478,14 +505,15 @@ function PageContent({ orgId, orgName, navigation }: any) {
             }}
           />
         </View>
-
-        <View style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          gap: 20,
-          marginTop: 10
-        }}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: 20,
+            marginTop: 10,
+          }}
+        >
           <View style={{ flexBasis: 55 }}>
             <Text style={{ color: colors.text, fontSize: 20 }}>Email</Text>
           </View>
@@ -496,26 +524,15 @@ function PageContent({ orgId, orgName, navigation }: any) {
               padding: 12,
               borderRadius: 8,
               fontSize: 16,
-              flex: 1
+              flex: 1,
             }}
             selectTextOnFocus
             autoFocus
-
             clearButtonMode="while-editing"
+            placeholder="Email"
             autoCapitalize="none"
-
             value={email}
-            keyboardType="email-address"
-            autoComplete="off"
-            autoCorrect={false}
             onChangeText={setEmail}
-            ref={emailRef}
-            placeholder={"Email address"}
-            returnKeyType="done"
-
-            onSubmitEditing={() => {
-              //   navigation.goBack();
-            }}
           />
         </View>
       </View>
@@ -525,8 +542,8 @@ function PageContent({ orgId, orgName, navigation }: any) {
         <Button
           onPress={async () => {
             if (!email.includes("@") || !email.includes(".")) {
-              Alert.alert("Please provide a valid email address")
-              return
+              Alert.alert("Please provide a valid email address");
+              return;
             }
             const donation_id = await createDonation();
             await paymentIntent({ donation_id });
@@ -539,23 +556,36 @@ function PageContent({ orgId, orgName, navigation }: any) {
           Create donation
         </Button>
       ) : (
-        <Button onPress={() => connectReader(reader)}>
+        <Button onPress={() => reader && connectReader(reader)}>
           Reconnect reader reader
         </Button>
       )}
 
-      <View style={{
-        height: 72,
-        width: "100%"
-      }} />
-
+      <View
+        style={{
+          height: 72,
+          width: "100%",
+        }}
+      />
     </View>
   );
 }
 
-function Keyboard({ amount, setAmount }: any) {
+interface KeyboardProps {
+  amount: string;
+  setAmount: (value: string) => void;
+}
+
+interface NumberProps {
+  number?: number;
+  symbol?: string;
+  onPress?: () => void;
+}
+
+const Keyboard = ({ amount, setAmount }: KeyboardProps) => {
   const [error, setError] = useState(false);
   const theme = useTheme();
+
   function pressNumber(amount: string, number: number) {
     if (
       parseFloat(amount.replace("$", "0") + number) > 9999.99 ||
@@ -587,15 +617,7 @@ function Keyboard({ amount, setAmount }: any) {
     }
   }
 
-  const Number = ({
-    number,
-    symbol,
-    onPress,
-  }: {
-    number?: number;
-    symbol?: string;
-    onPress?: () => void;
-  }) => (
+  const Number = ({ number, symbol, onPress }: NumberProps) => (
     <Text
       style={{
         color: theme.colors.text,
@@ -604,10 +626,10 @@ function Keyboard({ amount, setAmount }: any) {
         fontFamily: "JetBrains Mono",
         flexGrow: 1,
       }}
-      onPress={(e) => {
+      onPress={() => {
         if (onPress) {
           onPress();
-        } else if (typeof number != undefined) {
+        } else if (number !== undefined) {
           pressNumber(amount, number as number);
         }
       }}
@@ -618,52 +640,63 @@ function Keyboard({ amount, setAmount }: any) {
   );
 
   return (
-    <View style={{
-      width: "100%",
-      flexGrow: 1,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      justifyContent: "space-around"
-    }}>
+    <View
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        justifyContent: "space-around",
+      }}
+    >
       <Text
         style={{
           color: error ? palette.primary : theme.colors.text,
-
           paddingBottom: 0,
           paddingHorizontal: 10,
           fontSize: 72,
           textTransform: "uppercase",
-          textAlign: 'center'
+          textAlign: "center",
         }}
       >
         {amount}
         {amount == "$" && <Text>0</Text>}
-        {amount[amount.length - 1] == "." && <Text style={{ color: palette.muted }}>00</Text>}
-        {amount[amount.length - 2] == "." && <Text style={{ color: palette.muted }}>0</Text>}
+        {amount[amount.length - 1] == "." && (
+          <Text style={{ color: palette.muted }}>00</Text>
+        )}
+        {amount[amount.length - 2] == "." && (
+          <Text style={{ color: palette.muted }}>0</Text>
+        )}
       </Text>
       <View>
-        <View style={{ flexDirection: 'row', paddingBottom: 16 }}>
+        <View style={{ flexDirection: "row", paddingBottom: 16 }}>
           <Number number={1} />
           <Number number={2} />
           <Number number={3} />
         </View>
-        <View style={{ flexDirection: 'row', paddingTop: 24, paddingBottom: 16 }}>
+        <View
+          style={{ flexDirection: "row", paddingTop: 24, paddingBottom: 16 }}
+        >
           <Number number={4} />
           <Number number={5} />
           <Number number={6} />
         </View>
-        <View style={{ flexDirection: 'row', paddingTop: 24, paddingBottom: 16 }}>
+        <View
+          style={{ flexDirection: "row", paddingTop: 24, paddingBottom: 16 }}
+        >
           <Number number={7} />
           <Number number={8} />
           <Number number={9} />
         </View>
-        <View style={{ flexDirection: 'row', paddingTop: 24, paddingBottom: 16 }}>
+        <View
+          style={{ flexDirection: "row", paddingTop: 24, paddingBottom: 16 }}
+        >
           <Number symbol={"."} onPress={() => pressDecimal(amount)} />
           <Number number={0} />
           <Number symbol={"←"} onPress={() => pressBackspace(amount)} />
         </View>
       </View>
     </View>
-  )
-}
+  );
+};
diff --git a/src/pages/organization/ProcessDonation.tsx b/src/pages/organization/ProcessDonation.tsx
index 91173d3..1e9cd71 100644
--- a/src/pages/organization/ProcessDonation.tsx
+++ b/src/pages/organization/ProcessDonation.tsx
@@ -10,155 +10,224 @@ import { palette } from "../../theme";
 
 type Props = NativeStackScreenProps<StackParamList, "ProcessDonation">;
 
-
 export default function ProcessDonationPage({
-    navigation,
-    route: {
-        params: { payment, collectPayment, email, name },
-    },
+  navigation,
+  route: {
+    params: { payment, collectPayment, email, name },
+  },
 }: Props) {
-    const [status, setStatus] = useState<"ready" | "loading" | "success" | "error">("ready");
-    const theme = useTheme();
-    useEffect(() => {
-        navigation.setOptions({
-            headerLeft: () => (
-                <Button
-                    title={status == "ready" || status == "loading" ? "Cancel" : "Done"}
-                    color={palette.primary}
-                    onPress={() => navigation.goBack()}
-                />
-            ),
-        });
-    }, [status]);
+  const [status, setStatus] = useState<
+    "ready" | "loading" | "success" | "error"
+  >("ready");
+  const theme = useTheme();
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <Button
+          title={status == "ready" || status == "loading" ? "Cancel" : "Done"}
+          color={palette.primary}
+          onPress={() => navigation.goBack()}
+        />
+      ),
+    });
+  }, [status, navigation]);
+
+  return (
+    <View
+      style={{
+        padding: 20,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+      }}
+    >
+      <StatusBar barStyle="light-content" />
 
-    return (
+      {status == "ready" ? (
         <View
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            paddingBottom: 40,
+          }}
+        >
+          <Text style={{ color: palette.muted, fontSize: 24 }}>
+            Donation amount
+          </Text>
+          <Text
             style={{
-                padding: 20,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flex: 1,
+              fontSize: 50,
+              color: theme.colors.text,
             }}
-        >
-            <StatusBar barStyle="light-content" />
-
-
-
-            {status == "ready" ? <View style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: 1,
-                paddingBottom: 40
-            }}>
-                    <Text style={{ color: palette.muted, fontSize: 24 }}>Donation amount</Text>
-                    <Text
-                        style={{
-                            fontSize: 50,
-                            color: theme.colors.text
-                        }}
-                    >
-                        ${(payment?.amount / 100).toFixed(2)}
-                    </Text>
-
-                <StyledButton onPress={async () => {
-                    setStatus("loading");
-                    const status = await collectPayment();
-                    setStatus(status ? "success" : "error");
-                }} style={{
-                    marginBottom: 10,
-                    position: 'absolute',
-                    bottom: 30,
-                    width: '100%',
-                }}>
-                    Use Tap to Pay
-                </StyledButton>
-            </View> : status == "success" ? <View style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: 1,
-                paddingBottom: 100
-            }}>
-                <Ionicons name="checkmark-circle-outline" size={100} color={palette.success} />
-                <Text style={{
-                    fontSize: 20,
-                    fontWeight: "600",
-                    marginBottom: 10,
-                    color: theme.colors.text
-                }}>Thank you, {name}!</Text>
-                <Text style={{
-                    fontSize: 16,
-                    color: theme.colors.text
-                }}>{"$" + (payment?.amount / 100).toFixed(2)} donation completed successfully</Text>
-                <Text style={{
-                    fontSize: 16,
-                    color: theme.colors.text,
-                    marginTop: 10
-                }}>A receipt has been sent to the email address:</Text>
-                <Text style={{
-                    fontSize: 16,
-                    color: theme.colors.text
-                }}>{email}</Text>
-
-                <StyledButton onPress={navigation.goBack} style={{
-                    position: 'absolute',
-                    bottom: 30,
-                    width: '100%'
-                }}>
-                    Done
-                </StyledButton>
-            </View> : status == "loading" ? <View style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: 1,
-                paddingBottom: 40
-            }}>
-                <ActivityIndicator size="large" style={{
-                    margin: 20
-                }} />
-                <Text style={{
-                    fontSize: 20,
-                    fontWeight: "600",
-                    paddingBottom: 10,
-                    color: theme.colors.text
-                }}>Processing</Text>
-                <Text style={{
-                    fontSize: 16,
-                    color: theme.colors.text
-                }}>Please wait...</Text>
+          >
+            ${(payment?.amount / 100).toFixed(2)}
+          </Text>
 
+          <StyledButton
+            onPress={async () => {
+              setStatus("loading");
+              const success = await collectPayment();
+              setStatus(success ? "success" : "error");
+            }}
+            style={{
+              marginBottom: 10,
+              position: "absolute",
+              bottom: 30,
+              width: "100%",
+            }}
+          >
+            Use Tap to Pay
+          </StyledButton>
+        </View>
+      ) : status == "success" ? (
+        <View
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            paddingBottom: 100,
+          }}
+        >
+          <Ionicons
+            name="checkmark-circle-outline"
+            size={100}
+            color={palette.success}
+          />
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: "600",
+              marginBottom: 10,
+              color: theme.colors.text,
+            }}
+          >
+            Thank you, {name}!
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.text,
+            }}
+          >
+            {"$" + (payment?.amount / 100).toFixed(2)} donation completed
+            successfully
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.text,
+              marginTop: 10,
+            }}
+          >
+            A receipt has been sent to the email address:
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.text,
+            }}
+          >
+            {email}
+          </Text>
 
-            </View> : <View style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: 1,
-                marginBottom: 40
-            }}>
-                <Ionicons name="close-circle-outline" size={100} color={palette.warning} />
-                <Text style={{
-                    fontSize: 20,
-                    fontWeight: "600",
-                    paddingBottom: 10,
-                    color: theme.colors.text
-                }}>Error</Text>
-                <Text style={{
-                    fontSize: 16,
-                    color: theme.colors.text
-                }}>{"$" + (payment?.amount / 100).toFixed(2)} donation encountered an error</Text>
+          <StyledButton
+            onPress={navigation.goBack}
+            style={{
+              position: "absolute",
+              bottom: 30,
+              width: "100%",
+            }}
+          >
+            Done
+          </StyledButton>
+        </View>
+      ) : status == "loading" ? (
+        <View
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            paddingBottom: 40,
+          }}
+        >
+          <ActivityIndicator
+            size="large"
+            style={{
+              margin: 20,
+            }}
+          />
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: "600",
+              paddingBottom: 10,
+              color: theme.colors.text,
+            }}
+          >
+            Processing
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.text,
+            }}
+          >
+            Please wait...
+          </Text>
+        </View>
+      ) : (
+        <View
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            marginBottom: 40,
+          }}
+        >
+          <Ionicons
+            name="close-circle-outline"
+            size={100}
+            color={palette.warning}
+          />
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: "600",
+              paddingBottom: 10,
+              color: theme.colors.text,
+            }}
+          >
+            Error
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.text,
+            }}
+          >
+            {"$" + (payment?.amount / 100).toFixed(2)} donation encountered an
+            error
+          </Text>
 
-                <StyledButton onPress={navigation.goBack} style={{
-                    position: 'absolute',
-                    bottom: 30,
-                    width: '100%'
-                }}>
-                    Close
-                </StyledButton>
-            </View>}
-            {/* <Text>{JSON.stringify(payment, null, 2)}</Text> */}
+          <StyledButton
+            onPress={navigation.goBack}
+            style={{
+              position: "absolute",
+              bottom: 30,
+              width: "100%",
+            }}
+          >
+            Close
+          </StyledButton>
         </View>
-    );
+      )}
+      {/* <Text>{JSON.stringify(payment, null, 2)}</Text> */}
+    </View>
+  );
 }
diff --git a/src/pages/organization/Settings.tsx b/src/pages/organization/Settings.tsx
index 8c77bee..731b5f5 100644
--- a/src/pages/organization/Settings.tsx
+++ b/src/pages/organization/Settings.tsx
@@ -102,9 +102,12 @@ export default function OrganizationSettingsPage({
                 }}
               >
                 <Text
-                  style={{ color: themeColors.text, fontSize: 18, flexShrink: 1 }}
+                  style={{
+                    color: themeColors.text,
+                    fontSize: 18,
+                    flexShrink: 1,
+                  }}
                   numberOfLines={1}
-                  
                 >
                   {user.name}
                 </Text>
diff --git a/src/pages/organization/index.tsx b/src/pages/organization/index.tsx
index e57d0f1..1029ed9 100644
--- a/src/pages/organization/index.tsx
+++ b/src/pages/organization/index.tsx
@@ -78,11 +78,12 @@ export default function OrganizationPage({
     loadMore,
     isLoading,
   } = useTransactions(orgId);
-  const [refreshing, setRefreshing] = useState(false);
+  const [refreshing] = useState(false);
 
   useEffect(() => {
     if (organization && user) {
-      const isManager = "users" in organization &&
+      const isManager =
+        "users" in organization &&
         organization.users.some(
           (u) => u.id === user?.id && u.role === "manager",
         );
@@ -110,7 +111,7 @@ export default function OrganizationPage({
           title: "Transfer Money",
           image: "dollarsign.circle",
         });
-      } 
+      }
 
       menuActions.push({
         id: "settings",
@@ -118,11 +119,11 @@ export default function OrganizationPage({
         image: "gearshape",
       });
 
-      // menuActions.push({
-      //   id: "donation",
-      //   title: "Collect Donations",
-      //   image: "dollarsign.circle",
-      // });
+      menuActions.push({
+        id: "donation",
+        title: "Collect Donations",
+        image: "dollarsign.circle",
+      });
 
       navigation.setOptions({
         headerRight: () => (
@@ -142,7 +143,6 @@ export default function OrganizationPage({
                 navigation.navigate("OrganizationDonation", {
                   orgId: organization.id,
                 });
-
               } else if (event == "transfer") {
                 navigation.navigate("Transfer", { organization: organization });
               }
@@ -181,11 +181,11 @@ export default function OrganizationPage({
       })),
     [transactions],
   );
-  
+
   const onRefresh = () => {
     mutate("organizations");
     mutate(`organizations/${orgId}`);
-  }
+  };
 
   if (organizationLoading || userLoading) {
     return <ActivityIndicator />;
@@ -213,10 +213,8 @@ export default function OrganizationPage({
           onRefresh={() => onRefresh()}
           ListHeaderComponent={() => (
             <View>
-              {organization?.playground_mode && (
-                <PlaygroundBanner organization={organization} />
-              )}
-               <View
+              {organization?.playground_mode && <PlaygroundBanner />}
+              <View
                 style={{
                   display: "flex",
                   flexDirection: "row",
diff --git a/src/pages/organization/transfer.tsx b/src/pages/organization/transfer.tsx
index f4ceb30..cb8aebb 100644
--- a/src/pages/organization/transfer.tsx
+++ b/src/pages/organization/transfer.tsx
@@ -1,7 +1,13 @@
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import Constants from "expo-constants";
 import { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Button as NativeButton, View, ScrollView, Platform } from "react-native";
+import {
+  KeyboardAvoidingView,
+  Button as NativeButton,
+  View,
+  ScrollView,
+  Platform,
+} from "react-native";
 
 import DisbursementScreen from "../../components/organizations/transfer/Disbursement";
 import { StackParamList } from "../../lib/NavigatorParamList";
@@ -11,7 +17,9 @@ import { palette } from "../../theme";
 type Props = NativeStackScreenProps<StackParamList, "Transfer">;
 
 export default function TransferPage({ navigation, route }: Props) {
-  const { organization } = route.params as { organization: OrganizationExpanded }; // Grab the organization value from the route params
+  const { organization } = route.params as {
+    organization: OrganizationExpanded;
+  }; // Grab the organization value from the route params
 
   useEffect(() => {
     navigation.setOptions({
@@ -25,9 +33,9 @@ export default function TransferPage({ navigation, route }: Props) {
         </View>
       ),
     });
-  }, []);
+  }, [navigation]);
 
-  const [transferType, setTransferType] = useState<"ach" | "check" | "hcb">("hcb");
+  const [transferType] = useState<"ach" | "check" | "hcb">("hcb");
 
   return (
     <KeyboardAvoidingView
@@ -70,7 +78,9 @@ export default function TransferPage({ navigation, route }: Props) {
         </View> */}
 
         {/* Display transfer screen based on transfer type */}
-        {transferType === "hcb" && <DisbursementScreen organization={organization} />}
+        {transferType === "hcb" && (
+          <DisbursementScreen organization={organization} />
+        )}
       </ScrollView>
     </KeyboardAvoidingView>
   );