diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26c0de6a..660ffecf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ## 🐛 Bug Fixes
 
+* Vertically center the trip map on mobile when opening it
+
 ## 🔧 Tech
 
 # 0.7.0
diff --git a/README.md b/README.md
index 2bd87f5e..8c5976b9 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ $ yarn fixtures
 You can run a migration service to add aggregation data on your timeseries.
 
 ```sh
+$ yarn build
 $ yarn service:timeseriesWithoutAggregateMigration
 ```
 
diff --git a/src/components/Trip/TripMap.jsx b/src/components/Trip/TripMap.jsx
index 739c5f83..516dacb0 100644
--- a/src/components/Trip/TripMap.jsx
+++ b/src/components/Trip/TripMap.jsx
@@ -15,6 +15,7 @@ import { getGeoJSONData } from 'src/lib/timeseries'
 import './tripmap.styl'
 
 const mapCenter = [51.505, -0.09]
+const mapPadding = 16
 
 const makeGeoJsonOptions = theme => ({
   style: feature => {
@@ -51,7 +52,7 @@ const TripMap = () => {
     [theme]
   )
   const mapPanRatio = useMemo(
-    () => (isMobile ? bottomSheetSettings.mediumHeightRatio / 2 : 0),
+    () => (isMobile ? bottomSheetSettings.mediumHeightRatio : 0),
     [isMobile]
   )
 
@@ -63,8 +64,16 @@ const TripMap = () => {
   useEffect(() => {
     if (geojsonRef.current) {
       const geojsonL = geojsonRef.current.leafletElement
-      mapL.fitBounds(geojsonL.getBounds())
-      mapL.panBy([0, mapL.getSize().y * mapPanRatio])
+      const bounds = geojsonL.getBounds()
+      const paddingTopLeft = [mapPadding, mapPadding]
+      const paddingBottomRight = [
+        mapPadding,
+        mapPadding + mapL.getSize().y * mapPanRatio
+      ]
+      mapL.fitBounds(bounds, {
+        paddingTopLeft,
+        paddingBottomRight
+      })
     }
   }, [mapL, mapPanRatio])