diff --git a/.vercelignore b/.vercelignore
index 979f16f7011..8e294ae2f2e 100644
--- a/.vercelignore
+++ b/.vercelignore
@@ -1 +1,2 @@
 requirements.txt  
+requirements-dev.txt  
diff --git a/package.json b/package.json
index 9efcb353e4f..43c3ebbafcb 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@mapbox/mapbox-gl-language": "^1.0.0",
     "@mapbox/polyline": "^1.1.1",
+    "@surbowl/world-geo-json-zh": "^2.1.3",
     "@svgr/plugin-svgo": "^8.1.0",
     "@vercel/analytics": "^0.1.6",
     "@vitejs/plugin-react": "^4.0.0",
@@ -65,5 +66,5 @@
     "prettier": "2.8.8",
     "typescript": "^5.1.6"
   },
-  "packageManager": "pnpm@8.7.0"
+  "packageManager": "yarn@1.22.22"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94cb3b52c33..a1fc50b18b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@mapbox/mapbox-gl-language':
     specifier: ^1.0.0
@@ -11,6 +7,9 @@ dependencies:
   '@mapbox/polyline':
     specifier: ^1.1.1
     version: 1.2.0
+  '@surbowl/world-geo-json-zh':
+    specifier: ^2.1.3
+    version: 2.1.3
   '@svgr/plugin-svgo':
     specifier: ^8.1.0
     version: 8.1.0(@svgr/core@7.0.0)
@@ -753,6 +752,10 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /@surbowl/world-geo-json-zh@2.1.3:
+    resolution: {integrity: sha512-6m/eVcSsWvFXYkaEQLHCxJqFSkTMVaDgfTg9weQr2lozyrxxH+SsRTq24DFfCqFX7L9zKtDQcP6+5VKemY1Rcg==}
+    dev: false
+
   /@svgr/babel-plugin-add-jsx-attribute@7.0.0(@babel/core@7.22.11):
     resolution: {integrity: sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==}
     engines: {node: '>=14'}
@@ -3623,3 +3626,7 @@ packages:
     dependencies:
       tachyons-custom: 4.9.8
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/components/RunMap/index.tsx b/src/components/RunMap/index.tsx
index 74470dd2e05..30186576a5c 100644
--- a/src/components/RunMap/index.tsx
+++ b/src/components/RunMap/index.tsx
@@ -7,7 +7,6 @@ import {
   MAP_LAYER_LIST,
   IS_CHINESE,
   ROAD_LABEL_DISPLAY,
-  MAIN_COLOR,
   MAPBOX_TOKEN,
   PROVINCE_FILL_COLOR,
   COUNTRY_FILL_COLOR,
@@ -154,7 +153,8 @@ const RunMap = ({
           type="fill"
           paint={{
             'fill-color': COUNTRY_FILL_COLOR,
-            'fill-opacity': 0.5,
+            // in China, fill a bit lighter while already filled provinces
+            'fill-opacity': ["case", ["==", ["get", "name"], '中国'], 0.1, 0.5],
           }}
           filter={filterCountries}
         />
diff --git a/src/utils/const.ts b/src/utils/const.ts
index 8dea39c29b1..aabf798ea45 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -117,7 +117,7 @@ const green = 'rgb(0,237,94)';
 const pink = 'rgb(237,85,219)';
 const cyan = 'rgb(112,243,255)';
 const IKB = 'rgb(0,47,167)';
-const wpink = 'rgb(228,212,220)';
+const dark_vanilla = 'rgb(228,212,220)';
 const gold = 'rgb(242,190,69)';
 const purple = 'rgb(154,118,252)';
 const veryPeri = 'rgb(105,106,173)';//长春花蓝
@@ -134,9 +134,9 @@ export const HIKE_COLOR = pink;
 export const SWIM_COLOR = gold;
 export const ROWING_COLOR = cyan;
 export const ROAD_TRIP_COLOR = purple;
-export const FLIGHT_COLOR = wpink;
+export const FLIGHT_COLOR = dark_vanilla;
 export const PROVINCE_FILL_COLOR = '#47b8e0';
-export const COUNTRY_FILL_COLOR = wpink;
+export const COUNTRY_FILL_COLOR = dark_vanilla;
 export const KAYAKING_COLOR = red;
-export const SNOWBOARD_COLOR = wpink;
+export const SNOWBOARD_COLOR = dark_vanilla;
 export const TRAIL_RUN_COLOR = IKB;
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index cedaaac1b4d..620c840f184 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,13 +1,14 @@
 import * as mapboxPolyline from '@mapbox/polyline';
 import gcoord from 'gcoord';
 import { WebMercatorViewport } from 'viewport-mercator-project';
-import { chinaGeojson } from '@/static/run_countries';
+import { chinaGeojson, RPGeometry } from '@/static/run_countries';
+import worldGeoJson from '@surbowl/world-geo-json-zh/world.zh.json';
 import { chinaCities } from '@/static/city';
 import {
+  MAIN_COLOR,
   MUNICIPALITY_CITIES_ARR,
   NEED_FIX_MAP,
   RUN_TITLES,
-  MAIN_COLOR,
   RIDE_COLOR,
   VIRTUAL_RIDE_COLOR,
   HIKE_COLOR,
@@ -182,6 +183,9 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection<LineString> => ({
 
     return {
       type: 'Feature',
+      properties: {
+        color: MAIN_COLOR,
+      },
       geometry: {
         type: 'LineString',
         coordinates: points,
@@ -195,7 +199,10 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection<LineString> => ({
   }),
 });
 
-const geoJsonForMap = () => chinaGeojson;
+const geoJsonForMap = (): FeatureCollection<RPGeometry> => ({
+    type: 'FeatureCollection',
+    features: worldGeoJson.features.concat(chinaGeojson.features),
+  })
 
 const titleForType = (type: string): string => {
   switch (type) {