diff --git a/src/Components/EligibilityCard/EligibilityCard.tsx b/src/Components/EligibilityCard/EligibilityCard.tsx
index 856ad7d5..8c0674e0 100644
--- a/src/Components/EligibilityCard/EligibilityCard.tsx
+++ b/src/Components/EligibilityCard/EligibilityCard.tsx
@@ -4,6 +4,10 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import styles from './styles';
 import { Case, Eligibility } from '../../types/types';
 import { useRouter } from 'expo-router';
+import Arrow from '../../../assets/arrow.svg';
+import Check from '../../../assets/check.svg';
+import Fileclaim from '../../../assets/file-claim.svg';
+import Optout from '../../../assets/opt-out.svg';
 
 interface EligibilityCardProps {
   caseData: Case;
@@ -28,11 +32,11 @@ export default function EligibilityCard({
           }}
         >
           <View style={styles.topText}>
-            <Text style={styles.text}>v</Text>
+            <Check />
             <View style={styles.center}>
               <Text style={styles.text}>Check Eligibility</Text>
             </View>
-            <Text style={styles.text}>{'->'}</Text>
+            <Arrow />
           </View>
 
           <Text>
@@ -48,11 +52,11 @@ export default function EligibilityCard({
         <View style={styles.inner}>
           <TouchableOpacity style={styles.button}>
             <View style={styles.topText}>
-              <Text style={styles.text}>{'->'}</Text>
+              <Fileclaim />
               <View style={styles.center}>
                 <Text style={styles.text}>File a Claim</Text>
               </View>
-              <Text style={styles.text}>{'->'}</Text>
+              <Arrow />
             </View>
 
             <Text>
@@ -64,11 +68,11 @@ export default function EligibilityCard({
         <View style={styles.inner}>
           <TouchableOpacity style={styles.button}>
             <View style={styles.topText}>
-              <Text style={styles.text}>{'->'}</Text>
+              <Optout />
               <View style={styles.center}>
                 <Text style={styles.text}>Opt Out</Text>
               </View>
-              <Text style={styles.text}>{'->'}</Text>
+              <Arrow />
             </View>
 
             <Text>
diff --git a/src/Components/EligibilityCard/styles.ts b/src/Components/EligibilityCard/styles.ts
index 68c07ca7..c8dd8ede 100644
--- a/src/Components/EligibilityCard/styles.ts
+++ b/src/Components/EligibilityCard/styles.ts
@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { normalize } from 'yargs';
+import { colors } from '../../styles/colors';
 
 export default StyleSheet.create({
   eligible: {
@@ -20,10 +21,10 @@ export default StyleSheet.create({
     height: '90%',
     width: '90%',
     border: 'solid',
-    borderColor: '#767676',
+    borderColor: colors.darkGrey,
     borderWidth: 0.5,
     borderRadius: 5,
-    background: '#FFF',
+    background: colors.white,
     margin: 5,
     flexDirection: 'column',
     justifyContent: 'space-evenly',
@@ -37,7 +38,7 @@ export default StyleSheet.create({
     flex: 0.9,
   },
   text: {
-    color: '#2C2C2C',
+    color: colors.black,
     fontSize: 20,
     fontStyle: 'normal',
     fontWeight: '700',
diff --git a/src/app/(BottomTabNavigation)/Cases/CaseScreen/EligibilityForm/index.tsx b/src/app/(BottomTabNavigation)/Cases/CaseScreen/EligibilityForm/index.tsx
index 6bda9e5b..d28621ea 100644
--- a/src/app/(BottomTabNavigation)/Cases/CaseScreen/EligibilityForm/index.tsx
+++ b/src/app/(BottomTabNavigation)/Cases/CaseScreen/EligibilityForm/index.tsx
@@ -5,6 +5,7 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import styles from './styles';
 import { updateCaseStatus } from '../../../../../supabase/queries/cases';
 import { CaseUid, Eligibility } from '../../../../../types/types';
+import Arrow from '../../../../../../assets/arrow.svg';
 
 export default function EligibilityForm() {
   const router = useRouter();
@@ -38,7 +39,7 @@ export default function EligibilityForm() {
             }}
           >
             <Text>Yes, I am Eligible</Text>
-            <Text>{'->'}</Text>
+            <Arrow />
           </TouchableOpacity>
         </View>
         <View style={styles.buttonWrapperBottom}>
diff --git a/src/app/(BottomTabNavigation)/Cases/CaseScreen/styles.ts b/src/app/(BottomTabNavigation)/Cases/CaseScreen/styles.ts
index 93c69635..af09ec98 100644
--- a/src/app/(BottomTabNavigation)/Cases/CaseScreen/styles.ts
+++ b/src/app/(BottomTabNavigation)/Cases/CaseScreen/styles.ts
@@ -21,7 +21,7 @@ export default StyleSheet.create({
   button: {
     margin: 10,
     alignItems: 'center',
-    backgroundColor: '#339FFF',
+    backgroundColor: colors.midGrey,
     padding: 10,
   },
 });