diff --git a/src/components/CustomMarker.tsx b/src/components/CustomMarker.tsx
index 7402e0da11acf5cc61ca704d78ebc11df5d535c3..065ddc38dfd9b829b378e47516145eb6dda27b86 100644
--- a/src/components/CustomMarker.tsx
+++ b/src/components/CustomMarker.tsx
@@ -4,7 +4,6 @@ import { Icon } from 'react-native-elements';
 import theme, { Color } from '../theme';
 
 export const MARKER_ICONS = [
-  'ghost',
   'cat',
   'crow',
   'dog',
@@ -12,6 +11,7 @@ export const MARKER_ICONS = [
   'dragon',
   'fish',
   'frog',
+  'ghost',
   'hippo',
   'horse',
   'kiwi-bird',
@@ -24,34 +24,36 @@ export type MarkerIcon = typeof MARKER_ICONS[number];
 const ICON_SIZE = 24;
 const BUBBLE_SIZE = 60;
 const BORDER_COLOR = theme.colors.black;
-const BACK_COLOR = '#FF5A5F';
 const BORDER_WIDTH = 2;
 
 const styles = StyleSheet.create({
   bubble: {
-    // padding: theme.spacing.small,
     height: BUBBLE_SIZE,
     width: BUBBLE_SIZE,
-    borderRadius: BUBBLE_SIZE,
     justifyContent: 'center',
     alignItems: 'center',
+    borderRadius: BUBBLE_SIZE,
     borderColor: BORDER_COLOR,
     borderWidth: BORDER_WIDTH,
   },
   pin: {
-    width: 4,
+    alignSelf: 'center',
+    width: BORDER_WIDTH,
     height: 20,
     backgroundColor: BORDER_COLOR,
-    alignSelf: 'center',
   },
 });
 
+// TODO: make props required, save icon/color in cache or randomize
 interface Props {
-  icon: MarkerIcon;
-  backgroundColor: Color;
+  icon?: MarkerIcon;
+  backgroundColor?: Color;
 }
 
-const CustomMarker: React.FC<Props> = ({ icon, backgroundColor }) => (
+const CustomMarker: React.FC<Props> = ({
+  icon = 'cat',
+  backgroundColor = theme.colors.pink,
+}) => (
   <View>
     <View style={[styles.bubble, { backgroundColor }]}>
       <Icon
diff --git a/src/components/DiscoverMap.tsx b/src/components/DiscoverMap.tsx
index a3670dc68d931f22d28836bfa023eac70fb00376..d88c8ce5d20c553f03e55b6961491a314b06f526 100644
--- a/src/components/DiscoverMap.tsx
+++ b/src/components/DiscoverMap.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect } from 'react';
-import MapView, { Circle } from 'react-native-maps';
+import MapView from 'react-native-maps';
 import { StyleSheet, Keyboard } from 'react-native';
 import { useSelector, useDispatch } from 'react-redux';
 import { getUserLatLng } from '../store/location/LocationSelectors';
 import { geoSearch } from '../store/caches/CachesActions';
 import customMapStyle from '../CustomMapStyle.json';
-import theme from '../theme';
 
 const styles = StyleSheet.create({
   map: {
@@ -24,8 +23,6 @@ const DiscoverMap: React.FC = ({ children }) => {
     dispatch(geoSearch(userLocation, '1'));
   }, []); // TODO: update deps
 
-  console.log(userLocation);
-
   return (
     <MapView
       provider={'google'}
@@ -42,24 +39,14 @@ const DiscoverMap: React.FC = ({ children }) => {
         zoom: 18,
       }}
       showsPointsOfInterest={false}
-      // mapType={'mutedStandard'}
       customMapStyle={customMapStyle}
-      // followsUserLocation
-      loadingEnabled
+      loadingEnabled // TODO: test
       pitchEnabled={false}
       zoomEnabled={false}
       scrollEnabled={false}
       onPress={() => Keyboard.dismiss()}
     >
       {children}
-      <Circle
-        center={userLocation}
-        radius={70}
-        fillColor={'transparent'}
-        strokeColor={theme.colors.red}
-        zIndex={2}
-        strokeWidth={5}
-      />
     </MapView>
   );
 };
diff --git a/src/components/DiscoverMenu.tsx b/src/components/DiscoverMenu.tsx
index 74702227861b5c4716b46c0a3e7769dc0dc364df..c40bb059b271afedd34266392c8e98894f7b095e 100644
--- a/src/components/DiscoverMenu.tsx
+++ b/src/components/DiscoverMenu.tsx
@@ -1,31 +1,28 @@
-import React from 'react';
-import { View, ViewStyle, StyleSheet } from 'react-native';
+import React, { useCallback } from 'react';
+import { View, ViewStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import MenuButton from './MenuButton';
 import theme from '../theme';
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-  },
-});
-
 interface Props {
   style?: ViewStyle;
 }
 
 const DiscoverMenu: React.FC<Props> = ({ style }) => {
   const { navigate } = useNavigation();
+  const onSavedPress = useCallback(() => navigate('Saved'), [navigate]);
+  const onCreatePress = useCallback(() => navigate('Create'), [navigate]);
+
   return (
     <View style={style}>
       <MenuButton
-        onPress={() => navigate('Saved')}
+        onPress={onSavedPress}
         icon={'book'}
         backgroundColor={'blue'}
         style={{ marginBottom: theme.spacing.medium }}
       />
       <MenuButton
-        onPress={() => navigate('Create')}
+        onPress={onCreatePress}
         icon={'feather-alt'}
       />
     </View>
diff --git a/src/components/GeoMarker.tsx b/src/components/GeoMarker.tsx
index 6768ca1a64050ab46a04b94977fa7c85ceabc399..8c547a43c43d4d4214f594fd8e76561d57147ac5 100644
--- a/src/components/GeoMarker.tsx
+++ b/src/components/GeoMarker.tsx
@@ -8,8 +8,8 @@ interface Props {
   lat: number;
   lng: number;
   message?: string;
-  icon: MarkerIcon;
-  color: Color;
+  icon?: MarkerIcon;
+  color?: Color;
   onPress?: () => void;
 }
 
@@ -21,10 +21,7 @@ const GeoMarker: React.FC<Props> = ({
   color,
   onPress,
 }) => (
-  <Marker
-    coordinate={{ latitude: lat, longitude: lng }}
-    pinColor={theme.colors.black}
-  >
+  <Marker coordinate={{ latitude: lat, longitude: lng }}>
     <CustomMarker icon={icon} backgroundColor={color} />
     { message && onPress && (
       <Callout
diff --git a/src/components/GeoSearchBar.tsx b/src/components/GeoSearchBar.tsx
index fae6225a7cfa183469aacbd53b7d6180b0715275..1d207cd622c0677352dde5fa1ce96e026ff98762 100644
--- a/src/components/GeoSearchBar.tsx
+++ b/src/components/GeoSearchBar.tsx
@@ -1,22 +1,27 @@
-import React, { useState } from 'react';
-import { Input, Icon } from 'react-native-elements';
+import React, { useState, useEffect } from 'react';
+import { Icon } from 'react-native-elements';
 import {
   Text, View, StyleSheet, ViewStyle, TextInput,
 } from 'react-native';
 import theme from '../theme';
 
+// Google Place Autocomplete types: https://developers.google.com/places/web-service/autocomplete
+interface Prediction {
+  description: string;
+  place_id: string;
+}
+interface AutocompleteResponse {
+  status: string;
+  predictions: Prediction[];
+}
+
 const HEIGHT = 40;
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: theme.colors.white,
-    padding: theme.spacing.small,
-    borderRadius: HEIGHT / 2,
-    height: HEIGHT,
     width: '70%',
-    flexDirection: 'row',
-    alignItems: 'center',
-
+  },
+  shadow: {
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -26,30 +31,92 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
+  searchBar: {
+    backgroundColor: theme.colors.white,
+    padding: theme.spacing.small,
+    borderRadius: HEIGHT / 2,
+    height: HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dropdown: {
+    backgroundColor: theme.colors.white,
+    marginTop: theme.spacing.small,
+    borderRadius: 6,
+    padding: theme.spacing.small,
+    fontSize: 20,
+  },
+  searchResult: {
+    padding: theme.spacing.small,
+  },
 });
 
 interface Props {
   style?: ViewStyle;
 }
 
+const GOOGLE_API_KEY = 'AIzaSyB7ueZ5fnM1SwpWwoUi88H5k3_tkLIoz5I';
+
 const GeoSearchBar: React.FC<Props> = ({ style }) => {
-  const [text, setText] = useState<string>();
+  const [text, setText] = useState<string>('');
+  const [predictions, setPredictions] = useState<Prediction[]>([]);
+
+  useEffect(() => {
+    const fetchPredictions = async () => {
+      const response = await fetch('https://maps.googleapis.com/maps/api/place/autocomplete/'
+        + 'json?'
+        + `input=${encodeURIComponent(text)}`
+        + `&key=${encodeURIComponent(GOOGLE_API_KEY)}`,
+      {
+        method: 'GET',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+      });
+      const result: AutocompleteResponse = await response.json();
+      if (result.status === 'OK') {
+        console.log(result);
+        setPredictions(result.predictions);
+      } else {
+        console.warn(`fetch predictions failed: ${result}`);
+      }
+    };
+
+    if (text.length >= 1) {
+      fetchPredictions();
+    } else {
+      setPredictions([]);
+    }
+  }, [text]);
+
   return (
     <View style={[style, { display: 'flex', alignItems: 'center' }]}>
       <View style={styles.container}>
-        <Icon
-          color={theme.colors.mediumgray}
-          name={'search'}
-          type={'font-awesome-5'}
-          size={20}
-          style={{ marginHorizontal: 4 }}
-        />
-        <TextInput
-          value={text}
-          onChangeText={setText}
-          placeholder={'Search ...'}
-          style={{ fontSize: 20 }}
-        />
+        <View style={[styles.searchBar, styles.shadow]}>
+          <Icon
+            color={theme.colors.mediumgray}
+            name={'search'}
+            type={'font-awesome-5'}
+            size={20}
+            style={{ marginLeft: 4 }}
+          />
+          <TextInput
+            value={text}
+            onChangeText={setText}
+            placeholder={'Search ...'}
+            style={{ marginLeft: theme.spacing.small, fontSize: 20, flex: 1 }}
+          />
+        </View>
+        {predictions.length > 0 && (
+          <View style={[styles.dropdown, styles.shadow]}>
+            {predictions.map((prediction) => (
+              <View style={styles.searchResult} key={prediction.place_id}>
+                <Text>{prediction.description}</Text>
+              </View>
+            ))}
+          </View>
+        )}
       </View>
     </View>
   );
diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 2f72fa047a0860f29814a013340b99a72a2a1c1e..ba5505d94acfe74829118cd8d854e058f341a439 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import HomeNavigator from './HomeNavigator';
 import CreateCacheNavigator from './CreateCacheNavigator';
 import CameraModal from '../screens/create/CameraModal';
 import SavedMessagesScreen from '../screens/SavedMessagesScreen';
diff --git a/src/navigation/HomeNavigator.tsx b/src/navigation/HomeNavigator.tsx
index c5e4e19d4179ed7a0df54cdfdb750d022719e64f..b3a87b40f3b0d9cf703dcc545dfecc543a07c207 100644
--- a/src/navigation/HomeNavigator.tsx
+++ b/src/navigation/HomeNavigator.tsx
@@ -14,6 +14,11 @@ const TabIcon: React.FC<{ name: string}> = ({ name }) => (
   />
 );
 
+// NOTE
+// this bottomo tab navigator for the home screen is not currently
+// being used but i'm keeping it in the repo for now in case the
+// navigation needs to change back
+// - milan
 const Tab = createBottomTabNavigator();
 const HomeNavigator = () => (
   <Tab.Navigator
diff --git a/src/screens/DiscoverScreen.tsx b/src/screens/DiscoverScreen.tsx
index e5712cc57031f716eeac7453b0783ca261728f22..1ce7109b1c648aff20a46d8bfc325b4759a4026a 100644
--- a/src/screens/DiscoverScreen.tsx
+++ b/src/screens/DiscoverScreen.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { StyleSheet, View } from 'react-native';
+import { LatLng } from 'react-native-maps';
 import CacheFoundModal from '../components/CacheFoundModal';
 import { Cache } from '../store/caches/CachesState';
 import { getDiscoveredCaches } from '../store/caches/CachesSelectors';
-import { saveCache, reportCache, geoSearch } from '../store/caches/CachesActions';
+import { saveCache, reportCache } from '../store/caches/CachesActions';
 import ScreenHeader from '../components/ScreenHeader';
 import GeoMarker from '../components/GeoMarker';
 import { sampleCaches } from '../SampleCaches';
 import DiscoverMap from '../components/DiscoverMap';
 import DiscoverMenu from '../components/DiscoverMenu';
-import { getUserLatLng } from '../store/location/LocationSelectors';
 import theme from '../theme';
 import GeoSearchBar from '../components/GeoSearchBar';
 
@@ -26,22 +26,21 @@ const styles = StyleSheet.create({
   },
 });
 
+// utils to generate caches for quick testing
 const delta = () => (Math.random() - 0.5) * 0.0022;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const generateCaches = (location: LatLng): Cache[] => sampleCaches.slice(0, 3).map((c) => ({
+  ...c,
+  lat: location.latitude + delta(),
+  lng: location.longitude + delta(),
+}));
 
 const DiscoverScreen: React.FC = () => {
   const dispatch = useDispatch();
-  // const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches);
+  const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches);
   const [isCacheModalOpen, setCacheModalOpen] = useState(false);
   const [openCache, setOpenCache] = useState<Cache | null>(sampleCaches[0]);
 
-  const userLocation = useSelector(getUserLatLng);
-  const discoveredCaches: Cache[] = sampleCaches.slice(0, 3).map((c) => ({
-    ...c,
-    lat: userLocation.latitude + delta(),
-    lng: userLocation.longitude + delta(),
-
-  }));
-
   const onClose = useCallback(() => {
     setCacheModalOpen(false);
     setOpenCache(null);
@@ -77,8 +76,6 @@ const DiscoverScreen: React.FC = () => {
               key={cache.id}
               lat={cache.lat}
               lng={cache.lng}
-              icon={cache.id === '0' ? 'otter' : cache.id === '1' ? 'spider' : 'dragon'}
-              color={'pink'}
               message={cache.message}
               onPress={() => onCalloutPress(cache)}
             />