diff --git a/src/app/Scenes/Map/CityGuideMap.tsx b/src/app/Scenes/Map/CityGuideMap.tsx
index f9a5f65a42f..77bafedd6fd 100644
--- a/src/app/Scenes/Map/CityGuideMap.tsx
+++ b/src/app/Scenes/Map/CityGuideMap.tsx
@@ -1,11 +1,12 @@
-import { Flex, useTheme } from "@artsy/palette-mobile"
-import MapboxGL from "@react-native-mapbox-gl/maps"
-import { CityGuideMapQuery } from "__generated__/CityGuideMapQuery.graphql"
+import { Flex, Text, useTheme, Image } from "@artsy/palette-mobile"
+import MapboxGL, { OnPressEvent } from "@react-native-mapbox-gl/maps"
+import { CityGuideMapQuery, CityGuideMapQuery$data } from "__generated__/CityGuideMapQuery.graphql"
 import { ArtsyMapStyleURL } from "app/Scenes/Map/GlobalMap"
 import { FilterData } from "app/Scenes/Map/types"
+import { navigate } from "app/system/navigation/navigate"
 import { convertCityToGeoJSON } from "app/utils/convertCityToGeoJSON"
-import React, { useEffect, useRef } from "react"
-import { Dimensions } from "react-native"
+import React, { useEffect, useRef, useState } from "react"
+import { Dimensions, TouchableWithoutFeedback } from "react-native"
 import Config from "react-native-config"
 import { graphql, useLazyLoadQuery } from "react-relay"
 import Supercluster from "supercluster"
@@ -24,7 +25,8 @@ export const CityGuideMap: React.FC<CityGuideMapProps> = ({ citySlug }) => {
   const mapRef = useRef<MapboxGL.MapView>(null)
   const cameraRef = useRef<MapboxGL.Camera>(null)
 
-  const [pinsToRender, setPinsToRender] = React.useState<FilterData | undefined>(undefined)
+  const [pinsToRender, setPinsToRender] = useState<FilterData | undefined>(undefined)
+  const [selectedShow, setSelectedShow] = useState<Show | null>(null)
 
   useEffect(() => {
     if (!data) {
@@ -66,63 +68,110 @@ export const CityGuideMap: React.FC<CityGuideMapProps> = ({ citySlug }) => {
 
   const { color } = useTheme()
 
+  const handlePress = async (event: OnPressEvent) => {
+    if (!event.features.length) {
+      return
+    }
+
+    const slug = event.features[0].properties?.slug
+    const cluster = event.features[0].properties?.cluster
+
+    /** A pin was tapped (instead of a cluster) */
+    if (!cluster && slug && data?.city?.shows?.edges) {
+      const show: Show | null | undefined = data.city.shows.edges.find(
+        (edge) => edge?.node?.slug === slug
+      )?.node
+
+      if (!show) {
+        return
+      }
+
+      if (show.location?.coordinates?.lat && show.location?.coordinates?.lng) {
+        cameraRef.current?.flyTo([show.location.coordinates.lng, show.location.coordinates.lat])
+      }
+
+      setSelectedShow(show)
+    }
+  }
+
   return (
-    <Flex mb={0.5} flexDirection="column" style={{ backgroundColor: color("black5") }}>
-      <Flex flex={1}>
-        <MapboxGL.MapView
-          ref={mapRef}
-          style={{ width: "100%", height: Dimensions.get("window").height }}
-          styleURL={ArtsyMapStyleURL}
-          userTrackingMode={MapboxGL.UserTrackingModes.Follow}
-          logoEnabled={!!data?.city}
-          attributionEnabled={false}
-          compassEnabled={false}
-        >
-          <MapboxGL.Camera
-            ref={cameraRef}
-            animationMode="flyTo"
-            zoomLevel={DEFAULT_ZOOM_LEVEL}
-            minZoomLevel={MIN_ZOOM_LEVEL}
-            maxZoomLevel={MAX_ZOOM_LEVEL}
-            centerCoordinate={[NEW_YORK_COORDINATES.lng, NEW_YORK_COORDINATES.lat]}
-          />
-          {!!pinsToRender && (
-            <MapboxGL.Animated.ShapeSource
-              id="shows"
-              shape={pinsToRender.featureCollection}
-              cluster
-              clusterRadius={50}
-            >
-              <MapboxGL.Animated.SymbolLayer
-                id="singleShow"
-                filter={["!", ["has", "point_count"]]}
-                style={{ iconImage: ["get", "icon"], iconSize: 0.8, iconOpacity: 1 }}
-              />
-              <MapboxGL.Animated.SymbolLayer
-                id="pointCount"
-                style={{
-                  textField: "{point_count}",
-                  textSize: 14,
-                  textColor: "white",
-                  textFont: ["Unica77 LL Medium"],
-                  textPitchAlignment: "map",
-                }}
-              />
-              <MapboxGL.Animated.CircleLayer
-                id="clusteredPoints"
-                belowLayerID="pointCount"
-                filter={["has", "point_count"]}
-                style={{
-                  circlePitchAlignment: "map",
-                  circleColor: "black",
-                  circleRadius: ["step", ["get", "point_count"], 15, 5, 20, 30, 30],
-                  circleOpacity: 1,
-                }}
-              />
-            </MapboxGL.Animated.ShapeSource>
-          )}
-        </MapboxGL.MapView>
-      </Flex>
+    <Flex mb={0.5} style={{ backgroundColor: color("black5") }} position="relative">
+      <MapboxGL.MapView
+        ref={mapRef}
+        style={{ width: "100%", height: Dimensions.get("window").height }}
+        styleURL={ArtsyMapStyleURL}
+        userTrackingMode={MapboxGL.UserTrackingModes.Follow}
+        logoEnabled={!!data?.city}
+        attributionEnabled={false}
+        compassEnabled={false}
+      >
+        <MapboxGL.Camera
+          ref={cameraRef}
+          animationMode="flyTo"
+          zoomLevel={DEFAULT_ZOOM_LEVEL}
+          minZoomLevel={MIN_ZOOM_LEVEL}
+          maxZoomLevel={MAX_ZOOM_LEVEL}
+          centerCoordinate={[NEW_YORK_COORDINATES.lng, NEW_YORK_COORDINATES.lat]}
+        />
+        {!!pinsToRender && (
+          <MapboxGL.Animated.ShapeSource
+            id="shows"
+            shape={pinsToRender.featureCollection}
+            cluster
+            clusterRadius={50}
+            onPress={handlePress}
+          >
+            <MapboxGL.Animated.SymbolLayer
+              id="singleShow"
+              filter={["!", ["has", "point_count"]]}
+              style={{ iconImage: ["get", "icon"], iconSize: 0.8, iconOpacity: 1 }}
+            />
+            <MapboxGL.Animated.SymbolLayer
+              id="pointCount"
+              style={{
+                textField: "{point_count}",
+                textSize: 14,
+                textColor: "white",
+                textFont: ["Unica77 LL Medium"],
+                textPitchAlignment: "map",
+              }}
+            />
+            <MapboxGL.Animated.CircleLayer
+              id="clusteredPoints"
+              belowLayerID="pointCount"
+              filter={["has", "point_count"]}
+              style={{
+                circlePitchAlignment: "map",
+                circleColor: "black",
+                circleRadius: ["step", ["get", "point_count"], 15, 5, 20, 30, 30],
+                circleOpacity: 1,
+              }}
+            />
+          </MapboxGL.Animated.ShapeSource>
+        )}
+      </MapboxGL.MapView>
+      {!!selectedShow && (
+        <Flex position="absolute" bottom={80} left={10} p={1} bg="white" width={1}>
+          <TouchableWithoutFeedback onPress={() => navigate(`/show/${selectedShow.slug}`)}>
+            <Flex flexDirection="row">
+              {!!selectedShow.coverImage?.url && (
+                <Image src={selectedShow.coverImage.url} width={100} height={100} />
+              )}
+              <Flex flexDirection="column" alignItems="flex-start" ml={2}>
+                <Text variant="sm" weight="medium" numberOfLines={1} ellipsizeMode="tail">
+                  {selectedShow.partner?.name}
+                </Text>
+                <Text variant="sm" numberOfLines={1} ellipsizeMode="tail">
+                  {selectedShow.name}
+                </Text>
+                <Text variant="xs" color={color("black60")}>
+                  Ongoing
+                </Text>
+              </Flex>
+            </Flex>
+          </TouchableWithoutFeedback>
+        </Flex>
+      )}
     </Flex>
   )
 }
@@ -185,3 +234,11 @@ const NEW_YORK_COORDINATES = { lat: 40.713, lng: -74.006 }
 const DEFAULT_ZOOM_LEVEL = 11
 const MIN_ZOOM_LEVEL = 9
 const MAX_ZOOM_LEVEL = 17.5
+
+type Show = NonNullable<
+  NonNullable<
+    NonNullable<
+      NonNullable<NonNullable<NonNullable<CityGuideMapQuery$data>["city"]>["shows"]>["edges"]
+    >[0]
+  >["node"]
+>