diff --git a/src/components/SearchFilter/SearchFilter.tsx b/src/components/SearchFilter/SearchFilter.tsx
index a489214..09c9b92 100644
--- a/src/components/SearchFilter/SearchFilter.tsx
+++ b/src/components/SearchFilter/SearchFilter.tsx
@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import {
+  Modal,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { Checkbox } from '@/components/Checkbox/Checkbox';
 import { Dropdown } from '@/components/Dropdown/Dropdown';
 import { TreeSpeciesShape } from '@/types/tree_species';
@@ -154,152 +161,160 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
   };
 
   return (
-    <Modal
-      animationType="slide"
-      transparent={true}
-      visible={isOpen}
-      onRequestClose={onClose}
-    >
-      <View style={styles.filterBackground}>
-        <View style={styles.filterContainer}>
-          <View style={styles.grabber}></View>
-          <View style={styles.filterHeading}>
-            <Text style={styles.headerText}>Filter Trees</Text>
-            <TouchableOpacity style={styles.resetButton} onPress={resetFilters}>
-              <Text style={styles.resetText}>Reset</Text>
-            </TouchableOpacity>
-          </View>
+    <SafeAreaView>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isOpen}
+        onRequestClose={onClose}
+      >
+        <View style={styles.filterBackground}>
+          <View style={styles.filterContainer}>
+            <View style={styles.grabber}></View>
+            <View style={styles.filterHeading}>
+              <Text style={styles.headerText}>Filter Trees</Text>
+              <TouchableOpacity
+                style={styles.resetButton}
+                onPress={resetFilters}
+              >
+                <Text style={styles.resetText}>Reset</Text>
+              </TouchableOpacity>
+            </View>
 
-          <ScrollView horizontal={false} showsHorizontalScrollIndicator={false}>
-            {/* Height */}
-            <View style={styles.filterProperties}>
-              <Text style={styles.subheaderText}>Height</Text>
-              <View style={styles.checkboxGroup}>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeHeightFilters.small}
-                    onChange={() => toggleHeightFilter('small')}
-                  />
-                  <Text style={styles.checkboxLabel}>Small (&lt; 40')</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeHeightFilters.medium}
-                    onChange={() => toggleHeightFilter('medium')}
-                  />
-                  <Text style={styles.checkboxLabel}>Medium (40 - 60')</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeHeightFilters.large}
-                    onChange={() => toggleHeightFilter('large')}
-                  />
-                  <Text style={styles.checkboxLabel}>Large (60' +)</Text>
+            <ScrollView
+              horizontal={false}
+              showsHorizontalScrollIndicator={false}
+            >
+              {/* Height */}
+              <View style={styles.filterProperties}>
+                <Text style={styles.subheaderText}>Height</Text>
+                <View style={styles.checkboxGroup}>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeHeightFilters.small}
+                      onChange={() => toggleHeightFilter('small')}
+                    />
+                    <Text style={styles.checkboxLabel}>Small (&lt; 40')</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeHeightFilters.medium}
+                      onChange={() => toggleHeightFilter('medium')}
+                    />
+                    <Text style={styles.checkboxLabel}>Medium (40 - 60')</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeHeightFilters.large}
+                      onChange={() => toggleHeightFilter('large')}
+                    />
+                    <Text style={styles.checkboxLabel}>Large (60' +)</Text>
+                  </View>
                 </View>
               </View>
-            </View>
 
-            {/* Tree Shape */}
-            <View style={styles.filterProperties}>
-              <Text style={styles.subheaderText}>Tree Shape</Text>
-              <Dropdown
-                options={Object.values(TreeSpeciesShape)}
-                value={selectedTreeShape}
-                onChange={setSelectedTreeShape}
-              />
-            </View>
+              {/* Tree Shape */}
+              <View style={styles.filterProperties}>
+                <Text style={styles.subheaderText}>Tree Shape</Text>
+                <Dropdown
+                  options={Object.values(TreeSpeciesShape)}
+                  value={selectedTreeShape}
+                  onChange={setSelectedTreeShape}
+                />
+              </View>
 
-            {/* Litter Type */}
-            <View style={styles.filterProperties}>
-              <Text style={styles.subheaderText}>Litter Type</Text>
-              <View style={styles.checkboxGroup}>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeLitterFilters.wet}
-                    onChange={() => toggleLitterFilter('wet')}
-                  />
-                  <Text style={styles.checkboxLabel}>Wet Fruit</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeLitterFilters.dry}
-                    onChange={() => toggleLitterFilter('dry')}
-                  />
-                  <Text style={styles.checkboxLabel}>Dry Fruit</Text>
+              {/* Litter Type */}
+              <View style={styles.filterProperties}>
+                <Text style={styles.subheaderText}>Litter Type</Text>
+                <View style={styles.checkboxGroup}>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeLitterFilters.wet}
+                      onChange={() => toggleLitterFilter('wet')}
+                    />
+                    <Text style={styles.checkboxLabel}>Wet Fruit</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeLitterFilters.dry}
+                      onChange={() => toggleLitterFilter('dry')}
+                    />
+                    <Text style={styles.checkboxLabel}>Dry Fruit</Text>
+                  </View>
                 </View>
               </View>
-            </View>
 
-            {/* Water Use  */}
-            <View style={styles.filterProperties}>
-              <Text style={styles.subheaderText}>Water Use</Text>
-              <View style={styles.checkboxGroup}>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeWaterFilters.low}
-                    onChange={() => toggleWaterFilter('low')}
-                  />
-                  <Text style={styles.checkboxLabel}>Low</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeWaterFilters.moderate}
-                    onChange={() => toggleWaterFilter('moderate')}
-                  />
-                  <Text style={styles.checkboxLabel}>Moderate</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeWaterFilters.high}
-                    onChange={() => toggleWaterFilter('high')}
-                  />
-                  <Text style={styles.checkboxLabel}>High</Text>
+              {/* Water Use  */}
+              <View style={styles.filterProperties}>
+                <Text style={styles.subheaderText}>Water Use</Text>
+                <View style={styles.checkboxGroup}>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeWaterFilters.low}
+                      onChange={() => toggleWaterFilter('low')}
+                    />
+                    <Text style={styles.checkboxLabel}>Low</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeWaterFilters.moderate}
+                      onChange={() => toggleWaterFilter('moderate')}
+                    />
+                    <Text style={styles.checkboxLabel}>Moderate</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeWaterFilters.high}
+                      onChange={() => toggleWaterFilter('high')}
+                    />
+                    <Text style={styles.checkboxLabel}>High</Text>
+                  </View>
                 </View>
               </View>
-            </View>
 
-            {/* Other Properties */}
-            <View style={styles.filterProperties}>
-              <Text style={styles.subheaderText}>Other Properties</Text>
-              <View style={styles.checkboxGroup}>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeOtherFilters.californiaNative}
-                    onChange={() => toggleOtherFilter('californiaNative')}
-                  />
-                  <Text style={styles.checkboxLabel}>California native</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeOtherFilters.evergreen}
-                    onChange={() => toggleOtherFilter('evergreen')}
-                  />
-                  <Text style={styles.checkboxLabel}>Evergreen</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeOtherFilters.powerlineFriendly}
-                    onChange={() => toggleOtherFilter('powerlineFriendly')}
-                  />
-                  <Text style={styles.checkboxLabel}>Powerline friendly</Text>
-                </View>
-                <View style={styles.checkboxContainer}>
-                  <Checkbox
-                    isChecked={activeOtherFilters.lowRootDamage}
-                    onChange={() => toggleOtherFilter('lowRootDamage')}
-                  />
-                  <Text style={styles.checkboxLabel}>Low root damage</Text>
+              {/* Other Properties */}
+              <View style={styles.filterProperties}>
+                <Text style={styles.subheaderText}>Other Properties</Text>
+                <View style={styles.checkboxGroup}>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeOtherFilters.californiaNative}
+                      onChange={() => toggleOtherFilter('californiaNative')}
+                    />
+                    <Text style={styles.checkboxLabel}>California native</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeOtherFilters.evergreen}
+                      onChange={() => toggleOtherFilter('evergreen')}
+                    />
+                    <Text style={styles.checkboxLabel}>Evergreen</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeOtherFilters.powerlineFriendly}
+                      onChange={() => toggleOtherFilter('powerlineFriendly')}
+                    />
+                    <Text style={styles.checkboxLabel}>Powerline friendly</Text>
+                  </View>
+                  <View style={styles.checkboxContainer}>
+                    <Checkbox
+                      isChecked={activeOtherFilters.lowRootDamage}
+                      onChange={() => toggleOtherFilter('lowRootDamage')}
+                    />
+                    <Text style={styles.checkboxLabel}>Low root damage</Text>
+                  </View>
                 </View>
               </View>
-            </View>
-          </ScrollView>
+            </ScrollView>
 
-          {/* Complete Button */}
-          <TouchableOpacity style={styles.completeButton} onPress={onClose}>
-            <Text style={styles.completeButtonText}>Complete</Text>
-          </TouchableOpacity>
+            {/* Complete Button */}
+            <TouchableOpacity style={styles.completeButton} onPress={onClose}>
+              <Text style={styles.completeButtonText}>Complete</Text>
+            </TouchableOpacity>
+          </View>
         </View>
-      </View>
-    </Modal>
+      </Modal>
+    </SafeAreaView>
   );
 };
diff --git a/src/screens/TreeSpeciesSearch/TreeSpeciesSearch.tsx b/src/screens/TreeSpeciesSearch/TreeSpeciesSearch.tsx
index 67354c2..868b749 100644
--- a/src/screens/TreeSpeciesSearch/TreeSpeciesSearch.tsx
+++ b/src/screens/TreeSpeciesSearch/TreeSpeciesSearch.tsx
@@ -172,7 +172,7 @@ export const TreeSpeciesSearchScreen: React.FC<
   );
 
   return (
-    <SafeAreaView style={styles.safeContainer}>
+    <SafeAreaView>
       <View style={styles.headerContainer}>
         <Text style={styles.headerText}>
           {isUserAdmin ? 'All Trees' : 'Available Trees'}
diff --git a/styles.ts b/styles.ts
deleted file mode 100644
index 0139b29..0000000
--- a/styles.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-const { width } = Dimensions.get('window');
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: 'white',
-  },
-
-  Heading4: {
-    color: 'white',
-    fontSize: 32,
-    fontWeight: '700',
-    paddingLeft: 29,
-    paddingBottom: 10,
-    textAlign: 'left',
-  },
-
-  imageContainer: {
-    width: '100%',
-    height: width * (8 / 9),
-    position: 'relative',
-  },
-
-  responsiveImage: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-    alignItems: 'flex-start',
-    paddingBottom: 30,
-  },
-
-  contactInfo: {
-    position: 'absolute',
-    top: 360,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderRadius: 20,
-  },
-
-  contactText: {
-    color: '#4F4F4F',
-    fontSize: 14,
-    marginBottom: 50,
-  },
-
-  managerText: {
-    color: '#4F4F4F',
-    fontSize: 14,
-    marginBottom: 10,
-    fontWeight: 'bold',
-  },
-
-  iconColor: {
-    color: '#446127',
-    marginBottom: 20,
-  },
-});
diff --git a/tsconfig.json b/tsconfig.json
index d252c9a..fbb45c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,12 +18,6 @@
     }
   },
   "extends": "expo/tsconfig.base",
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "App.tsx",
-    "./graphics.d.ts",
-    "styles.ts"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "App.tsx", "./graphics.d.ts"],
   "exclude": ["node_modules", "./src/supabase/functions/*"]
 }